YatraWay is a modern and fully responsive tour and travel agency website built using HTML, CSS, JavaScript, and JSON.
This project is designed with a premium travel booking UI and includes dynamic content rendering using a JSON file. Hero content, travel deals, destinations, achievements, about section, testimonials, special offers, and footer content are managed through JSON, making the project more scalable and easier to maintain.
The website includes features like an interactive travel booking form, animated navigation, custom date picker, guest counter, destination filtering, automatic image carousels, wishlist functionality, animated achievement counters, scroll-based offer transitions, glassmorphism effects, shimmer buttons, and responsive layouts.
This project is perfect for beginners who want to learn how to build a real-world tour and travel agency website using HTML, CSS, JavaScript, and JSON data.
You can also use this project as a portfolio project, client project reference, or learning resource for frontend development.
If you want the complete source code for this project, click here: click me
If you want:
- Changes in this project
- Extra features added
- UI redesign
- Performance optimization
- Or a completely new website built from scratch
Then contact me directly on WhatsApp.
WhatsApp : chat with me
Serious projects need serious execution.
This GitHub repository contains the main project structure and starter code files.
The JSON data, images, and videos used in this project are explained in detail inside the full YouTube tutorial. You can download the required assets and follow the tutorial step by step from here:
YouTube Tutorial: watch now
You can check the live version of this website here: click me
yatraway/
│
├── index.html
├── style.css
├── script.js
├── data.json
│
├── images/
│ ├── hero image
│ ├── travel deal images
│ ├── destination images
│ ├── about section image
│ ├── testimonial images
│ └── other website images
│
└── videos/
└── special offer background video- HTML5
- CSS3
- Vanilla JavaScript
- JSON
- Fetch API
- Google Material Symbols Rounded
- Google Fonts
- DM Sans
- Playfair Display
- Intersection Observer API
- CSS Custom Properties
- CSS Grid
- Flexbox
- CSS Animations
- CSS Transitions
- Glassmorphism UI
- Dynamic DOM Rendering
- Responsive Web Design
- Clone the repository
git clone https://github.com/withaarzoo/yatraway.git- Open the project folder
cd yatraway- Run the project using Live Server
You can use the Live Server extension in VS Code to run the project locally.
Because this project loads data using the JavaScript Fetch API, opening index.html directly may prevent the JSON file from loading correctly in some browsers.
Use Live Server or another local development server for the best experience.
- Fully responsive tour and travel agency website
- Premium and modern travel booking UI
- Dynamic content rendering using JSON
- Single JSON data source for multiple website sections
- Sticky floating navbar on scroll
- Glassmorphism navigation design
- Animated sliding navigation pill
- Responsive navigation interactions
- Full-screen hero section
- Parallax-style fixed hero background
- Dynamic hero content loaded from JSON
- Interactive travel booking form
- Holiday, Flight, and Hotels booking tabs
- Animated sliding booking tab indicator
- Dynamic typing placeholder animation
- Custom check-in and check-out date picker
- Previous and next month calendar navigation
- Past date disabling
- Selected date range highlighting
- Automatic default checkout date
- Custom adults and children guest counter
- Interactive guest selection popup
- Dynamic Who We Are section
- Animated achievement counters
- Scroll-triggered number counting animation
- Cubic ease-out counter animation
- Dynamic travel deals section
- Travel deal cards with background images
- Offer validity badges
- Responsive horizontal deal scrolling on smaller screens
- Dynamic travel destination cards
- Destination category filtering system
- Multiple travel categories
- Automatic image carousel for every destination card
- Manual swipe and scroll support
- Carousel dot indicators
- Automatic slide change every 4 seconds
- Lazy-loaded destination images
- Wishlist save button
- Filled and outlined favorite icon toggle
- Dynamic travel pricing and package details
- Dynamic About Us section
- Travel feature cards loaded from JSON
- Dynamic testimonials section
- Featured traveler story card
- Customer review cards
- Traveler avatars and rating icons
- Scroll-driven special offer section
- Autoplay background video
- Muted and looping promotional video
- Sticky scroll-based offer experience
- Dynamic offer content transitions
- Multiple offer states during scrolling
- Animated offer progress indicators
- Expanding full-screen offer banner effect
- Fade and slide content transitions
- Dynamic footer content
- Giant footer brand watermark
- Smooth scrolling
- Glassmorphism effects
- Shimmer CTA button animation
- Animated conic-gradient border effect
- Pulsing status indicators
- Pulsing play button effect
- Hover lift animations
- Smooth card transitions
- Mobile, tablet, and desktop responsive layouts
- Beginner-friendly project structure
- Clean and organized JavaScript functions
- Scalable JSON-based content management
The following website sections are managed through data.json:
- Hero section
- Who We Are section
- Achievements section
- Travel deals
- Travel destinations
- About Us section
- Testimonials
- Special offer section
- Footer content
This makes it easy to update website content without changing the main HTML structure.
The JavaScript file handles:
- JSON data fetching
- Dynamic section rendering
- Sticky navbar behavior
- Sliding navigation indicator
- Booking tab animation
- Typing placeholder effect
- Custom calendar generation
- Date selection logic
- Guest counter controls
- Achievement counter animation
- Destination filtering
- Destination image carousels
- Carousel dot synchronization
- Wishlist button state
- Dynamic testimonial rendering
- Scroll-based offer animation
- Dynamic footer content
- Modern monochrome color palette
- Premium travel agency interface
- Glassmorphism booking card
- Floating glass navbar
- Serif and sans-serif font combination
- Smooth rounded UI components
- Interactive pill navigation
- Large editorial typography
- Image-focused travel cards
- Shimmer animated CTA buttons
- Responsive horizontal scrolling sections
- Scroll-based immersive promotional experience
Used for:
- Body text
- Navigation links
- Buttons
- Labels
- Descriptions
- UI elements
Used for:
- Main headings
- Section titles
- Large numbers
- Premium editorial typography
- Brand styling
This project uses Google Material Symbols Rounded for icons.
Icons are used throughout the website for:
- Destination
- Calendar
- Guests
- Navigation arrows
- Location
- Ratings
- Wishlist
- Travel features
- Social links
- Offer actions
The project includes custom CSS and JavaScript animations such as:
- Navigation sliding pill animation
- Booking tab sliding indicator
- Dynamic typing placeholder animation
- Pulsing live status dots
- Shimmer button animation
- Rotating conic-gradient spark animation
- Achievement number counter animation
- Destination auto carousel
- Smooth carousel dot synchronization
- Wishlist icon state animation
- Card hover lift effects
- Play button pulse animation
- Scroll-driven offer banner expansion
- Offer content fade and slide transitions
- Smooth responsive transitions
No external animation library is required.
The website is optimized for:
- Desktop screens
- Laptop screens
- Tablets
- Mobile devices
Responsive layouts are created using CSS Grid, Flexbox, media queries, horizontal scrolling, and adaptive spacing.
CodeWithAarzoo
Instagram: