un sitio web de plataforma

Abrir en el editor Publica tu código

Recomendado

21 January 2024

CodePen: cómo dibujar flores con Greensock

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;
}

JS