Tours and Travels Page
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 Travel - Premium Travel Experiences</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.0.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="hero-bg"></div> <div class="hero-content"> <h1 class="hero-title">Discover Amazing Places</h1> <p class="hero-subtitle">Embark on unforgettable journeys around the world</p> <a href="#destinations" class="hero-btn">Start Your Adventure</a> </div> </section> <!-- About Section --> <section id="about" class="about-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1541410965313-d53b3c16ef17?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> </div> <div class="col-lg-6"> <h2 class="about-tagline">Creating Unforgettable Travel Memories</h2> <p class="lead mb-4">We are passionate about crafting extraordinary travel experiences that go beyond the ordinary. Our team of travel experts curates unique adventures that connect you with the world's most incredible destinations.</p> <p class="mb-4">From pristine beaches to towering mountains, bustling cities to serene wilderness, we believe every journey should be transformative. Our commitment to excellence ensures that every detail of your adventure is perfectly planned.</p> <div class="row"> <div class="col-6"> <h4 class="text-primary">500+</h4> <p>Destinations</p> </div> <div class="col-6"> <h4 class="text-primary">10K+</h4> <p>Happy Travelers</p> </div> </div> </div> </div> </div> </section> <!-- Mission Section --> <section class="mission-section"> <div class="container"> <div class="row text-center"> <div class="col-12"> <h2 class="mission-headline">Our Mission: Connecting Hearts Through Travel</h2> <p class="lead">We believe travel has the power to transform lives, build bridges between cultures, and create lasting memories. Our mission is to make extraordinary travel experiences accessible to everyone, fostering global understanding and personal growth through the joy of discovery. </p> </div> </div> </div> </section> <!-- Vision Section --> <section class="vision-section"> <div class="container"> <div class="row"> <div class="col-12 text-center"> <h2 class="typewriter">Inspiring Global Adventures</h2> <p class="lead">Our vision is to become the world's most trusted travel companion, inspiring millions to explore, discover, and connect with the beauty of our planet while promoting sustainable and responsible tourism.</p> <div class="vision-images"> <div class="vision-img"> <img src="https://images.unsplash.com/photo-1473625247510-8ceb1760943f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDV8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="vision-img"> <img src="https://images.unsplash.com/photo-1541410965313-d53b3c16ef17?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="vision-img"> <img src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDl8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> </div> </div> </div> </div> </section> <!-- Features Section --> <section class="features-section"> <div class="container"> <div class="row text-center mb-5"> <div class="col-12"> <h2 class="display-4 fw-bold text-white mb-3">Why Choose Us</h2> <p class="lead text-white">Experience the difference with our premium travel services</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="glass-card"> <i class="fas fa-globe-americas glass-icon"></i> <h4>Global Network</h4> <p>Access to exclusive destinations and local experiences worldwide through our extensive partner network.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="glass-card"> <i class="fas fa-concierge-bell glass-icon"></i> <h4>24/7 Support</h4> <p>Round-the-clock assistance from our dedicated travel experts to ensure your journey is seamless.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="glass-card"> <i class="fas fa-shield-alt glass-icon"></i> <h4>Safe & Secure</h4> <p>Your safety is our priority with comprehensive insurance coverage and verified accommodations.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="glass-card"> <i class="fas fa-heart glass-icon"></i> <h4>Personalized</h4> <p>Tailored itineraries designed specifically for your preferences and travel style.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="glass-card"> <i class="fas fa-leaf glass-icon"></i> <h4>Eco-Friendly</h4> <p>Sustainable travel options that protect the environment and support local communities.</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="glass-card"> <i class="fas fa-star glass-icon"></i> <h4>Premium Quality</h4> <p>Luxury accommodations and exclusive experiences that exceed your expectations.</p> </div> </div> </div> </div> </section> <!-- Contact Form Section --> <section id="contact" class="form-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="form-container"> <div class="text-center mb-4"> <h2 class="display-4 fw-bold mb-3">Start Your Journey</h2> <p class="lead">Let us help you plan your next adventure</p> </div> <form> <div class="row"> <div class="col-md-6 mb-3"> <input type="text" class="form-control" placeholder="Your Name" required> </div> <div class="col-md-6 mb-3"> <input type="email" class="form-control" placeholder="Your Email" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <input type="tel" class="form-control" placeholder="Phone Number"> </div> <div class="col-md-6 mb-3"> <select class="form-control"> <option>Select Destination Type</option> <option>Beach & Islands</option> <option>Mountains & Adventure</option> <option>Cities & Culture</option> <option>Desert & Safari</option> </select> </div> </div> <div class="mb-3"> <textarea class="form-control" rows="5" placeholder="Tell us about your dream trip..."></textarea> </div> <div class="text-center"> <button type="submit" class="btn btn-warning btn-lg px-5">Plan My Trip</button> </div> </form> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section class="gallery-section"> <div class="container"> <div class="row text-center mb-5"> <div class="col-12"> <h2 class="display-4 fw-bold mb-3">Travel Gallery</h2> <p class="lead">Moments captured from around the world</p> </div> </div> <div class="row"> <div class="col-12"> <div class="gallery-slider"> <div class="gallery-slide active"> <img src="https://images.unsplash.com/photo-1494783367193-149034c05e8f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTJ8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="gallery-slide"> <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> <div class="gallery-slide"> <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTN8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D" alt=""> </div> </div> </div> </div> </div> </section> <!-- Counter Section --> <section class="counter-section"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="counter-item"> <div class="counter-number" data-count="500">0</div> <div class="counter-label">Destinations</div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="counter-item"> <div class="counter-number" data-count="10000">0</div> <div class="counter-label">Happy Travelers</div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="counter-item"> <div class="counter-number" data-count="50">0</div> <div class="counter-label">Countries</div> </div> </div> <div class="col-lg-3 col-md-6"> <div class="counter-item"> <div class="counter-number" data-count="15">0</div> <div class="counter-label">Years Experience</div> </div> </div> </div> </div> </section> <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:'9772842970e77f40',t:'MTc1NjUzODMyOC4wMDAwMDA='};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
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(45deg, #667eea54 0%, #764ba270 100%); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1682685797208-c741d58c2eff?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxzZWFyY2h8NDF8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D') center/cover; animation: heroFloat 20s ease-in-out infinite; } @keyframes heroFloat { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(2deg); } } .hero-content { text-align: center; color: white; z-index: 2; position: relative; } .hero-title { font-size: 4rem; font-weight: 700; margin-bottom: 1rem; animation: slideInUp 1s ease-out; } .hero-subtitle { font-size: 1.5rem; margin-bottom: 2rem; animation: slideInUp 1s ease-out 0.3s both; } .hero-btn { padding: 15px 40px; font-size: 1.2rem; border: none; border-radius: 50px; background: linear-gradient(45deg, #ff6b6b, #feca57); color: white; text-decoration: none; display: inline-block; transition: all 0.3s ease; animation: slideInUp 1s ease-out 0.6s both; } .hero-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); color: white; } @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* About Section */ .about-section { padding: 100px 0; background: rgba(255, 255, 255, 0.141); } .about-image { border-radius: 20px; /* overflow: hidden; */ width: 100%; height: 100%; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); background: url('https://images.unsplash.com/photo-1541410965313-d53b3c16ef17?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDJ8fHRyYXZlbHxlbnwwfHwwfHx8MA%3D%3D') center/cover; } .about-tagline { font-size: 3rem; font-weight: 700; color: #333; margin-bottom: 2rem; line-height: 1.2; } /* Mission Section */ .mission-section { padding: 100px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .mission-headline { font-size: 2.5rem; font-weight: 600; margin-bottom: 2rem; } /* Vision Section */ .vision-section { padding: 100px 0; background: #f8f9fa; } .typewriter { font-size: 2.5rem; font-weight: 600; color: #333; margin-bottom: 2rem; overflow: hidden; border-right: 3px solid #667eea; white-space: nowrap; animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #667eea; } } .vision-images { display: flex; gap: 20px; margin-top: 3rem; } .vision-img { flex: 1; height: 200px; border-radius: 15px; overflow: hidden; animation: slideImages 8s infinite; } .vision-img:nth-child(2) { animation-delay: 2s; } .vision-img:nth-child(3) { animation-delay: 4s; } @keyframes slideImages { 0%, 25% { transform: translateX(0); opacity: 1; } 50%, 75% { transform: translateX(20px); opacity: 0.7; } 100% { transform: translateX(0); opacity: 1; } } /* Features Section */ .features-section { padding: 100px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; } .glass-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 2rem; text-align: center; color: white; transition: all 0.3s ease; margin-bottom: 2rem; } .glass-card:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-5px); } .glass-icon { font-size: 3rem; margin-bottom: 1rem; color: #feca57; } /* Form Section */ .form-section { padding: 100px 0; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600"><defs><linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23667eea"/><stop offset="100%" stop-color="%23764ba2"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23bg)"/><circle cx="200" cy="150" r="100" fill="rgba(255,255,255,0.1)"/><circle cx="800" cy="400" r="150" fill="rgba(255,255,255,0.05)"/></svg>') center/cover; color: white; } .form-container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 3rem; border: 1px solid rgba(255, 255, 255, 0.2); } .form-control { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: white; border-radius: 10px; padding: 12px 15px; } .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .form-control:focus { background: rgba(255, 255, 255, 0.2); border-color: #feca57; color: white; box-shadow: 0 0 0 0.2rem rgba(254, 202, 87, 0.25); } /* Gallery Section */ .gallery-section { padding: 100px 0; background: #f8f9fa; } .gallery-slider { position: relative; overflow: hidden; /* width: 100vw; */ border-radius: 20px; height: 400px; } .gallery-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .gallery-slide.active { opacity: 1; } .gallery-slide img { width: 100%; height: 100%; object-fit: cover; } /* Counter Section */ .counter-section { padding: 100px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .counter-item { text-align: center; padding: 2rem; border-radius: 15px; transition: all 0.3s ease; cursor: pointer; } .counter-item:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.05); } .counter-number { font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; color: #feca57; } .counter-label { font-size: 1.2rem; font-weight: 500; } /* Responsive */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.2rem; } .about-tagline { font-size: 2rem; } .typewriter { font-size: 1.8rem; } .vision-images { flex-direction: column; } .scroll-images { bottom: 50px; } .scroll-image { width: 60px; height: 60px; } }
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 cards on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate'); } }); }, observerOptions); document.querySelectorAll('.travel-card').forEach(card => { observer.observe(card); }); // Gallery slider let currentSlide = 0; const slides = document.querySelectorAll('.gallery-slide'); const totalSlides = slides.length; function showSlide(index) { slides.forEach(slide => slide.classList.remove('active')); slides[index].classList.add('active'); } function nextSlide() { currentSlide = (currentSlide + 1) % totalSlides; showSlide(currentSlide); } setInterval(nextSlide, 4000); // Counter animation function animateCounter(element, target) { let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } element.textContent = Math.floor(current).toLocaleString(); }, 20); } const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; const target = parseInt(counter.getAttribute('data-count')); animateCounter(counter, target); counterObserver.unobserve(counter); } }); }, { threshold: 0.5 }); document.querySelectorAll('.counter-number').forEach(counter => { counterObserver.observe(counter); }); // Navbar background on scroll window.addEventListener('scroll', () => { const navbar = document.querySelector('.navbar'); if (window.scrollY > 100) { navbar.style.background = 'rgba(255,255,255,0.98)'; } else { navbar.style.background = 'rgba(255,255,255,0.95)'; } }); // Form submission document.querySelector('form').addEventListener('submit', function (e) { e.preventDefault(); alert('Thank you for your interest! We will contact you soon to plan your perfect trip.'); }); // Typewriter effect restart function restartTypewriter() { const typewriter = document.querySelector('.typewriter'); typewriter.style.animation = 'none'; setTimeout(() => { typewriter.style.animation = 'typing 4s steps(40, end), blink-caret 0.75s step-end infinite'; }, 100); } const typewriterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { restartTypewriter(); } }); }, { threshold: 0.5 }); const typewriterElement = document.querySelector('.typewriter'); if (typewriterElement) { typewriterObserver.observe(typewriterElement); }
Output Preview
Desktop
Mobile
Fullscreen