Webleb - UI Elements - Landing Page

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wanderlust Adventures - Explore the World</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #3a86ff;
            --secondary-color: #ff006e;
            --accent-color: #ffbe0b;
            --text-color: #333;
            --bg-color: #f8f9fa;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
        }

header.scrolled {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 900;
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

.logo:hover {
            color: var(--secondary-color);
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 600;
            transition: color 0.3s ease;
            position: relative;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--secondary-color);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.hero {
            background-image: url('https://images.pexels.com/photos/1371360/pexels-photo-1371360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #fff;
            position: relative;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

.hero-content {
            position: relative;
            z-index: 1;
        }

.hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 4.5rem;
            font-weight: 900;
            margin-bottom: 20px;
            animation: fadeInUp 1s ease;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

.hero p {
            font-size: 1.4rem;
            margin-bottom: 30px;
            animation: fadeInUp 1s ease 0.5s;
            animation-fill-mode: both;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: #fff;
            padding: 15px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            animation: fadeInUp 1s ease 1s;
            animation-fill-mode: both;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

.btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

.section-title {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 50px;
            color: var(--primary-color);
            position: relative;
        }

.section-title::after {
            content: '';
            display: block;
            width: 100px;
            height: 3px;
            background-color: var(--secondary-color);
            margin: 20px auto 0;
        }

.destinations {
            padding: 100px 0;
            background-color: #fff;
        }

.destination-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

.destination-card {
            background-color: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }

.destination-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

.destination-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

.destination-card:hover img {
            transform: scale(1.1);
        }

.destination-card-content {
            padding: 25px;
        }

.destination-card h3 {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: var(--primary-color);
        }

.destination-card p {
            font-size: 1rem;
            color: #666;
            margin-bottom: 20px;
        }

.destination-card .btn {
            padding: 10px 20px;
            font-size: 0.9rem;
        }

.about {
            padding: 100px 0;
            background-color: var(--bg-color);
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-image {
            flex: 1;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

.about-image img {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
        }

.about-image:hover img {
            transform: scale(1.05);
        }

.about-text {
            flex: 1;
        }

.about-text p {
            margin-bottom: 20px;
            font-size: 1.1rem;
            line-height: 1.8;
        }

.testimonials {
            padding: 100px 0;
            background-color: #fff;
        }

.testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.testimonial-card {
            background-color: var(--bg-color);
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

.testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

.testimonial-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            border: 5px solid #fff;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        }

.testimonial-card p {
            font-style: italic;
            margin-bottom: 20px;
            font-size: 1.1rem;
            line-height: 1.8;
        }

.testimonial-card h4 {
            font-weight: 700;
            color: var(--primary-color);
        }

.contact {
            padding: 100px 0;
            background-color: var(--bg-color);
        }

.contact-form {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

.form-group {
            margin-bottom: 25px;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--primary-color);
        }

.form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

.form-group textarea {
            height: 150px;
            resize: vertical;
        }

footer {
            background-color: #333;
            color: #fff;
            padding: 50px 0;
            text-align: center;
        }

.social-links {
            margin-top: 20px;
        }

.social-links a {
            color: #fff;
            font-size: 24px;
            margin: 0 10px;
            transition: color 0.3s ease;
        }

.social-links a:hover {
            color: var(--accent-color);
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 3rem;
            }

.about-content {
                flex-direction: column;
            }

.about-image,
            .about-text {
                flex: auto;
            }

.section-title {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <a href="#" class="logo">Wanderlust Adventures</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#destinations">Destinations</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>Explore the World with Us</h1>
                <p>Discover breathtaking destinations and create unforgettable memories on your next adventure</p>
                <a href="#destinations" class="btn">Start Your Journey</a>
            </div>
        </section>

<section id="destinations" class="destinations">
            <div class="container">
                <h2 class="section-title">Popular Destinations</h2>
                <div class="destination-grid">
                    <div class="destination-card" data-aos="fade-up">
                        <img src="https://images.pexels.com/photos/1488315/pexels-photo-1488315.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Paris">
                        <div class="destination-card-content">
                            <h3>Paris, France</h3>
                            <p>Experience the romance and charm of the City of Light. Explore iconic landmarks and indulge in exquisite cuisine.</p>
                            <a href="#" class="btn">Discover Paris</a>
                        </div>
                    </div>
                    <div class="destination-card" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://images.pexels.com/photos/2166559/pexels-photo-2166559.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Bali">
                        <div class="destination-card-content">
                            <h3>Bali, Indonesia</h3>
                            <p>Relax on pristine beaches, explore lush rice terraces, and immerse yourself in Balinese culture.</p>
                            <a href="#" class="btn">Explore Bali</a>
                        </div>
                    </div>
                    <div class="destination-card" data-aos="fade-up" data-aos-delay="400">
                        <img src="https://images.pexels.com/photos/1486222/pexels-photo-1486222.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="New York">
                        <div class="destination-card-content">
                            <h3>New York City, USA</h3>
                            <p>Explore the vibrant streets of the Big Apple. From world-class museums to Broadway shows, experience the city that never sleeps.</p>
                            <a href="#" class="btn">Visit New York</a>
                        </div>
                    </div>
                    <div class="destination-card" data-aos="fade-up" data-aos-delay="600">
                        <img src="https://images.pexels.com/photos/2506923/pexels-photo-2506923.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Tokyo">
                        <div class="destination-card-content">
                            <h3>Tokyo, Japan</h3>
                            <p>Discover the perfect blend of tradition and modernity. Immerse yourself in Japanese culture, cuisine, and cutting-edge technology.</p>
                            <a href="#" class="btn">Discover Tokyo</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="about" class="about">
            <div class="container">
                <h2 class="section-title">About Us</h2>
                <div class="about-content">
                    <div class="about-image" data-aos="fade-right">
                        <img src="https://images.pexels.com/photos/731217/pexels-photo-731217.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="About Wanderlust Adventures">
                    </div>
                    <div class="about-text" data-aos="fade-left">
                        <p>Wanderlust Adventures is a premier travel company dedicated to providing unforgettable experiences for adventurers around the world. With over 10 years of expertise, we curate unique itineraries that showcase the best each destination has to offer.</p>
                        <p>Our team of experienced travel professionals is passionate about creating tailor-made journeys that cater to your individual preferences and interests. Whether you're seeking relaxation, cultural immersion, or adrenaline-pumping activities, we've got you covered.</p>
                        <a href="#" class="btn">Learn More About Us</a>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="testimonials">
            <div class="container">
                <h2 class="section-title">What Our Travelers Say</h2>
                <div class="testimonial-grid">
                    <div class="testimonial-card" data-aos="zoom-in">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Johnson">
                        <p>"Wanderlust Adventures made our honeymoon absolutely perfect! Every detail was taken care of, and we couldn't have asked for a better experience. The personalized itinerary allowed us to explore hidden gems we would have never found on our own."</p>
                        <h4>Sarah Johnson</h4>
                    </div>
                    <div class="testimonial-card" data-aos="zoom-in" data-aos-delay="200">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
                        <p>"I've traveled with many companies, but none compare to the level of service and attention to detail provided by Wanderlust Adventures. Their local guides were knowledgeable and passionate, making each destination come alive. Highly recommended!"</p>
                        <h4>Michael Chen</h4>
                    </div>
                    <div class="testimonial-card" data-aos="zoom-in" data-aos-delay="400">
                        <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Emily Rodriguez">
                        <p>"Our family vacation was a dream come true thanks to Wanderlust Adventures. The kids had a blast, and we created memories that will last a lifetime. The balance of activities for all ages was perfect, and the accommodations were top-notch."</p>
                        <h4>Emily Rodriguez</h4>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">Contact Us</h2>
                <form class="contact-form" data-aos="fade-up">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" required>