Premium Tour Travel Experiences
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 | Premium Travel Experiences</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- AOS CSS --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Wander<span>lust</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#destinations">Destinations</a> </li> <li class="nav-item"> <a class="nav-link" href="#packages">Packages</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-8 mx-auto text-center" data-aos="fade-up"> <h1>Discover The World With Wanderlust</h1> <p>Experience the journey of a lifetime with our exclusive travel packages and personalized services</p> <div class="hero-buttons"> <a href="#destinations" class="btn btn-primary me-3">Explore Destinations</a> <a href="#contact" class="btn btn-outline-light">Plan Your Trip</a> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>About Us</h2> <p>Learn why we are the preferred choice for travelers</p> </div> <div class="row"> <div class="col-lg-6" data-aos="fade-right"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" class="img-fluid rounded" alt="About Us"> </div> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="about-content"> <h3>We Create Memorable Travel Experiences</h3> <p>With over 10 years of experience in the travel industry, Wanderlust has established itself as a leader in delivering exceptional travel experiences tailored to your preferences.</p> <p>Our team of travel experts is committed to crafting personalized itineraries that allow you to explore the world's most beautiful destinations with ease and comfort.</p> <ul> <li><i class="fas fa-check-circle me-2 text-primary"></i> Customized travel itineraries</li> <li><i class="fas fa-check-circle me-2 text-primary"></i> 24/7 customer support</li> <li><i class="fas fa-check-circle me-2 text-primary"></i> Best price guarantee</li> <li><i class="fas fa-check-circle me-2 text-primary"></i> Sustainable travel options</li> </ul> </div> </div> </div> </div> </section> <!-- Destinations Section --> <section id="destinations" class="destinations bg-light"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Popular Destinations</h2> <p>Explore our most sought-after travel destinations</p> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="destination-card"> <div class="destination-img"> <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Bali"> </div> <div class="destination-price">$1,299</div> <div class="destination-content"> <h3>Bali, Indonesia</h3> <p>Experience the perfect blend of beautiful beaches, vibrant culture, and lush landscapes in the Island of Gods.</p> <a href="#" class="btn btn-outline-primary">Explore</a> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="destination-card"> <div class="destination-img"> <img src="https://images.unsplash.com/photo-1617829206657-ca53cbb6b0d4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHRvdXJzfGVufDB8fDB8fHww" alt="Santorini"> </div> <div class="destination-price">$1,599</div> <div class="destination-content"> <h3>Santorini, Greece</h3> <p>Discover the stunning white-washed buildings and breathtaking sunsets in this iconic Greek island paradise.</p> <a href="#" class="btn btn-outline-primary">Explore</a> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="destination-card"> <div class="destination-img"> <img src="https://images.unsplash.com/photo-1513326738677-b964603b136d?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Switzerland"> </div> <div class="destination-price">$1,899</div> <div class="destination-content"> <h3>Swiss Alps, Switzerland</h3> <p>Embark on an adventure through majestic mountains, crystal-clear lakes, and charming alpine villages.</p> <a href="#" class="btn btn-outline-primary">Explore</a> </div> </div> </div> </div> </div> </section> <!-- Packages Section --> <section id="packages" class="packages"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Travel Packages</h2> <p>Choose from our carefully curated travel packages</p> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="package-card"> <div class="package-img"> <img src="https://images.unsplash.com/photo-1617829206657-ca53cbb6b0d4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHRvdXJzfGVufDB8fDB8fHww" alt="Beach Vacation"> </div> <div class="package-content"> <h3>Beach Paradise</h3> <p>7 days of sun, sand, and relaxation at the world's most beautiful beaches.</p> <ul class="package-features"> <li><i class="fas fa-check"></i> Luxury beachfront accommodation</li> <li><i class="fas fa-check"></i> All meals included</li> <li><i class="fas fa-check"></i> Water sports activities</li> <li><i class="fas fa-check"></i> Sunset cruises</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="price">$1,299</span> <a href="#" class="btn btn-primary">Book Now</a> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="package-card"> <div class="package-img"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Mountain Adventure"> </div> <div class="package-content"> <h3>Mountain Adventure</h3> <p>10 days of thrilling adventures in the world's most spectacular mountain ranges.</p> <ul class="package-features"> <li><i class="fas fa-check"></i> Guided hiking tours</li> <li><i class="fas fa-check"></i> Mountain lodge accommodation</li> <li><i class="fas fa-check"></i> All equipment provided</li> <li><i class="fas fa-check"></i> Local cultural experiences</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="price">$1,799</span> <a href="#" class="btn btn-primary">Book Now</a> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="package-card"> <div class="package-img"> <img src="https://images.unsplash.com/photo-1541371447492-889426d4ff8f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHRvdXJzfGVufDB8fDB8fHww" alt="City Explorer"> </div> <div class="package-content"> <h3>City Explorer</h3> <p>5 days exploring the culture, history, and cuisine of vibrant metropolitan cities.</p> <ul class="package-features"> <li><i class="fas fa-check"></i> Central hotel accommodation</li> <li><i class="fas fa-check"></i> Guided city tours</li> <li><i class="fas fa-check"></i> Local culinary experiences</li> <li><i class="fas fa-check"></i> Museum and attraction entries</li> </ul> <div class="d-flex justify-content-between align-items-center"> <span class="price">$999</span> <a href="#" class="btn btn-primary">Book Now</a> </div> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services bg-light"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Our Services</h2> <p>We offer comprehensive travel solutions</p> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="service-item"> <div class="service-icon"> <i class="fas fa-route"></i> </div> <h4>Custom Itineraries</h4> <p>Personalized travel plans designed to match your preferences and interests.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="service-item"> <div class="service-icon"> <i class="fas fa-hotel"></i> </div> <h4>Luxury Accommodation</h4> <p>Handpicked hotels and resorts that guarantee comfort and exceptional service.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="service-item"> <div class="service-icon"> <i class="fas fa-plane"></i> </div> <h4>Flight Bookings</h4> <p>Convenient and affordable flight options to destinations worldwide.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400"> <div class="service-item"> <div class="service-icon"> <i class="fas fa-car"></i> </div> <h4>Transportation</h4> <p>Reliable transportation services including car rentals and private transfers.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="500"> <div class="service-item"> <div class="service-icon"> <i class="fas fa-passport"></i> </div> <h4>Visa Assistance</h4> <p>Expert guidance and support for visa applications and travel documentation.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="600"> <div class="service-item"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h4>24/7 Support</h4> <p>Round-the-clock customer service to assist you throughout your journey.</p> </div> </div> </div> </div> </section> <!-- Stats Section --> <section class="stats-section"> <div class="container"> <div class="row text-center"> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="100"> <div class="stat-item"> <div class="stat-number" data-count="50">0</div> <p>Destinations</p> </div> </div> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="200"> <div class="stat-item"> <div class="stat-number" data-count="5000">0</div> <p>Happy Travelers</p> </div> </div> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="300"> <div class="stat-item"> <div class="stat-number" data-count="10">0</div> <p>Years Experience</p> </div> </div> <div class="col-md-3 col-6 mb-5" data-aos="fade-up" data-aos-delay="400"> <div class="stat-item"> <div class="stat-number" data-count="150">0</div> <p>Tour Guides</p> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Traveler Testimonials</h2> <p>What our customers say about their experiences</p> </div> <div class="row"> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="testimonial-content"> <h4>Michael Johnson</h4> <p class="text-primary">Bali Adventure</p> <p>"The trip to Bali exceeded all my expectations. The itinerary was perfectly planned, and the local guides were incredibly knowledgeable."</p> <div class="rating"> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="testimonial-content"> <h4>Sarah Williams</h4> <p class="text-primary">European Tour</p> <p>"Our European tour was absolutely magical. Every detail was taken care of, and we could simply enjoy the experience without any worries."</p> <div class="rating"> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 mx-auto" data-aos="fade-up" data-aos-delay="300"> <div class="testimonial-card"> <div class="testimonial-img"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="Client"> </div> <div class="testimonial-content"> <h4>Robert Chen</h4> <p class="text-primary">Mountain Expedition</p> <p>"The mountain expedition was challenging but incredibly rewarding. The guides were professional and ensured our safety throughout the journey."</p> <div class="rating"> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> <i class="fas fa-star text-warning"></i> </div> </div> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery bg-light"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Travel Gallery</h2> <p>Moments captured from our travelers' journeys</p> </div> <div class="row"> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100"> <div class="gallery-item"> <div class="gallery-img"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Gallery 1"> </div> <div class="gallery-overlay"> <h4>Mountain Trek</h4> <p>Swiss Alps</p> </div> </div> </div> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200"> <div class="gallery-item"> <div class="gallery-img"> <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Gallery 2"> </div> <div class="gallery-overlay"> <h4>Beach Paradise</h4> <p>Maldives</p> </div> </div> </div> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300"> <div class="gallery-item"> <div class="gallery-img"> <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Gallery 3"> </div> <div class="gallery-overlay"> <h4>Northern Lights</h4> <p>Norway</p> </div> </div> </div> <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400"> <div class="gallery-item"> <div class="gallery-img"> <img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Gallery 4"> </div> <div class="gallery-overlay"> <h4>Wine Tour</h4> <p>Tuscany, Italy</p> </div> </div> </div> </div> </div> </section> <!-- CTA Section --> <section class="cta-section"> <div class="container"> <div class="row text-center"> <div class="col-lg-8 mx-auto" data-aos="fade-up"> <h2 class="mb-4">Ready to Embark on Your Next Adventure?</h2> <p class="mb-4">Sign up now to receive exclusive travel offers and inspiration for your next journey</p> <form class="row g-3 justify-content-center"> <div class="col-md-8"> <input type="email" class="form-control form-control-lg" placeholder="Your Email Address"> </div> <div class="col-md-4"> <button type="submit" class="btn btn-primary btn-lg w-100">Subscribe</button> </div> </form> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <div class="section-title" data-aos="fade-up"> <h2>Contact Us</h2> <p>Get in touch with our travel experts</p> </div> <div class="row"> <div class="col-lg-6" data-aos="fade-right"> <div class="contact-info"> <h3>Plan Your Next Journey</h3> <p>Have questions about your dream vacation? Our travel experts are here to help you plan the perfect trip.</p> <div class="contact-details"> <div class="contact-item d-flex mb-4"> <div class="icon me-4"> <i class="fas fa-map-marker-alt fa-2x text-primary"></i> </div> <div class="text"> <h5>Location</h5> <p>123 Adventure Street, Travel City, TC 12345</p> </div> </div> <div class="contact-item d-flex mb-4"> <div class="icon me-4"> <i class="fas fa-phone fa-2x text-primary"></i> </div> <div class="text"> <h5>Phone</h5> <p>+1 (123) 456-7890</p> </div> </div> <div class="contact-item d-flex mb-4"> <div class="icon me-4"> <i class="fas fa-envelope fa-2x text-primary"></i> </div> <div class="text"> <h5>Email</h5> <p>info@wanderlust.com</p> </div> </div> </div> </div> </div> <div class="col-lg-6" data-aos="fade-left"> <div class="contact-form"> <h3 class="mb-4">Send Message</h3> <form> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Your Name"> </div> <div class="col-md-6"> <input type="email" class="form-control" placeholder="Your Email"> </div> </div> <input type="text" class="form-control" placeholder="Subject"> <textarea class="form-control" rows="5" placeholder="Message"></textarea> <button type="submit" class="btn btn-primary w-100">Send Message</button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="row"> <div class="col-lg-4 mb-5"> <h3 class="text-white mb-4">Wanderlust</h3> <p>Creating unforgettable travel experiences since 2013. We are committed to delivering exceptional journeys that create lasting memories.</p> <div class="social-icons mt-4"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="col-lg-2 col-md-4 col-6 mb-5"> <div class="footer-links"> <h5>Quick Links</h5> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#destinations">Destinations</a></li> <li><a href="#packages">Packages</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-4 col-6 mb-5"> <div class="footer-links"> <h5>Destinations</h5> <ul> <li><a href="#">Europe</a></li> <li><a href="#">Asia</a></li> <li><a href="#">North America</a></li> <li><a href="#">South America</a></li> <li><a href="#">Africa</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-4 mb-5"> <div class="footer-links"> <h5>Newsletter</h5> <p>Subscribe to our newsletter to get updates on our latest travel offers and destinations.</p> <form class="mt-3"> <div class="input-group"> <input type="email" class="form-control" placeholder="Your Email"> <button class="btn btn-primary" type="button">Subscribe</button> </div> </form> </div> </div> </div> <div class="text-center border-top pt-4"> <p>© 2023 Wanderlust. All Rights Reserved.</p> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- AOS JS --> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <!-- GSAP --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> </body> </html>
CSS
:root { --primary: #1a76d2; --secondary: #0d47a1; --accent: #00b0ff; --light: #e3f2fd; --dark: #0d2f5a; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; color: #333; } /* Navigation */ .navbar { background-color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px 0; transition: all 0.3s ease; } .navbar-brand { font-weight: 700; color: var(--primary); font-size: 1.8rem; } .navbar-brand span { color: var(--accent); } .nav-link { color: #333; font-weight: 500; margin: 0 10px; transition: all 0.3s; } .nav-link:hover { color: var(--primary); } .navbar-toggler { border: none; } /* Hero Section */ .hero { background: linear-gradient(rgba(13, 71, 161, 0.7), rgba(13, 71, 161, 0.8)), url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; min-height: 100vh; display: flex; align-items: center; color: white; padding: 100px 0 80px; } .hero h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; } .hero p { font-size: 1.2rem; margin-bottom: 30px; } /* Buttons */ .btn-primary { background-color: var(--primary); border-color: var(--primary); padding: 12px 30px; border-radius: 30px; font-weight: 600; transition: all 0.3s; } .btn-primary:hover { background-color: var(--secondary); border-color: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .btn-outline-light { padding: 12px 30px; border-radius: 30px; font-weight: 600; transition: all 0.3s; } .btn-outline-light:hover { background-color: white; color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } /* Section Common Styles */ section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-weight: 700; color: var(--dark); position: relative; display: inline-block; margin-bottom: 15px; } .section-title h2::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--primary); } /* About Section */ .about-content { background-color: var(--light); border-radius: 15px; padding: 40px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } /* Destinations Section */ .destination-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; height: 100%; position: relative; } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .destination-img { height: 250px; overflow: hidden; } .destination-img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .destination-card:hover .destination-img img { transform: scale(1.1); } .destination-content { padding: 25px; } .destination-content h3 { color: var(--dark); margin-bottom: 15px; } .destination-price { position: absolute; top: 20px; right: 20px; background: var(--primary); color: white; padding: 8px 15px; border-radius: 30px; font-weight: 600; } /* Packages Section */ .package-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; height: 100%; } .package-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .package-img { height: 200px; overflow: hidden; } .package-img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .package-card:hover .package-img img { transform: scale(1.1); } .package-content { padding: 25px; } .package-content h3 { color: var(--dark); margin-bottom: 15px; } .package-features { list-style: none; padding: 0; margin: 20px 0; } .package-features li { margin-bottom: 10px; color: #666; } .package-features li i { color: var(--accent); margin-right: 10px; } /* Services Section */ .service-item { text-align: center; padding: 30px 20px; border-radius: 15px; background: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s; height: 100%; } .service-item:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); background: var(--light); } .service-icon { width: 80px; height: 80px; background: var(--light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: all 0.3s; } .service-item:hover .service-icon { background: var(--primary); color: white; transform: rotateY(180deg); } .service-icon i { font-size: 2rem; color: var(--primary); transition: all 0.3s; } .service-item:hover .service-icon i { color: white; } /* Testimonials */ .testimonial-card { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin: 15px; position: relative; } .testimonial-card::before { content: '\201C'; font-size: 5rem; color: var(--light); position: absolute; top: 10px; left: 20px; font-family: Arial, sans-serif; line-height: 1; } .testimonial-img { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 3px solid var(--primary); } .testimonial-img img { width: 100%; height: 100%; object-fit: cover; } /* Stats Section */ .stats-section { background: linear-gradient(rgba(13, 71, 161, 0.9), rgba(13, 71, 161, 0.9)), url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') fixed center/cover; color: white; } .stat-item { text-align: center; padding: 30px; } .stat-number { font-size: 3rem; font-weight: 700; margin-bottom: 10px; } /* Gallery Section */ .gallery-item { position: relative; border-radius: 15px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .gallery-img { height: 250px; overflow: hidden; } .gallery-img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 118, 210, 0.9); display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; transition: all 0.5s; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item:hover .gallery-img img { transform: scale(1.1); } /* CTA Section */ .cta-section { background: linear-gradient(rgba(13, 71, 161, 0.8), rgba(13, 71, 161, 0.9)), url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') fixed center/cover; color: white; } /* Contact Section */ .contact-form { background: white; border-radius: 15px; padding: 40px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .form-control { padding: 15px; border-radius: 10px; margin-bottom: 20px; border: 1px solid #ddd; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.25rem rgba(26, 118, 210, 0.25); } /* Footer */ footer { background-color: var(--dark); color: white; padding: 60px 0 30px; } .footer-links h5 { font-weight: 600; margin-bottom: 25px; position: relative; } .footer-links h5::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 40px; height: 2px; background-color: var(--accent); } .footer-links ul { list-style: none; padding: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #ccc; text-decoration: none; transition: all 0.3s; } .footer-links a:hover { color: white; padding-left: 5px; } .social-icons a { display: inline-block; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; text-align: center; line-height: 40px; color: white; margin-right: 10px; transition: all 0.3s; } .social-icons a:hover { background: var(--primary); transform: translateY(-5px); } /* Responsive Styles */ @media (max-width: 992px) { .hero h1 { font-size: 2.8rem; } .section-title h2 { font-size: 2rem; } } @media (max-width: 768px) { .hero h1 { font-size: 2.3rem; } .hero p { font-size: 1rem; } section { padding: 60px 0; } .stat-number { font-size: 2.5rem; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .btn-primary, .btn-outline-light { padding: 10px 20px; font-size: 0.9rem; } .section-title { margin-bottom: 40px; } .about-content, .contact-form { padding: 25px; } }
JavaScript
// Initialize AOS AOS.init({ duration: 1000, once: true, offset: 100 }); // GSAP Animations gsap.registerPlugin(ScrollTrigger); // Animate stats counter document.addEventListener('DOMContentLoaded', function() { const statElements = document.querySelectorAll('.stat-number'); const statsSection = document.querySelector('.stats-section'); // Animate navbar on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.style.padding = '10px 0'; navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; } else { navbar.style.padding = '15px 0'; navbar.style.boxShadow = 'none'; } }); // Animate stats when in view if (statsSection) { ScrollTrigger.create({ trigger: statsSection, start: 'top 80%', onEnter: () => animateStats(), once: true }); } function animateStats() { statElements.forEach(stat => { const target = parseInt(stat.getAttribute('data-count')); const duration = 2000; const step = target / (duration / 16); let current = 0; const timer = setInterval(() => { current += step; if (current >= target) { clearInterval(timer); current = target; } stat.textContent = Math.round(current); }, 16); }); } // Animate destination cards on hover const destinationCards = document.querySelectorAll('.destination-card'); destinationCards.forEach(card => { card.addEventListener('mouseenter', () => { gsap.to(card, { y: -10, duration: 0.3 }); }); card.addEventListener('mouseleave', () => { gsap.to(card, { y: 0, duration: 0.3 }); }); }); });
Output Preview
Desktop
Mobile
Fullscreen