Landing Page Builder | Tutoriales a tu Alcance

GRID SYSTEM
HTML Editor

<div> 

  <div class="container-fluid">

    <div class="container">

      <div class="container-fluid">

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

          <div class="container-fluid px-0">

            <a class="navbar-brand bg-transparent ms-0 ps-0 pe-3 shadow-none position-relative" style="top:-10px;" href="/">
              <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/a444a812-a47f-171c-3a0a-feca04e41218.png" style="width:70px">
              <span class="lilita-one-regular h3 ps-1 text-uppercase position-relative" style="top:7px">La Vuelta al Mundo</span>
            </a>

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

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

              </span>

            </button>

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

              <ul class="navbar-nav ms-auto bg-light position-relative" style="top:-20px; border-radius: 0px 0px 20px 20px !important">

                <li class="nav-item py-2 px-3 border-end">

                  <a class="nav-link poppins-bold" href="#destinos">Destinos Increíbles</a>

                </li>

                <li class="nav-item py-2 px-3">

                  <a class="nav-link poppins-bold" href="#nosotros">Quienes Somos</a>

                </li>

                <li class="nav-item py-2 px-4 bgColor">

                  <a class="nav-link poppins-bold" href="#paquetes">Paquetes</a>

                </li>

                <li class="nav-item py-2 px-3">

                  <a class="nav-link poppins-bold" href="#testimonios">Testimonios</a>

                </li>

              </ul>

            </div>

          </div>

        </nav>

      </div>

      <div class="row p-5" style="background-image: url(https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/d0342bb1-4f60-576b-902e-a53c717e17d2.jpeg); background-position: center center; background-repeat: no-repeat; background-size: cover; height:700px">

        <div class="col-12 col-lg-6 my-5 py-5 position-relative" style="top:50px">

          <div class="text-start d-none d-lg-block">

            <p class="h1 lilita-one-regular text-uppercase display-2">Explora el Mundo a Tu Ritmo</p>

          </div>

          <div class="text-start d-none d-lg-block">

            <div class="btn-group py-4 rounded">

              <button type="button" class="btn btn-secondary border bgColor py-4 poppins-semibold rounded-start">Explora Destinos</button>

              <button type="button" class="btn btn-light border py-4 poppins-semibold">Experienca Inolvidable</button>

              <button type="button" class="btn btn-light border py-4 poppins-semibold">Atención Personalizada</button>

              <button type="button" class="btn btn-light border py-4 poppins-semibold rounded-end">Precio Inmejorable</button>

            </div>

          </div>

        </div>

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

        </div>

      </div>

      <div class="row">

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

          <div class="text-center py-5">

            <p class="h2 poppins-bold">¿Por Qué Elegirnos?</p>
            <p class="h6">Expertos en viajes personalizados con asistencia 24/7</p>

          </div>

          <div class="row">

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

              <div class="text-start">

                <h1>

                  <i class="bi bi-globe-americas"></i>

                </h1>

              </div>

              <div class="text-start">

                <p class="h3 poppins-bold">Precios Competitivos</p>

              </div>

              <div class="text-start">

                <p>Ofrecemos las mejores tarifas del mercado sin comprometer la calidad.</p>

              </div>

            </div>

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

              <div class="text-start">

                <h1>

                  <i class="bi bi-airplane"></i>

                </h1>

              </div>

              <div class="text-start">

                <p class="h3 poppins-bold">Itinerarios Personalizados</p>

              </div>

              <div class="text-start">

                <p>Diseñamos viajes a medida para que vivas experiencias únicas.</p>

              </div>

            </div>

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

              <div class="text-start">

                <h1>

                  <i class="bi bi-telephone-outbound-fill"></i>

                </h1>

              </div>

              <div class="text-start">

                <p class="h3 poppins-bold">Asistencia 24/7</p>

              </div>

              <div class="text-start">

                <p>Estamos contigo en cada paso del camino, desde la planificación hasta el regreso.</p>

              </div>

            </div>

          </div>

          <div class="text-start py-4" id="destinos">

            <p class="h2 poppins-bold">Destinos Increíbles</p>

          </div>

          <div class="row">

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

              <div class="card border-0 rounded mb-4 mb-lg-0" style="box-shadow:10px 10px 10px #3333">

                <div class="text-center">

                  <figure>

                    <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/fee9e72b-0fad-084f-5463-73443f55e0a3.jpeg" class="img-fluid w-100 rounded-top">

                  </figure>

                </div>

                <div class="text-start py-2 px-3">

                  <p class="h3 poppins-bold">Montañas Imponentes</p>

                </div>

                <div class="text-start py-2 px-3">

                  <p>Adéntrate en paisajes majestuosos, escala picos desafiantes y descubre la belleza de la naturaleza en su máxima expresión.</p>

                </div>

              </div>

            </div>

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

              <div class="card border-0 rounded mb-4 mb-lg-0" style="box-shadow:10px 10px 10px #3333">

                <div class="text-center">

                  <figure>

                    <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/50091ae5-ec0b-fe10-8772-30fea08eec77.jpeg" class="img-fluid w-100 rounded-top">

                  </figure>

                </div>

                <div class="text-start py-2 px-3">

                  <p class="h3 poppins-bold">Ciudades Cosmopolitas</p>

                </div>

                <div class="text-start py-2 px-3">

                  <p>Relájate en playas paradisíacas, explora arrecifes de coral vibrantes y disfruta de la tranquilidad del océano.</p>

                </div>

              </div>

            </div>

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

              <div class="card border-0 rounded" style="box-shadow:10px 10px 10px #3333">

                <div class="text-center">

                  <figure>

                    <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/4bc88f19-84b4-1b02-0678-aedd06877cda.jpeg" class="img-fluid w-100 rounded-top">

                  </figure>

                </div>

                <div class="text-start py-2 px-3">

                  <p class="h3 poppins-bold">Aventuras Exóticas</p>

                </div>

                <div class="text-start py-2 px-3">

                  <p>Sumérgete en la cultura vibrante, explora museos y galerías de arte, y disfruta de una experiencia urbana única.</p>

                </div>

              </div>

            </div>

          </div>

          <div class="row pt-5 mt-5">

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

              <div class="text-center">

                <figure>

                  <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/006f541e-daf8-bb9b-ea8d-f8cbfced9d5c.png" class="img-fluid w-100 rounded">

                </figure>

              </div>

            </div>

            <div class="col-12 col-lg-6 px-lg-5" id="nosotros">

              <div class="text-start">

                <p class="h1 lilita-one-regular text-uppercase">Somos La Vuelta al Mundo</p>

              </div>

              <div class="text-start">

                <p>Experimenta el mundo con nosotros. Encuentra tu próximo destino de ensueño y comienza a planificar tu viaje ideal.</p>

              </div>

              <div class="text-start">

                <p class="h3 poppins-bold">¡Empieza a Planificar Tu Próximo Viaje!</p>

              </div>

              <div class="text-start">

                <p>Contáctanos hoy mismo y déjanos ayudarte a crear el viaje de tus sueños.</p>

              </div>

              <div class="text-start">

                <button type="button" class="btn btn-default bgColor p-3 rounded">Organiza tu viaje ahora</button>

              </div>

            </div>

          </div>

          <div class="text-center py-5">

            <p class="h2 poppins-bold">Información Útil sobre los Destinos</p>

          </div>

          <div class="row">

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

              <div class="d-flex py-2">

                <div class="h2 display-4 pe-4">
                  <i class="bi bi-1-square"></i>
                </div>

                <div>

                  <div class="text-start">

                    <p class="h3 poppins-bold">Visa y Pasaporte</p>

                  </div>

                  <div class="text-start">

                    <p>Información sobre los requisitos de visa y pasaporte para cada destino.</p>

                  </div>

                </div>

              </div>

              <div class="d-flex py-2">

                <div class="h2 display-4 pe-4">
                  <i class="bi bi-2-square"></i>
                </div>

                <div>

                  <div class="text-start">

                    <p class="h3 poppins-bold">Clima y Estaciones</p>

                  </div>

                  <div class="text-start">

                    <p>Conoce las mejores épocas para visitar cada destino, considerando el clima y las temperaturas.</p>

                  </div>

                </div>

              </div>

              <div class="d-flex py-2">

                <div class="h2 display-4 pe-4">
                  <i class="bi bi-3-square"></i>
                </div>

                <div>

                  <div class="text-start">

                    <p class="h3 poppins-bold">Moneda y Cambio</p>

                  </div>

                  <div class="text-start">

                    <p>Información sobre la moneda local y el cambio de divisas.</p>

                  </div>

                </div>

              </div>

              <div class="d-flex py-2">

                <div class="h2 display-4 pe-4">
                  <i class="bi bi-4-square"></i>
                </div>

                <div>

                  <div class="text-start">

                    <p class="h3 poppins-bold">Recomendaciones de Seguridad</p>

                  </div>

                  <div class="text-start">

                    <p>Consejos importantes para mantenerte seguro durante tu viaje.</p>

                  </div>

                </div>

              </div>

              <div class="text-start">

                <button type="button" class="btn btn-default bgColor p-3 rounded mb-4 mb-lg-0">Reservar Ahora</button>

              </div>

            </div>

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

              <div class="text-center">

                <figure>

                  <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/5ed84a37-fa28-b415-95fc-87a341923627.jpeg" class="img-fluid w-100 rounded">

                </figure>

              </div>

            </div>

          </div>

          <div class="text-center py-5 mt-5" id="paquetes">

            <p class="h2 poppins-bold">Paquetes de Viaje a Tu Medida</p>

          </div>

          <div class="row mb-4">

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

              <div class="text-start">

                <h1>

                  <i class="fas fa-users"></i>

                </h1>

              </div>

              <div class="text-start">

                <p class="h3 poppins-bold">Vacaciones Familiares</p>

              </div>

              <div class="text-start">

                <p>Encuentra paquetes ideales para familias que incluyen actividades divertidas para todas las edades, desde parques de atracciones hasta safaris en la naturaleza.</p>

              </div>

            </div>

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

              <div class="text-start">

                <h1>

                  <i class="fas fa-heart"></i>

                </i>

              </h1>

            </div>

            <div class="text-start">

              <p class="h3 poppins-bold">Escapadas Románticas</p>

            </div>

            <div class="text-start">

              <p>Disfruta de un viaje inolvidable en pareja, con experiencias románticas como cenas a la luz de las velas, paseos por la playa y alojamientos de lujo.</p>

            </div>

          </div>

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

            <div class="text-start">

              <h1>

                <i class="fas fa-mountain"></i>

              </i>

            </h1>

          </div>

          <div class="text-start">

            <p class="h3 poppins-bold">Aventuras Extremas</p>

          </div>

          <div class="text-start">

            <p>Vive experiencias emocionantes como senderismo en la selva, buceo con tiburones, escalada en roca o rafting en aguas bravas.</p>

          </div>



        </div>

      </div>

      <div class="text-start py-4">

        <p class="h2 poppins-bold">Imágenes de Destinos de Ensueño</p>

      </div>

      <div class="row pb-5">

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

          <div class="card border-0 rounded mb-4 mb-lg-0" style="box-shadow:10px 10px 10px #3333">

            <div class="text-center">

              <figure>

                <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/854dea9d-b31d-92b0-fed0-ec5f909959e1.jpeg" class="img-fluid w-100 rounded-top">

              </figure>

            </div>

            <div class="text-start py-2 px-3">

              <p class="h3 poppins-bold">Playas Paradisíacas</p>

            </div>

            <div class="text-start py-2 px-3">

              <p>Adéntrate en paisajes majestuosos, escala picos desafiantes y descubre la belleza de la naturaleza en su máxima expresión.</p>

            </div>

          </div>

        </div>

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

          <div class="card border-0 mb-4 mb-lg-0" style="box-shadow:10px 10px 10px #3333">

            <div class="text-center">

              <figure>

                <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/da8385bc-9518-2ad6-e1a9-612690491ea2.jpeg" class="img-fluid w-100 rounded-top">

              </figure>

            </div>

            <div class="text-start py-2 px-3">

              <p class="h3 poppins-bold">Ciudades Históricas</p>

            </div>

            <div class="text-start py-2 px-3">

              <p>Relájate en playas paradisíacas, explora arrecifes de coral vibrantes y disfruta de la tranquilidad del océano.</p>

            </div>

          </div>

        </div>

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

          <div class="card border-0 rounded mb-4 mb-lg-0" style="box-shadow:10px 10px 10px #3333">

            <div class="text-center">

              <figure>

                <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/c4cc9214-bc42-508e-03fa-69e6f1a2a95d.jpeg" class="img-fluid w-100 rounded-top">

              </figure>

            </div>

            <div class="text-start py-2 px-3">

              <p class="h3 poppins-bold">Atolones Exóticos</p>

            </div>

            <div class="text-start py-2 px-3">

              <p>Sumérgete en la cultura vibrante, explora museos y galerías de arte, y disfruta de una experiencia urbana única.</p>

            </div>

          </div>

        </div>

      </div>

      <div class="row my-0 mb-5 my-lg-5 rounded" style="background-image: url(https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/a3987aed-c045-9722-2f27-3a06bc57712e.png); background-position: center center; background-repeat: no-repeat; background-size: cover;">

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

          <div class="text-start p-4 my-5" style="height: 450px;">

            <p class="h2 poppins-bold my-3 d-none d-lg-block">Seguridad y Garantías</p>

            <p class="h6 w-50 my-3 font-weight-light d-none d-lg-block">Tu seguridad es nuestra prioridad. Contamos con protocolos estrictos para garantizar la seguridad de nuestros clientes durante sus viajes.</p>

            <p class="h6 w-50 my-3 font-weight-light d-none d-lg-block">Ofrecemos una amplia gama de garantías para tu tranquilidad, incluyendo protección de cancelación, seguro de viaje y asistencia médica en el extranjero.</p>

          </div>

        </div>

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

          <div class="row">

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

              <div class="d-none d-lg-flex flex-wrap justify-content-center align-content-end" style="height:450px">

                <div class="m-0">

                  <div class="text-center">

                    <figure>

                      <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/4832f7a1-6c2e-5f66-d115-812ed1f11549.jpeg" class="img-fluid w-100 rounded">

                    </figure>

                  </div>

                </div>

                <div class="m-0">

                  <div class="text-center">

                    <figure>

                      <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/105635e8-b89e-e4db-4b71-83c09d4793fe.jpeg" class="img-fluid w-100 rounded">

                    </figure>

                  </div>

                </div>

              </div>

            </div>

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

              <div class="d-flex flex-wrap justify-content-center align-content-end" style="height:450px">



                <div class="m-0">

                  <div class="text-center">

                    <figure>

                      <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/4f24160a-1683-6ee2-9f34-f648666710fa.jpeg" class="img-fluid w-100 rounded">

                    </figure>

                  </div>

                </div>

                <div class="m-0">

                  <div class="text-center">

                    <figure>

                      <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/f2d0b129-820d-9124-8f3e-f1e146eeb28c.jpeg" class="img-fluid w-100 rounded">

                    </figure>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="text-center py-3" id="testimonios">

    <p class="h2 poppins-bold">Lo que Dicen Nuestros Clientes</p>

  </div>

  <div class="row my-5">

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

      <div class="m-0">

        <div class="text-center">

          <figure>

            <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/15185ce1-e944-a327-c07e-e88bbd32b87b.jpeg" class="img-fluid w-100 rounded">

          </figure>

        </div>

      </div>

      <div class="text-start">

        <p class="h3 poppins-bold">Experiencia Inolvidable</p>

      </div>

      <div class="text-start">

        <p>La organización del viaje fue impecable, desde la elección del hotel hasta las excursiones. ¡Un viaje que superó nuestras expectativas!</p>

      </div>

    </div>

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

      <div class="m-0">

        <div class="text-center">

          <figure>

            <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/b0737605-f6d6-c36d-bc82-727bc6da2b60.jpeg" class="img-fluid w-100 rounded">

          </figure>

        </div>

      </div>

      <div class="text-start">

        <p class="h3 poppins-bold">Atención Personalizada</p>

      </div>

      <div class="text-start">

        <p>El equipo de La Vuelta al Mundo fue increíblemente atento y nos brindó un servicio personalizado que hizo que nuestro viaje fuera aún más especial.</p>

      </div>

    </div>

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

      <div class="m-0">

        <div class="text-center">

          <figure>

            <img src="https://mcusercontent.com/a35bb4ec1d194127631ca3901/images/2ccd0f1b-0ece-147e-0b40-97d52d3b222d.jpeg" class="img-fluid w-100 rounded">

          </figure>

        </div>

      </div>

      <div class="text-start">

        <p class="h3 poppins-bold">Precio Inmejorable</p>

      </div>

      <div class="text-start">

        <p>Encontramos la mejor oferta para nuestro viaje y la atención al cliente fue excepcional. ¡Recomendamos altamente La Vuelta al Mundo!</p>

      </div>

    </div>

  </div>

  <div class="row">

    <div class="text-center">

      <button type="button" class="btn btn-default bgColor p-3 btn-lg rounded">Organiza tu viaje ahora</button>

    </div>
  </div>


