Tours Travels template
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 | Explore the World</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo"> <i class="fas fa-plane"></i> <span>Wanderlust</span> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#destinations">Destinations</a></li> <li><a href="#packages">Packages</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </nav> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="hero-overlay"></div> <div class="container"> <div class="hero-content"> <h1>Discover Your Next Adventure</h1> <p>Explore the world's most breathtaking destinations with our expertly crafted travel experiences.</p> <div class="search-box"> <input type="text" placeholder="Search destinations..."> <button class="btn primary"> <i class="fas fa-search"></i> Search </button> </div> <div class="cta-buttons"> <a href="#packages" class="btn primary">View Packages</a> <a href="#contact" class="btn secondary"> <i class="fas fa-phone-alt"></i> Book Now </a> </div> </div> </div> </section> <!-- Destinations Section --> <section id="destinations" class="destinations"> <div class="container"> <h2 class="section-title">Popular Destinations</h2> <p class="section-subtitle">Explore our most sought-after travel spots around the globe</p> <div class="destinations-grid"> <div class="destination-card"> <div class="destination-image"> <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Paris"> <div class="price-tag">From $999</div> </div> <div class="destination-info"> <h3>Paris, France</h3> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <span>4.5 (120 reviews)</span> </div> <p>The city of love and lights, featuring the Eiffel Tower, Louvre Museum, and exquisite cuisine.</p> <a href="#" class="btn outline">Explore</a> </div> </div> <div class="destination-card"> <div class="destination-image"> <img src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Bali"> <div class="price-tag">From $1299</div> </div> <div class="destination-info"> <h3>Bali, Indonesia</h3> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <span>5.0 (95 reviews)</span> </div> <p>Tropical paradise with lush jungles, stunning beaches, and rich cultural heritage.</p> <a href="#" class="btn outline">Explore</a> </div> </div> <div class="destination-card"> <div class="destination-image"> <img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="New York"> <div class="price-tag">From $799</div> </div> <div class="destination-info"> <h3>New York, USA</h3> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> <span>4.0 (210 reviews)</span> </div> <p>The city that never sleeps, featuring Times Square, Central Park, and Broadway shows.</p> <a href="#" class="btn outline">Explore</a> </div> </div> <div class="destination-card"> <div class="destination-image"> <img src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Tokyo"> <div class="price-tag">From $1499</div> </div> <div class="destination-info"> <h3>Tokyo, Japan</h3> <div class="rating"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <span>4.7 (180 reviews)</span> </div> <p>Futuristic city blending cutting-edge technology with ancient traditions and cuisine.</p> <a href="#" class="btn outline">Explore</a> </div> </div> </div> <div class="view-all"> <a href="#" class="btn primary">View All Destinations</a> </div> </div> </section> <!-- Packages Section --> <section id="packages" class="packages"> <div class="container"> <h2 class="section-title">Travel Packages</h2> <p class="section-subtitle">All-inclusive deals for your perfect vacation</p> <div class="tabs"> <button class="tab-btn active" data-tab="all">All</button> <button class="tab-btn" data-tab="beach">Beach</button> <button class="tab-btn" data-tab="mountain">Mountain</button> <button class="tab-btn" data-tab="cultural">Cultural</button> <button class="tab-btn" data-tab="adventure">Adventure</button> </div> <div class="packages-grid"> <div class="package-card" data-category="beach"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Tropical Paradise"> <div class="discount-tag">25% OFF</div> </div> <div class="package-info"> <div class="package-meta"> <span><i class="far fa-calendar-alt"></i> 7 Days</span> <span><i class="fas fa-users"></i> 2-4 People</span> <span><i class="fas fa-map-marker-alt"></i> Maldives</span> </div> <h3>Tropical Paradise Getaway</h3> <p>Experience luxury in overwater bungalows with private beach access and spa treatments.</p> <div class="package-footer"> <div class="price"> <span class="old-price">$2,499</span> <span class="new-price">$1,899</span> </div> <a href="#" class="btn primary">Book Now</a> </div> </div> </div> <div class="package-card" data-category="mountain"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Alpine Retreat"> </div> <div class="package-info"> <div class="package-meta"> <span><i class="far fa-calendar-alt"></i> 5 Days</span> <span><i class="fas fa-users"></i> 1-2 People</span> <span><i class="fas fa-map-marker-alt"></i> Swiss Alps</span> </div> <h3>Alpine Mountain Retreat</h3> <p>Cozy chalet stay with ski passes, thermal baths, and breathtaking mountain views.</p> <div class="package-footer"> <div class="price"> <span class="new-price">$1,599</span> </div> <a href="#" class="btn primary">Book Now</a> </div> </div> </div> <div class="package-card" data-category="cultural"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="European Tour"> <div class="discount-tag">15% OFF</div> </div> <div class="package-info"> <div class="package-meta"> <span><i class="far fa-calendar-alt"></i> 10 Days</span> <span><i class="fas fa-users"></i> 2-6 People</span> <span><i class="fas fa-map-marker-alt"></i> Italy, France</span> </div> <h3>European Cultural Tour</h3> <p>Visit iconic landmarks, museums, and enjoy local cuisine across multiple countries.</p> <div class="package-footer"> <div class="price"> <span class="old-price">$3,299</span> <span class="new-price">$2,799</span> </div> <a href="#" class="btn primary">Book Now</a> </div> </div> </div> <div class="package-card" data-category="adventure"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Safari Adventure"> </div> <div class="package-info"> <div class="package-meta"> <span><i class="far fa-calendar-alt"></i> 8 Days</span> <span><i class="fas fa-users"></i> 2-8 People</span> <span><i class="fas fa-map-marker-alt"></i> Kenya</span> </div> <h3>African Safari Adventure</h3> <p>Wildlife safari with expert guides, luxury tent camping, and cultural experiences.</p> <div class="package-footer"> <div class="price"> <span class="new-price">$2,299</span> </div> <a href="#" class="btn primary">Book Now</a> </div> </div> </div> </div> <div class="view-all"> <a href="#" class="btn outline">View All Packages</a> </div> </div> </section> <!-- Services Section --> <section id="services" class="services"> <div class="container"> <h2 class="section-title">Our Services</h2> <p class="section-subtitle">Everything you need for a seamless travel experience</p> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-hotel"></i> </div> <h3>Luxury Accommodations</h3> <p>Handpicked hotels and resorts that meet our high standards for comfort and service.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-route"></i> </div> <h3>Custom Itineraries</h3> <p>Tailored travel plans designed specifically for your interests and preferences.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-plane"></i> </div> <h3>Flight Bookings</h3> <p>Competitive airfare with multiple airline options and flexible booking policies.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-car"></i> </div> <h3>Transportation</h3> <p>Private transfers, rental cars, and local transportation arrangements.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-utensils"></i> </div> <h3>Dining Experiences</h3> <p>Reservations at top restaurants and unique culinary experiences.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-headset"></i> </div> <h3>24/7 Support</h3> <p>Round-the-clock assistance during your travels from our dedicated team.</p> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="About Wanderlust"> </div> <div class="about-content"> <h2 class="section-title">About Wanderlust</h2> <p>Founded in 2010, Wanderlust Adventures has been creating unforgettable travel experiences for over a decade. Our mission is to connect people with the world's most incredible destinations through authentic, immersive, and responsible travel.</p> <p>What sets us apart is our team of passionate travel experts who have personally visited every destination we offer. We don't just book trips - we craft experiences that will stay with you forever.</p> <div class="stats"> <div class="stat-item"> <div class="stat-number" data-count="15000">0</div> <div class="stat-label">Happy Travelers</div> </div> <div class="stat-item"> <div class="stat-number" data-count="75">0</div> <div class="stat-label">Destinations</div> </div> <div class="stat-item"> <div class="stat-number" data-count="12">0</div> <div class="stat-label">Years Experience</div> </div> </div> <a href="#contact" class="btn primary">Get in Touch</a> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2 class="section-title">Traveler Stories</h2> <p class="section-subtitle">What our customers say about their experiences</p> <div class="swiper-container testimonials-slider"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="testimonial"> <div class="quote">"Our European tour with Wanderlust was absolutely flawless. Every detail was perfectly arranged, from the boutique hotels to the private guided tours. We'll definitely be using them for our next adventure!"</div> <div class="author"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> <div class="info"> <div class="name">Sarah Johnson</div> <div class="location">New York, USA</div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial"> <div class="quote">"The safari package exceeded all our expectations. The guides were incredibly knowledgeable, and we saw the Big Five within our first two days! Wanderlust made our dream vacation a reality."</div> <div class="author"> <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael T."> <div class="info"> <div class="name">Michael Thompson</div> <div class="location">Toronto, Canada</div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="testimonial"> <div class="quote">"As a solo female traveler, safety is my top priority. Wanderlust arranged everything perfectly - my driver was always on time, the hotels were in great locations, and I never felt unsafe. Highly recommend!"</div> <div class="author"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M."> <div class="info"> <div class="name">Lisa Martinez</div> <div class="location">Los Angeles, USA</div> </div> </div> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="container"> <h2 class="section-title">Travel Gallery</h2> <p class="section-subtitle">Explore the world through our travelers' eyes</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> <div class="view-all"> <a href="#" class="btn primary">View More Photos</a> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <div class="contact-form"> <h2 class="section-title">Plan Your Trip</h2> <p class="section-subtitle">Fill out the form below and our travel experts will contact you</p> <form id="travelForm"> <div class="form-group"> <input type="text" id="name" name="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" name="email" placeholder="Email Address" required> </div> <div class="form-group"> <input type="tel" id="phone" name="phone" placeholder="Phone Number" required> </div> <div class="form-group"> <select id="interest" name="interest" required> <option value="">I'm interested in...</option> <option value="beach">Beach Vacation</option> <option value="mountain">Mountain Getaway</option> <option value="cultural">Cultural Tour</option> <option value="adventure">Adventure Travel</option> <option value="cruise">Cruise</option> <option value="other">Other</option> </select> </div> <div class="form-group"> <textarea id="message" name="message" placeholder="Tell us about your dream vacation..." rows="4"></textarea> </div> <button type="submit" class="btn primary">Submit Request</button> </form> </div> <div class="contact-info"> <h3>Contact Information</h3> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <p>123 Travel Street, Suite 101<br>New York, NY 10001</p> </div> <div class="info-item"> <i class="fas fa-phone"></i> <p>(212) 555-1234</p> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <p>info@wanderlust.com</p> </div> <div class="info-item"> <i class="fas fa-clock"></i> <p>Monday - Friday: 9am - 6pm<br>Saturday: 10am - 4pm<br>Sunday: Closed</p> </div> <div class="social-links"> <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-pinterest-p"></i></a> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h3>Subscribe to Our Newsletter</h3> <p>Get travel inspiration, exclusive deals, and insider tips straight to your inbox.</p> </div> <form class="newsletter-form"> <input type="email" placeholder="Your Email Address"> <button type="submit" class="btn primary">Subscribe</button> </form> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-col"> <div class="logo"> <i class="fas fa-plane"></i> <span>Wanderlust</span> </div> <p>Creating unforgettable travel experiences since 2010. Let us help you discover your next adventure.</p> </div> <div class="footer-col"> <h4>Quick Links</h4> <ul> <li><a href="#home">Home</a></li> <li><a href="#destinations">Destinations</a></li> <li><a href="#packages">Packages</a></li> <li><a href="#services">Services</a></li> <li><a href="#about">About Us</a></li> </ul> </div> <div class="footer-col"> <h4>Support</h4> <ul> <li><a href="#">FAQs</a></li> <li><a href="#">Travel Insurance</a></li> <li><a href="#">Visa Assistance</a></li> <li><a href="#">Booking Conditions</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> <div class="footer-col"> <h4>Contact Us</h4> <ul> <li><i class="fas fa-phone"></i> (212) 555-1234</li> <li><i class="fas fa-envelope"></i> info@wanderlust.com</li> <li><i class="fas fa-map-marker-alt"></i> 123 Travel St, NY 10001</li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 Wanderlust Adventures. All Rights Reserved.</p> <div class="payment-methods"> <i class="fab fa-cc-visa"></i> <i class="fab fa-cc-mastercard"></i> <i class="fab fa-cc-amex"></i> <i class="fab fa-cc-paypal"></i> </div> </div> </div> </footer> <!-- Lightbox Modal --> <div class="lightbox"> <span class="close-btn">×</span> <img class="lightbox-content" id="lightbox-img"> <div class="caption"></div> </div> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="script.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary-color: #3498db; --secondary-color: #2c3e50; --accent-color: #e74c3c; --light-color: #ecf0f1; --dark-color: #2c3e50; --gray-color: #95a5a6; --light-gray: #ecf0f1; --white: #ffffff; --black: #000000; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--dark-color); background-color: var(--white); overflow-x: hidden; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 80px 0; } h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; line-height: 1.2; font-weight: 700; } p { margin-bottom: 15px; } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } .btn { display: inline-block; padding: 12px 24px; border-radius: 4px; font-weight: 600; text-align: center; transition: var(--transition); cursor: pointer; border: 2px solid transparent; } .btn.primary { background-color: var(--primary-color); color: var(--white); } .btn.primary:hover { background-color: #2980b9; transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn.secondary { background-color: var(--secondary-color); color: var(--white); } .btn.secondary:hover { background-color: #1a252f; transform: translateY(-3px); box-shadow: var(--box-shadow); } .btn.outline { background-color: transparent; border-color: var(--primary-color); color: var(--primary-color); } .btn.outline:hover { background-color: var(--primary-color); color: var(--white); transform: translateY(-3px); box-shadow: var(--box-shadow); } .section-title { font-size: 2.5rem; text-align: center; color: var(--secondary-color); position: relative; padding-bottom: 15px; margin-bottom: 30px; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--primary-color); } .section-subtitle { text-align: center; color: var(--gray-color); font-size: 1.1rem; max-width: 700px; margin: 0 auto 50px; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .header .container { display: flex; justify-content: space-between; align-items: center; height: 80px; } .logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--secondary-color); } .logo i { margin-right: 10px; color: var(--primary-color); } .navbar ul { display: flex; } .navbar ul li { margin-left: 30px; } .navbar ul li a { font-weight: 600; transition: var(--transition); position: relative; } .navbar ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover { color: var(--primary-color); } .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; color: var(--secondary-color); } /* Hero Section */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; margin-top: 80px; background: url('https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color: var(--white); text-align: center; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .hero .container { position: relative; z-index: 1; } .hero-content { max-width: 800px; margin: 0 auto; } .hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; animation: fadeInDown 1s ease; } .hero-content p { font-size: 1.2rem; margin-bottom: 30px; animation: fadeInUp 1s ease; } .search-box { display: flex; max-width: 600px; margin: 0 auto 30px; animation: fadeIn 1.5s ease; } .search-box input { flex: 1; padding: 15px 20px; border: none; border-radius: 4px 0 0 4px; font-size: 1rem; } .search-box button { border-radius: 0 4px 4px 0; } .cta-buttons { display: flex; justify-content: center; gap: 15px; animation: fadeInUp 1s ease; } /* Destinations Section */ .destinations { background-color: var(--white); } .destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .destination-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .destination-image { position: relative; height: 200px; overflow: hidden; } .destination-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .destination-card:hover .destination-image img { transform: scale(1.1); } .price-tag { position: absolute; top: 15px; right: 15px; background-color: var(--primary-color); color: var(--white); padding: 5px 15px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; } .destination-info { padding: 20px; } .destination-info h3 { font-size: 1.3rem; margin-bottom: 10px; } .rating { display: flex; align-items: center; margin-bottom: 10px; color: var(--accent-color); } .rating i { margin-right: 3px; } .rating span { margin-left: 10px; font-size: 0.9rem; color: var(--gray-color); } .destination-info p { margin-bottom: 15px; font-size: 0.95rem; color: var(--gray-color); } .view-all { text-align: center; margin-top: 50px; } /* Packages Section */ .packages { background-color: var(--light-gray); } .tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .tab-btn { padding: 8px 20px; background-color: transparent; border: 1px solid var(--gray-color); border-radius: 20px; cursor: pointer; transition: var(--transition); font-weight: 600; } .tab-btn:hover { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); } .tab-btn.active { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); } .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .package-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); display: none; } .package-card.show { display: block; } .package-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .package-image { position: relative; height: 200px; overflow: hidden; } .package-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .package-card:hover .package-image img { transform: scale(1.1); } .discount-tag { position: absolute; top: 15px; right: 15px; background-color: var(--accent-color); color: var(--white); padding: 5px 10px; border-radius: 4px; font-weight: 600; font-size: 0.8rem; } .package-info { padding: 20px; } .package-meta { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; font-size: 0.9rem; color: var(--gray-color); } .package-meta span { display: flex; align-items: center; } .package-meta i { margin-right: 5px; color: var(--primary-color); } .package-info h3 { font-size: 1.3rem; margin-bottom: 10px; } .package-info p { margin-bottom: 20px; font-size: 0.95rem; color: var(--gray-color); } .package-footer { display: flex; justify-content: space-between; align-items: center; } .price .old-price { text-decoration: line-through; color: var(--gray-color); font-size: 0.9rem; margin-right: 10px; } .price .new-price { font-weight: 700; color: var(--primary-color); font-size: 1.2rem; } /* Services Section */ .services { background-color: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .service-card { background-color: var(--white); border-radius: 8px; padding: 30px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { width: 80px; height: 80px; margin: 0 auto 20px; background-color: rgba(52, 152, 219, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 2rem; transition: var(--transition); } .service-card:hover .service-icon { background-color: var(--primary-color); color: var(--white); } .service-card h3 { font-size: 1.3rem; margin-bottom: 15px; } .service-card p { color: var(--gray-color); } /* About Section */ .about { background-color: var(--light-gray); } .about .container { display: flex; align-items: center; gap: 50px; } .about-image { flex: 1; border-radius: 8px; overflow: hidden; box-shadow: var(--box-shadow); } .about-image img { width: 100%; height: auto; transition: transform 0.5s ease; } .about-image:hover img { transform: scale(1.05); } .about-content { flex: 1; } .stats { display: flex; justify-content: space-between; margin: 30px 0; } .stat-item { text-align: center; padding: 0 15px; } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; } .stat-label { font-size: 0.9rem; color: var(--gray-color); } /* Testimonials Section */ .testimonials { background-color: var(--white); } .testimonials-slider { max-width: 800px; margin: 0 auto; position: relative; } .testimonial { background-color: var(--white); padding: 40px; border-radius: 8px; box-shadow: var(--box-shadow); text-align: center; } .quote { font-size: 1.2rem; font-style: italic; color: var(--gray-color); margin-bottom: 30px; position: relative; } .quote::before, .quote::after { content: '"'; font-size: 3rem; color: var(--primary-color); opacity: 0.3; position: absolute; } .quote::before { top: -20px; left: -10px; } .quote::after { bottom: -40px; right: -10px; } .author { display: flex; align-items: center; justify-content: center; } .author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .name { font-weight: 700; color: var(--secondary-color); } .location { color: var(--gray-color); font-size: 0.9rem; } .swiper-pagination-bullet { width: 12px; height: 12px; background-color: var(--light-gray); opacity: 1; } .swiper-pagination-bullet-active { background-color: var(--primary-color); } /* Gallery Section */ .gallery { background-color: var(--light-gray); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 50px; } .gallery-item { position: relative; border-radius: 8px; overflow: hidden; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .overlay { opacity: 1; } .overlay i { color: var(--white); font-size: 2rem; } /* Contact Section */ .contact { background-color: var(--white); } .contact .container { display: flex; gap: 50px; } .contact-form { flex: 1; background-color: var(--white); padding: 40px; border-radius: 8px; box-shadow: var(--box-shadow); } .form-group { margin-bottom: 20px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--light-gray); border-radius: 4px; font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } .form-group textarea { resize: vertical; min-height: 120px; } .contact-info { flex: 1; padding: 40px; background-color: var(--secondary-color); color: var(--white); border-radius: 8px; } .contact-info h3 { font-size: 1.8rem; margin-bottom: 30px; position: relative; padding-bottom: 15px; } .contact-info h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background-color: var(--primary-color); } .info-item { display: flex; margin-bottom: 25px; } .info-item i { font-size: 1.2rem; color: var(--primary-color); margin-right: 15px; margin-top: 5px; } .social-links { display: flex; gap: 15px; margin-top: 30px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--white); transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); transform: translateY(-3px); } /* Newsletter Section */ .newsletter { background-color: var(--primary-color); color: var(--white); padding: 60px 0; } .newsletter .container { display: flex; align-items: center; justify-content: space-between; } .newsletter-content h3 { font-size: 1.8rem; margin-bottom: 10px; } .newsletter-content p { opacity: 0.9; } .newsletter-form { display: flex; max-width: 500px; flex: 1; } .newsletter-form input { flex: 1; padding: 15px 20px; border: none; border-radius: 4px 0 0 4px; font-family: inherit; font-size: 1rem; } .newsletter-form button { border-radius: 0 4px 4px 0; } /* Footer */ .footer { background-color: var(--secondary-color); color: var(--white); padding: 60px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-col h4 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--primary-color); } .footer-col p { color: rgba(255, 255, 255, 0.7); } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: rgba(255, 255, 255, 0.7); transition: var(--transition); } .footer-col ul li a:hover { color: var(--primary-color); padding-left: 5px; } .footer-col ul li i { margin-right: 10px; width: 20px; text-align: center; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; } .payment-methods { display: flex; gap: 15px; margin-top: 15px; font-size: 1.5rem; } /* Lightbox */ .lightbox { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow: auto; } .lightbox-content { display: block; margin: 50px auto; max-width: 90%; max-height: 80vh; animation: zoomIn 0.3s; } .close-btn { position: absolute; top: 20px; right: 30px; color: var(--white); font-size: 40px; font-weight: bold; cursor: pointer; transition: var(--transition); } .close-btn:hover { color: var(--primary-color); } .caption { text-align: center; color: var(--white); padding: 10px 0; max-width: 80%; margin: 0 auto; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Responsive Styles */ @media (max-width: 1200px) { .hero-content h1 { font-size: 3rem; } } @media (max-width: 992px) { .hero .container, .about .container, .contact .container, .newsletter .container { flex-direction: column; } .hero-content, .about-content, .about-image, .contact-form, .contact-info, .newsletter-content, .newsletter-form { width: 100%; max-width: 100%; } .about-image, .newsletter-form { margin-bottom: 40px; } .newsletter-form { max-width: 100%; } section { padding: 60px 0; } } @media (max-width: 768px) { .navbar ul { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); flex-direction: column; align-items: center; justify-content: center; transition: var(--transition); z-index: 999; } .navbar ul.active { left: 0; } .navbar ul li { margin: 15px 0; } .mobile-menu-btn { display: block; } .hero-content h1 { font-size: 2.5rem; } .section-title { font-size: 2rem; } .stats { flex-direction: column; gap: 20px; } .footer-content { grid-template-columns: 1fr; text-align: center; } .footer-col h4::after { left: 50%; transform: translateX(-50%); } } @media (max-width: 576px) { .hero-content h1 { font-size: 2rem; } .search-box, .cta-buttons { flex-direction: column; } .search-box input, .search-box button, .cta-buttons .btn { width: 100%; } .search-box button { border-radius: 0 0 4px 4px; } .search-box input { border-radius: 4px 4px 0 0; } .section-title { font-size: 1.8rem; } .package-footer { flex-direction: column; gap: 15px; } .price { text-align: center; } .lightbox-content { max-width: 95%; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navbar = document.querySelector('.navbar ul'); mobileMenuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); this.querySelector('i').classList.toggle('fa-times'); this.querySelector('i').classList.toggle('fa-bars'); }); // Close mobile menu when clicking on a link const navLinks = document.querySelectorAll('.navbar ul li a'); navLinks.forEach(link => { link.addEventListener('click', function() { navbar.classList.remove('active'); mobileMenuBtn.querySelector('i').classList.remove('fa-times'); mobileMenuBtn.querySelector('i').classList.add('fa-bars'); }); }); // Sticky Header on Scroll const header = document.querySelector('.header'); window.addEventListener('scroll', function() { if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Package Filter Tabs const tabBtns = document.querySelectorAll('.tab-btn'); const packageCards = document.querySelectorAll('.package-card'); tabBtns.forEach(btn => { btn.addEventListener('click', function() { // Remove active class from all buttons tabBtns.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const filter = this.getAttribute('data-tab'); packageCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category') === filter) { card.classList.add('show'); } else { card.classList.remove('show'); } }); }); }); // Initialize Swiper Testimonial Slider const swiper = new Swiper('.testimonials-slider', { loop: true, autoplay: { delay: 5000, disableOnInteraction: false, }, pagination: { el: '.swiper-pagination', clickable: true, }, }); // Counter Animation const statNumbers = document.querySelectorAll('.stat-number'); function animateCounters() { statNumbers.forEach(stat => { const target = parseInt(stat.getAttribute('data-count')); const duration = 2000; // Animation duration in ms const step = target / (duration / 16); // 60fps let current = 0; const counter = setInterval(() => { current += step; if (current >= target) { clearInterval(counter); stat.textContent = target; } else { stat.textContent = Math.floor(current); } }, 16); }); } // Intersection Observer for Counter Animation const aboutSection = document.querySelector('#about'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); observer.observe(aboutSection); // Lightbox Gallery const galleryItems = document.querySelectorAll('.gallery-item'); const lightbox = document.querySelector('.lightbox'); const lightboxImg = document.querySelector('.lightbox-content'); const closeBtn = document.querySelector('.close-btn'); galleryItems.forEach(item => { item.addEventListener('click', function() { const imgSrc = this.querySelector('img').getAttribute('src'); lightboxImg.setAttribute('src', imgSrc); lightbox.style.display = 'block'; document.body.style.overflow = 'hidden'; }); }); closeBtn.addEventListener('click', function() { lightbox.style.display = 'none'; document.body.style.overflow = 'auto'; }); lightbox.addEventListener('click', function(e) { if (e.target === lightbox) { lightbox.style.display = 'none'; document.body.style.overflow = 'auto'; } }); // Form Submission const travelForm = document.getElementById('travelForm'); if (travelForm) { travelForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const interest = document.getElementById('interest').value; const message = document.getElementById('message').value; // Here you would typically send this data to a server console.log('Form submitted:', { name, email, phone, interest, message }); // Show success message alert('Thank you for your travel request! Our team will contact you shortly to plan your dream vacation.'); // Reset form travelForm.reset(); }); } // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Active link highlighting const sections = document.querySelectorAll('section'); window.addEventListener('scroll', function() { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.clientHeight; if (pageYOffset >= sectionTop - 200) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === `#${current}`) { link.classList.add('active'); } }); }); });
Output Preview
Desktop
Mobile
Fullscreen