Site Web de planification de rendez-vous

3164 Tatsoya

Ouvrir dans l'éditeur Video Publiez votre code

Site Web de planification de rendez-vous

Recommandé

29 September 2025

Animation de chargement CSS avec image d'arrière-plan

5 June 2025

Un code par alejandrokundrah

8 July 2025

Structure d'escalier HTML avec classes CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DatePlanner AI | Plan Your Perfect Date</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-calendar-heart-fill"></i> DatePlanner<span class="text-accent">AI</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#how-it-works">How It Works</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#planner">Plan Your Date</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#testimonials">Testimonials</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#faq">FAQ</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

<header class="hero">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 text-center text-lg-start mb-5 mb-lg-0">
                    <h1 class="display-4 fw-bold animate__animated animate__fadeInUp">Create Unforgettable Dates</h1>
                    <p class="lead my-4 animate__animated animate__fadeInUp animate__delay-1s">Let our AI help you plan the perfect date based on your budget, preferences, and party size. No more stressing about where to go or what to do!</p>
                    <div class="animate__animated animate__fadeInUp animate__delay-2s">
                        <a href="#planner" class="btn btn-primary btn-lg me-2">Get Started</a>
                        <a href="#how-it-works" class="btn btn-outline-light btn-lg">Learn More</a>
                    </div>
                </div>
                <div class="col-lg-6 animate__animated animate__fadeIn animate__delay-1s">
                    <img src="./imagess/output.jpg" alt="Couple enjoying a date" class="img-fluid rounded-4 hero-image">
                </div>
            </div>
        </div>
        <div class="hero-shape"></div>
    </header>

