A travel blog built with HTML, CSS, JavaScript, Bootstrap and JSON Server. Viaje Soñado provides tips and information about the best places you should visit around the world. Users can explore the top 10 destinations, filter by continent, and search by name, country or continent.
Viaje Soñado (Dream Trip) is a travel blog that provides tips and detailed information about the best destinations you should visit around the world. It showcases 10 international destinations displayed as dynamic Bootstrap cards, loaded from a local JSON Server API, helping travelers discover and plan their next adventure.
https://viaje-sonado.vercel.app/
The visual design follows a clean and editorial style inspired by travel magazines.
- Typography: Montserrat (Google Fonts) — used across all headings, body text, badges and buttons
- Color palette:
- Deep navy
#003B5C— primary color, used for headings, buttons and navbar - Golden amber
#efb026— accent color, used for highlights, hover states and icons - Ocean teal
#5BA4B1— used in the card section gradient background - Off-white
#f9f9f9— page background
- Deep navy
- Gradient:
linear-gradient(135deg, #003B5C 0%, #5BA4B1 30%, #5BA4B1 85%, #efb026 100%)applied to the cards section background - Components: Bootstrap 5 cards, customized with rounded corners, hover animations, country and continent badges, and a "Ver más" button
- Layout: Responsive grid — 5 columns on desktop, 3 on tablet, 1 on mobile
- Node.js v22 or higher
- npm
- Clone the repository:
git clone https://github.com/Melycode/travel-blog-web.git
cd travel-blog-web- Install dependencies:
npm install- Start JSON Server:
npm start- Open
index.htmlwith Live Server in VS Code or visit:
http://127.0.0.1:5500/index.html
JSON Server runs on
http://localhost:3000/destinations
Note: Make sure both the JSON server is running in your terminal AND the Live Server is active in your browser for the application to display the data correctly.