<?php
require_once('config.php');
$light_mode = false;
$small_footer = false;
?>
<!doctype html>
<html lang="en">
  <head>
      <?php 
      // global head tag stylesheet
      /* **************************************** */
      include_once("components/head.php");
      /* **************************************** */
      // global head tag stylesheet
      ?>  

    <!-- CUSTOM CSS VIEW --> 
    <style>
      .franjas {
        background-image: linear-gradient(to right, white 11.1%, red 11.1% 22.2%, white 22.2% 33.3%, 
                    red 33.3% 44.4%, white 44.4% 55.5%, red 55.5% 66.6%, 
                    white 66.6% 77.7%, red 77.7% 88.8%, white 88.8% 100%);
        display: inline-block;
        border: 1px solid #dfdfdf;
        
      }

      h1 > .franjas{
        height: 35px;
        width: 100px;
      }


      h2 > .franjas{
        width: 50px;
        height: 28px;
      }

      @media (max-width: 575px) {
        h1 > .franjas{
          height: 25px !important;
          width: 55px !important;
        }

        #header.fixed-stop {
          max-height: 70px !important;
        }
        #divide-header {
          height: 70px !important;
        }
        #reserver-container {
            margin-top: -380px !important;
            padding-bottom: 15px !important;
        }
      }

      .newdate{
        background: red;
        color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 4px 10px;
        font-weight: bold;
        font-family: 'Anton', sans-serif;
      }

      .newview{
        background: red;
        color: #fff;
        position: relative;
        bottom: 10px;
        left: 10px;
        padding: 2px 8px;
        font-weight: bold;
        width: 100px;
        margin-bottom: -20px;
        margin-top: 10px;
      }

      #reserver-container{
        margin-top: -260px;
  padding-bottom: 85px;
  z-index: 3 !important;
  display: block;
  position: relative;
      }
      .reserva-home{
        padding: 30px;
  background: rgba(0,0,0,0.4);
      }

    </style>
    <!-- CUSTOM CSS VIEW END --> 
  </head>

  <body>

    <main role="main" class="main">
    
    <?php 

      // global header menu 
      /* **************************************** */
          require_once("components/header.php");
      /* **************************************** */
      // global header end
    ?> 
    <!-- COMPONENT CAROSULE -->
    <section class="py-5 text-center position-relative overlay-opacity overlay-opacity-scale-4" style="background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(assets/img/header-ofertas.webp);
}">
      <div class="container position-relative">
        <div class="row py-lg-5">
          <div class="col-lg-6 col-md-8 mx-auto mt-5 text-white">
            <h1 class="fw-bold">Promociones</h1>
            <h3 class="font-secondary text-11">Las Mejores Ofertas en habitaciones en el Las Condes</h3>
            <p class="lead">Hotel Leonardo Da Vinci ofrece una variedad de ofertas en habitaciones para mejorar su estadía en Las Condes. </p>
            
          </div>
        </div>
        </div>
  </section>
    <!-- COMPONENT CAROSULE END -->



    <div class="container my-5">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        <div class="col">
          <div class="card shadow-sm">
            <img class="bd-placeholder-img card-img-top w-100" src="assets/img/ofertas-valentin.webp" alt=""/>
            <div class="card-body">
              <h5 class="">ESCAPADA ROMÁNTICA</h5>
              <p class="card-text">Cualquier momento es perfecto para una escapada romántica con la mejor gastronomía en nuestro Restaurante.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <a href="<?=WEB?>oferta" class="btn btn-sm btn-outline-secondary">Saber Más</a>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Reservar Ahora</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img class="bd-placeholder-img card-img-top w-100" src="assets/img/ofertas-cena.webp" alt=""/>
            <div class="card-body">
              <h5 class="">ESCAPADA ROMÁNTICA</h5>
              <p class="card-text">Cualquier momento es perfecto para una escapada romántica con la mejor gastronomía en nuestro Restaurante.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <a href="<?=WEB?>oferta" class="btn btn-sm btn-outline-secondary">Saber Más</a>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Reservar Ahora</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img class="bd-placeholder-img card-img-top w-100" src="assets/img/ofertas-party.webp" alt=""/>
            <div class="card-body">
              <h5 class="">ESCAPADA ROMÁNTICA</h5>
              <p class="card-text">Cualquier momento es perfecto para una escapada romántica con la mejor gastronomía en nuestro Restaurante.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <a href="<?=WEB?>oferta" class="btn btn-sm btn-outline-secondary">Saber Más</a>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Reservar Ahora</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card shadow-sm">
            <img class="bd-placeholder-img card-img-top w-100" src="assets/img/ofertas-stgo.webp" alt=""/>
            <div class="card-body">
              <h5 class="">ESCAPADA ROMÁNTICA</h5>
              <p class="card-text">Cualquier momento es perfecto para una escapada romántica con la mejor gastronomía en nuestro Restaurante.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <a href="<?=WEB?>oferta" class="btn btn-sm btn-outline-secondary">Saber Más</a>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Reservar Ahora</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img class="bd-placeholder-img card-img-top w-100" src="assets/img/ofertas-family.webp" alt=""/>
            <div class="card-body">
              <h5 class="">ESCAPADA ROMÁNTICA</h5>
              <p class="card-text">Cualquier momento es perfecto para una escapada romántica con la mejor gastronomía en nuestro Restaurante.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <a href="<?=WEB?>oferta" class="btn btn-sm btn-outline-secondary">Saber Más</a>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Reservar Ahora</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card shadow-sm">
            <img class="bd-placeholder-img card-img-top w-100" src="assets/img/ofertas-valentin.webp" alt=""/>
            <div class="card-body">
              <h5 class="">ESCAPADA ROMÁNTICA</h5>
              <p class="card-text">Cualquier momento es perfecto para una escapada romántica con la mejor gastronomía en nuestro Restaurante.</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                <a href="<?=WEB?>oferta" class="btn btn-sm btn-outline-secondary">Saber Más</a>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Reservar Ahora</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>

       
       
      
      </div>
    </div>



      <div class=" animation" data-animated="fade-in-down-2s" data-delay="1000" id="reserver-all" style="position: absolute;
  z-index: 99;
  top: 130px;
  right: 20px;background: rgba(0,0,0,.7);
  padding: 20px; width: 180px;">
        <div class="row justify-content-md-center">
          
          <div class="col">
                      <div class="reserva-interior">

                                    <div class="input-group">
                                      <input type="date" class="form-control" placeholder="Desde" aria-label="Desde">
                                      <span class="input-group-text">to</span>
                                      <input type="date" class="form-control" placeholder="Hasta" aria-label="Hasta">
                                    </div>
                                    <button class="btn btn-primary w-100 h-100 pt-2 mt-2" type="submit">Reservar Ahora</button>
                                  </div>
                         
                      </div>
          </div>
        </div>
      </div>





    


 


</main>
    
    <?php 
      /* **************************************** */
      // footer
      require_once("components/footer.php");
      // footer end
      // script js global
      require_once('components/bottom.php');
      //  script js global end
      /* **************************************** */
    ?>        


    <!-- CUSTOM VIEW SCRIPT/LIBRARY END -->
    <script type="module" src="assets/js/views/home.js?<?=date('U')?>"></script>
    <!-- CUSTOM VIEW SCRIPT/LIBRARY END -->
   

    <script>
       window.addEventListener('scroll', function() {
          var scrollMessage = document.getElementById('header');
          // Si el desplazamiento vertical es mayor que 0, se ha desplazado hacia abajo.
          if (window.scrollY > 0) {
            scrollMessage.style.background = 'rgba(255,255,255,1)';
          } else {
            scrollMessage.style.background = 'rgba(255,255,255,.6)';
          }
        });
    </script>

  </body>
</html>
