Premium Travel Tours
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 & Tours</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand" href="#home">Wanderlust</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <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 fw-semibold" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link fw-semibold" href="#destinations">Destinations</a> </li> <li class="nav-item"> <a class="nav-link fw-semibold" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link fw-semibold" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link fw-semibold" href="#contact">Contact</a> </li> <li class="nav-item"> <a class="btn btn-custom btn-primary-custom ms-2" href="#contact">Book Now</a> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <!-- Floating Elements --> <div class="floating-element"> <i class="fas fa-plane text-white" style="font-size: 2rem; opacity: 0.3;"></i> </div> <div class="floating-element"> <i class="fas fa-compass text-white" style="font-size: 2.5rem; opacity: 0.3;"></i> </div> <div class="floating-element"> <i class="fas fa-map-marked-alt text-white" style="font-size: 2rem; opacity: 0.3;"></i> </div> <div class="container"> <div class="row align-items-center"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title">Discover Amazing Places</h1> <p class="hero-subtitle">Embark on unforgettable journeys to the world's most breathtaking destinations with our expertly crafted travel experiences.</p> <div class="hero-cta"> <a href="#destinations" class="btn btn-custom btn-primary-custom me-3">Explore Destinations</a> <a href="#services" class="btn btn-outline-light btn-custom">Our Services</a> </div> </div> </div> </div> </div> </section> <!-- Destinations Section --> <section id="destinations" class="section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Popular Destinations</h2> <p class="section-subtitle animate-on-scroll">Explore our handpicked selection of the world's most stunning travel destinations</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="destination-card animate-on-scroll"> <div class="destination-image" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');"></div> <div class="destination-content"> <h3 class="destination-title">Santorini, Greece</h3> <p class="destination-price">From $1,299</p> <p class="text-muted mb-3">Experience the magic of white-washed buildings and stunning sunsets over the Aegean Sea.</p> <a href="#" class="btn btn-custom btn-primary-custom">View Details</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="destination-card animate-on-scroll"> <div class="destination-image" style="background-image: url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8dHJhdmVsfGVufDB8fDB8fHww');"></div> <div class="destination-content"> <h3 class="destination-title">Bali, Indonesia</h3> <p class="destination-price">From $899</p> <p class="text-muted mb-3">Discover tropical paradise with pristine beaches, ancient temples, and vibrant culture.</p> <a href="#" class="btn btn-custom btn-primary-custom">View Details</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="destination-card animate-on-scroll"> <div class="destination-image" style="background-image: url('https://images.unsplash.com/photo-1682685797406-97f364419b4a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxzZWFyY2h8MzR8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D');"></div> <div class="destination-content"> <h3 class="destination-title">Swiss Alps</h3> <p class="destination-price">From $1,599</p> <p class="text-muted mb-3">Adventure awaits in the majestic mountains with world-class skiing and hiking.</p> <a href="#" class="btn btn-custom btn-primary-custom">View Details</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="destination-card animate-on-scroll"> <div class="destination-image" style="background-image: url('https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');"></div> <div class="destination-content"> <h3 class="destination-title">Maldives</h3> <p class="destination-price">From $2,199</p> <p class="text-muted mb-3">Ultimate luxury in overwater bungalows surrounded by crystal-clear waters.</p> <a href="#" class="btn btn-custom btn-primary-custom">View Details</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="destination-card animate-on-scroll"> <div class="destination-image" style="background-image: url('https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');"></div> <div class="destination-content"> <h3 class="destination-title">Tokyo, Japan</h3> <p class="destination-price">From $1,099</p> <p class="text-muted mb-3">Immerse yourself in the perfect blend of ancient traditions and modern innovation.</p> <a href="#" class="btn btn-custom btn-primary-custom">View Details</a> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="destination-card animate-on-scroll"> <div class="destination-image" style="background-image: url('https://plus.unsplash.com/premium_photo-1700828284504-02bd8d5fb2d4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzl8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D');"></div> <div class="destination-content"> <h3 class="destination-title">Iceland</h3> <p class="destination-price">From $1,399</p> <p class="text-muted mb-3">Witness the Northern Lights and explore dramatic landscapes of fire and ice.</p> <a href="#" class="btn btn-custom btn-primary-custom">View Details</a> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding curve-divider curve-divider-top"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white">Our Premium Services</h2> <p class="section-subtitle animate-on-scroll text-white-50">We provide comprehensive travel solutions tailored to your unique preferences</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-route"></i> </div> <h4 class="mb-3">Custom Itineraries</h4> <p>Personalized travel plans crafted by our expert travel consultants to match your interests and budget perfectly.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-hotel"></i> </div> <h4 class="mb-3">Luxury Accommodations</h4> <p>Handpicked premium hotels and resorts that offer exceptional comfort and world-class amenities.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-user-tie"></i> </div> <h4 class="mb-3">Personal Concierge</h4> <p>24/7 dedicated support from our travel experts to ensure your journey is seamless and memorable.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-plane-departure"></i> </div> <h4 class="mb-3">Flight Booking</h4> <p>Best deals on flights with flexible booking options and premium seat selections for maximum comfort.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-shield-alt"></i> </div> <h4 class="mb-3">Travel Insurance</h4> <p>Comprehensive coverage to protect your investment and provide peace of mind during your travels.</p> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-camera"></i> </div> <h4 class="mb-3">Photography Tours</h4> <p>Capture stunning memories with our professional photography guides at the most photogenic locations.</p> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 mb-5 mb-lg-0"> <div class="about-image animate-on-scroll"> <img src="https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="About Us" class="img-fluid rounded-4"> </div> </div> <div class="col-lg-6"> <div class="ps-lg-5"> <h2 class="section-title animate-on-scroll">About Wanderlust</h2> <p class="section-subtitle animate-on-scroll">Creating extraordinary travel experiences since 2010</p> <p class="animate-on-scroll">We are passionate travel experts dedicated to crafting unforgettable journeys that go beyond ordinary tourism. Our team of experienced travel consultants works tirelessly to create personalized adventures that match your dreams and exceed your expectations.</p> <p class="animate-on-scroll">From exotic destinations to luxury accommodations, we handle every detail so you can focus on creating memories that will last a lifetime. Trust us to turn your travel dreams into reality.</p> <div class="about-stats animate-on-scroll"> <div class="row text-center"> <div class="col-4"> <div class="stat-item"> <span class="stat-number counter" data-count="15000">0</span> <div class="stat-label">Happy Travelers</div> </div> </div> <div class="col-4"> <div class="stat-item"> <span class="stat-number counter" data-count="150">0</span> <div class="stat-label">Destinations</div> </div> </div> <div class="col-4"> <div class="stat-item"> <span class="stat-number counter" data-count="13">0</span> <div class="stat-label">Years Experience</div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="testimonials-section section-padding curve-divider curve-divider-top"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white">What Our Travelers Say</h2> <p class="section-subtitle animate-on-scroll text-white-50">Real experiences from our satisfied customers</p> </div> </div> <div class="row"> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-avatar">SM</div> <p class="testimonial-text">"Wanderlust made our honeymoon absolutely perfect! Every detail was thoughtfully planned, and the destinations were breathtaking. We couldn't have asked for a better experience."</p> <div class="testimonial-author">Sarah & Michael Johnson</div> <small class="text-muted">Honeymoon in Santorini</small> </div> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-avatar">AR</div> <p class="testimonial-text">"The photography tour in Iceland was incredible! Our guide knew all the best spots, and the Northern Lights experience was magical. Highly recommend Wanderlust!"</p> <div class="testimonial-author">Alex Rodriguez</div> <small class="text-muted">Iceland Photography Tour</small> </div> </div> <div class="col-lg-4 mb-4"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-avatar">EL</div> <p class="testimonial-text">"Professional service from start to finish. The custom itinerary for our family trip to Japan was perfect, and the kids loved every moment. Thank you, Wanderlust!"</p> <div class="testimonial-author">Emily Liu</div> <small class="text-muted">Family Trip to Japan</small> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll">Travel Gallery</h2> <p class="section-subtitle animate-on-scroll">Stunning moments captured from our travelers' journeys</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');"></div> <div class="gallery-overlay"> <i class="fas fa-search-plus text-white fa-2x"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8dHJhdmVsfGVufDB8fDB8fHww');"></div> <div class="gallery-overlay"> <i class="fas fa-search-plus text-white fa-2x"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1682685797406-97f364419b4a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxzZWFyY2h8MzR8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D');"></div> <div class="gallery-overlay"> <i class="fas fa-search-plus text-white fa-2x"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');"></div> <div class="gallery-overlay"> <i class="fas fa-search-plus text-white fa-2x"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');"></div> <div class="gallery-overlay"> <i class="fas fa-search-plus text-white fa-2x"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://plus.unsplash.com/premium_photo-1700828284504-02bd8d5fb2d4?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzl8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D');"></div> <div class="gallery-overlay"> <i class="fas fa-search-plus text-white fa-2x"></i> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding curve-divider curve-divider-top"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white">Start Your Journey</h2> <p class="section-subtitle animate-on-scroll text-white-50">Ready to explore the world? Get in touch with our travel experts</p> </div> </div> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="contact-form animate-on-scroll"> <form id="contactForm"> <div class="row"> <div class="col-md-6 mb-3"> <input type="text" class="form-control form-control-custom" placeholder="Your Name" required> </div> <div class="col-md-6 mb-3"> <input type="email" class="form-control form-control-custom" placeholder="Your Email" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <input type="tel" class="form-control form-control-custom" placeholder="Phone Number"> </div> <div class="col-md-6 mb-3"> <select class="form-control form-control-custom" required> <option value="">Select Destination</option> <option value="santorini">Santorini, Greece</option> <option value="bali">Bali, Indonesia</option> <option value="swiss-alps">Swiss Alps</option> <option value="maldives">Maldives</option> <option value="tokyo">Tokyo, Japan</option> <option value="iceland">Iceland</option> <option value="custom">Custom Destination</option> </select> </div> </div> <div class="mb-3"> <textarea class="form-control form-control-custom" rows="5" placeholder="Tell us about your dream trip..." required></textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-custom btn-primary-custom btn-lg">Plan My Trip</button> </div> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand">Wanderlust</div> <p class="text-muted mb-4">Creating extraordinary travel experiences that inspire wanderlust and create lifelong memories around the globe.</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> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3">Quick Links</h5> <div class="footer-links"> <a href="#home" class="d-block mb-2">Home</a> <a href="#destinations" class="d-block mb-2">Destinations</a> <a href="#services" class="d-block mb-2">Services</a> <a href="#about" class="d-block mb-2">About</a> <a href="#contact" class="d-block mb-2">Contact</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3">Services</h5> <div class="footer-links"> <a href="#" class="d-block mb-2">Custom Itineraries</a> <a href="#" class="d-block mb-2">Luxury Hotels</a> <a href="#" class="d-block mb-2">Flight Booking</a> <a href="#" class="d-block mb-2">Travel Insurance</a> <a href="#" class="d-block mb-2">Photography Tours</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3">Contact Info</h5> <div class="footer-links"> <p class="mb-2"><i class="fas fa-phone me-2"></i> +1 (555) 123-4567</p> <p class="mb-2"><i class="fas fa-envelope me-2"></i> hello@wanderlust.com</p> <p class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 123 Travel Street, Adventure City, AC 12345</p> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-muted mb-0">© 2024 Wanderlust. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-muted me-3">Privacy Policy</a> <a href="#" class="text-muted">Terms of Service</a> </div> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'975cc428b33cb2b7',t:'MTc1NjMxMDI2My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-color: #2563eb; --secondary-color: #f59e0b; --accent-color: #10b981; --dark-color: #1f2937; --light-color: #f8fafc; --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .navbar-brand { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 2rem; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 4.5rem; font-weight: 800; color: white; margin-bottom: 1.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.5rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; animation: fadeInUp 1s ease-out 0.3s both; } .hero-cta { animation: fadeInUp 1s ease-out 0.6s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 15px 40px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; position: relative; overflow: hidden; } .btn-primary-custom { background: var(--gradient-1); color: white; } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); } /* Floating Elements */ .floating-element { position: absolute; animation: float 6s ease-in-out infinite; } .floating-element:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; } .floating-element:nth-child(2) { top: 60%; right: 15%; animation-delay: 2s; } .floating-element:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 4s; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; position: relative; } .section-subtitle { font-size: 1.2rem; color: #6b7280; margin-bottom: 3rem; } /* Destination Cards */ .destination-card { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); transition: all 0.4s ease; background: white; margin-bottom: 2rem; } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .destination-image { height: 250px; background-size: cover; background-position: center; position: relative; overflow: hidden; } .destination-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(37, 99, 235, 0.8), rgba(245, 158, 11, 0.8)); opacity: 0; transition: opacity 0.3s ease; } .destination-card:hover .destination-image::before { opacity: 1; } .destination-content { padding: 2rem; } .destination-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark-color); } .destination-price { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; } /* Services Section */ .services-section { background: var(--gradient-1); color: white; } .service-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 2.5rem; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; height: 100%; } .service-card:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-5px); } .service-icon { font-size: 3rem; margin-bottom: 1.5rem; color: var(--secondary-color); } /* About Section */ .about-section { background: var(--light-color); } .about-image { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); } .about-stats { background: white; border-radius: 15px; padding: 2rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); margin-top: -50px; position: relative; z-index: 2; } .stat-item { text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); display: block; } .stat-label { color: #6b7280; font-weight: 500; } /* Testimonials */ .testimonials-section { background: var(--gradient-1); } .testimonial-card { background: white; border-radius: 20px; padding: 2.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); margin: 1rem; text-align: center; } .testimonial-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--gradient-1); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; color: white; font-weight: 600; } .testimonial-text { font-style: italic; margin-bottom: 1.5rem; color: #4b5563; } .testimonial-author { font-weight: 600; color: var(--dark-color); } /* Gallery Section */ .gallery-section { background: white; } .gallery-item { border-radius: 15px; overflow: hidden; margin-bottom: 1rem; position: relative; cursor: pointer; transition: all 0.3s ease; } .gallery-item:hover { transform: scale(1.05); } .gallery-image { width: 100%; height: 300px; background-size: cover; background-position: center; } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(37, 99, 235, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } /* Contact Section */ .contact-section { background: linear-gradient(rgba(37, 99, 235, 0.9), rgba(37, 99, 235, 0.9)), url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover; color: white; } .contact-form { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 20px; padding: 3rem; border: 1px solid rgba(255, 255, 255, 0.2); } .form-control-custom { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 15px 20px; color: white; font-size: 1rem; } .form-control-custom::placeholder { color: rgba(255, 255, 255, 0.7); } .form-control-custom:focus { background: rgba(255, 255, 255, 0.2); border-color: var(--secondary-color); box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25); color: white; } /* Footer */ .footer-section { background: var(--dark-color); color: white; padding: 60px 0 30px; } .footer-brand { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; margin-bottom: 1rem; } .footer-links a { color: #9ca3af; text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--secondary-color); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-color); color: white; border-radius: 50%; margin-right: 10px; transition: all 0.3s ease; } .social-links a:hover { background: var(--secondary-color); transform: translateY(-3px); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.6s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.2rem; } .section-title { font-size: 2rem; } .destination-image { height: 200px; } } /* Custom Curves */ .curve-divider { position: relative; } .curve-divider::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: inherit; clip-path: ellipse(100% 100% at 50% 100%); z-index: 1; } .curve-divider-top::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: inherit; clip-path: ellipse(100% 100% at 50% 0%); z-index: 1; }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Counter animation function animateCounters() { const counters = document.querySelectorAll('.counter'); counters.forEach(counter => { const target = parseInt(counter.getAttribute('data-count')); const count = parseInt(counter.innerText); const increment = target / 200; if (count < target) { counter.innerText = Math.ceil(count + increment); setTimeout(() => animateCounters(), 10); } else { counter.innerText = target; } }); } // Intersection Observer for counters const aboutSection = document.querySelector('#about'); const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); counterObserver.unobserve(entry.target); } }); }, { threshold: 0.5 }); if (aboutSection) { counterObserver.observe(aboutSection); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.95)'; } animateOnScroll(); }); // Contact form submission document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); // Show success message const button = this.querySelector('button[type="submit"]'); const originalText = button.textContent; button.textContent = 'Message Sent!'; button.style.background = 'var(--accent-color)'; setTimeout(() => { button.textContent = originalText; button.style.background = ''; this.reset(); }, 3000); }); // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); }); // Gallery item click effect document.querySelectorAll('.gallery-item').forEach(item => { item.addEventListener('click', function() { // Add a subtle click effect this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); }); });
Output Preview
Desktop
Mobile
Fullscreen