Adventure Tours and Travels Hero Section
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 - Premium Travel Experiences</title> </head> <body class="bg-gray-50"> <!-- Navigation --> <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-20 bg-white/10 border-b border-white/20"> <div class="container mx-auto px-6 py-4"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-pink-500 rounded-full flex items-center justify-center"> <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20"> <path d="M10 2L3 7v11a1 1 0 001 1h3v-8h6v8h3a1 1 0 001-1V7l-7-5z"/> </svg> </div> <span class="text-2xl font-bold text-white" style="font-family: 'Dancing Script', cursive;">Wanderlust Adventures</span> </div> <div class="hidden md:flex items-center space-x-8"> <a href="#" class="text-white/90 hover:text-white font-medium transition-colors">Destinations</a> <a href="#" class="text-white/90 hover:text-white font-medium transition-colors">Tours</a> <a href="#" class="text-white/90 hover:text-white font-medium transition-colors">About</a> <a href="#" class="text-white/90 hover:text-white font-medium transition-colors">Contact</a> <button class="bg-white/20 backdrop-blur-sm text-white px-6 py-2 rounded-full font-semibold hover:bg-white/30 transition-all"> Book Now </button> </div> </div> </div> </nav> <!-- Hero Section --> <section class="travel-hero min-h-screen flex items-center pt-20 relative"> <!-- Floating Destination Cards --> <div class="absolute inset-0 pointer-events-none"> <div class="destination-card absolute top-28 right-16 w-64 h-44 rounded-2xl p-6 hidden lg:block"> <div class="flex items-start justify-between mb-4"> <div class="feature-badge px-3 py-1 rounded-full text-xs font-bold text-orange-600"> HOT DEAL </div> <div class="text-3xl">?️</div> </div> <h4 class="text-white font-bold text-lg mb-2">Bali Paradise</h4> <p class="text-white/80 text-sm mb-3">7 Days • All Inclusive</p> <p class="text-white font-bold text-xl">$899</p> </div> <div class="destination-card absolute top-1/2 right-32 w-64 h-44 rounded-2xl p-6 hidden xl:block"> <div class="flex items-start justify-between mb-4"> <div class="feature-badge px-3 py-1 rounded-full text-xs font-bold text-orange-600"> ADVENTURE </div> <div class="text-3xl">?️</div> </div> <h4 class="text-white font-bold text-lg mb-2">Swiss Alps</h4> <p class="text-white/80 text-sm mb-3">10 Days • Hiking</p> <p class="text-white font-bold text-xl">$1,599</p> </div> <div class="destination-card absolute bottom-48 right-20 w-64 h-44 rounded-2xl p-6 hidden xl:block"> <div class="flex items-start justify-between mb-4"> <div class="feature-badge px-3 py-1 rounded-full text-xs font-bold text-orange-600"> EXOTIC </div> <div class="text-3xl">?️</div> </div> <h4 class="text-white font-bold text-lg mb-2">Maldives Escape</h4> <p class="text-white/80 text-sm mb-3">6 Days • Resort</p> <p class="text-white font-bold text-xl">$2,199</p> </div> </div> <div class="container mx-auto px-6 relative z-10"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <!-- Left Content --> <div class="text-white"> <div class="slide-left-animation delay-100 mb-6"> <div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-orange-400/20 to-pink-500/20 border border-orange-400/30 mb-6"> <span class="w-2 h-2 bg-orange-400 rounded-full mr-3 animate-pulse"></span> <span class="text-orange-300 font-semibold text-sm">Explore • Dream • Discover</span> </div> </div> <h1 class="slide-left-animation delay-200 text-5xl md:text-7xl font-bold leading-tight mb-8"> <span class="travel-title block text-6xl md:text-8xl mb-2">Adventure</span> <span class="block">Awaits You</span> <span class="block text-4xl md:text-5xl bg-gradient-to-r from-orange-400 to-pink-500 bg-clip-text text-transparent"> Everywhere </span> </h1> <p class="slide-left-animation delay-300 text-xl text-white/90 mb-10 leading-relaxed max-w-2xl"> Embark on extraordinary journeys to the world's most breathtaking destinations. From tropical paradises to cultural wonders, create memories that last a lifetime. </p> <div class="slide-left-animation delay-400 flex flex-col sm:flex-row gap-6 mb-16"> <button class="adventure-button text-white px-10 py-5 rounded-full font-bold text-lg"> Start Your Journey </button> <button class="backdrop-blur-sm bg-white/20 border-2 border-white/30 text-white hover:bg-white/30 px-10 py-5 rounded-full font-bold text-lg transition-all"> View Destinations </button> </div> <!-- Travel Stats --> <div class="slide-left-animation delay-500 grid grid-cols-3 gap-8"> <div class="text-center"> <div class="stats-counter text-4xl md:text-5xl font-bold mb-3">150+</div> <div class="text-white/80 font-medium">Destinations</div> </div> <div class="text-center"> <div class="stats-counter text-4xl md:text-5xl font-bold mb-3">50K+</div> <div class="text-white/80 font-medium">Happy Travelers</div> </div> <div class="text-center"> <div class="stats-counter text-4xl md:text-5xl font-bold mb-3">15+</div> <div class="text-white/80 font-medium">Years Experience</div> </div> </div> </div> <!-- Right Content - Booking Form --> <div class="slide-right-animation delay-300"> <div class="booking-card rounded-3xl p-8 sm:p-10"> <div class="text-center mb-8"> <h3 class="text-3xl font-bold text-gray-800 mb-3">Plan Your Perfect Trip</h3> <p class="text-gray-600">Tell us your dream destination and we'll make it happen</p> </div> <form class="space-y-6"> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Destination</label> <select class="travel-input w-full px-5 py-4 rounded-xl outline-none"> <option>Choose destination</option> <option> Bali, Indonesia</option> <option> Paris, France</option> <option> Swiss Alps</option> <option> Maldives</option> <option> Rome, Italy</option> <option> Tokyo, Japan</option> </select> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Trip Type</label> <select class="travel-input w-full px-5 py-4 rounded-xl outline-none"> <option>Adventure</option> <option>Relaxation</option> <option>Cultural</option> <option>Romantic</option> <option>Family Fun</option> <option>Business</option> </select> </div> </div> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Departure Date</label> <input type="date" class="travel-input w-full px-5 py-4 rounded-xl outline-none"> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Return Date</label> <input type="date" class="travel-input w-full px-5 py-4 rounded-xl outline-none"> </div> </div> <div class="grid grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Travelers</label> <select class="travel-input w-full px-5 py-4 rounded-xl outline-none"> <option>1 Person</option> <option>2 People</option> <option>3-5 People</option> <option>6+ People</option> </select> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Budget</label> <select class="travel-input w-full px-5 py-4 rounded-xl outline-none"> <option>$500 - $1,000</option> <option>$1,000 - $2,500</option> <option>$2,500 - $5,000</option> <option>$5,000+</option> </select> </div> </div> <button type="submit" class="w-full bg-gradient-to-r from-orange-500 to-pink-500 text-white py-5 rounded-xl font-bold text-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105"> Find My Perfect Trip </button> </form> <!-- Quick Features --> <div class="mt-10 pt-8 border-t border-gray-200"> <div class="grid grid-cols-3 gap-6 text-center"> <div> <div class="text-3xl font-bold text-orange-500 mb-2">24/7</div> <div class="text-xs text-gray-600 font-medium">Support</div> </div> <div> <div class="text-3xl font-bold text-pink-500 mb-2">100%</div> <div class="text-xs text-gray-600 font-medium">Secure</div> </div> <div> <div class="text-3xl font-bold text-purple-500 mb-2">FREE</div> <div class="text-xs text-gray-600 font-medium">Cancellation</div> </div> </div> </div> </div> </div> </div> </div> </section> <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:'97716c6143248fb6',t:'MTc1NjUyNjg2OS4wMDAwMDA='};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
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Dancing+Script:wght@400;500;600;700&display=swap'); * { font-family: 'Montserrat', sans-serif; } .travel-hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%); background-size: 400% 400%; animation: gradientFlow 20s ease infinite; position: relative; overflow: hidden; } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .travel-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="clouds" width="200" height="200" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="20" fill="rgba(255,255,255,0.1)"/><circle cx="150" cy="100" r="15" fill="rgba(255,255,255,0.08)"/><circle cx="100" cy="150" r="25" fill="rgba(255,255,255,0.06)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23clouds)"/></svg>'); opacity: 0.3; } .destination-card { animation: floatDestination 8s ease-in-out infinite; backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .destination-card:nth-child(2) { animation-delay: -2s; } .destination-card:nth-child(3) { animation-delay: -4s; } .destination-card:nth-child(4) { animation-delay: -6s; } @keyframes floatDestination { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-15px) rotate(1deg); } 50% { transform: translateY(-25px) rotate(-1deg); } 75% { transform: translateY(-10px) rotate(0.5deg); } } .destination-card:hover { transform: translateY(-15px) scale(1.05); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); } .slide-in-animation { animation: slideInFade 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateY(60px); } .slide-left-animation { animation: slideLeftFade 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateX(-60px); } .slide-right-animation { animation: slideRightFade 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateX(60px); } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } @keyframes slideInFade { to { opacity: 1; transform: translateY(0); } } @keyframes slideLeftFade { to { opacity: 1; transform: translateX(0); } } @keyframes slideRightFade { to { opacity: 1; transform: translateX(0); } } .adventure-button { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .adventure-button:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(255, 107, 107, 0.6); } .booking-card { backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1); } .travel-input { background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(255, 255, 255, 0.5); transition: all 0.3s ease; } .travel-input:focus { border-color: #ff6b6b; box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1); background: rgba(255, 255, 255, 1); } .stats-counter { animation: countUpBounce 1.5s ease-out forwards; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes countUpBounce { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 0.8; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } .travel-title { font-family: 'Dancing Script', cursive; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .feature-badge { background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(254, 202, 87, 0.2) 100%); border: 1px solid rgba(255, 107, 107, 0.3); backdrop-filter: blur(10px); } .plane-animation { animation: flyAcross 15s linear infinite; } @keyframes flyAcross { 0% { transform: translateX(-100px) translateY(0px) rotate(0deg); } 25% { transform: translateX(25vw) translateY(-20px) rotate(5deg); } 50% { transform: translateX(50vw) translateY(-10px) rotate(-3deg); } 75% { transform: translateX(75vw) translateY(-30px) rotate(2deg); } 100% { transform: translateX(calc(100vw + 100px)) translateY(0px) rotate(0deg); } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Animation observer const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.animationPlayState = 'running'; } }); }, observerOptions); // Observe animated elements document.querySelectorAll('[class*="animation"], .stats-counter').forEach(el => { observer.observe(el); }); // Form submission with travel-themed feedback document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); const button = this.querySelector('button[type="submit"]'); const originalText = button.textContent; button.innerHTML = ` <div class="flex items-center justify-center"> <span class="animate-spin text-2xl mr-3">?</span> Planning your adventure... </div> `; button.disabled = true; setTimeout(() => { button.innerHTML = ` <div class="flex items-center justify-center"> <span class="text-2xl mr-2">✈️</span> Ready to explore! Check your email </div> `; setTimeout(() => { button.textContent = originalText; button.disabled = false; }, 3000); }, 2200); }); // Enhanced destination card interactions document.querySelectorAll('.destination-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-20px) scale(1.08)'; this.style.boxShadow = '0 30px 60px rgba(0, 0, 0, 0.25)'; }); card.addEventListener('mouseleave', function() { this.style.transform = ''; this.style.boxShadow = ''; }); }); // Parallax effect for floating elements window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const parallax = scrolled * 0.3; document.querySelectorAll('.destination-card').forEach((card, index) => { const speed = 0.2 + (index * 0.05); card.style.transform = `translateY(${parallax * speed}px)`; }); }); // Add travel-themed interactions const destinations = ['?️ Bali', '? Paris', '?️ Alps', '?️ Maldives', '?️ Rome', '? Tokyo']; let currentIndex = 0; setInterval(() => { const badge = document.querySelector('.feature-badge'); if (badge) { badge.style.transform = 'scale(1.1)'; setTimeout(() => { badge.style.transform = 'scale(1)'; }, 200); } }, 3000); });
Output Preview
Desktop
Mobile
Fullscreen