<section class="stats py-4">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="stat-item">
                        <h3 class="stat-number"><span class="counter">10,000</span>+</h3>
                        <p class="stat-text">Happy Couples</p>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="stat-item">
                        <h3 class="stat-number"><span class="counter">50</span>+</h3>
                        <p class="stat-text">Activity Options</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-item">
                        <h3 class="stat-number"><span class="counter">98</span>%</h3>
                        <p class="stat-text">Satisfaction Rate</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="how-it-works" class="py-5">
        <div class="container">
            <div class="section-header text-center mb-5">
                <span class="section-subtitle">Simple Process</span>
                <h2 class="section-title">How DatePlanner AI Works</h2>
                <p class="section-description">Our AI-powered platform makes date planning effortless in just three simple steps</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="process-card">
                        <div class="process-icon">
                            <span class="process-number">1</span>
                            <i class="bi bi-cash-coin"></i>
                        </div>
                        <h3>Set Your Budget</h3>
                        <p>Tell us how much you want to spend, and we'll work within your budget to create the perfect date plan.</p>
                        <ul class="process-features">
                            <li><i class="bi bi-check-circle-fill"></i> Flexible budget options</li>
                            <li><i class="bi bi-check-circle-fill"></i> Transparent pricing</li>
                            <li><i class="bi bi-check-circle-fill"></i> No hidden costs</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="process-card active">
                        <div class="process-icon">
                            <span class="process-number">2</span>
                            <i class="bi bi-people-fill"></i>
                        </div>
                        <h3>Choose Participants</h3>
                        <p>Whether it's a romantic date for two or a group outing, we'll tailor recommendations to your party size.</p>
                        <ul class="process-features">
                            <li><i class="bi bi-check-circle-fill"></i> Couple-friendly options</li>
                            <li><i class="bi bi-check-circle-fill"></i> Group activities</li>
                            <li><i class="bi bi-check-circle-fill"></i> Family-friendly suggestions</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="process-card">
                        <div class="process-icon">
                            <span class="process-number">3</span>
                            <i class="bi bi-stars"></i>
                        </div>
                        <h3>Select Activities</h3>
                        <p>Choose from restaurants, sports events, shows, and more to customize your perfect date experience.</p>
                        <ul class="process-features">
                            <li><i class="bi bi-check-circle-fill"></i> Diverse activity options</li>
                            <li><i class="bi bi-check-circle-fill"></i> Seasonal recommendations</li>
                            <li><i class="bi bi-check-circle-fill"></i> Booking assistance</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="activities-showcase py-5 bg-light">
        <div class="container">
            <div class="section-header text-center mb-5">
                <span class="section-subtitle">Endless Possibilities</span>
                <h2 class="section-title">Discover Amazing Activities</h2>
                <p class="section-description">From romantic dinners to thrilling adventures, we have something for everyone</p>
            </div>
            <div class="row g-4">
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="activity-category">
                        <div class="activity-icon">
                            <i class="bi bi-cup-hot-fill"></i>
                        </div>
                        <h4>Dining</h4>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="activity-category">
                        <div class="activity-icon">
                            <i class="bi bi-trophy-fill"></i>
                        </div>
                        <h4>Sports</h4>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="activity-category">
                        <div class="activity-icon">
                            <i class="bi bi-stars"></i>
                        </div>
                        <h4>Shows</h4>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="activity-category">
                        <div class="activity-icon">
                            <i class="bi bi-emoji-smile-fill"></i>
                        </div>
                        <h4>Zoo</h4>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="activity-category">
                        <div class="activity-icon">
                            <i class="bi bi-tree-fill"></i>
                        </div>
                        <h4>Parks</h4>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="activity-category">
                        <div class="activity-icon">
                            <i class="bi bi-film"></i>
                        </div>
                        <h4>Movies</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="planner" class="py-5">
        <div class="container">
            <div class="section-header text-center mb-5">
                <span class="section-subtitle">AI-Powered</span>
                <h2 class="section-title">Plan Your Perfect Date</h2>
                <p class="section-description">Fill out the form below and let our AI create personalized date plans just for you</p>
            </div>
            <div class="row">
                <div class="col-lg-5">
                    <div class="planner-form">
                        <form id="date-form">
                            <div class="mb-4">
                                <label for="budget" class="form-label">Your Budget ($)</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-currency-dollar"></i></span>
                                    <input type="number" class="form-control form-control-lg" id="budget" min="10" required placeholder="Enter your budget">
                                </div>
                                <div class="form-text">We'll find options that fit your budget</div>
                            </div>
                            <div class="mb-4">
                                <label for="people" class="form-label">Number of People</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi bi-people"></i></span>
                                    <input type="number" class="form-control form-control-lg" id="people" min="1" max="10" required placeholder="How many people?">
                                </div>
                                <div class="form-text">We'll adjust recommendations based on party size</div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Preferred Activities</label>
                                <div class="activity-options">
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="restaurant" id="restaurant">
                                        <label class="form-check-label" for="restaurant">
                                            <i class="bi bi-cup-hot"></i>
                                            <span>Restaurants</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="sports" id="sports">
                                        <label class="form-check-label" for="sports">
                                            <i class="bi bi-trophy"></i>
                                            <span>Sports Events</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="circus" id="circus">
                                        <label class="form-check-label" for="circus">
                                            <i class="bi bi-stars"></i>
                                            <span>Circus Shows</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="zoo" id="zoo">
                                        <label class="form-check-label" for="zoo">
                                            <i class="bi bi-emoji-smile"></i>
                                            <span>Zoo</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="park" id="park">
                                        <label class="form-check-label" for="park">
                                            <i class="bi bi-tree"></i>
                                            <span>Parks</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="movie" id="movie">
                                        <label class="form-check-label" for="movie">
                                            <i class="bi bi-film"></i>
                                            <span>Movies</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="museum" id="museum">
                                        <label class="form-check-label" for="museum">
                                            <i class="bi bi-building"></i>
                                            <span>Museums</span>
                                        </label>
                                    </div>
                                    <div class="activity-option">
                                        <input class="form-check-input" type="checkbox" value="concert" id="concert">
                                        <label class="form-check-label" for="concert">
                                            <i class="bi bi-music-note-beamed"></i>
                                            <span>Concerts</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Date Type</label>
                                <div class="date-type-options">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="dateType" id="dateTypeRomantic" value="romantic" checked>
                                        <label class="form-check-label" for="dateTypeRomantic">Romantic</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="dateType" id="dateTypeCasual" value="casual">
                                        <label class="form-check-label" for="dateTypeCasual">Casual</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="dateType" id="dateTypeAdventure" value="adventure">
                                        <label class="form-check-label" for="dateTypeAdventure">Adventure</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="dateType" id="dateTypeFamily" value="family">
                                        <label class="form-check-label" for="dateTypeFamily">Family</label>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg w-100">
                                <i class="bi bi-magic"></i> Generate Date Ideas
                            </button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div id="results" class="d-none">
                        <div class="results-header">
                            <h3>Your Personalized Date Plans</h3>
                            <p class="text-muted">Based on your preferences, we've created these custom date plans just for you</p>
                        </div>
                        <div id="date-suggestions" class="date-suggestions">
                            
                        </div>
                    </div>
                    <div id="initial-state" class="text-center py-5">
                        <img src="./imagess/output (1).jpg" alt="Date planning illustration" class="img-fluid mb-4 initial-image">
                        <h4>Ready to plan your perfect date?</h4>
                        <p class="text-muted">Fill out the form to get personalized suggestions based on your preferences.</p>
                        <div class="features-list">
                            <div class="feature-item">
                                <i class="bi bi-lightning-charge-fill"></i>
                                <span>Instant Recommendations</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-geo-alt-fill"></i>
                                <span>Local Activities</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-heart-fill"></i>
                                <span>Personalized Plans</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="testimonials" class="py-5 bg-light">
        <div class="container">
            <div class="section-header text-center mb-5">
                <span class="section-subtitle">Success Stories</span>
                <h2 class="section-title">What Our Users Say</h2>
                <p class="section-description">Hear from couples who found their perfect date with DatePlanner AI</p>
            </div>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="testimonial-card">
                        <div class="testimonial-rating">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                        <p class="testimonial-text">"DatePlanner AI saved our anniversary! We were out of ideas, but the app suggested a perfect combination of a fancy dinner and a theater show that fit our budget perfectly."</p>
                        <div class="testimonial-user">
                            <img src="https://via.placeholder.com/60" alt="User" class="testimonial-avatar">
                            <div>
                                <h5 class="testimonial-name">Sarah & Mike</h5>
                                <p class="testimonial-location">New York, NY</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="testimonial-card">
                        <div class="testimonial-rating">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                        <p class="testimonial-text">"As a busy professional, I never had time to plan dates. DatePlanner AI made it so easy to impress my girlfriend with thoughtful date ideas that seemed like I spent hours planning!"</p>
                        <div class="testimonial-user">
                            <img src="https://via.placeholder.com/60" alt="User" class="testimonial-avatar">
                            <div>
                                <h5 class="testimonial-name">James Wilson</h5>
                                <p class="testimonial-location">Chicago, IL</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="testimonial-card">
                        <div class="testimonial-rating">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-half"></i>
                        </div>
                        <p class="testimonial-text">"We used DatePlanner AI for our family outing with kids, and it suggested a perfect day with zoo visit and a kid-friendly restaurant. Everyone had a blast!"</p>
                        <div class="testimonial-user">
                            <img src="https://via.placeholder.com/60" alt="User" class="testimonial-avatar">
                            <div>
                                <h5 class="testimonial-name">The Johnson Family</h5>
                                <p class="testimonial-location">Austin, TX</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="faq" class="py-5">
        <div class="container">
            <div class="section-header text-center mb-5">
                <span class="section-subtitle">Questions & Answers</span>
                <h2 class="section-title">Frequently Asked Questions</h2>
                <p class="section-description">Find answers to common questions about DatePlanner AI</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    Is DatePlanner AI completely free to use?
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Yes, DatePlanner AI is completely free to use. We don't charge any fees for generating date plans. We may offer premium features in the future, but our core planning service will always remain free.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    How accurate are the budget estimates?
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Our budget estimates are based on average prices in your area. Actual costs may vary depending on specific venues, seasonal pricing, and special events. We always try to provide the most accurate estimates possible.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    Can I book activities directly through DatePlanner AI?
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Currently, we provide booking links that direct you to the official websites of venues and activities. We're working on integrating direct booking capabilities in the future to make the process even more seamless.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    How does DatePlanner AI select activities?
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Our AI algorithm considers multiple factors including your budget, number of people, selected activity preferences, and date type. It then creates optimal combinations that provide the best experience while staying within your budget.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
                                    Can I save my favorite date plans?
                                </button>
                            </h2>
                            <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    We're currently developing a feature that will allow users to save their favorite date plans and access them later. This feature will be available in our next update.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="cta-section py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-4 mb-lg-0">
                    <h2 class="cta-title">Ready to Plan Your Perfect Date?</h2>
                    <p class="cta-text">Let DatePlanner AI help you create memorable experiences without the stress of planning.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="#planner" class="btn btn-light btn-lg">Get Started Now</a>
                </div>
            </div>
        </div>
    </section>

