Premium Budget Travel Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WanderPack | Premium Budget Travel Experiences</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">

</head>
<body>
    
    <div class="bg-shape shape-1"></div>
    <div class="bg-shape shape-2"></div>
    
    
    <header id="header">
        <div class="container">
            <div class="header-content">
                <a href="#" class="logo">
                    <i class="fas fa-backpack"></i>
                    <div class="logo-text">
                        <span>WanderPack</span>
                        <span class="logo-subtitle">BACKPACKER TRAVEL</span>
                    </div>
                </a>
                <button class="mobile-menu-btn" id="mobileMenuBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <nav>
                    <ul id="navMenu">
                        <li><a href="#features">Travel Options</a></li>
                        <li><a href="#itinerary">Itineraries</a></li>
                        <li><a href="#reviews">Reviews</a></li>
                        <li><a href="#enquiry" class="nav-cta">Plan Your Trip</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Adventure Awaits on a <span style="color: var(--teal-light)">Budget</span></h1>
                <p>Discover affordable hostels, curated group tours, and expert itineraries for backpackers. Join a global community of travelers exploring the world without breaking the bank.</p>
                <a href="#features" class="btn">Explore Budget Options</a>
                <a href="#enquiry" class="btn btn-outline">Plan Your Adventure</a>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <div class="stat-number">10K+</div>
                        <div class="stat-label">Happy Backpackers</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">500+</div>
                        <div class="stat-label">Hostels Listed</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">Countries Covered</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">$25</div>
                        <div class="stat-label">Avg. Daily Cost</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="features" id="features">
        <div class="container">
            <h2 class="section-title">Backpacker Travel Essentials</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-euro-sign"></i>
                    </div>
                    <h3>Ultra-Low Budget Travel</h3>
                    <p>Find the cheapest flights, bus routes, and travel hacks to maximize your budget. Our algorithms find deals you won't find elsewhere.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-bed"></i>
                    </div>
                    <h3>Curated Hostel Stays</h3>
                    <p>Handpicked selection of top-rated hostels worldwide. From social party hostels to quiet retreats, find your perfect accommodation.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3>Small Group Tours</h3>
                    <p>Join intimate group tours designed specifically for backpackers. Make lifelong friends while exploring with expert local guides.</p>
                </div>
            </div>
        </div>
    </section>

