index.html

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="firefox">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>NINMRODEL Restaurante y Pub</title>
        <link rel="icon" href="assests/img/n.ico">
        <!--Estilos CSS-->
        <link rel="stylesheet" href="assests/css/style.css">
        <!--Bootstrap-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <!--JQuery-->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    </head>
    <body>
   <!--  <header col-xs-12-bold col-sm-12-bold col-md-12-thin>
            <a href="#" class="logo">
                <img src="assests/img/n.png" alt="Logo">
            </a>
    </header>-->
        <nav class="body-header navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid";>
                    <a class="img-fluid" href="#">
                        <img src="/assests/img/n.ico" alt="Bootstrap" width="30" height="24">
                    </a>
                
                </div>
                
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            
                <div class="navbar-nav">
                    
                <a class="nav-link active" aria-current="page" href="#">Inicio</a>
                <a class="nav-link" href="#">Nuestros Productos</a>
                <a class="nav-link" href="#">Sobre Nosotros</a>
                <a class="nav-link" href="#COMUNIQUEMONOS">Comuniquemonos</a>
                <a class="nav-link" href="#RESERVA">Reserva</a>
                </div>
                
            </div>
            
            </div>
        </nav>     
        <div col-sm-12-bold col-md-12-thin><center>
            <!--<nav >
                <li>Nuestros productos</li>
                <li>Sobre Nosotros</li>
                <li><a href="#COMUNIQUEMONOS">Comuniquemonos</a></li><br>
                <li><a href="#RESERVA">Reserva</a></li>
            </nav>-->

            <h1 id="titulo"><strong><b>Nimrodel Pub Restaurant</b></strong></h1><hr>
            <h4 id="subtitulo"><strong>Destacados de la semana</strong></h4>
            <section>
                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <div class="card" style="width: 18rem;">
                            <img id="bebidas" class="card-img-top" src="assests/img/bebidas.jpg" alt="Card image cap">
                            <div class="card-body">
                            <p class="card-text">Lorem ipmsum, andae optio ea explicabo non voluptatum eaque</p>
                            </div>
                        </div><br>
                        <div class="card" style="width: 18rem;">
                            <img id="tablas" class="card-img-top" src="assests/img/tablas.jpg" alt="Card image cap">
                            <div class="card-body">
                            <p class="card-text">Lorem ipmsum, andae optio ea explicabo non voluptatum eaque</p>
                            </div>
                        </div><br>
                        <div class="card" style="width: 18rem;">
                            <img id="shop" class="card-img-top" src="assests/img/shop.jpeg" alt="Card image cap">
                            <div class="card-body">
                            <p class="card-text">Lorem ipmsum, andae optio ea explicabo non voluptatum eaque</p>
                            </div>
                    </div>
                </div>
            </section>
        </div>
            
        <!-- 
        <table><center>     
            <tr>
                <td id="img_1"><img src="assests/img/bebidas.jpg" width="200" height="100"></td>
                <td id="img_2"><img src="assests/img/tablas.jpg" width="200" height="100"></td>
                <td id="img_3"><img src="assests/img/shop.jpeg" width="200" height="100"></td>
            </tr>
            <tr>
                <td id="txt_1"><b>Gaseosas</b></td>
                <td id="txt_2"><b>Tablas</b></td>
                <td id="txt_3"><b>Shop Cerveza</b></td>
            </tr>
   <tr>
                <td id="des_1">Lorem ipmsum, andae optio <br> ea explicabo non voluptatum eaque</td>
                <td id="des_2">Lorem ipmsum, andae optio <br> ea explicabo non voluptatum eaque</td>
                <td id="des_3">Lorem ipmsum, andae optio <br> ea explicabo non voluptatum eaque</td>
            </tr>
  </table></center>-->
            <section>
                <br><!--le force un salto a proposito-->
            </section> 

<!-- 
            <div >
                <img id="image_1"src="assests/img/bebidas.jpg" alt="Gaseosas" width="300" height="200"
            </div>    
                <p><b>GASEOSAS</b></p>
                <p>Lorem ipmsum, andae optio ea explicabo non voluptatum eaque.</p>
            
            <div>
                <img id="image_2" src="assests/img/tablas.jpg" alt="Tablas" width="300" height="200"
            </div>    
                <p><b>TABLAS</b></p>
                <p>Lorem ipmsum, andae optio ea explicabo non voluptatum eaque.</p>
             
            <div>
                <img id="image_3" src="assests/img/shop.jpeg" alt="Shop Cerveza" width="300" height="200"
            </div>    
                <p><b>SHOP CERVEZA</b></p>
                <p>Lorem ipmsum, andae optio ea explicabo non voluptatum eaque.</p>
              -->
