<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <!-- Bootstrap link-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Icon Bootstrap-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
  </head>
  <body>
    <div class="container-fluid px-0">
        <!--NAVBAR-->
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark mx-0">
          <div class="container-fluid">
            <div class="col-md-3">
              <a class="navbar-brand" href="/"><img src="/images/logo.png" id="logo" alt=""></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                <span class="navbar-toggler-icon"></span>
              </button>
            </div>
            <div class="col-sm-1 collapse navbar-collapse" id="mynavbar">
              <ul class="navbar-nav me-auto">
                <li class="nav-item">
                  <a class="nav-link text-white" href="javascript:void(0)">Inicio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="javascript:void(0)">Categorías</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="javascript:void(0)">Sobre Nosotros</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="/register">Registro</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="/registerLibro">Registro Libro</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-white" href="/registerPrestamo">Préstamo</a>
                </li>
              </ul>
            </div>
            <div class="col-sm">
              <form class="d-flex text-dark">
                <button class="btn btn-login btn-outline-light rounded-pill me-2 text-white" type="button"><a href="/login" class="link-light">Login</a></button>
                <input class="form-control me-2 rounded-pill" type="text" placeholder="Search">
                <button class="btn btn-outline-light rounded-pill" type="button">Search</button>
              </form>
            </div>
          </div>
        </nav>
        <!--END NAVBAR-->

        <!--MAIN -->
        <div class="main container-fluid">
          <!-- Carousel -->
          <div id="demo" class="carousel slide pt-2 w-50" data-bs-ride="carousel">           
            <!-- The slideshow/carousel -->
            <div class="carousel-inner">
              <!--item 1-->
              <div class="carousel-item active">
                <img class="d-block w-50 p-0" src="/images/item1.jpg" alt="">
                <div class="carousel-overlay">
                  <div class="carousel-caption">
                    <h3>Cada historia cuenta</h3>
                    <h5 class="pb-2">Varios autores</h5>
                    <p>El lector o lectora encontrará entre sus páginas historias reales, 
                      vivencias y reflexiones personales sobre la discapacidad, desde una 
                      mirada positiva y enriquecedora, con historias  transcendentes de superación, 
                      capaces de empoderar, inspirar y motivar a otras personas.</p>
                  </div>
                </div>
              </div>
              <!--item 2-->
              <div class="carousel-item">
                <img class="d-block  w-50 p-0" src="/images/item2.jpg" alt="">
                <div class="carousel-overlay">
                  <div class="carousel-caption">
                    <h3>Los Electores</h3>
                    <h5 class="pb-2">Sergio Milán-Jerez</h5>
                    <p>En un mundo postapocalíptico, las principales empresas de seguridad 
                      privada se han hecho con el control de todo el planeta. La policía 
                      trabaja en un segundo plano. Los gobiernos no tienen poder de decisión. 
                      La justicia se ha vuelto cruel y despiadada...</p>
                  </div> 
                </div>
              </div>
              <!--item 3-->
              <div class="carousel-item">
                <img class="d-block w-50 p-0" src="/images/item3.jpg" alt="">
                <div class="carousel-overlay">
                  <div class="carousel-caption">
                    <h3>El Volador de las Capacidades</h3>
                    <h5 class="pb-2">Mª Isabel Alastuey Martinez et al.</h5>
                    <p>En este libro se relata el testimonio de la vida de seis personas 
                      con una importante discapacidad que ha llegado con el esfuerzo, la lucha, 
                      la valoración y el desarrollo de sus capacidades al éxito en la vida en 
                      diferentes áreas de la sociedad.</p>
                  </div>  
                </div>
              </div>
            </div>
            <!-- Left and right controls/icons -->
            <div class="carousel-panel">
              <!-- Indicators/dots -->
              <div class="carousel-indicators">
                <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
              </div>
              <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </button>
              <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
              </button>
            </div>
          </div>
          <!---->
          <section class="py-2" id="prod-container section">
            <div class="container-fluid">
              <div class="row">
                <div class="text-center">
                  <h2 class="tittles-pages text-uppercase">Servicios</h2>
                </div>
                <div class="col-xs-12 px-5">
                  <div class="container">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active text-dark" data-bs-toggle="tab" href="#proximos">Proximos</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link text-dark" data-bs-toggle="tab" href="#noticias">Noticias</a>
                      </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content bg-light">
                      <div id="proximos" class="container tab-pane active"><br>
                        <div class="row row-cols-1 row-cols-md-2 g-4 pb-2 d-flex justify-content-around">
                          <div class="card mb-3" >
                            <div class="row g-0">
                              <div class="col-md-4">
                                <img src="/images/libro1.jpg" class="img-fluid rounded-start" alt="portada_anna_karenina">
                              </div>
                              <div class="col-md-8">
                                <div class="card-body">
                                  <h5 class="card-title">Anna Karenina</h5>
                                  <p class="card-text">"Todas las familias felices se asemejan; cada familia infeliz es infeliz a su modo" Esta frase con la que da comienzo" Anna Karňina" (1877) ...</p>
                                  <p class="card-text"><small class="text-muted">Entrada: 12/10/2023</small></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="card mb-3">
                            <div class="row g-0">
                              <div class="col-md-4">
                                <img src="/images/libro2.jpeg" class="img-fluid rounded-start" alt="...">
                              </div>
                              <div class="col-md-8">
                                <div class="card-body">
                                  <h5 class="card-title">Orgullo y prejuicio</h5>
                                  <p class="card-text">Orgullo y prejuicio, publicada por primera vez el 28 de enero de 1813 como una obra anónima, es la más famosa de las novelas de Jane Austen...</p>
                                  <p class="card-text"><small class="text-muted">Entrada: 15/08/2023</small></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="card mb-3">
                            <div class="row g-0">
                              <div class="col-md-4">
                                <img src="/images/libro3.jpeg" class="img-fluid rounded-start" alt="portada_girasoles_ciegos">
                              </div>
                              <div class="col-md-8">
                                <div class="card-body">
                                  <h5 class="card-title">Los girasoles ciegos</h5>
                                  <p class="card-text">Los girasoles ciegos es un libro de relatos de 2004 del escritor español Alberto Méndez ambientado en la Guerra Civil Española y compuesta por cuatro obras...</p>
                                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="card mb-3">
                            <div class="row g-0">
                              <div class="col-md-4">
                                <img src="/images/libro4.jpeg" class="img-fluid rounded-start" alt="portada_mil_y_una_noches">
                              </div>
                              <div class="col-md-8">
                                <div class="card-body">
                                  <h5 class="card-title">Las mil y una noches</h5>
                                  <p class="card-text">Las mil y una noches es una recopilación medieval de cuentos orientales tradicionales. La obra fue tomando forma durante el transcurso de varios siglos...</p>
                                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div id="noticias" class="container tab-pane fade"><br>
                        <div class="row row-cols-1 row-cols-md-2 g-4 pb-2">
                          <div class="col d-flex justify-content-center">
                            <div class="card">
                              <img src="/images/noticias1.jpg" class="card-img-top" alt="firma_libro">
                              <div class="card-body">
                                <h5 class="card-title">Firma de libro: JAVIER CASTILLO </h5>
                                <p class="card-text">El autor del "El Cuco de Cristal" estará el próximo 22 de noviembre en la Casa del Libro de Sevilla firmando ejemplares a sus seguidores</p>
                              </div>
                            </div>
                          </div>
                          <div class="col d-flex justify-content-center">
                            <div class="card">
                              <img src="/images/noticias2.jpeg" class="card-img-top" alt="cambio_hora">
                              <div class="card-body">
                                <h5 class="card-title">Modificación horario de verano</h5>
                                <p class="card-text">Por motivos de la entrada del verano, el horario se cambiara de la siiguiente manera: 08:00 a 13:30 y de 18:00 a 22:00 de la tarde</p>
                              </div>
                            </div>
                          </div>
                          <div class="col d-flex justify-content-center">
                            <div class="card">
                              <img src="/images/noticias3.jpeg" class="card-img-top" alt="Recaudacin_libros">
                              <div class="card-body">
                                <h5 class="card-title">Recogida de libros</h5>
                                <p class="card-text">Dale una segunda oportunidad a los libros con nuestro evento de recogida de libros.  </p>
                              </div>
                            </div>
                          </div>
                          <div class="col d-flex justify-content-center">
                            <div class="card">
                              <img src="/images/noticias4.jpeg" class="card-img-top" alt="...">
                              <div class="card-body">
                                <h5 class="card-title">Feria del Libro de Sevilla</h5>
                                <p class="card-text">Tus autoras y autores favoritos estarán firmando ejemplares de sus obras en las casetas de las librerías y editoriales de esta FLS. </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <!--END MAIN-->
        
        <!--START FOOTER-->
        <footer class="bg-dark text-center text-white">
          <!-- Grid container -->
          <div class="container p-4">
            <!-- Section: Social media -->
            <section class="mb-4">
              <!-- Facebook -->
              <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                ><i class="bi bi-facebook"></i
              ></a>
              <!-- Twitter -->
              <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                ><i class="bi bi-twitter"></i
              ></a>
              <!-- Google -->
              <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                ><i class="bi bi-google"></i
              ></a>
              <!-- Instagram -->
              <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                ><i class="bi bi-instagram"></i
              ></a>
              <!-- Linkedin -->
              <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                ><i class="bi bi-linkedin"></i
              ></a>
            </section>
            <!-- Section: Social media -->
            <!-- Section: Form -->
            <section class="">
              <form action="">
                <!--Grid row-->
                <div class="row d-flex justify-content-center">
                  <!--Grid column-->
                  <div class="col-auto">
                    <p class="pt-2">
                      <strong>SUBSCRIBE</strong>
                    </p>
                  </div>
                  <!--Grid column-->
                  <!--Grid column-->
                  <div class="col-md-5 col-12">
                    <!-- Email input -->
                    <div class="form-outline form-white mb-4">
                      <input type="email" id="form5Example21" class="form-control rounded-pill" placeholder="Email adress" />
                    </div>
                  </div>
                  <!--Grid column-->
                  <!--Grid column-->
                  <div class="col-auto">
                    <!-- Submit button -->
                    <button type="submit" class="btn btn-outline-light rounded-pill mb-4">
                      Subscribe
                    </button>
                  </div>
                  <!--Grid column-->
                </div>
                <!--Grid row-->
              </form>
            </section>
            <!-- Section: Form -->
            <hr class="text-white px-0">
            <!-- Section: Links -->
            <section class="pb-0">
              <!--Grid row-->
              <div class="row">
                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                  <h5 class="text-uppercase">Categorias</h5>
                  <ul class="list-unstyled mb-0">
                    <li>
                      <a href="#!" class="text-white fw-light">Fantasia</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Novela Histórica</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Drama</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">...</a>
                    </li>
                  </ul>
                </div>
                <!--Grid column-->
                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                  <h5 class="text-uppercase">Secciones</h5>
                  <ul class="list-unstyled mb-0">
                    <li>
                      <a href="#!" class="text-white fw-light">Inicio</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Categorias</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Registro</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Sobre Nosotros</a>
                    </li>
                  </ul>
                </div>
                <!--Grid column-->
                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                  <h5 class="text-uppercase">Utils</h5>
                  <ul class="list-unstyled mb-0">
                    <li>
                      <a href="#!" class="text-white fw-light">Preguntas frecuentes</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Terminos de política</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Gestión de datos</a>
                    </li>
                    <li>
                      <a href="#!" class="text-white fw-light">Servicio técnico</a>
                    </li>
                  </ul>
                </div>
                <!--Grid column-->
                <!--Grid column-->
                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                  <h5 class="text-uppercase">Contáctanos</h5>
                  <ul class="list-unstyled mb-0">
                    <li class="pb-1">
                      <i class="bi bi-house-door-fill pr-1"></i>
                      <a href="#!" class="text-white fw-light">C/ localizacion, 4, 5D</a>
                    </li>
                    <li class="pb-1">
                      <i class="bi bi-envelope-at-fill pr-1"></i>
                      <a href="#!" class="text-white fw-light">example@email.com</a>
                    </li>
                    <li>
                      <i class="bi bi-telephone-fill pr-1"></i>
                      <a href="#!" class="text-white fw-light">+34 999-999-999</a>
                    </li>
                  </ul>
                </div>
                <!--Grid column-->
              </div>
              <!--Grid row-->
            </section>
            <!-- Section: Links -->
          </div>
          <!-- Grid container -->
          <hr class="text-white px-0">
          <!-- Copyright -->
          <div class="text-center p-3 pt-0">
            © 2020 Copyright:
            <a class="text-white" href="http://www.iesalixar.org/">I.E.S Alixar</a>
          </div>
          <!-- Copyright -->
        </footer>
        <!--END FOOTER-->
    </div>
  </body>
</html>