</div>

</div> 

</div>

<section id="contacto" class="bg-dark text-white text-center py-5 mt-5">

  <div class="container">

    <div class="row">

      <div class="col-md-8 offset-md-2">


        <h2 class="mb-4">Contáctanos</h2>
        <p class="lead">Completa el formulario y nos pondremos en contacto contigo lo antes posible.</p>
        <form class="row g-3">
          <div class="col-md-6">
            <input type="text" class="form-control" placeholder="Nombre Completo" required>
          </div>
          <div class="col-md-6">
            <input type="email" class="form-control" placeholder="Correo Electrónico" required>
          </div>
          <div class="col-12">
            <textarea class="form-control" rows="4" placeholder="¿En qué podemos ayudarte?" required></textarea>
          </div>
          <div class="col-12 my-4">
            <button type="submit" class="btn btn-default bgColor rounded px-4">Solicitar Cotización Gratis</button>
          </div>
        </form>
        <p class="mt-3">O contáctanos directamente al <strong>+34 123 456 789</strong> o <strong>info@lavueltaalmundo.com</strong></p>
      </div>

    </div>


  </div>
</section>

<footer class="bg-light text-center py-4">
  <div class="container">
    <p>&copy; 2024 La Vuelta al Mundo. Todos los derechos reservados.</p>
    <a href="#" class="text-dark">Política de Cancelación</a>
  </div>
</footer>
HTML Editor

CSS Editor

JAVASCRIPT Editor

Configuración

HTML Editor

CSS Editor

JAVASCRIPT Editor
