Travel FAQs Section | QuickCoder | The frontend studio

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel FAQs | Wanderlust Adventures</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">

</head>
<body>
    <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
    </div>
    
    <div class="container">
        <div class="header">
            <h1>Travel FAQs</h1>
            <p>Your questions answered! Everything you need to know for your next adventure with Wanderlust Adventures.</p>
            
            <div class="travel-icons">
                <div class="travel-icon">
                    <i class="fas fa-plane"></i>
                </div>
                <div class="travel-icon">
                    <i class="fas fa-suitcase-rolling"></i>
                </div>
                <div class="travel-icon">
                    <i class="fas fa-passport"></i>
                </div>
                <div class="travel-icon">
                    <i class="fas fa-globe-americas"></i>
                </div>
                <div class="travel-icon">
                    <i class="fas fa-umbrella-beach"></i>
                </div>
            </div>
        </div>
        
        <div class="travel-stats">
            <div class="stat-item">
                <span class="stat-number">50+</span>
                <span class="stat-label">Destinations</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">15k+</span>
                <span class="stat-label">Happy Travelers</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">98%</span>
                <span class="stat-label">Satisfaction Rate</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">24/7</span>
                <span class="stat-label">Support</span>
            </div>
        </div>
        
        <div class="faq-container">
            <div class="faq-categories">
                <div class="travel-badge">Explore</div>
                <h3><i class="fas fa-compass"></i> Travel Categories</h3>
                <ul class="category-list">
                    <li><a href="#" class="active"><i class="fas fa-plane-departure"></i> Booking & Flights</a></li>
                    <li><a href="#"><i class="fas fa-hotel"></i> Accommodation</a></li>
                    <li><a href="#"><i class="fas fa-passport"></i> Documents & Visas</a></li>
                    <li><a href="#"><i class="fas fa-suitcase-rolling"></i> Packing & Luggage</a></li>
                    <li><a href="#"><i class="fas fa-umbrella-beach"></i> Tours & Activities</a></li>
                    <li><a href="#"><i class="fas fa-shield-alt"></i> Travel Insurance</a></li>
                    <li><a href="#"><i class="fas fa-dollar-sign"></i> Payments & Refunds</a></li>
                </ul>
            </div>
            
            <div class="faq-items">
                <div class="faq-item active">
                    <div class="faq-question">
                        <h4>What documents do I need for international travel? <span class="popular-tag">POPULAR</span></h4>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <p>For international travel, you'll typically need a valid passport (with at least 6 months validity), visas for your destination country, travel insurance documents, flight tickets, and hotel reservations. Some countries may also require proof of vaccination or negative COVID-19 tests. Always check the specific entry requirements for your destination at least 2-3 months before your trip.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>How far in advance should I book my flights?</h4>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <p>For international flights, we recommend booking 2-3 months in advance for the best prices and availability. For domestic travel, 1-2 months is usually sufficient. However, during peak seasons (summer, holidays), it's wise to book even earlier. Sign up for fare alerts to track price drops for your desired routes.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>What is your cancellation policy? <span class="popular-tag">POPULAR</span></h4>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <p>Our cancellation policy varies by package and supplier. Generally, cancellations made 30+ days before departure receive a full refund minus a small processing fee. Between 15-29 days, we refund 50% of the package cost. Cancellations within 14 days of travel are non-refundable. We highly recommend purchasing travel insurance to protect your investment against unexpected circumstances.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>Do you offer travel insurance?</h4>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <p>Yes, we offer comprehensive travel insurance through our trusted partners. Our policies typically cover trip cancellation, trip interruption, medical emergencies, baggage loss, and travel delays. You can add insurance during the booking process or contact us to add it to an existing reservation. We strongly recommend insurance for all international trips.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>What happens if my flight is cancelled?</h4>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <p>If your flight is cancelled, the airline is responsible for rebooking you on the next available flight. As your travel agent, we'll also assist you in this process and help coordinate any changes to your itinerary. Travel insurance can provide additional coverage for expenses incurred due to flight cancellations. Always contact us immediately if your flight is cancelled so we can provide assistance.</p>
                    </div>
                </div>
                
                <div class="faq-item">
                    <div class="faq-question">
                        <h4>How do I change or modify my booking?</h4>
                        <div class="faq-toggle">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                    <div class="faq-answer">
                        <p>You can modify your booking by logging into your account on our website or by contacting our customer service team. Changes are subject to availability and may incur fees depending on the supplier policies and how close you are to your travel date. Name changes on airline tickets are typically not allowed, so please double-check all passenger details before confirming your booking.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="contact-section">
            <h3>Need Personalized Travel Advice?</h3>
            <p>Our travel experts are ready to help you plan your perfect getaway. Contact us for customized itineraries and special deals!</p>
            <a href="#" class="btn"><i class="fas fa-headset"></i> Contact Our Travel Experts</a>
        </div>
    </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFD166;
            --dark: #1A535C;
            --light: #F7FFF7;
            --text: #333333;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--text);
            line-height: 1.6;
            font-family: 'Poppins', sans-serif;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 60px;
            padding-top: 30px;
            position: relative;
        }
        
        .header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            background: linear-gradient(135deg, var(--primary), var(--dark));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .header h1:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            border-radius: 2px;
        }
        
        .header p {
            font-size: 1.2rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .travel-icons {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
        }
        
        .travel-icon {
            width: 60px;
            height: 60px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            color: var(--primary);
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .travel-icon:hover {
            transform: translateY(-5px);
            background: var(--primary);
            color: white;
        }
        
        .faq-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 60px;
        }
        
        .faq-categories {
            flex: 1;
            min-width: 280px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            padding: 30px;
            height: fit-content;
            position: sticky;
            top: 30px;
            transition: transform 0.3s ease;
            border-top: 5px solid var(--primary);
        }
        
        .faq-categories:hover {
            transform: translateY(-5px);
        }
        
        .faq-categories h3 {
            color: var(--dark);
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeff5;
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .faq-categories h3 i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .category-list {
            list-style: none;
        }
        
        .category-list li {
            margin-bottom: 12px;
        }
        
        .category-list a {
            display: flex;
            align-items: center;
            padding: 15px 18px;
            color: #555;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .category-list a:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.05));
            transition: width 0.4s ease;
        }
        
        .category-list a:hover:before, .category-list a.active:before {
            width: 100%;
        }
        
        .category-list a:hover, .category-list a.active {
            color: var(--primary);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.1);
        }
        
        .category-list i {
            margin-right: 12px;
            font-size: 1.2rem;
            width: 24px;
            text-align: center;
        }
        
        .faq-items {
            flex: 2;
            min-width: 300px;
        }
        
        .faq-item {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
            margin-bottom: 25px;
            overflow: hidden;
            transition: all 0.4s ease;
            border-left: 4px solid transparent;
        }
        
        .faq-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
            border-left: 4px solid var(--primary);
        }
        
        .faq-item.active {
            border-left: 4px solid var(--primary);
            box-shadow: 0 12px 30px rgba(255, 107, 107, 0.15);
        }
        
        .faq-question {
            padding: 25px 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        
        .faq-question h4 {
            font-size: 1.2rem;
            color: var(--dark);
            font-weight: 600;
            flex: 1;
            padding-right: 20px;
        }
        
        .faq-toggle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.4s ease;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
        }
        
        .faq-answer {
            padding: 0 30px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s ease;
            color: #555;
            line-height: 1.7;
        }
        
        .faq-item.active .faq-answer {
            padding: 0 30px 30px;
            max-height: 500px;
        }
        
        .faq-item.active .faq-toggle {
            transform: rotate(180deg);
            background: linear-gradient(135deg, var(--secondary), var(--primary));
        }
        
        .travel-stats {
            display: flex;
            justify-content: space-around;
            background: white;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 50px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
            position: relative;
            overflow: hidden;
        }
        
        .travel-stats:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--primary), var(--secondary), var(--accent));
        }
        
        .stat-item {
            text-align: center;
            position: relative;
            z-index: 1;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: block;
            line-height: 1;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-top: 5px;
        }
        
        .contact-section {
            background: linear-gradient(135deg, var(--primary), var(--dark));
            color: white;
            padding: 60px 40px;
            border-radius: 20px;
            margin-top: 50px;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.3);
        }
        
        .contact-section:before {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            top: -80px;
            right: -80px;
        }
        
        .contact-section:after {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            bottom: -60px;
            left: -60px;
        }
        
        .contact-section h3 {
            font-size: 2.2rem;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
            font-family: 'Playfair Display', serif;
        }
        
        .contact-section p {
            max-width: 600px;
            margin: 0 auto 30px;
            font-size: 1.1rem;
            position: relative;
            z-index: 1;
            opacity: 0.9;
        }
        
        .btn {
            display: inline-block;
            background: white;
            color: var(--primary);
            padding: 16px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.4s ease;
            border: none;
            cursor: pointer;
            position: relative;
            z-index: 1;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.5s ease;
        }
        
        .btn:hover:before {
            left: 100%;
        }
        
        .btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .floating-element {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 107, 107, 0.05);
            animation: float 15s infinite linear;
        }
        
        .floating-element:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }
        
        .floating-element:nth-child(2) {
            width: 120px;
            height: 120px;
            top: 70%;
            left: 80%;
            animation-delay: -5s;
        }
        
        .floating-element:nth-child(3) {
            width: 60px;
            height: 60px;
            top: 40%;
            left: 90%;
            animation-delay: -10s;
        }
        
        .floating-element:nth-child(4) {
            width: 100px;
            height: 100px;
            top: 80%;
            left: 10%;
            animation-delay: -7s;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(180deg);
            }
            100% {
                transform: translateY(0) rotate(360deg);
            }
        }
        
        @media (max-width: 768px) {
            .faq-container {
                flex-direction: column;
            }
            
            .faq-categories {
                position: static;
            }
            
            .header h1 {
                font-size: 2.5rem;
            }
            
            .contact-section {
                padding: 40px 25px;
            }
            
            .travel-stats {
                flex-wrap: wrap;
                gap: 20px;
            }
            
            .travel-icons {
                flex-wrap: wrap;
            }
        }
        
        .travel-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--accent);
            color: var(--dark);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .popular-tag {
            display: inline-block;
            background: var(--accent);
            color: var(--dark);
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 10px;
            vertical-align: middle;
        }

JavaScript

Travel FAQs Section Preview

Download Options