<section class="itinerary" id="itinerary">
        <div class="container">
            <h2 class="section-title">Curated Backpacker Itineraries</h2>
            <div class="itinerary-tabs">
                <button class="tab-btn active" data-itinerary="balkan">
                    <i class="fas fa-mountain"></i>
                    Balkan Adventure
                </button>
                <button class="tab-btn" data-itinerary="se-asia">
                    <i class="fas fa-umbrella-beach"></i>
                    Southeast Asia
                </button>
                <button class="tab-btn" data-itinerary="central-america">
                    <i class="fas fa-volcano"></i>
                    Central America
                </button>
            </div>
            
            <div class="itinerary-content active" id="balkan-itinerary">
                <div class="itinerary-header">
                    <h3>Balkan Highlights: Croatia, Bosnia & Montenegro</h3>
                    <div class="itinerary-price">€350-€500</div>
                </div>
                <p class="itinerary-description">Experience the stunning Adriatic coast, medieval towns, and breathtaking mountains of the Balkan region. This 7-day adventure covers must-see highlights while keeping costs ultra-low.</p>
                
                <div class="day">
                    <div class="day-number">1</div>
                    <div class="day-content">
                        <h4>Dubrovnik, Croatia</h4>
                        <p>Arrival, check into our recommended hostel in the historic center. Evening walking tour of Old Town and City Walls with sunset views over the Adriatic Sea.</p>
                    </div>
                </div>
                
                <div class="day">
                    <div class="day-number">2</div>
                    <div class="day-content">
                        <h4>Dubrovnik to Mostar</h4>
                        <p>Morning bus to Mostar, Bosnia. Check into hostel, guided tour of Stari Most bridge and old bazaar. Evening traditional Bosnian dinner included.</p>
                    </div>
                </div>
                
                <div class="day">
                    <div class="day-number">3</div>
                    <div class="day-content">
                        <h4>Mostar to Kotor</h4>
                        <p>Scenic bus journey to Kotor, Montenegro. Afternoon hike to Kotor Fortress for panoramic sunset views over the Bay of Kotor.</p>
                    </div>
                </div>
            </div>
            
            <div class="itinerary-content" id="se-asia-itinerary">
                <div class="itinerary-header">
                    <h3>Southeast Asia Explorer: Thailand & Cambodia</h3>
                    <div class="itinerary-price">$500-$700</div>
                </div>
                <p class="itinerary-description">From bustling Bangkok to ancient temples and tropical islands, this 14-day journey captures the essence of Southeast Asia on a backpacker budget.</p>
                
                <div class="day">
                    <div class="day-number">1-3</div>
                    <div class="day-content">
                        <h4>Bangkok, Thailand</h4>
                        <p>Arrival in Bangkok, Khao San Road orientation, Grand Palace visit, floating markets tour, and overnight train to Chiang Mai.</p>
                    </div>
                </div>
                
                <div class="day">
                    <div class="day-number">4-6</div>
                    <div class="day-content">
                        <h4>Chiang Mai & Surroundings</h4>
                        <p>Ethical elephant sanctuary visit, Thai cooking class, Doi Suthep temple hike, and vibrant night market exploration.</p>
                    </div>
                </div>
            </div>
            
            <div class="itinerary-content" id="central-america-itinerary">
                <div class="itinerary-header">
                    <h3>Central America: Guatemala & Belize</h3>
                    <div class="itinerary-price">$600-$800</div>
                </div>
                <p class="itinerary-description">Explore ancient Mayan ruins, volcanic landscapes, and Caribbean coastlines on this 10-day Central American adventure designed for budget-conscious travelers.</p>
                
                <div class="day">
                    <div class="day-number">1-3</div>
                    <div class="day-content">
                        <h4>Antigua, Guatemala</h4>
                        <p>Spanish colonial architecture exploration, Pacaya volcano hike with marshmallow roasting, and local market visits.</p>
                    </div>
                </div>
                
                <div class="day">
                    <div class="day-number">4-5</div>
                    <div class="day-content">
                        <h4>Lake Atitlán & Indigenous Villages</h4>
                        <p>Travel to stunning Lake Atitlán, visit indigenous Mayan villages, kayaking on the lake, and hostel lakeside relaxation.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="reviews" id="reviews">
        <div class="container">
            <h2 class="section-title">Backpacker Community Reviews</h2>
            <div class="review-cards">
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar">SJ</div>
                        <div class="review-info">
                            <h4>Sarah Johnson</h4>
                            <div class="review-location">Australia • Solo Traveler</div>
                            <div class="review-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="review-text">"The Balkan itinerary was absolutely perfect! I met amazing people in the hostels recommended here. It saved me so much planning time and the budget estimates were spot on. The Kotor hostel had the most incredible view!"</p>
                </div>
                
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar">MT</div>
                        <div class="review-info">
                            <h4>Marcus Thompson</h4>
                            <div class="review-location">UK • Group Travel</div>
                            <div class="review-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                    <p class="review-text">"Joined a group tour through WanderPack and it was the best decision I made. Affordable, well-organized, and our guide was incredibly knowledgeable. The hostel in Budapest had the best rooftop bar I've ever seen!"</p>
                </div>
                
                <div class="review-card">
                    <div class="review-header">
                        <div class="review-avatar">KL</div>
                        <div class="review-info">
                            <h4>Kiera Lawson</h4>
                            <div class="review-location">Canada • Solo Female Traveler</div>
                            <div class="review-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="review-text">"As a solo female traveler, safety is my priority. WanderPack's resources helped me choose the right hostels and tours. The community reviews are genuine and detailed. I felt connected and safe throughout my Southeast Asia trip."</p>
                </div>
            </div>
        </div>
    </section>

