<%- include("../template/cabecera") %>
<main>

    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="../images/restaurante1.jpg" alt="Se visualiza un restaurante llamado Restaurante Filomena" width="98%" height="500px" id="imagenes_restaurantes" class="img-responsive rounded esliza">
        </div>
        <div class="carousel-item">
          <img src="../images/restaurante1.1.jpg" alt="Se visualiza un restaurante llamado Restaurante Filomena" width="98%" height="500px" id="imagenes_restaurantes" class="img-responsive rounded esliza">
        </div>
        <div class="carousel-item">
          <img src="../images/restaurante1.2.webp" alt="Se visualiza un restaurante llamado Restaurante Filomena" width="98%" height="500px" id="imagenes_restaurantes" class="img-responsive rounded esliza">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      <hr class="featurette-divider">
    </div>
    <div class="align-items-center">
        <div class="text-center">
            <h2>Restaurante Filomena</h2>
            <p>Resturante de lujo especializada en la comida mediterrÃ¡nea con pescado y carne de calidad.</p>  
          </div>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-center text-center">
        <div class="col-12 col-sm-4 col-lg-4">
          <button type="button" class="btn btn-outline-warning">Mediterranea</button>
        </div>
        <div class="col-12 col-sm-4 col-lg-4">
          <img src="../images/Estrella_amarilla.png" width="30" height="30" alt="Se visualiza una estrella amarilla" class="img-responsive">
          <img src="../images/Estrella_amarilla.png" width="30" height="30" alt="Se visualiza una estrella amarilla" class="img-responsive">
          <img src="../images/Estrella_amarilla.png" width="30" height="30" alt="Se visualiza una estrella amarilla" class="img-responsive">
          <img src="../images/Estrella_amarilla.png" width="30" height="30" alt="Se visualiza una estrella amarilla" class="img-responsive">
          <img src="../images/Estrella_amarilla.png" width="30" height="30" alt="Se visualiza una estrella amarilla" class="img-responsive">
        </div>
        <div class="col-12 col-sm-4 col-lg-4">
          <p><a class="btn btn-outline-warning" href="/reserva/crear">Reservar &raquo;</a></p>
        </div>
      </div>
    
    
    <hr class="featurette-divider">
        <div class="container marketing">
      

            <div class="row">
                <div class="d-flex flex-wrap align-items-center justify-content-center text-center">
                  <div class="col-12 col-sm-6 col-lg-6">
                    <h2>Carne de ternera</h2>
                    <img src="../images/comida1.1.jpg" width="140" height="140" alt="Se visualiza un plato de carne." id="comida" class="img-responsive rounded m-2">
                  </div>
                  <div class="col-12 col-sm-6 col-lg-6">
                    <a  class="btn btn-outline-warning" href="/filomena/crear">Pedir</a>
                   
                  </div>
                </div>
              </div>
              <hr class="featurette-divider">
              <div class="row">
                <div class="d-flex flex-wrap align-items-center justify-content-center text-center">
                  <div class="col-12 col-sm-6 col-lg-6">
                    <h2>Pescado de pez espada</h2>
                    <img src="../images/comida1.2.jpg" width="140" height="140" alt="Se visualiza un plato de pescado." id="comida" class="img-responsive rounded">
                  </div>
                  <div class="col-12 col-sm-6 col-lg-6">
                    <a  class="btn btn-outline-warning" href="/filomena/crear">Pedir</a>
                  </div>
                </div>
              </div>
              <hr class="featurette-divider">
      

      
          
        </div>
      
  </main>
<%- include("../template/footer") %>