Tour Travel About 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>Travel Company About Section</title> <!-- AOS Animation Library --> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> </head> <body class="m-0 p-0 bg-gradient-to-br from-blue-50 to-yellow-50"> <!-- About Section --> <section class="w-screen h-screen flex flex-col md:flex-row items-center justify-center px-6 md:px-20"> <!-- Left Content --> <div class="w-full md:w-1/2 md:pr-12 text-center md:text-left space-y-6" data-aos="fade-right"> <h2 class="text-4xl md:text-5xl font-extrabold text-blue-900 leading-snug">Discover the World With Us</h2> <p class="text-gray-700 text-base md:text-lg leading-relaxed max-w-xl mx-auto md:mx-0"> We are your trusted travel partners, helping you explore breathtaking destinations, unique cultures, and unforgettable adventures. From exotic beaches to snow-capped mountains, we make your travel dreams come true. </p> <!-- Counters --> <div class="flex justify-center md:justify-start gap-8 pt-4"> <div class="text-center"> <h3 class="text-3xl md:text-4xl font-bold text-blue-900 counter">10+</h3> <p class="text-gray-600 text-sm md:text-base">Years Experience</p> </div> <div class="text-center"> <h3 class="text-3xl md:text-4xl font-bold text-blue-900 counter">5000+</h3> <p class="text-gray-600 text-sm md:text-base">Happy Clients</p> </div> <div class="text-center"> <h3 class="text-3xl md:text-4xl font-bold text-blue-900 counter">100+</h3> <p class="text-gray-600 text-sm md:text-base">Destinations</p> </div> </div> <button class="about-btn px-8 py-3 bg-blue-900 text-white font-semibold rounded-xl mt-6"> Start Your Journey </button> </div> <!-- Right Image Collage --> <div class="relative w-full md:w-1/2 grid grid-cols-2 gap-4 h-[60vh] md:h-[80vh] mt-10 md:mt-0" data-aos="fade-left"> <div class="img-box row-span-2 overflow-hidden rounded-2xl shadow-lg"> <img src="https://images.pexels.com/photos/21014/pexels-photo.jpg" alt="Mountain Adventure" class="w-full h-full object-cover"> </div> <div class="img-box overflow-hidden rounded-2xl shadow-lg"> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" alt="Beach Paradise" class="w-full h-full object-cover"> </div> <div class="img-box overflow-hidden rounded-2xl shadow-lg"> <img src="https://images.pexels.com/photos/338504/pexels-photo-338504.jpeg" alt="City Lights" class="w-full h-full object-cover"> </div> <div class="img-box col-span-2 overflow-hidden rounded-2xl shadow-lg"> <img src="https://images.pexels.com/photos/346885/pexels-photo-346885.jpeg" alt="Travel Journey" class="w-full h-full object-cover"> </div> </div> </section> </body> </html>
CSS
body { font-family: 'Poppins', sans-serif; } .about-btn { transition: all 0.4s ease; } .about-btn:hover { transform: scale(1.08) translateY(-3px); box-shadow: 0px 8px 20px rgba(0,0,0,0.2); } .img-box img { transition: transform 0.6s ease, box-shadow 0.3s ease; } .img-box:hover img { transform: scale(1.12); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
JavaScript
AOS.init({ duration: 1200, once: true, offset: 100 }); // Counter Animation const counters = document.querySelectorAll('.counter'); counters.forEach(counter => { const updateCount = () => { const target = +counter.innerText.replace(/\D/g,''); const count = +counter.getAttribute('data-count') || 0; const speed = 100; if(count < target) { counter.setAttribute('data-count', count + 1); counter.innerText = (count + 1) + "+"; setTimeout(updateCount, speed); } }; updateCount(); });
Output Preview
Desktop
Mobile
Fullscreen