<section class="enquiry-form" id="enquiry">
        <div class="container">
            <h2 class="section-title">Plan Your Backpacking Adventure</h2>
            <div class="form-container">
                <form id="travel-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" placeholder="Enter your full name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" placeholder="your.email@example.com" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="destination">Destination Interest *</label>
                            <select id="destination" required>
                                <option value="">Select a region</option>
                                <option value="balkans">Balkans (Croatia, Bosnia, Montenegro)</option>
                                <option value="se-asia">Southeast Asia (Thailand, Cambodia, Vietnam)</option>
                                <option value="central-america">Central America (Guatemala, Belize, Costa Rica)</option>
                                <option value="south-america">South America (Peru, Bolivia, Colombia)</option>
                                <option value="europe">Western Europe (Spain, Portugal, Italy)</option>
                                <option value="other">Other (Let us know in comments)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="budget">Daily Budget (USD) *</label>
                            <select id="budget" required>
                                <option value="">Select budget range</option>
                                <option value="20-30">$20-30 (Ultra Budget)</option>
                                <option value="30-50">$30-50 (Budget Backpacker)</option>
                                <option value="50-80">$50-80 (Comfortable Traveler)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="travel-date">Preferred Travel Month *</label>
                            <input type="month" id="travel-date" required>
                        </div>
                        <div class="form-group">
                            <label for="duration">Trip Duration *</label>
                            <select id="duration" required>
                                <option value="">Select duration</option>
                                <option value="1-2">1-2 weeks</option>
                                <option value="2-4">2-4 weeks</option>
                                <option value="1-3">1-3 months</option>
                                <option value="3+">3+ months (Long-term travel)</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Travel Interests (Select all that apply)</label>
                        <div class="checkbox-grid">
                            <div class="checkbox-item">
                                <input type="checkbox" id="hostels" name="interests" value="hostels">
                                <label for="hostels">Hostel Stays</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="group-tours" name="interests" value="group-tours">
                                <label for="group-tours">Group Tours</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="hiking" name="interests" value="hiking">
                                <label for="hiking">Hiking & Adventure</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="culture" name="interests" value="culture">
                                <label for="culture">Cultural Experiences</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="beaches" name="interests" value="beaches">
                                <label for="beaches">Beaches & Relaxation</label>
                            </div>
                            <div class="checkbox-item">
                                <input type="checkbox" id="food" name="interests" value="food">
                                <label for="food">Local Food & Cooking</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Additional Details / Questions</label>
                        <textarea id="message" placeholder="Tell us about your travel style, any specific needs, dietary restrictions, or questions you might have..."></textarea>
                    </div>
                    
                    <div class="submit-container">
                        <button type="submit" class="btn submit-btn">
                            <i class="fas fa-paper-plane"></i>
                            Get Your Custom Itinerary
                        </button>
                        <p style="margin-top: 20px; color: var(--grey-medium); font-size: 0.95rem;">We'll respond within 24 hours with personalized recommendations</p>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>WanderPack</h3>
                    <p>Premium budget travel for backpackers by backpackers. We're dedicated to making adventure travel accessible and unforgettable for everyone.</p>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#features">Travel Options</a></li>
                        <li><a href="#itinerary">Sample Itineraries</a></li>
                        <li><a href="#reviews">Community Reviews</a></li>
                        <li><a href="#enquiry">Plan Your Trip</a></li>
                        <li><a href="#">Backpacker Blog</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Budget Resources</h3>
                    <ul>
                        <li><a href="#">Cheapest Flights Finder</a></li>
                        <li><a href="#">Hostel Comparison Tool</a></li>
                        <li><a href="#">Group Tour Calendar</a></li>
                        <li><a href="#">Backpacker Forum</a></li>
                        <li><a href="#">Packing Guide</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>Contact Info</h3>
                    <ul>
                        <li><i class="fas fa-envelope" style="margin-right: 10px;"></i> hello@wanderpack.com</li>
                        <li><i class="fas fa-phone" style="margin-right: 10px;"></i> +1 (555) 123-4567</li>
                        <li><i class="fas fa-map-marker-alt" style="margin-right: 10px;"></i> Backpacker HQ, Berlin</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 WanderPack. All rights reserved. | Designed for backpackers on a budget, built for adventure.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --teal-primary: #0db9b9;
            --teal-light: #4fd8d8;
            --teal-dark: #009090;
            --teal-glow: rgba(13, 185, 185, 0.2);
            --grey-dark: #2a2a2a;
            --grey-medium: #5a5a5a;
            --grey-light: #f8f9fa;
            --white: #ffffff;
            --shadow-light: 0 5px 20px rgba(0, 0, 0, 0.08);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
            --shadow-heavy: 0 15px 40px rgba(0, 0, 0, 0.15);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 30px;
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --gradient-teal: linear-gradient(135deg, var(--teal-primary) 0%, var(--teal-dark) 100%);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Montserrat', sans-serif;
            color: var(--grey-dark);
            background-color: var(--white);
            line-height: 1.7;
            overflow-x: hidden;
        }

