Okay, let's enhance the site further with actual images (using a dynamic placeholder service for variety) and add some subtle CSS animations to make it more engaging. Awesome Travel Agency - Your Adventure Starts Here!

Awesome Travel Agency

Welcome to Your Next Adventure!

Discover breathtaking destinations and create unforgettable memories. Let us plan your perfect getaway.

Explore Destinations

Featured Destinations

Get inspired by some of our most popular travel spots.

Paris, France

Romance, art, and iconic landmarks await in the City of Lights.

Tokyo, Japan

Experience the electrifying blend of ancient tradition and futuristic innovation.

Rome, Italy

Step back in time and explore the heart of the ancient Roman Empire.

Santorini, Greece

Witness stunning sunsets over the Aegean Sea from whitewashed villages.

Bali, Indonesia

Find tranquility amidst lush landscapes, vibrant culture, and stunning beaches.

New York, USA

Experience the energy and diversity of the city that never sleeps.

Our Curated Packages

Find the perfect travel package tailored for your interests and budget.

Example Package: European Highlights (10 Days) - Visit Paris, Rome, and Barcelona. Includes flights, accommodation, and guided tours. Starting from $2500.

Inquire Now

Example Package: Tropical Paradise Escape (7 Days) - Relax on the beaches of Bali. Includes luxury resort stay, spa treatments, and local excursions. Starting from $1800.

Learn More

Get In Touch

Ready to book your dream vacation or have questions? Contact our travel experts today!

