Landing Page Builder | Juan Fernando Urrego

GRID SYSTEM
HTML Editor

<header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container"> 
                <a class="navbar-brand" href="#">Force Extreme Gym</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#benefits">Beneficios</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#testimonials">Testimonios</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#cta">Únete Ahora</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="hero">
      
     <div style="background-color:rgba(0,0,0,.7)">
        <div class="container py-5">
            <h1 class="display-4">Desata tu fuerza con Force Extreme Gym</h1>
            <p class="lead">Transforma tu cuerpo y mente con nuestras instalaciones de última generación y entrenadores expertos.</p>
        </div>
       
      </div>
    </section>

    <section id="benefits" class="py-5">
        <div class="container">
            <h2 class="text-center mb-4">¿Por qué elegir Force Extreme Gym?</h2>
            <div class="row">
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <img src="https://images.playground.com/9300b7d17d2b4e49b53c29634ee42735.jpeg" class="card-img-top" alt="Equipos de última generación">
                        <div class="card-body">
                            <h3 class="card-title">Equipos de última generación</h3>
                            <p class="card-text">Acceso a la tecnología fitness más avanzada para maximizar tus entrenamientos.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <img src="https://images.playground.com/e3b7a0d04f1c4ba6a0eb1eb08a4d0a98.jpeg" class="card-img-top" alt="Entrenadores expertos">
                        <div class="card-body">
                            <h3 class="card-title">Entrenadores expertos</h3>
                            <p class="card-text">Programas de entrenamiento personalizados adaptados a tus objetivos fitness.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <img src="https://images.playground.com/357ee65d49df4c97892f187105c9bb6d.jpeg" class="card-img-top" alt="Variedad de clases">
                        <div class="card-body">
                            <h3 class="card-title">Variedad de clases</h3>
                            <p class="card-text">Desde yoga hasta entrenamientos de alta intensidad, tenemos clases para todos los intereses.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="testimonials" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-4">Lo que dicen nuestros miembros</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card h-100 text-center">
                        <img src="https://images.playground.com/8c94d10163f847e7a68de60d39fc5c2a.jpeg" class="card-img-top rounded-circle mx-auto mt-3" style="width: 150px; height: 150px;" alt="Testimonio 1">
                        <div class="card-body">
                            <p class="card-text">"Force Extreme Gym me ayudó a alcanzar mis metas fitness más rápido de lo que pensaba posible. ¡Los entrenadores son increíbles!"</p>
                            <p class="card-text"><small class="text-muted">- Juan Pérez, Miembro desde 2020</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 text-center">
                        <img src="https://images.playground.com/c4ccd13ffedb4a2a978d914f2046112c.jpeg" class="card-img-top rounded-circle mx-auto mt-3" style="width: 150px; height: 150px;" alt="Testimonio 2">
                        <div class="card-body">
                            <p class="card-text">"Me encanta la variedad de clases que se ofrecen aquí. ¡Me mantiene motivado y emocionado por venir al gimnasio!"</p>
                            <p class="card-text"><small class="text-muted">- Ana Gómez, Miembro desde 2021</small></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 text-center">
                        <img src="https://images.playground.com/fb715b6dc31f435ab8729729fc4d29af.jpeg" class="card-img-top rounded-circle mx-auto mt-3" style="width: 150px; height: 150px;" alt="Testimonio 3">
                        <div class="card-body">
                            <p class="card-text">"El ambiente en Force Extreme Gym es incomparable. ¡Es más que un gimnasio; es una comunidad!"</p>
                            <p class="card-text"><small class="text-muted">- María Rodríguez, Miembro desde 2019</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="cta">
    <div id="ctaBackground" style="background-color:rgba(0,0,0,.7) !important">
        <div class="container py-5">
            <h2 class="mb-4 text-center text-white">Comienza tu camino fitness hoy mismo</h2>
            <p class="lead mb-4 text-center text-white">Únete a Force Extreme Gym y experimenta la diferencia.</p>
            <div class="text-center">
                <a href="#" class="btn btn-primary btn-lg">Únete Ahora</a>
            </div>
        </div>
    </div>
    </section>

    <section id="contact" class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6 bg-light p-4">
                    <h2 class="mb-4">Contáctanos</h2>
                    <form>
                        <div class="mb-3">
                            <label for="fullName" class="form-label">Nombre Completo</label>
                            <input type="text" class="form-control" id="fullName" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Correo Electrónico</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Mensaje</label>
                            <textarea class="form-control" id="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </form>
                </div>
                <div class="col-md-6 p-5" id="faq">
                    <h2 class="mb-4">Preguntas y Respuestas</h2>
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="question1">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#answer1" aria-expanded="false" aria-controls="answer1">
                                    ¿Cómo puedo cancelar mi membresía?
                                </button>
                            </h2>
                            <div id="answer1" class="accordion-collapse collapse" aria-labelledby="question1" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Puedes cancelar tu membresía contactando a nuestro equipo de atención al cliente o visitando la recepción de nuestro gimnasio.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="question2">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#answer2" aria-expanded="false" aria-controls="answer2">
                                    ¿Cuáles son los horarios de apertura del gimnasio?
                                </button>
                            </h2>
                            <div id="answer2" class="accordion-collapse collapse" aria-labelledby="question2" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    Nuestro gimnasio está abierto de lunes a viernes, de 6:00 a.m. a 10:00 p.m., y los fines de semana de 8:00 a.m. a 8:00 p.m.
                                </div>
                            </div>
                        </div>
                        <!-- Add more FAQ items as needed -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-dark text-light py-4">
        <div class="container text-center">
            <p>&copy; 2024 Force Extreme Gym. Todos los derechos reservados.</p>
            <p>123 Calle del Gimnasio, Ciudad Fitness, Estado, 12345 | Teléfono: (123) 456-7890</p>
            <div>
                <a href="#" class="text-light me-3"><i class="bi bi-facebook"></i></a>
                <a href="#" class="text-light me-3"><i class="bi bi-twitter"></i></a>
                <a href="#" class="text-light me-3"><i class="bi bi-instagram"></i></a>
                <a href="#" class="text-light"><i class="bi bi-youtube"></i></a>
            </div>
        </div>
    </footer>
HTML Editor

CSS Editor

JS Editor

HTML Editor

CSS Editor

JS Editor

Gestión de Landing