h1, h2, h3, h4, h5 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
        }

.container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px;
        }

section {
            padding: 100px 0;
        }

/* Animated Background Elements */
        .bg-shape {
            position: fixed;
            border-radius: 50%;
            opacity: 0.1;
            z-index: -1;
        }

.shape-1 {
            width: 600px;
            height: 600px;
            background: var(--teal-primary);
            top: -300px;
            right: -200px;
        }

.shape-2 {
            width: 400px;
            height: 400px;
            background: var(--teal-dark);
            bottom: -200px;
            left: -100px;
        }

/* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            z-index: 1000;
            transition: var(--transition);
        }

header.scrolled {
            padding: 10px 0;
            box-shadow: var(--shadow-light);
        }

.header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            transition: var(--transition);
        }

.logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 1.8rem;
            color: var(--teal-primary);
            text-decoration: none;
        }

.logo i {
            font-size: 2.2rem;
            filter: drop-shadow(0 3px 5px rgba(13, 185, 185, 0.3));
        }

.logo-text {
            display: flex;
            flex-direction: column;
        }

.logo-subtitle {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 2px;
            color: var(--grey-medium);
            margin-top: -5px;
        }

nav ul {
            display: flex;
            list-style: none;
            gap: 40px;
        }

nav a {
            text-decoration: none;
            color: var(--grey-dark);
            font-weight: 600;
            font-size: 1rem;
            position: relative;
            padding: 5px 0;
            transition: var(--transition);
        }

nav a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: var(--gradient-teal);
            border-radius: 3px;
            transition: var(--transition);
        }

nav a:hover {
            color: var(--teal-primary);
        }

nav a:hover:after {
            width: 100%;
        }

.nav-cta {
            background: var(--gradient-teal);
            color: var(--white);
            padding: 12px 28px;
            border-radius: var(--radius-xl);
            box-shadow: 0 5px 15px rgba(13, 185, 185, 0.3);
            transition: var(--transition);
        }

.nav-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(13, 185, 185, 0.4);
            color: var(--white);
        }

.nav-cta:hover:after {
            display: none;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--teal-primary);
            cursor: pointer;
            transition: var(--transition);
        }

/* Hero Section */
        .hero {
            padding: 180px 0 120px;
            background: linear-gradient(rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0.9)), 
                        url('https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }

.hero h1 {
            font-size: 3.8rem;
            margin-bottom: 25px;
            line-height: 1.1;
            font-weight: 800;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

.hero p {
            font-size: 1.3rem;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.hero-stats {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-top: 60px;
            flex-wrap: wrap;
        }

.stat-item {
            text-align: center;
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--teal-light);
            margin-bottom: 5px;
        }

.stat-label {
            font-size: 1rem;
            opacity: 0.8;
            letter-spacing: 1px;
        }

.btn {
            display: inline-block;
            padding: 18px 38px;
            background: var(--gradient-teal);
            color: var(--white);
            text-decoration: none;
            border-radius: var(--radius-xl);
            font-weight: 700;
            font-size: 1.1rem;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(13, 185, 185, 0.3);
            position: relative;
            overflow: hidden;
        }

.btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(13, 185, 185, 0.4);
        }

.btn:hover:before {
            left: 100%;
        }

.btn-outline {
            background: transparent;
            border: 2px solid var(--white);
            color: var(--white);
            box-shadow: none;
            margin-left: 15px;
        }

.btn-outline:hover {
            background: var(--white);
            color: var(--teal-primary);
        }

/* Features Section */
        .features {
            background-color: var(--grey-light);
            position: relative;
        }

.section-title {
            text-align: center;
            margin-bottom: 70px;
            color: var(--grey-dark);
            font-size: 2.8rem;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

.section-title:after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 5px;
            background: var(--gradient-teal);
            border-radius: 5px;
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

.feature-card {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 40px 35px;
            text-align: center;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.feature-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-teal);
        }

.feature-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-heavy);
        }