/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* Smooth scrolling for anchor links */ } body { font-family: 'Poppins', sans-serif; line-height: 1.7; color: #444; background-color: #fdfdfd; /* Slightly off-white */ overflow-x: hidden; /* Prevent horizontal scrollbars caused by animations */ } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } h1, h2, h3 { font-weight: 600; color: #333; margin-bottom: 0.8em; } h2 { font-size: 2.2rem; /* Slightly larger */ text-align: center; margin-bottom: 1.5em; position: relative; padding-bottom: 15px; /* Increased padding */ } h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70px; /* Wider underline */ height: 4px; /* Thicker underline */ background: linear-gradient(90deg, #007bff, #00aaff); /* Gradient underline */ border-radius: 2px; } p { margin-bottom: 1em; } a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #0056b3; text-decoration: none; /* Remove underline on hover for cleaner look */ } img { max-width: 100%; height: auto; display: block; border-radius: 8px; /* Add subtle rounding to all images */ } /* Header */ header { background-color: rgba(52, 58, 64, 0.95); /* Slightly transparent dark */ color: #fff; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.15); backdrop-filter: blur(5px); /* Frosted glass effect */ } header .container { display: flex; justify-content: space-between; align-items: center; } header h1 { margin: 0; font-size: 1.8rem; font-weight: 700; color: #fff; } /* Logo Animation */ .logo-animation { animation: colorChange 5s infinite alternate; } @keyframes colorChange { 0% { color: #fff; } 50% { color: #00aaff; } 100% { color: #fff; } } nav ul { list-style: none; } nav ul li { display: inline; margin-left: 25px; } nav a { color: #f8f9fa; font-weight: 400; padding: 5px 0; position: relative; transition: color 0.3s ease; } nav a::after { /* Underline effect for nav links */ content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: #00aaff; transition: width 0.3s ease; } nav a:hover { color: #fff; } nav a:hover::after { width: 100%; } /* Hero Section */ .hero { /* Use a real image URL or a better placeholder service */ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://picsum.photos/seed/travelbg/1500/700') no-repeat center center/cover; color: #fff; text-align: center; padding: 100px 0; /* More padding */ min-height: 60vh; /* Ensure it takes significant height */ display: flex; align-items: center; justify-content: center; } .hero-content { max-width: 800px; } .hero h2 { font-size: 3.2rem; /* Larger hero heading */ margin-bottom: 0.5em; color: #fff; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .hero h2::after { background: linear-gradient(90deg, #fff, #eee); /* White gradient underline */ } .hero p { font-size: 1.3rem; /* Larger hero text */ margin-bottom: 2em; font-weight: 300; } .hero .cta-button { /* Style hero button differently */ background-color: #00aaff; padding: 15px 35px; font-size: 1.1rem; } .hero .cta-button:hover { background-color: #007bff; transform: translateY(-3px) scale(1.05); /* Add scale effect */ } /* Sections General Styling */ section { padding: 80px 0; /* Increased padding */ } .alternate-bg { background-color: #f0f4f8; /* Lighter blueish grey */ } /* Destinations Section */ #destinations p { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 3em; /* More space */ color: #555; font-size: 1.1rem; } .destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Slightly larger min size */ gap: 35px; /* Increased gap */ } .destination-item { background-color: #fff; border-radius: 10px; /* More rounded corners */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; /* Align text left */ opacity: 0; /* Start hidden for animation */ transform: translateY(20px); /* Start slightly lower */ } /* Animation applied via JS */ .destination-item.visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .destination-item:hover { transform: translateY(-10px) scale(1.02); /* Enhanced hover effect */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .destination-item img { width: 100%; height: 220px; /* Increased height */ object-fit: cover; margin-bottom: 0; border-radius: 10px 10px 0 0; /* Match container rounding */ transition: transform 0.4s ease; } .destination-item:hover img { transform: scale(1.05); /* Zoom image on hover */ } .destination-item h3 { margin: 1.2em 20px 0.5em; /* Add horizontal padding */ font-size: 1.4rem; color: #0056b3; } .destination-item p { padding: 0 20px 25px; /* Add padding */ font-size: 0.95rem; color: #666; line-height: 1.6; } /* Packages Section */ #packages p { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 2em; color: #555; font-size: 1.1rem; } .package-preview { background-color: #ffffff; padding: 25px 30px; /* More padding */ border-radius: 8px; text-align: center; margin-top: 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; /* For animation */ transform: translateY(20px); } .package-preview.visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .package-preview:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .package-preview p { margin-bottom: 1em; font-size: 1.05rem; color: #333; } .package-preview p strong { color: #007bff; display: block; margin-bottom: 5px; font-size: 1.1rem; } .cta-button { display: inline-block; background: linear-gradient(90deg, #28a745, #218838); /* Green gradient */ color: white; padding: 12px 28px; /* Slightly more padding */ border: none; border-radius: 50px; /* Pill shape */ cursor: pointer; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3); margin-top: 15px; } .cta-button:hover { background: linear-gradient(90deg, #218838, #1e7e34); /* Darker green gradient */ text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4); } /* Contact Section */ #contact p { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 2.5em; color: #555; font-size: 1.1rem; } #contact form { max-width: 650px; /* Wider form */ margin: 20px auto 0; background-color: #fff; padding: 40px; /* More padding */ border-radius: 10px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); opacity: 0; /* For animation */ transform: translateY(20px); } #contact form.visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.6s ease-out 0.2s; /* Add delay */ } .form-group { margin-bottom: 25px; /* More space */ } #contact form label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; font-size: 0.95rem; } #contact form input[type="text"], #contact form input[type="email"], #contact form textarea { width: 100%; padding: 15px; /* More padding */ border: 1px solid #ccc; border-radius: 5px; font-family: inherit; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } #contact form input[type="text"]:focus, #contact form input[type="email"]:focus, #contact form textarea:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); outline: none; } #contact form textarea { resize: vertical; min-height: 120px; /* Minimum height */ } #contact form button.cta-button { display: block; width: 100%; background: linear-gradient(90deg, #007bff, #0056b3); /* Blue gradient */ box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); padding: 15px 28px; /* Match padding */ } #contact form button.cta-button:hover { background: linear-gradient(90deg, #0056b3, #004085); /* Darker blue */ box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4); } /* Footer */ footer { text-align: center; padding: 2.5rem 0; /* More padding */ margin-top: 60px; background-color: #343a40; color: #adb5bd; font-size: 0.9rem; } footer p { margin: 0; } /* Basic Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { opacity: 0; /* Start hidden */ animation: fadeInUp 0.8s ease-out forwards; } /* Animation Delays */ .delay-1 { animation-delay: 0.2s; } .delay-2 { animation-delay: 0.4s; } .delay-3 { animation-delay: 0.6s; } /* Scroll Animation Trigger Class (added by JS) */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } /* Add delays for staggered effect on scroll */ .destination-item.visible:nth-child(1) { transition-delay: 0.1s; } .destination-item.visible:nth-child(2) { transition-delay: 0.2s; } .destination-item.visible:nth-child(3) { transition-delay: 0.3s; } .destination-item.visible:nth-child(4) { transition-delay: 0.1s; } /* Reset delay for next row */ .destination-item.visible:nth-child(5) { transition-delay: 0.2s; } .destination-item.visible:nth-child(6) { transition-delay: 0.3s; } .package-preview.visible:nth-of-type(1) { transition-delay: 0.1s; } .package-preview.visible:nth-of-type(2) { transition-delay: 0.3s; } // Simple script for scroll animations const scrollElements = document.querySelectorAll('.animate-on-scroll'); const elementInView = (el, dividend = 1) => { const elementTop = el.getBoundingClientRect().top; // Adjust the trigger point slightly higher (e.g., 100px before it's fully in view) return ( elementTop <= (window.innerHeight || document.documentElement.clientHeight) - 100 ); }; const displayScrollElement = (element) => { element.classList.add('visible'); }; const hideScrollElement = (element) => { // Optional: remove class if you want animation to re-trigger on scroll up // element.classList.remove('visible'); }; const handleScrollAnimation = () => { scrollElements.forEach((el) => { if (elementInView(el, 1.25)) { displayScrollElement(el); } else { // Optional: hide element when scrolled out of view // hideScrollElement(el); } }) } // Initial check in case elements are already in view handleScrollAnimation(); window.addEventListener('scroll', () => { handleScrollAnimation(); }); // Smooth scroll for navigation links (alternative to CSS scroll-behavior) document.querySelectorAll('nav a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if(targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); Here's what's added: 1. **Real Images:** Placeholders are replaced with `picsum.photos` URLs, providing varied, realistic images on each load (using seeds for some consistency during development). Remember to replace these with your actual, optimized images for a real website. 2. **CSS Animations:** * **Hero Text:** Added a `fade-in-up` animation to the hero section text and button. * **Scroll Animations:** Elements like destination cards, package previews, and the contact form now have a class `.animate-on-scroll`. They start hidden (`opacity: 0`, `transform: translateY(20px)`) and fade/slide in when they enter the viewport. * **Hover Effects:** Enhanced hover effects on destination cards (lift, scale, shadow) and buttons (gradient change, lift, shadow). * **Nav Links:** Added an underline animation on hover for navigation links. * **Logo:** A subtle color-changing animation on the main heading. 3. **JavaScript (`script.js`):** A simple script is added to detect when elements with the `.animate-on-scroll` class enter the viewport and adds a `.visible` class to trigger the CSS animation. It also includes smooth scrolling for navigation links as an alternative/enhancement to the CSS `scroll-behavior`. 4. **CSS Refinements:** Improved gradients, shadows, spacing, typography, and added pill-shaped buttons for a modern look. Added a subtle background blur to the sticky header. Now the website should feel much more dynamic and visually appealing. Check the preview!