An immersive editorial travel platform and interactive companion mobile booking experience.
CURATED-ESCAPES is a front-end project that pairs editorial-style travel landing pages with a mobile hotel-booking companion UI. It explores three visual moods: dark and cinematic, bright and playful, and clean and functional.
Live demo: add link here
| # | Concept | Style | Purpose |
|---|---|---|---|
| 1 | Beyond the Ordinary | Dark, cinematic, monospace accents | Editorial landing page for adventure escapes |
| 2 | A little more somewhere | Light, rounded, pastel cards | Friendly travel journal with handpicked destinations |
| 3 | Find your next stay | Clean, modern mobile UI | Hotel discovery, property details and trip schedule |
A magazine-style hero with a bold condensed headline and a bento grid of three escapes:
- 01 / Altitude – Dolomites, Italy · 6-day small-group mountain adventure
- 02 / Tide – Lofoten, Norway · coastal retreat
- 03 / After Hours – Kyoto, Japan · lantern-lit lanes and local stories
Design notes: condensed display type, monospace metadata labels, lime-green accent, full-bleed photography with gradient overlays.
Three alternating colour-block cards, each with a destination photo and location tag:
- Chase your mountain high. – Madeira, Portugal
- Do very little. Beautifully. – Milos, Greece
- Get lost. Find your people. – Lisbon, Portugal
Design notes: peach, sky-blue and butter-yellow cards, purple accent, friendly rounded sans-serif.
- Home: search bar, city chips, "Nearby you" cards and popular stays
- Property detail: photo gallery, rating, amenities, date picker, price and Book a stay CTA
- Schedule: calendar, upcoming and past stays, booking status badges
- HTML5:
index.html - CSS3:
style.css - Vanilla JavaScript (ES Modules):
main.js - Vite 5: dev server and build tool
- Node.js 18 or newer
- npm
# Clone the repository
git clone https://github.com/code-with-rv/CURATED-ESCAPES.git
# Move into the project
cd CURATED-ESCAPES
# Install dependencies
npm install
# Start the dev server (opens http://localhost:3000)
npm run dev| Command | Description |
|---|---|
npm run dev |
Starts the Vite dev server on port 3000 and opens the browser |
npm run build |
Creates an optimized production build in dist/ |
npm run preview |
Serves the production build locally for testing |
CURATED-ESCAPES/
├── assets/
│ └── screenshots/ # README preview images
├── index.html # Page markup
├── main.js # Interactivity and behaviour
├── style.css # Styles and design tokens
├── package.json # Scripts and dependencies
└── package-lock.json
- Image-led storytelling with short, punchy copy
- Three distinct visual systems in one project
- Responsive, mobile-first layouts
- Consistent card, chip and badge components
- Clear calls to action
- Connect real destination and hotel data
- Search and filtering
- Booking flow with date and guest selection
- Saved stays / wishlist
- Page transitions and scroll animations
- Deploy to Vercel or Netlify
- Photography: add sources (Unsplash, Pexels, etc.)
- Fonts: add font sources
- Design: add Figma link if public
Suggestions and pull requests are welcome.
- Fork the repository
- Create a branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m "Add your feature" - Push the branch:
git push origin feature/your-feature - Open a pull request
Add a license (e.g. MIT) and include a LICENSE file.
code-with-rv GitHub: @code-with-rv