.feature-icon {
            background: var(--gradient-teal);
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: var(--white);
            font-size: 2.2rem;
            box-shadow: 0 10px 20px rgba(13, 185, 185, 0.2);
        }

.feature-card h3 {
            margin-bottom: 20px;
            color: var(--grey-dark);
            font-size: 1.6rem;
        }

.feature-card p {
            color: var(--grey-medium);
            font-size: 1.05rem;
        }

/* Itinerary Section */
        .itinerary {
            position: relative;
        }

.itinerary-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            flex-wrap: wrap;
            gap: 15px;
        }

.tab-btn {
            padding: 16px 32px;
            background-color: var(--grey-light);
            border: none;
            border-radius: var(--radius-xl);
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 1.05rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
        }

.tab-btn i {
            font-size: 1.2rem;
        }

.tab-btn.active {
            background: var(--gradient-teal);
            color: var(--white);
            box-shadow: 0 8px 20px rgba(13, 185, 185, 0.2);
        }

.itinerary-content {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 50px;
            display: none;
            box-shadow: var(--shadow-medium);
            border: 1px solid rgba(0, 0, 0, 0.05);
            animation: fadeIn 0.5s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

.itinerary-content.active {
            display: block;
        }

.itinerary-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }

.itinerary-price {
            background: var(--gradient-teal);
            color: var(--white);
            padding: 10px 25px;
            border-radius: var(--radius-xl);
            font-weight: 700;
            font-size: 1.3rem;
            box-shadow: 0 5px 15px rgba(13, 185, 185, 0.2);
        }

.day {
            background-color: var(--grey-light);
            border-radius: var(--radius-md);
            padding: 25px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 25px;
            transition: var(--transition);
            border-left: 5px solid var(--teal-primary);
        }

.day:hover {
            transform: translateX(10px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
        }

.day-number {
            background: var(--gradient-teal);
            color: var(--white);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.4rem;
            flex-shrink: 0;
            box-shadow: 0 5px 15px rgba(13, 185, 185, 0.2);
        }

.day-content h4 {
            margin-bottom: 8px;
            color: var(--teal-dark);
            font-size: 1.3rem;
        }

/* Reviews Section */
        .reviews {
            background-color: var(--grey-light);
            position: relative;
        }

.review-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

.review-card {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 35px;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            position: relative;
        }

.review-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }

.review-card:before {
            content: '"';
            position: absolute;
            top: 15px;
            left: 25px;
            font-size: 5rem;
            color: var(--teal-light);
            opacity: 0.2;
            font-family: Georgia, serif;
            line-height: 1;
        }

.review-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

