Wanderlust Tours and Travels Home
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust Adventures - Discover Your Next Journey</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar" id="navbar"> <div class="nav-container"> <a href="#" class="logo"> <i class="fas fa-globe-americas"></i> Wanderlust </a> <ul class="nav-menu" id="nav-menu"> <li><a href="#home" class="nav-link">Home</a></li> <li><a href="#services" class="nav-link">Services</a></li> <li><a href="#about" class="nav-link">About</a></li> <li><a href="#contact" class="nav-link">Contact</a></li> <li><a href="#contact" class="nav-cta">Book Now</a></li> </ul> <div class="hamburger" id="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="floating-elements"> <div class="floating-element"></div> <div class="floating-element"></div> <div class="floating-element"></div> <div class="floating-element"></div> </div> <div class="hero-content"> <div class="hero-subtitle">Adventure Awaits</div> <h1>Discover Your Next Journey</h1> <p class="hero-description">Embark on extraordinary adventures with our curated travel experiences. From exotic destinations to cultural immersions, we create memories that last a lifetime.</p> <div class="hero-buttons"> <a href="#destinations" class="btn-primary">Explore Destinations</a> <a href="#packages" class="btn-secondary">View Packages</a> </div> </div> </section> <!-- Search Section --> <section class="search-section"> <div class="search-container"> <div class="search-box"> <div class="search-field"> <label for="destination">Destination</label> <input type="text" id="destination" placeholder="Where do you want to go?"> </div> <div class="search-field"> <label for="checkin">Check-in Date</label> <input type="date" id="checkin"> </div> <div class="search-field"> <label for="checkout">Check-out Date</label> <input type="date" id="checkout"> </div> <div class="search-field"> <label for="travelers">Travelers</label> <select id="travelers"> <option value="1">1 Traveler</option> <option value="2">2 Travelers</option> <option value="3">3 Travelers</option> <option value="4">4+ Travelers</option> </select> </div> <div class="search-field"> <button class="search-btn" onclick="searchTrips()"> <i class="fas fa-search"></i> Search Trips </button> </div> </div> </div> </section> <!-- Destinations Section --> <section class="destinations" id="destinations"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Popular Destinations</div> <h2 class="section-title">Explore Amazing Places</h2> <p class="section-description">Discover breathtaking destinations around the world, each offering unique experiences and unforgettable memories.</p> </div> <div class="destinations-grid"> <div class="destination-card"> <div class="destination-image"> <i class="fas fa-mountain destination-icon"></i> <div class="destination-badge">Featured</div> </div> <div class="destination-content"> <h3 class="destination-title">Swiss Alps Adventure</h3> <div class="destination-location"> <i class="fas fa-map-marker-alt"></i> Switzerland </div> <p class="destination-description">Experience the majestic beauty of the Swiss Alps with guided hiking tours, luxury mountain lodges, and breathtaking panoramic views.</p> <div class="destination-footer"> <div class="destination-price">From $2,499</div> <div class="destination-rating"> <i class="fas fa-star"></i> <span>4.9</span> </div> </div> </div> </div> <div class="destination-card"> <div class="destination-image"> <i class="fas fa-umbrella-beach destination-icon"></i> <div class="destination-badge">Hot Deal</div> </div> <div class="destination-content"> <h3 class="destination-title">Maldives Paradise</h3> <div class="destination-location"> <i class="fas fa-map-marker-alt"></i> Maldives </div> <p class="destination-description">Relax in overwater bungalows surrounded by crystal-clear waters, pristine beaches, and world-class diving experiences.</p> <div class="destination-footer"> <div class="destination-price">From $3,299</div> <div class="destination-rating"> <i class="fas fa-star"></i> <span>4.8</span> </div> </div> </div> </div> <div class="destination-card"> <div class="destination-image"> <i class="fas fa-torii-gate destination-icon"></i> <div class="destination-badge">Cultural</div> </div> <div class="destination-content"> <h3 class="destination-title">Japan Cultural Tour</h3> <div class="destination-location"> <i class="fas fa-map-marker-alt"></i> Japan </div> <p class="destination-description">Immerse yourself in Japanese culture with temple visits, traditional ceremonies, cherry blossom viewing, and authentic cuisine.</p> <div class="destination-footer"> <div class="destination-price">From $2,899</div> <div class="destination-rating"> <i class="fas fa-star"></i> <span>4.7</span> </div> </div> </div> </div> <div class="destination-card"> <div class="destination-image"> <i class="fas fa-camera destination-icon"></i> <div class="destination-badge">Adventure</div> </div> <div class="destination-content"> <h3 class="destination-title">African Safari</h3> <div class="destination-location"> <i class="fas fa-map-marker-alt"></i> Kenya & Tanzania </div> <p class="destination-description">Witness the Great Migration, encounter the Big Five, and experience the raw beauty of African wilderness in luxury safari camps.</p> <div class="destination-footer"> <div class="destination-price">From $4,199</div> <div class="destination-rating"> <i class="fas fa-star"></i> <span>4.9</span> </div> </div> </div> </div> <div class="destination-card"> <div class="destination-image"> <i class="fas fa-landmark destination-icon"></i> <div class="destination-badge">Historic</div> </div> <div class="destination-content"> <h3 class="destination-title">European Capitals</h3> <div class="destination-location"> <i class="fas fa-map-marker-alt"></i> Europe </div> <p class="destination-description">Explore the rich history and culture of Europe's most iconic cities including Paris, Rome, London, and Amsterdam.</p> <div class="destination-footer"> <div class="destination-price">From $2,199</div> <div class="destination-rating"> <i class="fas fa-star"></i> <span>4.6</span> </div> </div> </div> </div> <div class="destination-card"> <div class="destination-image"> <i class="fas fa-ship destination-icon"></i> <div class="destination-badge">Luxury</div> </div> <div class="destination-content"> <h3 class="destination-title">Caribbean Cruise</h3> <div class="destination-location"> <i class="fas fa-map-marker-alt"></i> Caribbean Islands </div> <p class="destination-description">Sail through paradise with stops at multiple tropical islands, world-class dining, and endless entertainment options.</p> <div class="destination-footer"> <div class="destination-price">From $1,899</div> <div class="destination-rating"> <i class="fas fa-star"></i> <span>4.5</span> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Our Services</div> <h2 class="section-title">Why Choose Wanderlust</h2> <p class="section-description">We provide comprehensive travel services to ensure your journey is seamless, memorable, and perfectly tailored to your preferences.</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-route"></i> </div> <h3 class="service-title">Custom Itineraries</h3> <p class="service-description">Personalized travel plans crafted to match your interests, budget, and schedule. Every detail is carefully planned for your perfect adventure.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h3 class="service-title">24/7 Support</h3> <p class="service-description">Round-the-clock assistance wherever you are in the world. Our dedicated support team is always ready to help with any travel needs.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-user-tie"></i> </div> <h3 class="service-title">Expert Guides</h3> <p class="service-description">Local expert guides who bring destinations to life with insider knowledge, cultural insights, and unforgettable experiences.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-shield-alt"></i> </div> <h3 class="service-title">Travel Insurance</h3> <p class="service-description">Comprehensive travel protection covering medical emergencies, trip cancellations, and unexpected events for complete peace of mind.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-star"></i> </div> <h3 class="service-title">Luxury Accommodations</h3> <p class="service-description">Handpicked premium hotels, resorts, and unique stays that offer exceptional comfort, service, and authentic local experiences.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-plane"></i> </div> <h3 class="service-title">Flight Management</h3> <p class="service-description">Seamless flight booking, seat selection, and travel logistics management to ensure smooth journeys from departure to arrival.</p> </div> </div> </div> </section> <!-- Packages Scroller --> <section class="packages" id="packages"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Travel Packages</div> <h2 class="section-title">Curated Adventures</h2> <p class="section-description">Discover our specially designed travel packages that combine the best experiences, accommodations, and activities for unforgettable journeys.</p> </div> </div> <div class="packages-scroller"> <div class="packages-track"> <div class="package-card"> <div class="package-image"> <i class="fas fa-mountain"></i> <div class="package-duration">7 Days</div> </div> <div class="package-content"> <h3 class="package-title">Himalayan Expedition</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Professional mountain guides</li> <li><i class="fas fa-check"></i> Base camp accommodation</li> <li><i class="fas fa-check"></i> All meals included</li> <li><i class="fas fa-check"></i> Equipment provided</li> <li><i class="fas fa-check"></i> Medical support</li> </ul> <div class="package-footer"> <div class="package-price">$3,499</div> <button class="package-btn">Book Now</button> </div> </div> </div> <div class="package-card"> <div class="package-image"> <i class="fas fa-water"></i> <div class="package-duration">10 Days</div> </div> <div class="package-content"> <h3 class="package-title">Mediterranean Cruise</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Luxury cruise ship</li> <li><i class="fas fa-check"></i> 8 port destinations</li> <li><i class="fas fa-check"></i> All-inclusive dining</li> <li><i class="fas fa-check"></i> Entertainment shows</li> <li><i class="fas fa-check"></i> Shore excursions</li> </ul> <div class="package-footer"> <div class="package-price">$2,899</div> <button class="package-btn">Book Now</button> </div> </div> </div> <div class="package-card"> <div class="package-image"> <i class="fas fa-tree"></i> <div class="package-duration">5 Days</div> </div> <div class="package-content"> <h3 class="package-title">Amazon Rainforest</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Eco-lodge stays</li> <li><i class="fas fa-check"></i> Wildlife spotting tours</li> <li><i class="fas fa-check"></i> Canoe expeditions</li> <li><i class="fas fa-check"></i> Indigenous culture visits</li> <li><i class="fas fa-check"></i> Expert naturalist guides</li> </ul> <div class="package-footer"> <div class="package-price">$2,199</div> <button class="package-btn">Book Now</button> </div> </div> </div> <div class="package-card"> <div class="package-image"> <i class="fas fa-sun"></i> <div class="package-duration">14 Days</div> </div> <div class="package-content"> <h3 class="package-title">Australian Outback</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Uluru sunrise tour</li> <li><i class="fas fa-check"></i> Aboriginal cultural experiences</li> <li><i class="fas fa-check"></i> Luxury desert camps</li> <li><i class="fas fa-check"></i> Wildlife encounters</li> <li><i class="fas fa-check"></i> Scenic helicopter flights</li> </ul> <div class="package-footer"> <div class="package-price">$4,299</div> <button class="package-btn">Book Now</button> </div> </div> </div> <div class="package-card"> <div class="package-image"> <i class="fas fa-snowflake"></i> <div class="package-duration">8 Days</div> </div> <div class="package-content"> <h3 class="package-title">Arctic Adventure</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Northern Lights viewing</li> <li><i class="fas fa-check"></i> Dog sledding experiences</li> <li><i class="fas fa-check"></i> Ice hotel accommodation</li> <li><i class="fas fa-check"></i> Polar bear spotting</li> <li><i class="fas fa-check"></i> Arctic survival training</li> </ul> <div class="package-footer"> <div class="package-price">$5,199</div> <button class="package-btn">Book Now</button> </div> </div> </div> <!-- Duplicate for seamless scrolling --> <div class="package-card"> <div class="package-image"> <i class="fas fa-mountain"></i> <div class="package-duration">7 Days</div> </div> <div class="package-content"> <h3 class="package-title">Himalayan Expedition</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Professional mountain guides</li> <li><i class="fas fa-check"></i> Base camp accommodation</li> <li><i class="fas fa-check"></i> All meals included</li> <li><i class="fas fa-check"></i> Equipment provided</li> <li><i class="fas fa-check"></i> Medical support</li> </ul> <div class="package-footer"> <div class="package-price">$3,499</div> <button class="package-btn">Book Now</button> </div> </div> </div> <div class="package-card"> <div class="package-image"> <i class="fas fa-water"></i> <div class="package-duration">10 Days</div> </div> <div class="package-content"> <h3 class="package-title">Mediterranean Cruise</h3> <ul class="package-features"> <li><i class="fas fa-check"></i> Luxury cruise ship</li> <li><i class="fas fa-check"></i> 8 port destinations</li> <li><i class="fas fa-check"></i> All-inclusive dining</li> <li><i class="fas fa-check"></i> Entertainment shows</li> <li><i class="fas fa-check"></i> Shore excursions</li> </ul> <div class="package-footer"> <div class="package-price">$2,899</div> <button class="package-btn">Book Now</button> </div> </div> </div> </div> </div> </section> <!-- Testimonials Slider --> <section class="testimonials"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Testimonials</div> <h2 class="section-title">What Our Travelers Say</h2> <p class="section-description">Read authentic reviews from our satisfied customers who have experienced unforgettable journeys with Wanderlust Adventures.</p> </div> </div> <div class="testimonials-slider"> <div class="testimonials-slides" id="testimonials-slides"> <div class="testimonial-slide"> <div class="testimonial-quote"> The Swiss Alps adventure was absolutely breathtaking! Every detail was perfectly planned, from the luxury mountain lodges to the expert guides. The panoramic views were beyond anything I could have imagined. Wanderlust truly delivered a once-in-a-lifetime experience. </div> <div class="testimonial-author"> <div class="author-avatar">SM</div> <div class="author-info"> <h4>Sarah Mitchell</h4> <p>Adventure Enthusiast, USA</p> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> Our Maldives honeymoon was pure paradise! The overwater bungalow was stunning, and the crystal-clear waters were perfect for snorkeling. The staff went above and beyond to make our stay special. We're already planning our next trip with Wanderlust! </div> <div class="testimonial-author"> <div class="author-avatar">MJ</div> <div class="author-info"> <h4>Michael Johnson</h4> <p>Newlywed Traveler, Canada</p> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> The Japan cultural tour exceeded all expectations! From the traditional tea ceremonies to the cherry blossom viewing, every moment was magical. Our guide's knowledge of Japanese culture and history made the experience truly enriching and unforgettable. </div> <div class="testimonial-author"> <div class="author-avatar">EL</div> <div class="author-info"> <h4>Emily Liu</h4> <p>Cultural Explorer, Australia</p> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-quote"> The African safari was the adventure of a lifetime! Witnessing the Great Migration and seeing the Big Five in their natural habitat was incredible. The luxury safari camps provided comfort after exciting days of wildlife viewing. Absolutely phenomenal! </div> <div class="testimonial-author"> <div class="author-avatar">DR</div> <div class="author-info"> <h4>David Rodriguez</h4> <p>Wildlife Photographer, Spain</p> </div> </div> </div> </div> <div class="slider-controls"> <button class="slider-btn" onclick="previousTestimonial()"><i class="fas fa-chevron-left"></i></button> <button class="slider-btn" onclick="nextTestimonial()"><i class="fas fa-chevron-right"></i></button> </div> <div class="slider-dots" id="testimonial-dots"> <span class="dot active" onclick="currentTestimonial(0)"></span> <span class="dot" onclick="currentTestimonial(1)"></span> <span class="dot" onclick="currentTestimonial(2)"></span> <span class="dot" onclick="currentTestimonial(3)"></span> </div> </div> </section> <!-- About Section --> <section class="about" id="about"> <div class="container"> <div class="section-header"> <div class="section-subtitle">About Wanderlust</div> <h2 class="section-title">Your Trusted Travel Partner</h2> <p class="section-description">With over 15 years of experience in creating extraordinary travel experiences, we are passionate about turning your travel dreams into reality.</p> </div> <div class="about-content"> <div class="about-text"> <h3>Crafting Unforgettable Journeys Since 2008</h3> <p>At Wanderlust Adventures, we believe that travel is more than just visiting new placesβit's about creating connections, discovering cultures, and making memories that last a lifetime. Our team of travel experts has carefully curated experiences across six continents.</p> <p>From luxury escapes to adventure expeditions, cultural immersions to wildlife safaris, we specialize in creating personalized itineraries that match your unique interests and travel style. Our commitment to excellence and attention to detail has earned us the trust of thousands of satisfied travelers worldwide.</p> <div class="about-stats"> <div class="stat-item"> <span class="stat-number">50,000+</span> <span class="stat-label">Happy Travelers</span> </div> <div class="stat-item"> <span class="stat-number">150+</span> <span class="stat-label">Destinations</span> </div> <div class="stat-item"> <span class="stat-number">15+</span> <span class="stat-label">Years Experience</span> </div> <div class="stat-item"> <span class="stat-number">98%</span> <span class="stat-label">Satisfaction Rate</span> </div> </div> </div> <div class="about-image"> <div class="about-image-main"> <i class="fas fa-globe-americas"></i> </div> <div class="about-image-floating"> <i class="fas fa-award"></i> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery" id="gallery"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Travel Gallery</div> <h2 class="section-title">Moments Worth Capturing</h2> <p class="section-description">Explore stunning visuals from our travelers' adventures around the world. Each image tells a story of discovery, wonder, and unforgettable experiences.</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <i class="fas fa-mountain gallery-icon"></i> <div class="gallery-overlay"> <div class="gallery-title">Machu Picchu Sunrise</div> <div class="gallery-location">Peru</div> </div> </div> <div class="gallery-item"> <i class="fas fa-water gallery-icon"></i> <div class="gallery-overlay"> <div class="gallery-title">Maldives Lagoon</div> <div class="gallery-location">Maldives</div> </div> </div> <div class="gallery-item"> <i class="fas fa-torii-gate gallery-icon"></i> <div class="gallery-overlay"> <div class="gallery-title">Fushimi Inari Shrine</div> <div class="gallery-location">Japan</div> </div> </div> <div class="gallery-item"> <i class="fas fa-elephant gallery-icon"></i> <div class="gallery-overlay"> <div class="gallery-title">Safari Adventure</div> <div class="gallery-location">Kenya</div> </div> </div> <div class="gallery-item"> <i class="fas fa-landmark gallery-icon"></i> <div class="gallery-overlay"> <div class="gallery-title">Colosseum at Sunset</div> <div class="gallery-location">Italy</div> </div> </div> <div class="gallery-item"> <i class="fas fa-snowflake gallery-icon"></i> <div class="gallery-overlay"> <div class="gallery-title">Northern Lights</div> <div class="gallery-location">Iceland</div> </div> </div> </div> </div> </section> <!-- News Scroller --> <section class="news"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Travel News</div> <h2 class="section-title">Latest Updates & Insights</h2> <p class="section-description">Stay informed with the latest travel news, destination updates, and insider tips from our travel experts around the globe.</p> </div> </div> <div class="news-scroller"> <div class="news-track"> <div class="news-item"> <div class="news-image"> <i class="fas fa-plane"></i> </div> <div class="news-content"> <div class="news-date">December 15, 2024</div> <h3 class="news-title">New Direct Flights to Maldives Launch</h3> <p class="news-excerpt">Major airlines announce new direct routes to the Maldives, making this tropical paradise more accessible than ever for travelers seeking luxury beach getaways.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-passport"></i> </div> <div class="news-content"> <div class="news-date">December 12, 2024</div> <h3 class="news-title">Visa-Free Travel Expands to 15 New Countries</h3> <p class="news-excerpt">Great news for travelers! Visa requirements have been relaxed for multiple destinations, making international travel more convenient and accessible.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-leaf"></i> </div> <div class="news-content"> <div class="news-date">December 8, 2024</div> <h3 class="news-title">Sustainable Tourism Initiative Launched</h3> <p class="news-excerpt">Wanderlust Adventures partners with local communities to promote eco-friendly travel practices and support sustainable tourism development worldwide.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-mountain"></i> </div> <div class="news-content"> <div class="news-date">December 5, 2024</div> <h3 class="news-title">Himalayan Base Camp Season Opens</h3> <p class="news-excerpt">The perfect weather window for Himalayan expeditions has arrived. Our expert guides are ready to lead adventurers to new heights this climbing season.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-ship"></i> </div> <div class="news-content"> <div class="news-date">December 1, 2024</div> <h3 class="news-title">Luxury Cruise Fleet Expansion</h3> <p class="news-excerpt">Our cruise partners unveil new luxury vessels with enhanced amenities, offering even more spectacular ways to explore the world's most beautiful coastlines.</p> </div> </div> <!-- Duplicate for seamless scrolling --> <div class="news-item"> <div class="news-image"> <i class="fas fa-plane"></i> </div> <div class="news-content"> <div class="news-date">December 15, 2024</div> <h3 class="news-title">New Direct Flights to Maldives Launch</h3> <p class="news-excerpt">Major airlines announce new direct routes to the Maldives, making this tropical paradise more accessible than ever for travelers seeking luxury beach getaways.</p> </div> </div> <div class="news-item"> <div class="news-image"> <i class="fas fa-passport"></i> </div> <div class="news-content"> <div class="news-date">December 12, 2024</div> <h3 class="news-title">Visa-Free Travel Expands to 15 New Countries</h3> <p class="news-excerpt">Great news for travelers! Visa requirements have been relaxed for multiple destinations, making international travel more convenient and accessible.</p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="contact" id="contact"> <div class="container"> <div class="section-header"> <div class="section-subtitle">Get In Touch</div> <h2 class="section-title">Plan Your Next Adventure</h2> <p class="section-description">Ready to embark on your dream journey? Contact our travel experts to start planning your personalized adventure today.</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h4>Visit Our Office</h4> <p>123 Adventure Boulevard<br>Travel District, TD 12345<br>United States</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h4>Call Us</h4> <p>+1 (555) 123-TRIP<br>+1 (555) 123-8747<br>Available 24/7</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h4>Email Us</h4> <p>info@wanderlustadventures.com<br>bookings@wanderlustadventures.com<br>support@wanderlustadventures.com </p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h4>Office Hours</h4> <p>Monday - Friday: 8:00 AM - 8:00 PM<br>Saturday: 9:00 AM - 6:00 PM<br>Sunday: 10:00 AM - 4:00 PM</p> </div> </div> </div> <div class="contact-form"> <h3 style="margin-bottom: 2rem; color: var(--text-dark);">Send us a Message</h3> <form id="contact-form"> <div class="form-row"> <div class="form-group"> <label for="firstName">First Name</label> <input type="text" id="firstName" name="firstName" required> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input type="text" id="lastName" name="lastName" required> </div> </div> <div class="form-row"> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone"> </div> </div> <div class="form-group"> <label for="travelType">Travel Interest</label> <select id="travelType" name="travelType" required> <option value="">Select your travel interest</option> <option value="adventure">Adventure Travel</option> <option value="luxury">Luxury Getaways</option> <option value="cultural">Cultural Tours</option> <option value="wildlife">Wildlife Safaris</option> <option value="cruise">Cruise Vacations</option> <option value="honeymoon">Honeymoon Packages</option> <option value="family">Family Vacations</option> <option value="business">Business Travel</option> </select> </div> <div class="form-group"> <label for="message">Tell us about your dream trip</label> <textarea id="message" name="message" rows="5" placeholder="Describe your ideal travel experience, preferred destinations, travel dates, and any special requirements..." required></textarea> </div> <button type="submit" class="submit-btn">Send Message & Get Quote</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h4>Wanderlust Adventures</h4> <p>Creating extraordinary travel experiences since 2008. We turn your travel dreams into unforgettable memories with personalized service and expert guidance.</p> <div class="social-links"> <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a> </div> <div class="newsletter"> <h5>Subscribe to Our Newsletter</h5> <p>Get the latest travel deals and destination insights</p> <div class="newsletter-form"> <input type="email" placeholder="Your email address"> <button type="submit">Subscribe</button> </div> </div> </div> <div class="footer-section"> <h4>Quick Links</h4> <ul> <li><a href="#destinations">Destinations</a></li> <li><a href="#packages">Travel Packages</a></li> <li><a href="#services">Our Services</a></li> <li><a href="#about">About Us</a></li> <li><a href="#gallery">Photo Gallery</a></li> <li><a href="#contact">Contact Us</a></li> <li><a href="#">Travel Blog</a></li> <li><a href="#">Customer Reviews</a></li> </ul> </div> <div class="footer-section"> <h4>Travel Services</h4> <ul> <li><a href="#">Flight Bookings</a></li> <li><a href="#">Hotel Reservations</a></li> <li><a href="#">Car Rentals</a></li> <li><a href="#">Travel Insurance</a></li> <li><a href="#">Visa Assistance</a></li> <li><a href="#">Group Tours</a></li> <li><a href="#">Custom Itineraries</a></li> <li><a href="#">24/7 Support</a></li> </ul> </div> <div class="footer-section"> <h4>Popular Destinations</h4> <ul> <li><a href="#">Swiss Alps, Switzerland</a></li> <li><a href="#">Maldives Islands</a></li> <li><a href="#">Tokyo, Japan</a></li> <li><a href="#">Serengeti, Tanzania</a></li> <li><a href="#">Machu Picchu, Peru</a></li> <li><a href="#">Santorini, Greece</a></li> <li><a href="#">Bali, Indonesia</a></li> <li><a href="#">Iceland Adventures</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2024 Wanderlust Adventures. All rights reserved. | Privacy Policy | Terms of Service | Cookie Policy</p> </div> </div> </footer> </body> </html>
CSS
:root { --primary-gold: #FFD700; --secondary-gold: #FFA500; --dark-gold: #B8860B; --white: #FFFFFF; --light-gray: #F8F9FA; --dark-gray: #2C3E50; --text-dark: #1A1A1A; --text-light: #6C757D; --gradient-primary: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); --gradient-secondary: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%); --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08); --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.12); --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-dark); overflow-x: hidden; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--light-gray); } ::-webkit-scrollbar-thumb { background: var(--gradient-primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gradient-secondary); } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); z-index: 1000; padding: 1rem 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-bottom: 1px solid rgba(255, 215, 0, 0.1); } .navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-medium); padding: 0.5rem 0; } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; } .logo { font-size: 2rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .logo i { font-size: 2.2rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; list-style: none; gap: 2.5rem; align-items: center; } .nav-link { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 1rem; transition: all 0.3s ease; position: relative; padding: 0.5rem 0; } .nav-link:hover { color: var(--primary-gold); transform: translateY(-2px); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient-primary); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-cta { background: var(--gradient-primary); color: white; padding: 0.8rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: var(--shadow-light); } .nav-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } .hamburger { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; } .hamburger span { width: 25px; height: 3px; background: var(--text-dark); margin: 3px 0; transition: 0.3s; border-radius: 2px; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 165, 0, 0.8) 100%), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="mountains" patternUnits="userSpaceOnUse" width="1200" height="800"><polygon fill="%23FFD700" points="0,800 200,200 400,400 600,100 800,300 1000,150 1200,250 1200,800"/><polygon fill="%23FFA500" opacity="0.8" points="0,800 150,300 350,500 550,200 750,400 950,250 1150,350 1200,800"/><polygon fill="%23FF8C00" opacity="0.6" points="0,800 100,400 300,600 500,300 700,500 900,350 1100,450 1200,800"/></pattern></defs><rect width="1200" height="800" fill="url(%23mountains)"/></svg>'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.1) 100%); } .hero-content { max-width: 900px; padding: 0 2rem; animation: heroFadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; } .hero-subtitle { font-size: 1.2rem; font-weight: 500; color: var(--white); margin-bottom: 1rem; opacity: 0.9; letter-spacing: 2px; text-transform: uppercase; } .hero h1 { font-size: 4rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--white); line-height: 1.1; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .hero-description { font-size: 1.1rem; margin-bottom: 2rem; color: var(--white); opacity: 0.95; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; } .btn-primary { background: var(--white); color: var(--primary-gold); padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-medium); border: 2px solid transparent; } .btn-primary:hover { transform: translateY(-5px); box-shadow: var(--shadow-heavy); background: transparent; color: var(--white); border-color: var(--white); } .btn-secondary { background: transparent; color: var(--white); padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid var(--white); } .btn-secondary:hover { transform: translateY(-5px); background: var(--white); color: var(--primary-gold); box-shadow: var(--shadow-medium); } .floating-elements { position: absolute; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } .floating-element { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 8s ease-in-out infinite; } .floating-element:nth-child(1) { width: 100px; height: 100px; top: 15%; left: 10%; animation-delay: 0s; } .floating-element:nth-child(2) { width: 150px; height: 150px; top: 70%; right: 15%; animation-delay: 3s; } .floating-element:nth-child(3) { width: 80px; height: 80px; bottom: 25%; left: 25%; animation-delay: 6s; } .floating-element:nth-child(4) { width: 120px; height: 120px; top: 40%; right: 30%; animation-delay: 2s; } /* Search Bar */ .search-section { background: var(--white); padding: 4rem 0; margin-top: -2rem; position: relative; z-index: 10; } .search-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .search-box { background: var(--white); border-radius: 20px; padding: 2rem; box-shadow: var(--shadow-heavy); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; align-items: end; } .search-field { display: flex; flex-direction: column; } .search-field label { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-dark); font-size: 0.9rem; } .search-field input, .search-field select { padding: 1rem; border: 2px solid #E9ECEF; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: all 0.3s ease; background: var(--white); } .search-field input:focus, .search-field select:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1); } .search-btn { background: var(--gradient-primary); color: var(--white); border: none; padding: 1rem 2rem; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; height: fit-content; } .search-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Destinations Section */ .destinations { padding: 6rem 0; background: var(--light-gray); } .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .section-header { text-align: center; margin-bottom: 4rem; } .section-subtitle { font-size: 1.1rem; font-weight: 500; color: var(--primary-gold); margin-bottom: 1rem; letter-spacing: 1px; text-transform: uppercase; } .section-title { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--text-dark); line-height: 1.2; } .section-description { font-size: 1.2rem; color: var(--text-light); max-width: 600px; margin: 0 auto; line-height: 1.6; } .destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 3rem; } .destination-card { background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: pointer; } .destination-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .destination-image { height: 250px; background: var(--gradient-primary); position: relative; overflow: hidden; } .destination-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 215, 0, 0.8) 0%, rgba(255, 165, 0, 0.6) 100%); z-index: 1; } .destination-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; color: var(--white); z-index: 2; } .destination-badge { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.9); color: var(--primary-gold); padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; z-index: 3; } .destination-content { padding: 2rem; } .destination-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); } .destination-location { color: var(--text-light); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .destination-description { color: var(--text-light); line-height: 1.6; margin-bottom: 1.5rem; } .destination-footer { display: flex; justify-content: space-between; align-items: center; } .destination-price { font-size: 1.3rem; font-weight: 700; color: var(--primary-gold); } .destination-rating { display: flex; align-items: center; gap: 0.5rem; color: var(--primary-gold); } /* Services Section */ .services { padding: 6rem 0; background: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .service-card { text-align: center; padding: 3rem 2rem; border-radius: 20px; background: var(--light-gray); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gradient-primary); transition: all 0.4s ease; z-index: 1; } .service-card:hover::before { left: 0; } .service-card:hover { transform: translateY(-10px); color: var(--white); } .service-icon { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2rem; color: var(--white); position: relative; z-index: 2; transition: all 0.4s ease; } .service-card:hover .service-icon { background: var(--white); color: var(--primary-gold); } .service-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 2; } .service-description { line-height: 1.6; position: relative; z-index: 2; } /* Packages Scroller */ .packages { padding: 6rem 0; background: linear-gradient(135deg, var(--primary-gold) 0%, var(--secondary-gold) 100%); overflow: hidden; } .packages .section-title, .packages .section-description { color: var(--white); } .packages-scroller { overflow: hidden; margin: 3rem 0; position: relative; } .packages-track { display: flex; animation: scroll 40s linear infinite; gap: 2rem; } .package-card { flex: 0 0 400px; background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-medium); transition: all 0.3s ease; } .package-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .package-image { height: 200px; background: var(--gradient-secondary); position: relative; display: flex; align-items: center; justify-content: center; } .package-image i { font-size: 3rem; color: var(--white); } .package-duration { position: absolute; top: 1rem; left: 1rem; background: rgba(0, 0, 0, 0.7); color: var(--white); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; } .package-content { padding: 2rem; } .package-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-dark); } .package-features { list-style: none; margin-bottom: 1.5rem; } .package-features li { padding: 0.3rem 0; color: var(--text-light); display: flex; align-items: center; gap: 0.5rem; } .package-features li i { color: var(--primary-gold); font-size: 0.8rem; } .package-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #E9ECEF; } .package-price { font-size: 1.5rem; font-weight: 800; color: var(--primary-gold); } .package-btn { background: var(--gradient-primary); color: var(--white); padding: 0.8rem 1.5rem; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .package-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-light); } /* Testimonials Slider */ .testimonials { padding: 6rem 0; background: var(--white); } .testimonials-slider { position: relative; max-width: 1000px; margin: 3rem auto; overflow: hidden; border-radius: 20px; } .testimonials-slides { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .testimonial-slide { min-width: 100%; padding: 4rem; background: var(--light-gray); text-align: center; position: relative; } .testimonial-quote { font-size: 1.3rem; line-height: 1.8; color: var(--text-dark); margin-bottom: 2rem; font-style: italic; position: relative; } .testimonial-quote::before { content: '"'; font-size: 4rem; color: var(--primary-gold); position: absolute; top: -1rem; left: -2rem; font-family: serif; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 1rem; } .author-avatar { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.5rem; font-weight: 700; } .author-info h4 { font-weight: 600; color: var(--text-dark); margin-bottom: 0.2rem; } .author-info p { color: var(--text-light); font-size: 0.9rem; } .slider-controls { text-align: center; margin-top: 2rem; } .slider-btn { background: var(--gradient-primary); border: none; width: 50px; height: 50px; border-radius: 50%; margin: 0 0.5rem; cursor: pointer; font-size: 1.2rem; color: var(--white); transition: all 0.3s ease; } .slider-btn:hover { transform: scale(1.1); box-shadow: var(--shadow-medium); } .slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .dot { width: 12px; height: 12px; border-radius: 50%; background: #DDD; cursor: pointer; transition: all 0.3s ease; } .dot.active { background: var(--primary-gold); transform: scale(1.2); } /* About Section */ .about { padding: 6rem 0; background: var(--light-gray); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 3rem; } .about-text h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text-dark); } .about-text p { margin-bottom: 1.5rem; color: var(--text-light); line-height: 1.8; font-size: 1.1rem; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; } .stat-item { text-align: center; padding: 2rem; background: var(--white); border-radius: 15px; box-shadow: var(--shadow-light); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-gold); display: block; margin-bottom: 0.5rem; } .stat-label { color: var(--text-light); font-weight: 500; } .about-image { position: relative; } .about-image-main { width: 100%; height: 400px; background: var(--gradient-primary); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--white); box-shadow: var(--shadow-medium); } .about-image-floating { position: absolute; bottom: -2rem; right: -2rem; width: 150px; height: 150px; background: var(--white); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary-gold); box-shadow: var(--shadow-heavy); } /* Gallery Section */ .gallery { padding: 6rem 0; background: var(--white); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .gallery-item { height: 250px; background: var(--gradient-primary); border-radius: 15px; overflow: hidden; position: relative; cursor: pointer; transition: all 0.4s ease; } .gallery-item:hover { transform: scale(1.05); box-shadow: var(--shadow-heavy); } .gallery-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%); z-index: 1; } .gallery-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: var(--white); z-index: 2; } .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: var(--white); padding: 2rem 1.5rem 1.5rem; z-index: 2; transform: translateY(100%); transition: all 0.4s ease; } .gallery-item:hover .gallery-overlay { transform: translateY(0); } .gallery-title { font-weight: 600; margin-bottom: 0.5rem; } .gallery-location { font-size: 0.9rem; opacity: 0.8; } /* News Scroller */ .news { padding: 6rem 0; background: var(--light-gray); overflow: hidden; } .news-scroller { overflow: hidden; margin: 3rem 0; } .news-track { display: flex; animation: scrollReverse 35s linear infinite; gap: 2rem; } .news-item { flex: 0 0 350px; background: var(--white); border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-light); transition: all 0.3s ease; } .news-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .news-image { height: 180px; background: var(--gradient-secondary); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 2.5rem; } .news-content { padding: 1.5rem; } .news-date { color: var(--primary-gold); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; } .news-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-dark); line-height: 1.4; } .news-excerpt { color: var(--text-light); line-height: 1.6; font-size: 0.95rem; } /* Contact Section */ .contact { padding: 6rem 0; background: var(--white); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; } .contact-info { padding: 2rem; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 2.5rem; padding: 1.5rem; background: var(--light-gray); border-radius: 15px; transition: all 0.3s ease; } .contact-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-light); } .contact-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; color: var(--white); font-size: 1.3rem; flex-shrink: 0; } .contact-details h4 { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-dark); } .contact-details p { color: var(--text-light); line-height: 1.6; } .contact-form { background: var(--light-gray); padding: 3rem; border-radius: 20px; box-shadow: var(--shadow-light); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-dark); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1rem; border: 2px solid #E9ECEF; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: all 0.3s ease; background: var(--white); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1); } .form-group textarea { resize: vertical; min-height: 120px; } .submit-btn { background: var(--gradient-primary); color: var(--white); padding: 1.2rem 2.5rem; border: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; width: 100%; } .submit-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Footer */ .footer { background: var(--dark-gray); color: var(--white); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-section h4 { margin-bottom: 1.5rem; color: var(--primary-gold); font-size: 1.3rem; font-weight: 700; } .footer-section p, .footer-section a { color: #BDC3C7; text-decoration: none; line-height: 1.8; transition: all 0.3s ease; } .footer-section a:hover { color: var(--primary-gold); transform: translateX(5px); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.8rem; } .social-links { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-link { width: 45px; height: 45px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; transition: all 0.3s ease; font-size: 1.1rem; } .social-link:hover { background: var(--white); color: var(--primary-gold); transform: translateY(-5px); box-shadow: var(--shadow-medium); } .newsletter { background: rgba(255, 215, 0, 0.1); padding: 2rem; border-radius: 15px; margin-top: 1rem; } .newsletter h5 { margin-bottom: 1rem; color: var(--primary-gold); } .newsletter-form { display: flex; gap: 0.5rem; } .newsletter-form input { flex: 1; padding: 0.8rem; border: none; border-radius: 8px; font-family: 'Poppins', sans-serif; } .newsletter-form button { background: var(--gradient-primary); color: var(--white); border: none; padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .newsletter-form button:hover { transform: translateY(-2px); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #34495E; color: #BDC3C7; } /* Animations */ @keyframes heroFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-20px) rotate(5deg); } 66% { transform: translateY(-10px) rotate(-5deg); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollReverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Responsive Design */ @media (max-width: 1024px) { .hero h1 { font-size: 3.5rem; } .section-title { font-size: 2.5rem; } .about-content, .contact-content { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 768px) { .hamburger { display: flex; } .nav-menu { position: fixed; left: -100%; top: 80px; flex-direction: column; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); width: 100%; text-align: center; transition: 0.4s; box-shadow: var(--shadow-medium); padding: 2rem 0; gap: 1rem; } .nav-menu.active { left: 0; } .hero h1 { font-size: 2.8rem; } .hero-buttons { flex-direction: column; align-items: center; } .search-box { grid-template-columns: 1fr; padding: 1.5rem; } .destinations-grid, .services-grid, .gallery-grid { grid-template-columns: 1fr; } .package-card, .news-item { flex: 0 0 300px; } .form-row { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } .newsletter-form { flex-direction: column; } } @media (max-width: 480px) { .hero h1 { font-size: 2.2rem; } .section-title { font-size: 2rem; } .nav-container, .container { padding: 0 1rem; } .hero-content { padding: 0 1rem; } .btn-primary, .btn-secondary { padding: 1rem 2rem; font-size: 1rem; } }
JavaScript
// Mobile Navigation const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('nav-menu'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); hamburger.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-link, .nav-cta').forEach(link => { link.addEventListener('click', () => { navMenu.classList.remove('active'); hamburger.classList.remove('active'); }); }); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (window.scrollY > 100) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Search functionality function searchTrips() { const destination = document.getElementById('destination').value; const checkin = document.getElementById('checkin').value; const checkout = document.getElementById('checkout').value; const travelers = document.getElementById('travelers').value; if (!destination || !checkin || !checkout) { alert('Please fill in all required fields to search for trips.'); return; } // Simulate search results alert(`Searching for trips to ${destination} for ${travelers} from ${checkin} to ${checkout}. Our travel experts will contact you shortly with personalized recommendations!`); } // Testimonials Slider let currentTestimonial = 0; const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const totalTestimonials = testimonialSlides.length; const dots = document.querySelectorAll('.dot'); function showTestimonial(index) { const slidesContainer = document.getElementById('testimonials-slides'); slidesContainer.style.transform = `translateX(-${index * 100}%)`; // Update dots dots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); } function nextTestimonial() { currentTestimonial = (currentTestimonial + 1) % totalTestimonials; showTestimonial(currentTestimonial); } function previousTestimonial() { currentTestimonial = (currentTestimonial - 1 + totalTestimonials) % totalTestimonials; showTestimonial(currentTestimonial); } function currentTestimonial(index) { currentTestimonial = index; showTestimonial(currentTestimonial); } // Auto-advance testimonials setInterval(nextTestimonial, 6000); // Package booking document.querySelectorAll('.package-btn').forEach(btn => { btn.addEventListener('click', function () { const packageTitle = this.closest('.package-card').querySelector('.package-title').textContent; alert(`Thank you for your interest in the ${packageTitle}! Our travel consultants will contact you within 24 hours to discuss your booking and customize your experience.`); }); }); // Contact Form document.getElementById('contact-form').addEventListener('submit', function (e) { e.preventDefault(); // Get form data const formData = new FormData(this); const firstName = formData.get('firstName'); const lastName = formData.get('lastName'); const email = formData.get('email'); const phone = formData.get('phone'); const travelType = formData.get('travelType'); const message = formData.get('message'); // Simple validation if (!firstName || !lastName || !email || !travelType || !message) { alert('Please fill in all required fields.'); return; } // Simulate form submission const submitBtn = this.querySelector('.submit-btn'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Sending Message...'; submitBtn.disabled = true; setTimeout(() => { alert(`Thank you ${firstName}! Your message has been received. Our travel experts will contact you within 24 hours with a personalized quote for your ${travelType.toLowerCase()} adventure.`); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2000); }); // Newsletter subscription document.querySelector('.newsletter-form button').addEventListener('click', function (e) { e.preventDefault(); const email = this.previousElementSibling.value; if (email && email.includes('@')) { alert('Thank you for subscribing! You\'ll receive our latest travel deals and destination insights.'); this.previousElementSibling.value = ''; } else { alert('Please enter a valid email address.'); } }); // Intersection Observer for animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for animation document.querySelectorAll('.destination-card, .service-card, .gallery-item, .stat-item, .news-item').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)'; observer.observe(el); }); // Counter animation for stats function animateCounter(element, target) { let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } if (target >= 1000) { element.textContent = Math.floor(current / 1000) + 'K+'; } else if (element.textContent.includes('%')) { element.textContent = Math.floor(current) + '%'; } else { element.textContent = Math.floor(current) + '+'; } }, 30); } // Trigger counter animation when stats section is visible const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const statNumbers = entry.target.querySelectorAll('.stat-number'); statNumbers.forEach(stat => { const text = stat.textContent; let target; if (text.includes('50,000')) target = 50000; else if (text.includes('150')) target = 150; else if (text.includes('15')) target = 15; else if (text.includes('98')) target = 98; if (target) { animateCounter(stat, target); } }); statsObserver.unobserve(entry.target); } }); }, { threshold: 0.5 }); const statsSection = document.querySelector('.about-stats'); if (statsSection) { statsObserver.observe(statsSection); } // Pause scrolling animations on hover document.querySelectorAll('.packages-scroller, .news-scroller').forEach(scroller => { const track = scroller.querySelector('.packages-track, .news-track'); scroller.addEventListener('mouseenter', () => { track.style.animationPlayState = 'paused'; }); scroller.addEventListener('mouseleave', () => { track.style.animationPlayState = 'running'; }); }); // Set minimum dates for search form const today = new Date().toISOString().split('T')[0]; document.getElementById('checkin').setAttribute('min', today); document.getElementById('checkout').setAttribute('min', today); // Update checkout minimum date when checkin changes document.getElementById('checkin').addEventListener('change', function () { const checkinDate = new Date(this.value); checkinDate.setDate(checkinDate.getDate() + 1); const minCheckout = checkinDate.toISOString().split('T')[0]; document.getElementById('checkout').setAttribute('min', minCheckout); }); // Add loading states to interactive elements document.querySelectorAll('button, .btn-primary, .btn-secondary').forEach(btn => { btn.addEventListener('click', function () { if (!this.disabled) { this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = ''; }, 150); } }); });
Output Preview
Desktop
Mobile
Fullscreen