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="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Navigation --> <nav id="navbar"> <div class="container"> <div class="logo">Wander<span>lust</span></div> <ul class="nav-links"> <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> <li><a href="#booking" class="btn">Book Now</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h1>Discover Your Next <span>Adventure</span></h1> <p>Explore the world's most beautiful destinations with our expertly crafted travel experiences.</p> <div class="search-box"> <form> <input type="text" placeholder="Where do you want to go?"> <input type="date" placeholder="When?"> <select> <option value="">Travel Type</option> <option value="adventure">Adventure</option> <option value="beach">Beach</option> <option value="cultural">Cultural</option> <option value="family">Family</option> </select> <button type="submit" class="btn">Search</button> </form> </div> </div> </div> </section> <!-- Destinations Section --> <section id="destinations" class="destinations"> <div class="container"> <div class="section-header"> <h2>Popular <span>Destinations</span></h2> <p>Explore our most sought-after travel spots around the globe</p> </div> <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="Bali, Indonesia"> <div class="price-tag">From $899</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-half-alt"></i> <span>(124 reviews)</span> </div> <p>Experience tropical paradise with stunning beaches, lush jungles, and vibrant culture.</p> <div class="destination-meta"> <span><i class="fas fa-clock"></i> 7 Days</span> <span><i class="fas fa-users"></i> 12+</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> <div class="destination-card"> <div class="destination-image"> <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Santorini, Greece"> <div class="price-tag">From $1299</div> </div> <div class="destination-info"> <h3>Santorini, Greece</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>(98 reviews)</span> </div> <p>Whitewashed buildings, blue domes, and breathtaking sunsets await in this Aegean paradise.</p> <div class="destination-meta"> <span><i class="fas fa-clock"></i> 5 Days</span> <span><i class="fas fa-users"></i> 8+</span> </div> <a href="#booking" class="btn btn-small">Book Now</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="Kyoto, Japan"> <div class="price-tag">From $1599</div> </div> <div class="destination-info"> <h3>Kyoto, 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"></i> <span>(156 reviews)</span> </div> <p>Discover ancient temples, traditional tea houses, and stunning cherry blossoms.</p> <div class="destination-meta"> <span><i class="fas fa-clock"></i> 10 Days</span> <span><i class="fas fa-users"></i> 6+</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> <div class="destination-card"> <div class="destination-image"> <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Machu Picchu, Peru"> <div class="price-tag">From $1499</div> </div> <div class="destination-info"> <h3>Machu Picchu, Peru</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>(87 reviews)</span> </div> <p>Journey to the lost city of the Incas and experience breathtaking mountain vistas.</p> <div class="destination-meta"> <span><i class="fas fa-clock"></i> 8 Days</span> <span><i class="fas fa-users"></i> 10+</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> </div> <div class="view-all"> <a href="#destinations" class="btn btn-outline">View All Destinations</a> </div> </div> </section> <!-- Packages Section --> <section id="packages" class="packages"> <div class="container"> <div class="section-header"> <h2>Special <span>Packages</span></h2> <p>Tailored travel experiences for every type of adventurer</p> </div> <div class="tabs"> <button class="tab-btn active" data-tab="all">All</button> <button class="tab-btn" data-tab="adventure">Adventure</button> <button class="tab-btn" data-tab="luxury">Luxury</button> <button class="tab-btn" data-tab="family">Family</button> <button class="tab-btn" data-tab="honeymoon">Honeymoon</button> </div> <div class="packages-grid"> <div class="package-card" data-category="adventure"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Patagonia Trekking"> <div class="discount-badge">25% OFF</div> </div> <div class="package-info"> <h3>Patagonia Trekking Adventure</h3> <div class="package-meta"> <span><i class="fas fa-map-marker-alt"></i> Chile & Argentina</span> <span><i class="fas fa-calendar-alt"></i> 12 Days</span> </div> <p>Experience the rugged beauty of Patagonia with expert guides, glacier hikes, and breathtaking landscapes.</p> <div class="package-footer"> <div class="price"> <span class="old-price">$2999</span> <span class="current-price">$2249</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> </div> <div class="package-card" data-category="luxury"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Maldives Luxury"> <div class="popular-badge">Popular</div> </div> <div class="package-info"> <h3>Maldives Luxury Escape</h3> <div class="package-meta"> <span><i class="fas fa-map-marker-alt"></i> Maldives</span> <span><i class="fas fa-calendar-alt"></i> 7 Days</span> </div> <p>Private overwater bungalow, gourmet dining, spa treatments, and crystal-clear waters await.</p> <div class="package-footer"> <div class="price"> <span class="current-price">$3499</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> </div> <div class="package-card" data-category="family"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Orlando Family"> </div> <div class="package-info"> <h3>Orlando Family Fun</h3> <div class="package-meta"> <span><i class="fas fa-map-marker-alt"></i> Florida, USA</span> <span><i class="fas fa-calendar-alt"></i> 5 Days</span> </div> <p>Theme park tickets, family-friendly resorts, and magical experiences for all ages.</p> <div class="package-footer"> <div class="price"> <span class="current-price">$1799</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> </div> <div class="package-card" data-category="honeymoon"> <div class="package-image"> <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Bali Honeymoon"> </div> <div class="package-info"> <h3>Bali Romantic Getaway</h3> <div class="package-meta"> <span><i class="fas fa-map-marker-alt"></i> Bali, Indonesia</span> <span><i class="fas fa-calendar-alt"></i> 10 Days</span> </div> <p>Private villas, couples spa treatments, sunset dinners, and cultural experiences.</p> <div class="package-footer"> <div class="price"> <span class="current-price">$2599</span> </div> <a href="#booking" class="btn btn-small">Book Now</a> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services"> <div class="container"> <div class="section-header"> <h2>Our <span>Services</span></h2> <p>We provide comprehensive travel solutions to make your journey seamless</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-plane"></i> </div> <h3>Flight Bookings</h3> <p>We secure the best flight deals with premium airlines to ensure comfortable and timely travel.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-hotel"></i> </div> <h3>Hotel Reservations</h3> <p>From luxury resorts to budget stays, we find accommodations that match your preferences.</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, pace, and budget.</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 arranged for hassle-free movement.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-umbrella-beach"></i> </div> <h3>Tour Packages</h3> <p>Curated experiences with expert guides to help you discover each destination's highlights.</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 for any questions or emergencies.</p> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-content"> <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-text"> <div class="section-header"> <h2>About <span>Wanderlust</span></h2> </div> <p>Founded in 2010, Wanderlust Adventures has been creating unforgettable travel experiences for thousands of satisfied customers worldwide. Our mission is to inspire and enable people to explore the world with confidence and joy.</p> <p>We partner with local experts in each destination to provide authentic experiences while maintaining the highest standards of safety and comfort. Our team of travel consultants have personally visited the destinations we recommend, ensuring first-hand knowledge.</p> <div class="stats"> <div class="stat-item"> <h3>12,000+</h3> <p>Happy Travelers</p> </div> <div class="stat-item"> <h3>150+</h3> <p>Destinations</p> </div> <div class="stat-item"> <h3>98%</h3> <p>Positive Reviews</p> </div> </div> <a href="#contact" class="btn">Learn More</a> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <div class="section-header"> <h2>Traveler <span>Stories</span></h2> <p>What our customers say about their experiences</p> </div> <div class="testimonials-slider"> <div class="testimonial active"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"Our trip to Japan with Wanderlust was absolutely flawless. Every detail was perfectly arranged, from the ryokan stays to the private guides. We experienced aspects of Japanese culture we never would have discovered on our own."</p> <div class="client-info"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Sarah Johnson"> <div> <h4>Sarah Johnson</h4> <span>Kyoto Cultural Tour</span> </div> </div> </div> </div> <div class="testimonial"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"The Patagonia trekking adventure exceeded all expectations. The guides were knowledgeable, the equipment top-notch, and the scenery breathtaking. Wanderlust took care of everything so we could focus on the experience."</p> <div class="client-info"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Michael Chen"> <div> <h4>Michael Chen</h4> <span>Patagonia Adventure</span> </div> </div> </div> </div> <div class="testimonial"> <div class="testimonial-content"> <div class="quote-icon"> <i class="fas fa-quote-left"></i> </div> <p>"Our family vacation to Orlando was stress-free thanks to Wanderlust. They arranged all our park tickets, fast passes, and even special character dining experiences. The kids had the time of their lives!"</p> <div class="client-info"> <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="The Rodriguez Family"> <div> <h4>The Rodriguez Family</h4> <span>Orlando Vacation</span> </div> </div> </div> </div> <div class="slider-controls"> <button class="prev-btn"><i class="fas fa-chevron-left"></i></button> <div class="slider-dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="next-btn"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="container"> <div class="section-header"> <h2>Travel <span>Gallery</span></h2> <p>Explore the world through our travelers' eyes</p> </div> <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="gallery-overlay"> <div class="overlay-content"> <h3>Safari Adventure</h3> <p>Kenya Wildlife Tour</p> </div> </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="gallery-overlay"> <div class="overlay-content"> <h3>Mountain Trek</h3> <p>Patagonia Expedition</p> </div> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="gallery-overlay"> <div class="overlay-content"> <h3>Theme Park Fun</h3> <p>Orlando Family Vacation</p> </div> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="gallery-overlay"> <div class="overlay-content"> <h3>Cultural Experience</h3> <p>Kyoto Temple Visit</p> </div> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="gallery-overlay"> <div class="overlay-content"> <h3>Beach Paradise</h3> <p>Maldives Luxury Resort</p> </div> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Travel Photo"> <div class="gallery-overlay"> <div class="overlay-content"> <h3>Romantic Getaway</h3> <p>Santorini Sunset</p> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <div class="section-header"> <h2>Get In <span>Touch</span></h2> <p>Have questions? We're here to help plan your perfect trip</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="info-item"> <div class="info-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="info-text"> <h3>Our Office</h3> <p>123 Travel Street, Adventure City, AC 12345</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-phone-alt"></i> </div> <div class="info-text"> <h3>Call Us</h3> <p>+1 (555) 123-4567</p> <p>Mon-Fri: 9am-6pm</p> </div> </div> <div class="info-item"> <div class="info-icon"> <i class="fas fa-envelope"></i> </div> <div class="info-text"> <h3>Email Us</h3> <p>info@wanderlustadventures.com</p> <p>support@wanderlustadventures.com</p> </div> </div> </div> <div class="contact-form"> <form id="contactForm"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" id="subject" placeholder="Subject"> </div> <div class="form-group"> <textarea id="message" rows="5" placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h2>Subscribe to Our <span>Newsletter</span></h2> <p>Get exclusive travel deals, destination inspiration, and expert tips straight to your inbox.</p> <form id="newsletterForm"> <div class="form-group"> <input type="email" placeholder="Your Email Address" required> <button type="submit" class="btn">Subscribe</button> </div> </form> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>Wanderlust Adventures</h3> <p>Creating unforgettable travel experiences since 2010. Let us help you discover your next adventure.</p> <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-youtube"></i></a> <a href="#"><i class="fab fa-pinterest"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <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"> <h3>Support</h3> <ul> <li><a href="#">FAQs</a></li> <li><a href="#">Booking Policy</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Conditions</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </div> <div class="footer-col"> <h3>Contact Info</h3> <ul> <li><i class="fas fa-map-marker-alt"></i> 123 Travel Street, Adventure City</li> <li><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</li> <li><i class="fas fa-envelope"></i> info@wanderlustadventures.com</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> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --dark-color: #2c3e50; --light-color: #ecf0f1; --accent-color: #e74c3c; --gray-color: #95a5a6; --light-gray: #f8f9fa; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--dark-color); background-color: #fff; 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 { font-weight: 700; line-height: 1.2; margin-bottom: 15px; } p { margin-bottom: 15px; } span { color: var(--primary-color); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } a { text-decoration: none; color: inherit; transition: var(--transition); } .btn { display: inline-block; padding: 12px 30px; background-color: var(--primary-color); color: #fff; border-radius: 30px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); border: 2px solid var(--primary-color); cursor: pointer; } .btn:hover { background-color: transparent; color: var(--primary-color); transform: translateY(-3px); } .btn-outline { background-color: transparent; color: var(--primary-color); } .btn-outline:hover { background-color: var(--primary-color); color: #fff; } .btn-small { padding: 8px 20px; font-size: 14px; } .section-header { text-align: center; margin-bottom: 50px; } .section-header h2 { font-size: 36px; margin-bottom: 15px; } .section-header p { color: var(--gray-color); font-size: 18px; } /* Navigation */ nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; transition: var(--transition); background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } nav.scrolled { padding: 15px 0; background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } nav .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 28px; font-weight: 700; color: var(--dark-color); } .logo span { color: var(--primary-color); } .nav-links { display: flex; align-items: center; } .nav-links li { margin-left: 30px; } .nav-links a { font-weight: 600; font-size: 16px; position: relative; } .nav-links a:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover:after { width: 100%; } .hamburger { display: none; cursor: pointer; width: 30px; height: 20px; flex-direction: column; justify-content: space-between; } .hamburger span { display: block; width: 100%; height: 3px; background-color: var(--dark-color); transition: var(--transition); } /* Hero Section */ .hero { height: 100vh; min-height: 700px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color: #fff; display: flex; align-items: center; text-align: center; position: relative; } .hero-content { max-width: 800px; margin: 0 auto; } .hero h1 { font-size: 60px; margin-bottom: 20px; line-height: 1.2; } .hero p { font-size: 20px; margin-bottom: 30px; color: rgba(255, 255, 255, 0.9); } .search-box { background-color: rgba(255, 255, 255, 0.9); padding: 30px; border-radius: 10px; margin-top: 40px; } .search-box form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .search-box input, .search-box select { padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 16px; } .search-box button { grid-column: 1 / -1; } /* Destinations Section */ .destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .destination-card { background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 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: var(--transition); } .destination-card:hover .destination-image img { transform: scale(1.1); } .price-tag { position: absolute; top: 20px; right: 20px; background-color: var(--primary-color); color: #fff; padding: 5px 15px; border-radius: 30px; font-weight: 600; } .destination-info { padding: 20px; } .destination-info h3 { font-size: 22px; margin-bottom: 10px; } .rating { color: #f39c12; margin-bottom: 10px; display: flex; align-items: center; } .rating span { color: var(--gray-color); font-size: 14px; margin-left: 10px; } .destination-meta { display: flex; justify-content: space-between; margin: 15px 0; color: var(--gray-color); } .destination-meta span { display: flex; align-items: center; } .destination-meta i { margin-right: 5px; } .view-all { text-align: center; margin-top: 40px; } /* Packages Section */ .packages { background-color: var(--light-gray); } .tabs { display: flex; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; gap: 10px; } .tab-btn { padding: 8px 20px; background-color: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: 30px; cursor: pointer; transition: var(--transition); } .tab-btn.active { background-color: var(--primary-color); color: #fff; } .tab-btn:hover:not(.active) { background-color: rgba(52, 152, 219, 0.1); } .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .package-card { background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .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: var(--transition); } .package-card:hover .package-image img { transform: scale(1.1); } .discount-badge { position: absolute; top: 20px; left: 20px; background-color: var(--accent-color); color: #fff; padding: 5px 15px; border-radius: 30px; font-weight: 600; } .popular-badge { position: absolute; top: 20px; right: 20px; background-color: var(--secondary-color); color: #fff; padding: 5px 15px; border-radius: 30px; font-weight: 600; } .package-info { padding: 20px; } .package-info h3 { font-size: 20px; margin-bottom: 10px; } .package-meta { display: flex; justify-content: space-between; margin: 15px 0; color: var(--gray-color); font-size: 14px; } .package-meta span { display: flex; align-items: center; } .package-meta i { margin-right: 5px; } .package-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .price .old-price { text-decoration: line-through; color: var(--gray-color); margin-right: 10px; } .price .current-price { font-weight: 700; color: var(--primary-color); font-size: 18px; } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .service-card { background-color: #fff; border-radius: 10px; 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; background-color: rgba(52, 152, 219, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--primary-color); font-size: 30px; transition: var(--transition); } .service-card:hover .service-icon { background-color: var(--primary-color); color: #fff; } .service-card h3 { font-size: 20px; margin-bottom: 15px; } /* About Section */ .about-content { display: flex; align-items: center; gap: 50px; } .about-image { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-text { flex: 1; } .stats { display: flex; justify-content: space-between; margin: 30px 0; } .stat-item { text-align: center; } .stat-item h3 { font-size: 36px; color: var(--primary-color); } .stat-item p { color: var(--gray-color); font-size: 14px; } /* Testimonials Section */ .testimonials-slider { position: relative; max-width: 800px; margin: 0 auto; } .testimonial { display: none; background-color: #fff; border-radius: 10px; padding: 40px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); text-align: center; } .testimonial.active { display: block; } .quote-icon { font-size: 40px; color: var(--primary-color); margin-bottom: 20px; opacity: 0.5; } .testimonial p { font-size: 18px; font-style: italic; margin-bottom: 30px; } .client-info { display: flex; align-items: center; justify-content: center; } .client-info img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .client-info h4 { font-size: 18px; margin-bottom: 5px; } .client-info span { color: var(--gray-color); font-size: 14px; } .slider-controls { display: flex; align-items: center; justify-content: center; margin-top: 30px; } .slider-controls button { background: none; border: none; font-size: 20px; color: var(--dark-color); cursor: pointer; transition: var(--transition); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .slider-controls button:hover { background-color: var(--primary-color); color: #fff; } .slider-dots { display: flex; margin: 0 20px; } .slider-dots .dot { width: 12px; height: 12px; background-color: #ddd; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: var(--transition); } .slider-dots .dot.active { background-color: var(--primary-color); } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .gallery-item { position: relative; height: 250px; border-radius: 10px; overflow: hidden; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); display: flex; align-items: flex-end; opacity: 0; transition: var(--transition); padding: 20px; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item:hover img { transform: scale(1.1); } .overlay-content { transform: translateY(20px); transition: var(--transition); } .gallery-item:hover .overlay-content { transform: translateY(0); } .overlay-content h3 { color: #fff; font-size: 20px; margin-bottom: 5px; } .overlay-content p { color: rgba(255, 255, 255, 0.8); font-size: 14px; } /* Contact Section */ .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .contact-form { flex: 1; } .info-item { display: flex; margin-bottom: 30px; } .info-icon { width: 60px; height: 60px; 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: 20px; margin-right: 20px; flex-shrink: 0; } .info-text h3 { font-size: 20px; margin-bottom: 5px; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 16px; transition: var(--transition); } .form-group input: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; } /* Newsletter Section */ .newsletter { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color: #fff; text-align: center; padding: 80px 0; } .newsletter h2 { font-size: 36px; margin-bottom: 20px; } .newsletter p { font-size: 18px; margin-bottom: 30px; color: rgba(255, 255, 255, 0.9); } #newsletterForm { max-width: 600px; margin: 0 auto; display: flex; } #newsletterForm .form-group { flex: 1; margin-bottom: 0; position: relative; } #newsletterForm input { width: 100%; padding: 15px 20px; border: none; border-radius: 30px 0 0 30px; font-size: 16px; } #newsletterForm button { padding: 15px 30px; border: none; border-radius: 0 30px 30px 0; background-color: var(--primary-color); color: #fff; cursor: pointer; transition: var(--transition); } #newsletterForm button:hover { background-color: var(--secondary-color); } /* Footer */ footer { background-color: var(--dark-color); color: #fff; padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-col h3 { font-size: 20px; margin-bottom: 25px; position: relative; padding-bottom: 10px; } .footer-col h3:after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-col p { color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; } .footer-col ul li { margin-bottom: 15px; } .footer-col ul li i { margin-right: 10px; color: var(--primary-color); } .footer-col ul li a:hover { color: var(--primary-color); padding-left: 5px; } .social-links { display: flex; gap: 15px; } .social-links a { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .social-links a:hover { background-color: var(--primary-color); transform: translateY(-5px); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; color: rgba(255, 255, 255, 0.7); font-size: 14px; } .payment-methods { display: flex; gap: 15px; font-size: 24px; } /* Responsive Styles */ @media (max-width: 992px) { .about-content { flex-direction: column; } .about-image { order: -1; margin-bottom: 30px; } .contact-content { flex-direction: column; } .contact-info { margin-bottom: 50px; } } @media (max-width: 768px) { .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: #fff; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 0; transition: var(--transition); } .nav-links.active { left: 0; } .nav-links li { margin: 15px 0; } .hamburger { display: flex; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } .hero h1 { font-size: 48px; } .section-header h2 { font-size: 32px; } #newsletterForm { flex-direction: column; } #newsletterForm input { border-radius: 30px; margin-bottom: 10px; } #newsletterForm button { border-radius: 30px; } } @media (max-width: 576px) { .hero h1 { font-size: 36px; } .hero p { font-size: 18px; } .search-box form { grid-template-columns: 1fr; } .section-header h2 { font-size: 28px; } .footer-bottom { flex-direction: column; text-align: center; gap: 15px; } .payment-methods { justify-content: center; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navLinks.classList.toggle('active'); }); // Close mobile menu when clicking on a link document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', function() { hamburger.classList.remove('active'); navLinks.classList.remove('active'); }); }); // Sticky Navigation window.addEventListener('scroll', function() { const navbar = document.querySelector('nav'); navbar.classList.toggle('scrolled', window.scrollY > 50); }); // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); let currentIndex = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentIndex = index; } function nextTestimonial() { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); } function prevTestimonial() { currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; showTestimonial(currentIndex); } nextBtn.addEventListener('click', nextTestimonial); prevBtn.addEventListener('click', prevTestimonial); dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); // Auto-rotate testimonials let testimonialInterval = setInterval(nextTestimonial, 5000); // Pause on hover const slider = document.querySelector('.testimonials-slider'); slider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); slider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(nextTestimonial, 5000); }); // Package Filtering 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.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // Form Submissions const contactForm = document.getElementById('contactForm'); const newsletterForm = document.getElementById('newsletterForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); this.reset(); }); } if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for subscribing to our newsletter!'); this.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' }); } }); }); // Animation on scroll function animateOnScroll() { const elements = document.querySelectorAll('.destination-card, .package-card, .service-card, .gallery-item, .about-content'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); } // Set initial state for animated elements document.querySelectorAll('.destination-card, .package-card, .service-card, .gallery-item, .about-content').forEach(element => { element.style.opacity = '0'; element.style.transform = 'translateY(50px)'; element.style.transition = 'all 0.6s ease'; }); window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll); });
Output Preview
Desktop
Mobile
Fullscreen