un site Web de plateforme

1,817 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 March 2025

Site de jeux en ligne

10 January 2026

Bouton CSS Glassmorphism avec animation brillante

23 June 2025

Exemple de formulaire de connexion HTML

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">
</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.
                    </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">
                    <h3 class="stat-number"><span class="counter">10,000</span>+</h3>
                    <p class="stat-text">Happy Couples</p>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <h3 class="stat-number"><span class="counter">50</span>+</h3>
                    <p class="stat-text">Activity Options</p>
                </div>
                <div class="col-md-4">
                    <h3 class="stat-number"><span class="counter">98</span>%</h3>
                    <p class="stat-text">Satisfaction Rate</p>
                </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.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="process-card">
                        <div class="process-icon">
                            <span class="process-number">2</span>
                            <i class="bi bi-people-fill"></i>
                        </div>
                        <h3>Choose Participants</h3>
                        <p>We'll tailor recommendations to your party size.</p>
                    </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>Customize your perfect date experience with diverse options.</p>
                    </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">
                    <form id="date-form">
                        <div class="mb-4">
                            <label for="budget" class="form-label">Your Budget ($)</label>
                            <input type="number" class="form-control form-control-lg" id="budget" min="10" required placeholder="Enter your budget">
                        </div>
                        <div class="mb-4">
                            <label for="people" class="form-label">Number of People</label>
                            <input type="number" class="form-control form-control-lg" id="people" min="1" max="10" required placeholder="How many people?">
                        </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">Restaurants</label>
                                </div>
                                <div class="activity-option">
                                    <input class="form-check-input" type="checkbox" value="sports" id="sports">
                                    <label class="form-check-label" for="sports">Sports Events</label>
                                </div>
                                <div class="activity-option">
                                    <input class="form-check-input" type="checkbox" value="zoo" id="zoo">
                                    <label class="form-check-label" for="zoo">Zoo</label>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg w-100">
                            Generate Date Ideas
                        </button>
                    </form>
                </div>
                <div class="col-lg-7">
                    <div id="results" class="d-none">
                        <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 id="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">
                        <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>
                </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>DatePlanner<span class="text-accent">AI</span></h5>
                    <p>Making date planning effortless and fun with AI-powered recommendations tailored to your preferences.</p>
                </div>
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
                            <h5>Quick Links</h5>
                            <ul class="list-unstyled">
                                <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>
                            </ul>
                        </div>
                        <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
                            <h5>Activities</h5>
                            <ul class="list-unstyled">
                                <li><a href="#">Restaurants</a></li>
                                <li><a href="#">Sports Events</a></li>
                                <li><a href="#">Parks</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <h5>Newsletter</h5>
                            <p>Subscribe to get the latest date ideas and special offers.</p>
                            <form>
                                <input type="email" class="form-control" placeholder="Your email address" required>
                                <button class="btn btn-primary mt-2" type="submit">Subscribe</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

CSS

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

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

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

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

.section-header {
    margin-bottom: 40px;
}

.section-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #ff6f61;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.section-description {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.text-accent {
    color: #ff6f61;
}

.btn-primary {
    background-color: #ff6f61;
    border-color: #ff6f61;
}

.btn-primary:hover {
    background-color: #e56156;
    border-color: #e56156;
}

/* Navbar */
.navbar {
    background-color: #333;
    padding: 15px 0;
}

.navbar-brand {
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
}

.navbar-nav .nav-link {
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #ff6f61 !important;
}

.navbar-toggler-icon {
    background-color: #fff;
}

/* Hero Section */
.hero {
    position: relative;
    background-color: #ff6f61;
    color: #fff;
    padding: 100px 0 80px;
    overflow: hidden;
}

.hero h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    color: #fff;
}

.hero-image {
    max-width: 100%;
    height: auto;
    border: 5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-shape {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 111, 97, 0) 0%, #ff6f61 100%);
    z-index: 1;
}

/* Stats Section */
.stats {
    background-color: #fff;
    padding: 40px 0;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.stat-text {
    font-size: 16px;
    color: #666;
}

/* How It Works Section */
.process-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.process-card.active {
    background-color: #ff6f61;
    color: #fff;
}

.process-card.active h3,
.process-card.active p,
.process-card.active .process-features li {
    color: #fff;
}

.process-icon {
    position: relative;
    margin: 0 auto 20px;
    width: 60px;
    height: 60px;
    background-color: #ff6f61;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.process-number {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: #ff6f61;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-features {
    margin-top: 20px;
    list-style: none;
    padding: 0;
}

.process-features li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
}

.process-features li i {
    margin-right: 10px;
    color: #ff6f61;
}

/* Activities Showcase */
.activities-showcase {
    padding: 60px 0;
}

.activity-category {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.activity-category:hover {
    background-color: #ff6f61;
    color: #fff;
}

.activity-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ff6f61;
}

.activity-category:hover .activity-icon {
    color: #fff;
}

/* Planner Section */
.planner-form {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.activity-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.activity-option {
    display: flex;
    align-items: center;
}

.activity-option input {
    margin-right: 10px;
}

.date-type-options {
    display: flex;
    gap: 15px;
}

.results-header {
    margin-bottom: 30px;
}

.initial-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666;
}

.feature-item i {
    font-size: 24px;
    margin-right: 10px;
    color: #ff6f61;
}

/* Testimonials Section */
.testimonial-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.testimonial-rating {
    margin-bottom: 15px;
}

.testimonial-rating i {
    color: #ff6f61;
    font-size: 18px;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

/* FAQ Section */
.accordion-item {
    border: none;
    margin-bottom: 15px;
}

.accordion-button {
    background-color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding: 15px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: #ff6f61;
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.accordion-body {
    background-color: #fff;
    padding: 15px;
    border-radius: 0 0 10px 10px;
    color: #666;
}

/* CTA Section */
.cta-section {
    background-color: #333;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.cta-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.cta-text {
    font-size: 18px;
    margin-bottom: 30px;
}

/* Footer */
.footer {
    background-color: #222;
    color: #fff;
    padding: 40px 0;
}

.footer-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-description {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.social-link {
    font-size: 20px;
    color: #fff;
    transition: all 0.3s ease;
}

.social-link:hover {
    color: #ff6f61;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #ccc;
    font-size: 16px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #ff6f61;
}

.newsletter-form .input-group {
    display: flex;
    align-items: center;
}

.newsletter-form input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
}

.newsletter-form button {
    padding: 10px 20px;
    border: none;
    border-radius: 0 5px 5px 0;
}

.footer-divider {
    border-color: #444;
    margin: 40px 0;
}

.copyright {
    font-size: 14px;
    color: #ccc;
    text-align: center;
    margin-bottom: 20px;
}

.footer-bottom-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-bottom-links a {
    font-size: 14px;
    color: #ccc;
    transition: all 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #ff6f61;
}