Travel Section 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 Travel - Book Your Dream Tour</title> </head> <body class="overflow-x-hidden"> <!-- Hero Section --> <section class="hero-bg min-h-screen flex items-center justify-center relative"> <div class="absolute inset-0 bg-black/20"></div> <div class="relative z-10 text-center text-white px-4 max-w-6xl mx-auto"> <h1 class="text-5xl md:text-7xl font-bold mb-6 slide-in-left"> Discover Your Next <span class="text-yellow-400">Adventure</span> </h1> <p class="text-xl md:text-2xl mb-8 slide-in-right opacity-90"> Explore breathtaking destinations and create unforgettable memories </p> <button onclick="scrollToBooking()" class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-all duration-300 pulse-glow fade-in-up"> Book Your Dream Tour </button> </div> <!-- Floating Elements --> <div class="absolute top-20 left-10 text-6xl floating">?️</div> <div class="absolute top-40 right-20 text-4xl floating-delayed">?</div> <div class="absolute bottom-40 left-20 text-5xl floating">?️</div> <div class="absolute bottom-20 right-10 text-3xl floating-delayed">?️</div> </section> <!-- Popular Destinations --> <section class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Popular Destinations</h2> <p class="text-xl text-gray-600">Choose from our most loved travel experiences</p> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="destination-card rounded-2xl p-8 text-white card-hover cursor-pointer" onclick="selectDestination('Tropical Paradise')"> <div class="text-6xl mb-4">?️</div> <h3 class="text-2xl font-bold mb-2">Tropical Paradise</h3> <p class="mb-4">Crystal clear waters and pristine beaches</p> <div class="text-2xl font-bold">$1,299</div> </div> <div class="destination-card rounded-2xl p-8 text-white card-hover cursor-pointer" onclick="selectDestination('Mountain Adventure')"> <div class="text-6xl mb-4">⛰️</div> <h3 class="text-2xl font-bold mb-2">Mountain Adventure</h3> <p class="mb-4">Breathtaking peaks and hiking trails</p> <div class="text-2xl font-bold">$899</div> </div> <div class="destination-card rounded-2xl p-8 text-white card-hover cursor-pointer" onclick="selectDestination('City Explorer')"> <div class="text-6xl mb-4">?️</div> <h3 class="text-2xl font-bold mb-2">City Explorer</h3> <p class="mb-4">Urban culture and historic landmarks</p> <div class="text-2xl font-bold">$699</div> </div> </div> </div> </section> <!-- Booking Form Section --> <section id="booking" class="py-20 bg-gradient-to-br from-blue-600 to-purple-700 min-h-screen flex items-center"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> <div class="booking-form rounded-3xl p-8 md:p-12 shadow-2xl"> <div class="text-center mb-8"> <h2 class="text-4xl font-bold text-gray-900 mb-4">Book Your Adventure</h2> <p class="text-xl text-gray-600">Fill in your details and let's plan your perfect trip</p> </div> <form class="space-y-6" onsubmit="handleBooking(event)"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Full Name</label> <input type="text" required class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus" placeholder="Enter your full name"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label> <input type="email" required class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus" placeholder="your@email.com"> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label> <input type="tel" required class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus" placeholder="+1 (555) 123-4567"> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Number of Travelers</label> <select class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus"> <option>1 Person</option> <option>2 People</option> <option>3 People</option> <option>4 People</option> <option>5+ People</option> </select> </div> </div> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Destination</label> <select id="destination-select" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus"> <option>Select Destination</option> <option>Tropical Paradise - $1,299</option> <option>Mountain Adventure - $899</option> <option>City Explorer - $699</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Departure Date</label> <input type="date" required class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus"> </div> </div> <div> <label class="block text-sm font-medium text-gray-700 mb-2">Special Requests</label> <textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus" placeholder="Any special requirements or preferences..."></textarea> </div> <div class="text-center"> <button type="submit" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-12 py-4 rounded-xl text-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg"> Book Now - Get Quote </button> </div> </form> </div> </div> </section> <!-- Success Modal --> <div id="success-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center transform scale-95 transition-transform"> <div class="text-6xl mb-4">?</div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Booking Request Sent!</h3> <p class="text-gray-600 mb-6">Thank you for your interest! Our travel experts will contact you within 24 hours with a personalized quote and itinerary.</p> <button onclick="closeModal()" class="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition-colors"> Close </button> </div> </div> <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:'97105d69477a252e',t:'MTc1NTUwOTEzNy4wMDAwMDA='};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=Poppins:wght@300;400;500;600;700&display=swap'); * { font-family: 'Poppins', sans-serif; } .hero-bg { background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(147, 51, 234, 0.8)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="mountains" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><polygon fill="%23ffffff10" points="0,200 50,100 100,150 150,50 200,120 200,200"/></pattern></defs><rect width="1000" height="1000" fill="url(%23mountains)"/></svg>'); background-size: cover; background-position: center; } .floating { animation: float 6s ease-in-out infinite; } .floating-delayed { animation: float 6s ease-in-out infinite 2s; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .slide-in-left { animation: slideInLeft 1s ease-out; } .slide-in-right { animation: slideInRight 1s ease-out 0.3s both; } .fade-in-up { animation: fadeInUp 1s ease-out 0.6s both; } @keyframes slideInLeft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeInUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pulse-glow { animation: pulseGlow 2s infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); } 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.8); } } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .destination-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .destination-card:nth-child(2) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .destination-card:nth-child(3) { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .booking-form { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } .input-focus { transition: all 0.3s ease; } .input-focus:focus { transform: scale(1.02); box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
JavaScript
function scrollToBooking() { document.getElementById('booking').scrollIntoView({ behavior: 'smooth' }); } function selectDestination(destination) { const select = document.getElementById('destination-select'); const options = select.options; for (let i = 0; i < options.length; i++) { if (options[i].text.includes(destination)) { select.selectedIndex = i; break; } } // Animate selection select.style.transform = 'scale(1.05)'; select.style.boxShadow = '0 0 20px rgba(59, 130, 246, 0.5)'; setTimeout(() => { select.style.transform = 'scale(1)'; select.style.boxShadow = 'none'; }, 300); scrollToBooking(); } function handleBooking(event) { event.preventDefault(); // Show success modal const modal = document.getElementById('success-modal'); modal.classList.remove('hidden'); modal.querySelector('div').style.transform = 'scale(1)'; // Reset form event.target.reset(); } function closeModal() { const modal = document.getElementById('success-modal'); modal.querySelector('div').style.transform = 'scale(0.95)'; setTimeout(() => { modal.classList.add('hidden'); }, 200); } // Add scroll animations window.addEventListener('scroll', () => { const elements = document.querySelectorAll('.card-hover'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); }); // Initialize animations document.addEventListener('DOMContentLoaded', () => { const cards = document.querySelectorAll('.card-hover'); cards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(50px)'; card.style.transition = 'all 0.6s ease'; card.style.transitionDelay = `${index * 0.2}s`; }); });
Output Preview
Desktop
Mobile
Fullscreen