.review-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--gradient-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: 800;
            margin-right: 20px;
            font-size: 1.5rem;
            flex-shrink: 0;
            box-shadow: 0 5px 15px rgba(13, 185, 185, 0.2);
        }

.review-info h4 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

.review-location {
            color: var(--teal-primary);
            font-size: 0.95rem;
            font-weight: 600;
        }

.review-stars {
            color: #ffc107;
            font-size: 1.1rem;
            margin-top: 8px;
        }

.review-text {
            color: var(--grey-medium);
            font-size: 1.05rem;
            line-height: 1.8;
        }

/* Form Section */
        .enquiry-form {
            position: relative;
        }

.form-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 60px;
            box-shadow: var(--shadow-heavy);
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

.form-container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--gradient-teal);
        }

.form-row {
            display: flex;
            gap: 30px;
            margin-bottom: 25px;
        }

.form-group {
            flex: 1;
        }

.form-group label {
            display: block;
            margin-bottom: 12px;
            font-weight: 600;
            color: var(--grey-dark);
            font-size: 1.05rem;
        }

.form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 18px 20px;
            border: 1px solid #e0e0e0;
            border-radius: var(--radius-md);
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            transition: var(--transition);
            background-color: var(--grey-light);
        }

.form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--teal-primary);
            box-shadow: 0 0 0 3px var(--teal-glow);
            background-color: var(--white);
        }

.form-group textarea {
            height: 160px;
            resize: vertical;
        }

.checkbox-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 30px 0;
        }

.checkbox-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

.checkbox-item input {
            width: 20px;
            height: 20px;
            accent-color: var(--teal-primary);
        }

.submit-container {
            text-align: center;
            margin-top: 40px;
        }

.submit-btn {
            padding: 20px 50px;
            font-size: 1.2rem;
            width: auto;
            display: inline-flex;
            align-items: center;
            gap: 15px;
        }

/* Footer */
        footer {
            background-color: var(--grey-dark);
            color: var(--white);
            padding: 80px 0 30px;
            position: relative;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 60px;
            margin-bottom: 60px;
        }

.footer-section h3 {
            margin-bottom: 25px;
            font-size: 1.5rem;
            position: relative;
            display: inline-block;
        }

.footer-section h3:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--teal-primary);
            border-radius: 3px;
        }

.footer-section p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 25px;
            font-size: 1.05rem;
        }

.footer-section ul {
            list-style: none;
        }

.footer-section ul li {
            margin-bottom: 15px;
        }

.footer-section a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: var(--transition);
            display: inline-block;
            padding: 2px 0;
        }

.footer-section a:hover {
            color: var(--teal-light);
            transform: translateX(5px);
        }

.social-icons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

.social-icons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transition: var(--transition);
            font-size: 1.3rem;
        }

.social-icons a:hover {
            background-color: var(--teal-primary);
            transform: translateY(-5px);
        }

.copyright {
            text-align: center;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.95rem;
        }

/* Responsive Design */
        @media (max-width: 1200px) {
            .container {
                padding: 0 30px;
            }
            
            .hero h1 {
                font-size: 3.2rem;
            }
        }

@media (max-width: 992px) {
            section {
                padding: 80px 0;
            }
            
            .hero {
                padding: 150px 0 100px;
                background-attachment: scroll;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .form-group {
                margin-bottom: 25px;
            }
            
            .btn-outline {
                margin-left: 0;
                margin-top: 15px;
            }
            
            .section-title {
                font-size: 2.4rem;
            }
        }

@media (max-width: 768px) {
            .container {
                padding: 0 20px;
            }
            
            .header-content {
                padding: 15px 0;
            }
            
            nav ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--white);
                flex-direction: column;
                padding: 30px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                border-radius: 0 0 var(--radius-lg) var(--radius-lg);
                gap: 20px;
            }
            
            nav ul.active {
                display: flex;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero {
                padding: 130px 0 80px;
            }
            
            .hero h1 {
                font-size: 2.3rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .hero-stats {
                gap: 30px;
            }
            
            .stat-number {
                font-size: 2rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .features, .itinerary, .reviews, .enquiry-form {
                padding: 60px 0;
            }
            
            .form-container {
                padding: 40px 30px;
            }
            
            .itinerary-content {
                padding: 30px;
            }
            
            .day {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .btn {
                padding: 16px 30px;
                font-size: 1rem;
                width: 100%;
                text-align: center;
            }
            
            .tab-btn {
                padding: 14px 20px;
                font-size: 0.95rem;
                width: 100%;
                justify-content: center;
            }
            
            .features-grid, .review-cards {
                grid-template-columns: 1fr;
            }
            
            .form-container {
                padding: 30px 20px;
            }
        }

JavaScript

// Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navMenu = document.getElementById('navMenu');
        
        mobileMenuBtn.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            mobileMenuBtn.innerHTML = navMenu.classList.contains('active') 
                ? '<i class="fas fa-times"></i>' 
                : '<i class="fas fa-bars"></i>';
        });
        
        // Close mobile menu when clicking a link
        document.querySelectorAll('nav a').forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });
        
        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Itinerary tabs functionality
        const tabBtns = document.querySelectorAll('.tab-btn');
        const itineraryContents = document.querySelectorAll('.itinerary-content');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const itineraryType = this.getAttribute('data-itinerary');
                
                // Update active tab button
                tabBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                // Show corresponding content
                itineraryContents.forEach(content => {
                    content.classList.remove('active');
                    if (content.id === `${itineraryType}-itinerary`) {
                        setTimeout(() => {
                            content.classList.add('active');
                        }, 10);
                    }
                });
            });
        });
        
        // Form submission with animation
        document.getElementById('travel-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const destination = document.getElementById('destination').value;
            
            // Simple validation
            if (name && email && destination) {
                const submitBtn = document.querySelector('.submit-btn');
                const originalText = submitBtn.innerHTML;
                
                // Show loading state
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
                submitBtn.disabled = true;
                
                // Simulate API call
                setTimeout(() => {
                    // Show success message
                    submitBtn.innerHTML = '<i class="fas fa-check"></i> Itinerary Sent!';
                    submitBtn.style.background = 'linear-gradient(135deg, #2ecc71 0%, #27ae60 100%)';
                    
                    // Reset form
                    document.getElementById('travel-form').reset();
                    
                    // Reset button after 3 seconds
                    setTimeout(() => {
                        submitBtn.innerHTML = originalText;
                        submitBtn.style.background = '';
                        submitBtn.disabled = false;
                    }, 3000);
                    
                    // Success notification
                    alert(`Thanks ${name}! We'll send custom itinerary options for ${destination} to ${email} within 24 hours.`);
                }, 1500);
            } else {
                alert('Please fill in all required fields marked with *.');
            }
        });
        
        // Animate elements on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.feature-card, .review-card, .day');
            
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.style.opacity = "1";
                    element.style.transform = "translateY(0)";
                }
            });
        }
        
        // Set initial state for animated elements
        document.querySelectorAll('.feature-card, .review-card, .day').forEach(el => {
            el.style.opacity = "0";
            el.style.transform = "translateY(20px)";
            el.style.transition = "opacity 0.5s ease, transform 0.5s ease";
        });
        
        window.addEventListener('scroll', animateOnScroll);
        // Trigger once on load
        setTimeout(animateOnScroll, 100);
        
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                if (this.getAttribute('href') !== '#') {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 100,
                            behavior: 'smooth'
                        });
                    }
                }
            });
        });
        
        // Set min date for travel date input
        const today = new Date();
        const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
        const nextMonthFormatted = nextMonth.toISOString().split('T')[0].substring(0, 7);
        document.getElementById('travel-date').min = nextMonthFormatted;
        document.getElementById('travel-date').value = nextMonthFormatted;

Premium Budget Travel Template Preview

Download Options