<footer class="footer py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <h5 class="footer-title">DatePlanner<span class="text-accent">AI</span></h5>
                    <p class="footer-description">Making date planning effortless and fun with AI-powered recommendations tailored to your preferences.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
                        <a href="#" class="social-link"><i class="bi bi-instagram"></i></a>
                        <a href="#" class="social-link"><i class="bi bi-linkedin"></i></a>
                    </div>
                </div>
                <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
                    <h5 class="footer-heading">Quick Links</h5>
                    <ul class="footer-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#how-it-works">How It Works</a></li>
                        <li><a href="#planner">Plan Your Date</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#faq">FAQ</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 col-md-4 mb-4 mb-md-0">
                    <h5 class="footer-heading">Activities</h5>
                    <ul class="footer-links">
                        <li><a href="#">Restaurants</a></li>
                        <li><a href="#">Sports Events</a></li>
                        <li><a href="#">Shows & Concerts</a></li>
                        <li><a href="#">Outdoor Activities</a></li>
                        <li><a href="#">Museums & Culture</a></li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-4">
                    <h5 class="footer-heading">Newsletter</h5>
                    <p>Subscribe to get the latest date ideas and special offers.</p>
                    <form class="newsletter-form">
                        <div class="input-group">
                            <input type="email" class="form-control" placeholder="Your email address" required>
                            <button class="btn btn-primary" type="submit">Subscribe</button>
                        </div>
                    </form>
                </div>
            </div>
            <hr class="footer-divider">
            <div class="footer-bottom">
                <p class="copyright">© 2023 DatePlanner AI. All rights reserved.</p>
                <div class="footer-bottom-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                    <a href="#">Contact Us</a>
                </div>
            </div>
        </div>
    </footer>

