Wanderlust Tour Travel About Page | QuickCoder

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 | About Us</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body>

<header id="header">
        <a href="#" class="logo">Wander<span>lust</span></a>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Destinations</a></li>
            <li><a href="#">Tours</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <a href="#" class="btn-book">Book Now</a>
        <div class="menu-toggle" id="mobile-menu"><i class="fas fa-bars"></i></div>
    </header>

<section class="hero">
        <div>
            <h1>Discover Our Journey</h1>
            <p>Crafting unforgettable travel experiences and connecting you to the world's hidden wonders since 2004.</p>
        </div>
    </section>

<div class="stats-wrapper reveal">
        <div class="stat-item">
            <h4 class="counter" data-target="20">0</h4>
            <p>Years Experience</p>
        </div>
        <div class="stat-item">
            <h4 class="counter" data-target="150">0</h4>
            <p>Destinations</p>
        </div>
        <div class="stat-item">
            <h4 class="counter" data-target="50000">0</h4>
            <p>Happy Travelers</p>
        </div>
        <div class="stat-item">
            <h4 class="counter" data-target="1500">0</h4>
            <p>Tours Completed</p>
        </div>
    </div>

<section class="section-padding">
        <div class="about-grid">
            <div class="about-img reveal">
                <img src="https://images.unsplash.com/photo-1528543606781-2f6e6857f318?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Travelers">
            </div>
            <div class="about-text reveal delay-1">
                <h2 class="section-title" >Who We Are</h2>
                <h3>We Make Your Travel Dreams A Reality</h3>
                <p>At Wanderlust, we believe that travel is more than just visiting a place; it's about immersing yourself in culture, discovering new perspectives, and creating memories that last a lifetime.</p>
                <p>Founded by passionate explorers, our agency goes beyond standard itineraries. We curate bespoke experiences tailored to your desires, ensuring every detail is handled with precision and care. Whether you seek thrilling adventures or peaceful retreats, we are your trusted compass.</p>
            </div>
        </div>
    </section>

<section class="section-padding mv-section">
        <h2 class="section-title reveal">Our Purpose</h2>
        <div class="mv-grid">
            <div class="card reveal delay-1">
                <i class="fas fa-bullseye"></i>
                <h3>Our Mission</h3>
                <p>To provide seamless, authentic, and breathtaking travel experiences that connect people with the diverse cultures and natural beauty of our planet.</p>
            </div>
            <div class="card reveal delay-2">
                <i class="fas fa-eye"></i>
                <h3>Our Vision</h3>
                <p>To be the world’s most trusted and innovative travel partner, inspiring global exploration while promoting sustainable and responsible tourism.</p>
            </div>
            <div class="card reveal delay-3">
                <i class="fas fa-heart"></i>
                <h3>Our Values</h3>
                <p>Integrity, Passion, Sustainability, and Customer Delight. We put our travelers first and respect the environments and communities we visit.</p>
            </div>
        </div>
    </section>

<section class="section-padding">
        <h2 class="section-title reveal">Meet Our Experts</h2>
        <div class="team-grid">
            <div class="team-member reveal delay-1">
                <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="CEO">
                <h4>David Carter</h4>
                <p>Founder & CEO</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
            <div class="team-member reveal delay-2">
                <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Travel Planner">
                <h4>Sarah Jenkins</h4>
                <p>Lead Travel Curator</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="team-member reveal delay-3">
                <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="Guide">
                <h4>Michael Chen</h4>
                <p>Expedition Leader</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                    <a href="#"><i class="fab fa-facebook"></i></a>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-grid">
            <div>
                <a href="#" class="footer-logo">Wander<span>lust</span></a>
                <p class="footer-text">Your trusted partner in exploring the world's most beautiful destinations. Adventure awaits!</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div>
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Our Tours</a></li>
                    <li><a href="#">Travel Blog</a></li>
                    <li><a href="#">Contact Support</a></li>
                </ul>
            </div>
            <div>
                <h4>Legal</h4>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Refund Policy</a></li>
                </ul>
            </div>
            <div class="newsletter">
                <h4>Newsletter</h4>
                <p class="footer-text">Subscribe to get exclusive travel deals.</p>
                <input type="email" placeholder="Enter your email">
                <button>Subscribe</button>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 Wanderlust Travel Agency. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

/* --- CSS VARIABLES (Theme Consistency) --- */
        :root {
            --primary: #1a365d;    /* Deep Ocean Blue */
            --secondary: #0bc5ea;  /* Tropical Teal */
            --accent: #ed8936;     /* Sunset Orange */
            --light: #f7fafc;      /* Off-white */
            --dark: #2d3748;       /* Dark Gray */
            --text-gray: #718096;
            --font-heading: 'Poppins', sans-serif;
            --font-body: 'Inter', sans-serif;
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

/* --- RESET & BASE --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: var(--font-body);
            color: var(--dark);
            background-color: var(--light);
            overflow-x: hidden;
            line-height: 1.6;
        }

h1, h2, h3, h4 {
            font-family: var(--font-heading);
            color: var(--primary);
        }

a {
            text-decoration: none;
            color: inherit;
        }

/* --- ANIMATION CLASSES (Triggered by JS) --- */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.3s; }
        .delay-3 { transition-delay: 0.5s; }

/* --- 1. HEADER & NAVIGATION --- */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 20px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            transition: var(--transition);
        }
        header.scrolled {
            background: rgba(26, 54, 93, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 5%;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .logo {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
        }
        .logo span { color: var(--secondary); }
        
        .nav-links {
            display: flex;
            gap: 30px;
            list-style: none;
        }
        .nav-links li a {
            color: #fff;
            font-weight: 500;
            position: relative;
            transition: var(--transition);
        }
        .nav-links li a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0%;
            height: 2px;
            background: var(--secondary);
            transition: var(--transition);
        }
        .nav-links li a:hover::after { width: 100%; }
        
        .btn-book {
            background: var(--accent);
            color: #fff;
            padding: 10px 24px;
            border-radius: 30px;
            font-weight: 600;
            transition: var(--transition);
        }
        .btn-book:hover {
            background: #dd6b20;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(237, 137, 54, 0.4);
        }

.menu-toggle { display: none; color: white; font-size: 1.5rem; cursor: pointer; }

/* --- 2. HERO SECTION --- */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(26, 54, 93, 0.7), rgba(26, 54, 93, 0.7)), url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 0 20px;
        }
        .hero h1 {
            font-size: 4rem;
            color: white;
            margin-bottom: 20px;
            animation: slideDown 1s ease-out;
        }
        .hero p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            animation: fadeIn 1.5s ease-out;
        }

/* --- 3. ABOUT US SECTION --- */
        .section-padding { padding: 100px 5%; }
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
            position: relative;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: var(--secondary);
            margin: 15px auto 0;
            border-radius: 2px;
        }

.about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        .about-img {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .about-img img {
            width: 100%;
            display: block;
            transition: transform 0.5s;
        }
        .about-img:hover img { transform: scale(1.05); }
        .about-text h3 { font-size: 2rem; margin-bottom: 20px; }
        .about-text p { color: var(--text-gray); margin-bottom: 15px; font-size: 1.1rem; }

/* --- 4. MISSION & VISION --- */
        .mv-section { background: var(--primary); color: white; }
        .mv-section .section-title { color: white; }
        .mv-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        .card {
            background: rgba(255, 255, 255, 0.05);
            padding: 40px;
            border-radius: 15px;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(5px);
            transition: var(--transition);
        }
        .card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--secondary);
        }
        .card i {
            font-size: 3rem;
            color: var(--secondary);
            margin-bottom: 20px;
        }
        .card h3 { color: white; margin-bottom: 15px; font-size: 1.5rem; }

/* --- 5. WHY CHOOSE US (Counters) --- */
        .stats-wrapper {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
            background: white;
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-top: -50px;
            position: relative;
            z-index: 10;
        }
        .stat-item h4 {
            font-size: 3rem;
            color: var(--accent);
            margin-bottom: 10px;
        }
        .stat-item p { color: var(--text-gray); font-weight: 500; }

/* --- 6. MEET THE TEAM --- */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        .team-member {
            text-align: center;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: var(--transition);
        }
        .team-member:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(11, 197, 234, 0.15); }
        .team-member img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
            border: 5px solid var(--light);
        }
        .team-member h4 { font-size: 1.2rem; margin-bottom: 5px; }
        .team-member p { color: var(--secondary); font-size: 0.9rem; margin-bottom: 15px; }
        .social-icons a {
            color: var(--text-gray);
            margin: 0 10px;
            transition: var(--transition);
        }
        .social-icons a:hover { color: var(--primary); }