<!-- 
        <div class="oculto">
            <div id="form_1"><center>
                <a name="COMUNIQUEMONOS"></a>
                <h2>COMUNIQUEMONOS</h2>
                <form id="" action=""method="">
                    <div>
                        <label for="nombre">Nombre</label>
                        <input type="text" name="nombre" id="nombre" placeholder="Maria Vargas" required>
                    </div><br>
                    <div>
                        <label for="email">Correo</label>
                        <input type="email" name="email" id="email" placeholder="mariavargas@correo.com" required>
                    </div><br>
                    <div>
                        <label for="phone">Telefono:</label>
                        <input type="tel" id="phone" name="phone" placeholder="951236874" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
                    </div><br>
                    <div>
                        <label for="motivo">Motivo</label>
                        <input type="motivo" name="motivo" id="motivo" class="box">
                    </div><br>
                    <div>
                        <p><textarea class="box" name="comentario" rows="2" cols="30">Escribe aquí tu comentario: </textarea></p>
                    </div>
                    <button>Enviar</button>
                </form></center>-->
                <!--Formularios con Bootstrap-->
                <!--Formulario 1-->
        <div class="oculto">
                <div id="form_1"><center>
                <div class="contenedor">
                    <form class="row g-3" action="button">
                      <div> <a name="COMUNIQUEMONOS"></a>
                        <h2>COMUNIQUEMONOS<h2> </div>             
                      <div class="col-md-12"> <!--Luego indico que debe ser en columna-->
                                        <label for="Nombre">Nombre</label>
                                        <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Maria Vargas" required>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="email">Correo Electronico</label>
                                        <input type="email" class="form-control" name="email" id="email" placeholder="mariavargas@correo.com" required><br>
                                    </div>
                        <div class="col-md-12">
                                        <label for="phone">Telefono</label>
                                        <input type="tel" class="form-control" name="phone" id="phone" placeholder="951236874" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br>
                                    </div>
                                                    
                                         <div class="col-md-12">
                                        <label for="motivo">Motivo</label>
                                        <input type="motivo" name="motivo" id="motivo" class="box">
                        </div><br>   
                                        <p><textarea class="box" name="comentario" id="comentario" rows="5" cols="30" placeholder="Escribe aqui tu comentario"></textarea></p>
                                      <div class="col-12">
                                        <button type="button" class="btn btn-secondary" id="submit">Enviar</button>
                                        </div>
                                                
                                    </div>
                                </form></center>
                            </div> 
                            </div>               
            </div>
        </div><br>
            <!--Seccion agregada a proposito-->
            <section>
                <br><!--Salto Forzado-->
            </section> 
             <!--Seccion agregada a proposito-->
           
             <!--Formulario 2--> 
        <div class="oculto">     
            <div id="form_2"><center>
                <div class="contenedor">
                    <form class="row g-3" action="button">
                        <div> 
                            <a name="RESERVA"></a>
                                <h2>RESERVA</h2> 
                        </div>             
                                <div class="col-md-12"> <!--Luego indico que debe ser en columna-->
                                    <label for="Nombre">Nombre</label>
                                    <input type="text" class="form-control" name="nombre" id="name" placeholder="XXX XXXXX" required>
                                </div>
                                <div class="col-md-12">
                                    <label for="email">Correo Electronico</label>
                                    <input type="email" class="form-control" name="email" id="email_1" placeholder="XXX@XXX.XX" required><br>
                                </div>
                                <div class="col-md-12">
                                    <label for="phone">Telefono</label>
                                    <input type="tel" class="form-control" name="phone" id="phone_1" placeholder="XXXXXXXXX" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br>
                                </div>
                                                    
                                <div class="col-md-12">
                                    <label for="fecha">Fecha</label>
                                    <input type="date" name="date" id="date" class="box" required>
                                </div><br> 

                                <div class="col-md-12">
                                    <label for="hora">Hora</label>
                                    <input type="time" name="time" id="time" class="box" required>
                                </div><br> 
                                <div class="col-md-12">
                                    <label for="quantity">Cantidad de Asistentes (max 6):</label>
                                    <input type="number" id="quantity" name="quantity" min="1" max="6" class="box" required>
                                </div><br>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-secondary" id="reservarBtn">Reservar</button>
                                </div>               
                                </div>
                    </form></center>
                        </div> 
                </div> 
            </div><br>
        </div> 
            <!--Formulario sin bootstrap
            <div col-xs-12-bold col-sm-12-bold col-md-12-thin id="form_2"><center>
                <a name="RESERVA"></a>
                <h2>RESERVA</h2>
                <form id="" action="" method="">
                    <div>
                        <label for="nombre">Nombre</label>
                        <input type="text" name="nombre" id="nombre" placeholder="XXX XXXXX" required>
                    </div><br>le force un salto a proposito
                    <div>
                        <label for="email">Correo</label>
                        <input type="email" name="email" id="email" placeholder="XXX@XXX.XX" required>
                    </div><br>
                    <div>
                        <label for="phone">Telefono:</label>
                        <input type="tel" id="phone" name="phone" placeholder="XXXXXXXXX" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
                    </div><br>
                    <div>
                        <label for="fecha">Fecha</label>
                        <input type="date">
                    </div><br>
                    <div>
                        <label for="hora">Hora</label>
                        <input type="time">
                    </div><br>
                    <div>
                        <label for="quantity">Cantidad de Asistentes (max 6):</label>
                        <input type="number" id="quantity" name="quantity" min="1" max="6" required>
                    </div>
                    <button>Reservar</button>
                </form></center><br>
            </div> <br>-->
        </div>
            <section>
                <br><!--le force un salto a proposito-->
            </section>

            <!--Carrusel-->
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="/assests/img/chorillana.jpg" class="d-block w-100" alt="..." id="image">
                  </div>
                  <div class="carousel-item">
                    <img src="/assests/img/tablas.jpg" class="d-block w-100" alt="..." id="image">
                  </div>
                  <div class="carousel-item">
                    <img src="/assests/img/vino.jpg" class="d-block w-100" alt="..." id="image">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Anterior</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Siguiente</span>
                </button>
              </div>
            <!--Footer o pie de pagina-->
            <div class="pie">  
            <footer col-sm-12-bold col-md-12-thin><center>
                <p id="autor">Elaborado por Dann LeBeau</p>
                <p id="derechos">Todos los derechos reservados&copy;</p>
            </footer></center>
            </div> 
            <!--Codigo Javascript-->
            <script src="./assests/js/script.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>        
    </body>
</html>