CSS

:root {
    --primary-color: #ff6b6b;
    --secondary-color: #4ecdc4;
    --accent-color: #ffbe0b;
    --dark-color: #292f36;
    --light-color: #f7fff7;
    --gray-color: #6c757d;
    --light-gray: #f8f9fa;
    --border-radius: 10px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
  }
  
  body {
    font-family: "Poppins", sans-serif;
    color: var(--dark-color);
    background-color: #fff;
    overflow-x: hidden;
  }
  
  /* Utility Classes */
  .text-accent {
    color: var(--accent-color);
  }
  
  /* Navigation */
  .navbar {
    padding: 1rem 0;
    transition: var(--transition);
    background-color: transparent;
  }
  
  .navbar.scrolled {
    background-color: var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
  }
  
  .navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .navbar-brand i {
    font-size: 1.8rem;
  }
  
  .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: var(--transition);
    position: relative;
  }
  
  .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: white;
    transition: var(--transition);
    transform: translateX(-50%);
  }
  
  .nav-link:hover::after,
  .nav-link.active::after {
    width: 80%;
  }
  
  /* Hero Section */
  .hero {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.9), rgba(41, 47, 54, 0.9)),
      url("https://via.placeholder.com/1920x1080") center / cover no-repeat;
    color: white;
    padding: 10rem 0 6rem;
    position: relative;
    overflow: hidden;
  }
  
  .hero-image {
    box-shadow: var(--box-shadow);
    transform: perspective(1000px) rotateY(-10deg);
    transition: var(--transition);
  }
  
  .hero-image:hover {
    transform: perspective(1000px) rotateY(0);
  }
  
  .hero-shape {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: white;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
  }
  
  /* Stats Section */
  .stats {
    background-color: white;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
  }
  
  .stat-item {
    padding: 1rem;
    transition: var(--transition);
  }
  
  .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
  }
  
  .stat-text {
    font-size: 1.1rem;
    color: var(--gray-color);
    margin-bottom: 0;
  }
  
  /* Section Headers */
  .section-header {
    max-width: 700px;
    margin: 0 auto 3rem;
  }
  
  .section-subtitle {
    display: inline-block;
    background-color: rgba(255, 107, 107, 0.1);
    color: var(--primary-color);
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
  }
  
  .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark-color);
  }
  
  .section-description {
    color: var(--gray-color);
    font-size: 1.1rem;
  }
  
  /* How It Works Section */
  .process-card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--box-shadow);
    height: 100%;
    transition: var(--transition);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  .process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--primary-color);
    opacity: 0.05;
    transition: var(--transition);
    z-index: -1;
  }
  
  .process-card:hover::before,
  .process-card.active::before {
    height: 100%;
  }
  
  .process-card.active {
    transform: translateY(-10px);
  }
  
  .process-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 107, 107, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    color: var(--primary-color);
    position: relative;
  }
  
  .process-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
  }
  
  .process-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .process-features {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
  }
  
  .process-features li {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--gray-color);
  }
  
  .process-features li i {
    color: var(--secondary-color);
    margin-right: 0.5rem;
  }
  
  /* Activities Showcase */
  .activity-category {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
  }
  
  .activity-category:hover {
    transform: translateY(-5px);
  }
  
  .activity-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(255, 107, 107, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--primary-color);
  }
  
  .activity-category h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0;
  }
  
  /* Planner Section */
  .planner-form {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--box-shadow);
  }
  
  .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  
  .form-text {
    color: var(--gray-color);
  }
  
  .activity-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .activity-option {
    position: relative;
  }
  
  .activity-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .activity-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    height: 100%;
  }
  
  .activity-option input:checked + label {
    background-color: rgba(255, 107, 107, 0.1);
    color: var(--primary-color);
  }
  
  .activity-option label i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  .date-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: var(--transition);
  }
  
  .btn-primary:hover {
    background-color: #ff5252;
    border-color: #ff5252;
  }
  
  /* Results Section */
  .results-header {
    margin-bottom: 2rem;
  }
  
  .date-suggestions {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .date-suggestion {
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
  }
  
  .date-suggestion:hover {
    transform: translateY(-5px);
  }
  
  .date-suggestion-header {
    background-color: var(--secondary-color);
    color: white;
    padding: 1.5rem;
    position: relative;
  }
  
  .date-suggestion-header h4 {
    margin-bottom: 0.5rem;
    font-weight: 600;
  }
  
  .date-suggestion-header p {
    margin-bottom: 0;
    font-size: 1.1rem;
  }
  
  .date-suggestion-body {
    padding: 1.5rem;
  }
  
  .activity-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
  }
  
  .activity-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  
  .activity-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 107, 107, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
    color: var(--primary-color);
    flex-shrink: 0;
  }
  
  .activity-details {
    flex: 1;
  }
  
  .activity-details h5 {
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  .activity-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  
  .activity-price {
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
  }
  
  .activity-rating {
    display: flex;
    align-items: center;
    color: var(--accent-color);
  }
  
  .booking-link {
    display: inline-block;
    margin-top: 1rem;
    color: white;
    background-color: var(--secondary-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    transition: var(--transition);
  }
  
  .booking-link:hover {
    background-color: #3dbeb6;
    transform: translateY(-2px);
  }
  
  /* Initial State */
  .initial-image {
    max-width: 300px;
    margin: 0 auto;
  }
  
  .features-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-color);
  }
  
  .feature-item i {
    color: var(--primary-color);
  }
  
  /* Testimonials Section */
  .testimonial-card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--box-shadow);
    height: 100%;
    transition: var(--transition);
  }
  
  .testimonial-card:hover {
    transform: translateY(-5px);
  }
  
  .testimonial-rating {
    margin-bottom: 1rem;
    color: var(--accent-color);
  }
  
  .testimonial-text {
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--gray-color);
  }
  
  .testimonial-user {
    display: flex;
    align-items: center;
  }
  
  .testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
  }
  
  .testimonial-name {
    font-weight: 600;
    margin-bottom: 0;
  }
  
  .testimonial-location {
    color: var(--gray-color);
    margin-bottom: 0;
    font-size: 0.9rem;
  }
  
  /* FAQ Section */
  .accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: var(--border-radius) !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .accordion-button {
    font-weight: 600;
    padding: 1.25rem;
  }
  
  .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: rgba(255, 107, 107, 0.05);
  }
  
  .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(255, 107, 107, 0.1);
  }
  
  .accordion-button::after {
    background-size: 1.25rem;
    transition: var(--transition);
  }
  
  .accordion-body {
    padding: 1.25rem;
    color: var(--gray-color);
  }
  
  /* CTA Section */
  .cta-section {
    background: linear-gradient(135deg, var(--primary-color), #ff8c8c);
    color: white;
    border-radius: 0;
  }
  
  .cta-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
  
  .cta-text {
    font-size: 1.1rem;
    margin-bottom: 0;
    opacity: 0.9;
  }
  
  /* Footer */
  .footer {
    background-color: var(--dark-color);
    color: white;
  }
  
  .footer-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  
  .footer-description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
  }
  
  .social-links {
    display: flex;
    gap: 1rem;
  }
  
  .social-link {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition);
  }
  
  .social-link:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
  }
  
  .footer-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: white;
  }
  
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-links li {
    margin-bottom: 0.75rem;
  }
  
  .footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
  }
  
  .footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
  }
  
  .newsletter-form .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 0.75rem 1rem;
  }
  
  .newsletter-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
  
  .newsletter-form .btn {
    padding: 0.75rem 1.5rem;
  }
  
  .footer-divider {
    margin: 2rem 0;
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
  }
  
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .copyright {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
  }
  
  .footer-bottom-links {
    display: flex;
    gap: 1.5rem;
  }
  
  .footer-bottom-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.9rem;
  }
  
  .footer-bottom-links a:hover {
    color: var(--primary-color);
  }
  
  /* Responsive */
  @media (max-width: 991px) {
    .section-title {
      font-size: 2rem;
    }
  
    .hero {
      padding: 8rem 0 5rem;
    }
  }
  
  @media (max-width: 768px) {
    .activity-options {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .features-list {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
  
    .footer-bottom {
      flex-direction: column;
      text-align: center;
    }
  }
  
  @media (max-width: 576px) {
    .section-title {
      font-size: 1.75rem;
    }
  
    .activity-options {
      grid-template-columns: 1fr;
    }
  
    .date-type-options {
      flex-direction: column;
    }
  }

JS

Recommandé

Animation de chargement CSS avec image d'arrière-plan

Un code par alejandrokundrah

Structure d'escalier HTML avec classes CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS