Landing Page Builder | ADGSoluciones:Adrian Del Angel

GRID SYSTEM
HTML Editor

<div class="container-fluid roboto-regular">

  <div class="container p-0">

    <nav class="navbar navbar-expand-sm bg-transparent">

      <div class="container-fluid">

        <a class="navbar-brand bg-transparent px-3 anton-regular shadow-none" href="javascript:void(0)" style="
    font-size: 25px;
"><i class="fas fa-dumbbell"></i> FORCE EXTREME GYM</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar" aria-expanded="true">

          <span class="navbar-toggler-icon">

          </span>

        </button>

        <div class="navbar-collapse collapse show" id="mynavbar" style="">

          <ul class="navbar-nav ms-auto">

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

    <div class="row my-5">

      <div class="col-12 col-lg-5">

        <div class="m-0">

          <div class="text-start">

            <p class="h3 anton-regular text-uppercase ps-4" style="
    font-size: 62px;
">Desata tu fuerza con Force Extreme Gym</p>

          </div>

        </div>

      </div>

      <div class="col-12 col-lg-7">

        <div class="m-0">

          <div class="text-end">

            <p class="h5 ps-5 my-5 me-4 me-lg-0">Transforma tu cuerpo y mente con nuestras instalaciones de última generación y entrenadores expertos.</p><button type="button" class="btn btn-default border-0 me-4 me-lg-0" style="
    background: #F4A81E;
">Únete a nosotros</button>

          </div>

        </div>

      </div>

    </div>

    <div class="container p-0 m-0">

      <div class="m-0 p-0">

        <div class="text-center p-0">

          <figure class="m-0 p-0">

            <img class="img-fluid w-100 p-0" src="https://res.cloudinary.com/dv7wctcfp/image/upload/v1718754625/wkb0vyrxlw5qmeslggui.png">

          </figure>

        </div>

      </div>

    </div>

    <div class="row text-white p-4 p-lg-5 mx-0" id="benefits" style="
    background: black;
">

      <div class="col-12 col-lg-5">

        <div class="m-0">

          <div class="text-start">

            <p class="h3 anton-regular">Bienvenido a Force Extreme: Experimenta el gimnasio definitivo</p>

          </div>

        </div>

        <div class="m-0">

          <div class="text-start">

            <p class="py-3">Force Extreme te ofrece una experiencia de fitness completa. Nuestro gimnasio de última generación está equipado con tecnología de punta y ofrece una amplia gama de clases para todos los niveles de condición física.</p>

          </div>

        </div>

        <div class="m-0 mb-4 mb-lg-0">

          <div class="text-start">

            <button type="button" class="btn btn-default border-0" style="
    background: #F4A81E;
">Únete a nosotros</button>

          </div>

        </div>

      </div>

      <div class="col-12 col-lg-7">

        <div class="row">

          <div class="col-12 col-lg-4">

    <div class="bg-white text-dark mx-1 px-3 py-5 mb-4 mb-lg-0">

            <div class="m-0">

              <div class="text-start">

                <p class="h3 anton-regular">Equipos de Vanguardia</p>

              </div>

            </div>

            <div class="m-0 py-2">

              <div class="text-start">

                <h6><small>Acceso a la tecnología fitness más avanzada para maximizar tus entrenamientos.</small>

                </h6>

              </div>

            </div>
    </div>
          </div>

          <div class="col-12 col-lg-4">

    <div class="bg-white text-dark mx-1 px-3 py-5 mb-4 mb-lg-0">  

            <div class="m-0">

              <div class="text-start">

                <p class="h3 anton-regular">Entrenadores expertos</p>

              </div>

            </div>

            <div class="m-0 py-2">

              <div class="text-start">

                <h6><small>Programas de entrenamiento personalizados adaptados a tus objetivos fitness.</small>

                </h6>

              </div>

            </div>
    </div>
          </div>

          <div class="col-12 col-lg-4">
<div class="mx-1 bg-white text-dark px-3 py-5">
            <div class="m-0">

                
              <div class="text-start">

                <p class="h3 anton-regular">Variedad de clases</p>

              </div>

            </div>

            <div class="m-0  py-2">

              <div class="text-start">

                <h6><small>Desde yoga hasta entrenamientos de alta intensidad, tenemos clases para todos los intereses.</small>

                </h6>

              </div>

            </div>
</div>
          </div>

        </div>

      </div>

    </div>

    <div>

        <figure>

                <img class="img-fluid w-100" src="https://res.cloudinary.com/dv7wctcfp/image/upload/v1718754798/dzormstububhmxcwbiab.png">
        </figure>
    </div>

  </div>

  <div class="container my-5">

    <div class="m-0">

      <div class="text-start">

        <p class="h3 anton-regular text-uppercase" style="
    font-size: 50px;
">Comienza tu camino fitness hoy mismo</p>

      </div>

    </div>

    <div class="m-0">

      <div class="text-start">

        <p class="">Únete a Force Extreme y disfruta de una increíble oferta para nuevos miembros. Recibe un mes de membresía GRATIS al inscribirte.</p>

      </div>

    </div>

  </div>

  <div class="container">

    <div class="row">

      <div class="col-12 col-lg-7">
<div class="me-lg-3">
        <div class="row">

          <div class="col-12 col-lg-12 text-white p-5" style="
    background: black;
">

            <div class="m-0 pb-3">

              <div class="text-start">

                <p class="h3 anton-regular text-uppercase" style="
    font-size: 45px;
">Oferta especial para  <br>
<span style="color:#F4A81E" class="">nuevos miembros</span></p>

              </div>

            </div>

            <div class="m-0 pb-3">

              <div class="text-start">

                <p>Aprovecha esta oportunidad única para experimentar los beneficios de Force Extreme sin compromiso. Disfruta de acceso ilimitado a nuestras instalaciones, equipamiento de vanguardia y un programa de clases completo.</p>

              </div>

            </div>

            <div class="m-0">

              <div class="text-start">

                <button type="button" class="btn btn-outline-warning">Únete a nosotros</button>

              </div>

            </div>

          </div>

        </div>

        <div class="row mt-lg-4">

          <div class="col-12 col-lg-6 p-0">

            <div class="m-0 me-lg-4">

              <div class="text-start p-0 m-0">

                <figure class="p-0 m-0">

                  <img class="img-fluid p-0" src="https://res.cloudinary.com/dv7wctcfp/image/upload/v1718753903/fxig2wvj955tn9ld93fl.png">

                </figure>

              </div>

            </div>

          </div>

          <div class="col-12 col-lg-6" style="background-image: url(https://res.cloudinary.com/dv7wctcfp/image/upload/v1718755371/fcefsofjcpkdzjejzm9i.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;">

    
    <div class="row" style="
    background-color: rgba(0,0,0,.8); height:100%">
        <div class="col-12 col-lg-12 p-5 py-lg-5 px-lg-5">
            <p class="h3 anton-regular text-uppercase text-white" style="
    font-size: 35px;
">Instalaciones y Equipamiento <br><span style="color:#F4A81E">de Primera Clase</span></p><p class="text-white">En Force Extreme, nos enorgullecemos de ofrecer instalaciones y equipamiento de primera clase para ayudarte a alcanzar tus objetivos fitness.</p>
        </div>
    </div>

            

          </div>

        </div>
</div>
      </div>

      <div class="col-12 col-lg-5">
<div class="ms-lg-2">
        <div class="row">

          <div class="col-12 col-lg-12 p-5" style="
    background: #DBDBDB;
">

            <div class="m-0 pb-3 pt-5">

              <div class="text-start">

                <p class="h3 anton-regular text-uppercase" style="
    font-size: 45px;
">
Programa de Clases Diverso y Emocionante</p>

              </div>

            </div>

            <div class="m-0 pb-3">

              <div class="text-start">

                <h6>Zumba | Yoga | Boxeo | Spinning 

                </h6>

              </div>

            </div>

            <div class="m-0 mb-5">

              <div class="text-start">

                <button type="button" class="btn btn-outline-dark">Únete a nosotros</button>

              </div>

            </div>

          </div>

        </div>

        <div class="row">

          <div class="col-12 col-lg-12 p-0 mt-lg-4">

            <div class="m-0">

              <div class="text-start">

                <figure>

                  <img class="img-fluid w-100" src="https://res.cloudinary.com/dv7wctcfp/image/upload/v1718755164/lnvemuwiezmg2obgtsa1.jpg" style="
    height: 329px;
">

                </figure>

              </div>

            </div>

          </div>

        </div>
</div>
      </div>

    </div>

  </div>

  <section id="testimonials" class="py-5 bg-white">
        <div class="container pt-5">
            <p class="text-center mb-4 h3 anton-regular text-uppercase" style="
    font-size: 45px;
">Lo que dicen nuestros miembros</p>
            <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><div class="container p-0">

        <figure class="m-0">

                <img class="img-fluid w-100" src="https://res.cloudinary.com/dv7wctcfp/image/upload/v1718755700/ntc5qerkmamkcgkxascp.png">
        </figure>
    </div>

<div class="container p-5" style="
    background: black;
">

    <div class="row">

      <div class="col-12 col-lg-6 p-lg-5">

        <div class="m-0 mb-5">

          <div class="text-start">

            <p class="h3 anton-regular text-white text-uppercase" style="
    font-size: 45px;
">Preguntas y Respuestas</p>

          </div>

        </div>

        <div class="m-0 mb-5">

           
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="question1">
                                <button class="accordion-button bg-dark text-warning" type="button" data-bs-toggle="collapse" data-bs-target="#answer1" aria-expanded="true" aria-controls="answer1">
                                    ¿Cómo puedo cancelar mi membresía?
                                </button>
                            </h2>
                            <div id="answer1" class="accordion-collapse bg-dark text-white collapse show" aria-labelledby="question1" data-bs-parent="#faqAccordion" style="">
                                <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 bg-dark text-warning 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 bg-dark text-white collapse" aria-labelledby="question2" data-bs-parent="#faqAccordion" style="">
                                <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 class="m-0">

          <div class="text-start">

            <button type="button" class="btn btn-default border-0" style="
    background: #F4A81E;
">Únete a nosotros</button>


          </div>

        </div>

      </div>

      <div class="col-12 col-lg-6">

        <div class="m-0">

          <div class="text-start">

            <figure class="my-5">

              <img class="img-fluid" src="https://res.cloudinary.com/dv7wctcfp/image/upload/v1718755824/pbmbow15d5b1hisl1tjx.jpg">

            </figure>

          </div>

        </div>

        

      </div>

    </div>

  </div>

  <div class="container p-0" style="background-image: url(https://res.cloudinary.com/dv7wctcfp/image/upload/v1718756954/ytfdt3gvoj9xtjcnjeeb.jpg);background-position: center center;background-repeat: no-repeat;background-size: cover;height: 80vh;" id="cta">

<div style="background-color:rgba(0,0,0,.5);height: 80vh;" class="p-0 m-0">

    <div class="row p-5">

      <div class="col-12 col-lg-5">

      </div>

      <div class="col-12 col-lg-7">

        <div class="m-0 my-5">

          <div class="text-start">

            <p class="h3 anton-regular text-uppercase text-white" style="
    font-size: 45px;
">¡Únete a la comunidad de Force Extreme hoy!</p>

          </div>

        </div> <div class="m-0">

          <div class="text-start">

            <button type="button" class="btn btn-default border-0" style="
    background: #F4A81E;
">Únete a nosotros</button>


          </div>

        </div>

        <div class="m-0">

          <div class="text-start">

            

          </div>

        </div>

      </div>

    </div>

  </div>
</div>

  <div class="container text-white p-5" style="
    background: black;
">

    <div class="m-0">

      <div class="text-center">

        <p class="h3 anton-regular text-center d-none d-lg-block" style="
    font-size: 10em;
">FORCE EXTREME</p>
<p class="h3 anton-regular text-center d-block d-lg-none" style="
    font-size: 7em;
">FORCE EXTREME</p>

      </div>

    </div><footer class="text-light py-4">
        <div class="container text-center">
            <p>© 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 text-warning"></i></a>
                <a href="#" class="text-light me-3"><i class="bi bi-twitter text-warning"></i></a>
                <a href="#" class="text-light me-3"><i class="bi bi-instagram text-warning"></i></a>
                <a href="#" class="text-light"><i class="bi bi-youtube text-warning"></i></a>
            </div>
        </div>
    </footer>
    
  </div>

</div>
HTML Editor

CSS Editor

JS Editor

HTML Editor

CSS Editor

JS Editor

Gestión de Landing