/* --- 7. FOOTER --- */
        footer {
            background: var(--dark);
            color: white;
            padding: 80px 5% 20px;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.5fr;
            gap: 40px;
            margin-bottom: 50px;
        }
        .footer-logo {
            font-size: 2rem;
            font-family: var(--font-heading);
            font-weight: 700;
            margin-bottom: 20px;
            display: inline-block;
        }
        .footer-logo span { color: var(--secondary); }
        .footer-text { color: #a0aec0; margin-bottom: 20px; }
        footer h4 { color: white; margin-bottom: 20px; font-size: 1.2rem; }
        footer ul { list-style: none; }
        footer ul li { margin-bottom: 10px; }
        footer ul li a { color: #a0aec0; transition: var(--transition); }
        footer ul li a:hover { color: var(--secondary); padding-left: 5px; }
        
        .newsletter input {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 5px;
            margin-bottom: 15px;
            outline: none;
        }
        .newsletter button {
            width: 100%;
            padding: 12px;
            background: var(--secondary);
            color: var(--primary);
            border: none;
            font-weight: 700;
            border-radius: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        .newsletter button:hover { background: white; }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: #a0aec0;
            font-size: 0.9rem;
        }

/* --- KEYFRAMES --- */
        @keyframes slideDown {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

/* --- RESPONSIVE DESIGN --- */
        @media (max-width: 992px) {
            .about-grid { grid-template-columns: 1fr; text-align: center; }
            .stats-wrapper { grid-template-columns: 1fr 1fr; margin-top: 30px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .hero h1 { font-size: 3rem; }
        }

@media (max-width: 768px) {
            .nav-links {
                position: absolute;
                top: 100%;
                left: -100%;
                width: 100%;
                background: rgba(26, 54, 93, 0.98);
                flex-direction: column;
                align-items: center;
                padding: 30px 0;
                transition: var(--transition);
            }
            .nav-links.nav-active { left: 0; }
            .menu-toggle { display: block; }
            .btn-book { display: none; }
            .footer-grid { grid-template-columns: 1fr; text-align: center; }
            .stats-wrapper { grid-template-columns: 1fr; }
        }

JavaScript

// 1. Sticky Header Effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// 2. Mobile Menu Toggle
        const mobileMenu = document.getElementById('mobile-menu');
        const navLinks = document.querySelector('.nav-links');
        mobileMenu.addEventListener('click', () => {
            navLinks.classList.toggle('nav-active');
            // Toggle icon between bars and times (X)
            const icon = mobileMenu.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.replace('fa-bars', 'fa-times');
            } else {
                icon.classList.replace('fa-times', 'fa-bars');
            }
        });

// 3. Scroll Reveal Animation (Using Intersection Observer for Performance)
        const revealElements = document.querySelectorAll('.reveal');
        
        const revealCallback = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    // Trigger number counter if the element contains counters
                    if(entry.target.classList.contains('stats-wrapper')) {
                        runCounters();
                    }
                    observer.unobserve(entry.target); // Run once
                }
            });
        };

const revealOptions = {
            threshold: 0.15,
            rootMargin: "0px 0px -50px 0px"
        };

const revealObserver = new IntersectionObserver(revealCallback, revealOptions);
        
        revealElements.forEach(el => {
            revealObserver.observe(el);
        });

// 4. Number Counter Animation Function
        let countersRun = false;
        function runCounters() {
            if(countersRun) return; // Prevent running multiple times
            countersRun = true;
            
            const counters = document.querySelectorAll('.counter');
            const speed = 200; // The lower the slower

counters.forEach(counter => {
                const updateCount = () => {
                    const target = +counter.getAttribute('data-target');
                    const count = +counter.innerText.replace(/\+/g, '');
                    
                    const inc = target / speed;

if (count < target) {
                        counter.innerText = Math.ceil(count + inc) + (target > 100 ? "+" : "");
                        setTimeout(updateCount, 20);
                    } else {
                        counter.innerText = target + "+";
                    }
                };
                updateCount();
            });
        }

Wanderlust Tour Travel About Page Preview

Download Options