"Dinning room "
Bootstrap 3.3.0 Snippet by Franksnake

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <header> <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navegacion-fm"> <span class="sr-only">Desplegar / Ocultar Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand">Dinning Room</a> </div> <div class="collapse navbar-collapse" id="navegacion-fm"> <ul class="nav navbar-nav"> <li><a href="index.html">Inicio</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"> Menu <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="carrito/index.php">Desayuno</a></li> <li class="divider"></li> <li><a href="#">Comida</a></li> <li class="divider"></li> <li><a href="·">Cena</a></li> <li class="divider"></li> </ul> </li> <li><a href="registrarse.php" target="_blank">Registrarse</a></li> <li><a href="#">Contacto</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a> <ul id="login-dp" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> <br /> <div class="panel panel-default"> <div class="panel-heading">Login</div> <div class="panel-body"> <form method="post"> <?php echo $message; ?> <div class="form-group"> <label>User Email</label> <input type="text" name="user_email" class="form-control" required /> </div> <div class="form-group"> <label>Password</label> <input type="password" name="user_password" class="form-control" required /> </div> <div class="form-group"> <input type="submit" name="login" value="Login" class="btn btn-info" /> </div> </form> </div> <div class="bottom text-center"> New here ? <a href="#"><b>Join Us</b></a> </div> </div> </li> </ul> </li> </ul> </ul> </div> </div> </nav> </header> <section class="jumbotron"> <div class="container"> <h1>Dinning Room</h1> <p>Comedor industrial</p> </div> </section> <div class="containers"> <br> <div class="col-md 12"> <div id="carousel-1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-1" data-slide-to="0" class="active"></li> <li data-target="#carousel-1" data-slide-to="1"></li> <li data-target="#carousel-1" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://lorempixel.com/1575/400/food/1" class="img-responsive" alt=""> <div class="carousel-caption hidden-xs hidden-sm"> <h3>Buena comida</h3> </div> </div> <div class="item"> <img src="http://lorempixel.com/1575/400/food/2" class="img-responsive" alt=""> <div class="carousel-caption hidden-xs hidden-sm"> <h3>En poco tiempo</h3> </div> </div> <div class="item"> <img src="http://lorempixel.com/1575/400/food/3" class="img-responsive" alt=""> <div class="carousel-caption hidden-xs hidden-sm"> <h3> El mejor servicio</h3> </div> </div> </div> <a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Anterior</span> </a> <a href="#carousel-1" class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Siguente</span> </a> </div> </div> </div> <section class="main container"> <div class="row"> <section class="posts col-md-9"> <div class="miga-de-pan"> <ol class="breadcrumb"> <li><a href="index.html">Inicio</a></li> <!--<li><a href="#">Categoria</a></li>--> <li class="active">Menu del dia</li> </ol> </div> <article class="post clearfix"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img1.jpg" alt=""> </a> <h2 class="post-title"> <a href="#">Pizza a la leña</a> </h2> <!--<p><span class="post-fecha">26 de febrero del 2017</span> por <span class="post-autor"><a href="#">Francisco Montoya</a></span></p>--> <p class="post-contenido text-justify"> Pan de la casa dorado con queso Mozzarella, tomate seco y fresco, adobado con finas hierbas en albahaca fresca. Bolitas de pan rellenas de queso Mozzarella, tomte seco adobado con orégano y pimienta. Rodajas de pan con mantequilla de ajo, tomate fresco, oregano acompañados de aceite de oliva y vinagre balsámico. </p> <div class="contenedor-botones"> <a href="#ventana1" class="btn btn-primary btn-lg" data-toggle="modal" >Leer mas </a> <div class="modal fade" id="ventana1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title">Platillo principal</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img1.jpg" alt=""> </a> <p>Entre los más frecuentes, se hallan el jamón, la panceta o tocino, las rodajas de tomate fresco, la cebolla y las aceitunas. Para condimentar la pizza, es habitual que se emplee orégano, ají molido y un chorro de aceite de oliva.</p> </div> <div class="modal-footer"> <div class="contenedor-botones"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <a href="#ventana7" class="btn btn-primary btn-lg" data-toggle="modal" >Ordenar</a> <div class="modal fade" id="ventana7"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title pull-left">Ordenar</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> </a> <p class="post-contenido text-justify">Ya estas registrado?</p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal">Cerrar</button> <button onclick="myfunction()" type="button" class="btn btn-default" data-dismiss="modal">Registrarse</button> <script> function myfunction(){ window.open("registrarb.php"); } </script> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </article> <article class="post clearfix"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img7.jpg" alt=""> </a> <h2 class="post-title"> <a href="#">Bebida</a> </h2> <p class="post-contenido text-justify"> La cerveza de raíz, zarzaparrilla o root beer es una bebida fermentada, que contiene 0,35% de alcohol, elaborada mediante una combinación de vainilla, corteza de cerezo, raíz de orozuz (regaliz), corteza de raíz de sasafrás (que en su forma natural llega a ser carcinogénica), nuez moscada, anís, y melaza, entre otros. </p> <div class="contenedor-botones"> <a href="#ventana2" class="btn btn-primary btn-lg" data-toggle="modal" >Leer mas </a> <div class="modal fade" id="ventana2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title">Bebida</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img7.jpg" alt=""> </a> <p>La cerveza de raíz es una bebida fermentada, elaborada mediante una combinación de vainilla, corteza del árbol de cereza, raíz de orozuz (también llamada raíz de regaliz), corteza de raíz de sasafrás (que en su forma natural llega a ser carcinogénica), nuez moscada, anís, y melaza, entre otros ingredientes. También existe la versión alcohólica de la bebida.</p> </div> <div class="modal-footer"> <div class="contenedor-botones"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <a href="#ventana8" class="btn btn-primary btn-lg" data-toggle="modal" >Ordenar</a> <div class="modal fade" id="ventana8"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title pull-left">Ordenar</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> </a> <p class="post-contenido text-justify">Ya estas registrado?</p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal">Cerrar</button> <button onclick="myfunction1()" type="button" class="btn btn-default" data-dismiss="modal">Registrarse</button> <script> function myfunction1(){ window.open("registrarb.php"); } </script> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </article> <article class="post clearfix"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img8.jpg" alt=""> </a> <h2 class="post-title"> <a href="#">Postre</a> </h2> <p class="post-contenido text-justify"> El tiramisú es un postre frío de cuchara que se monta en capas. No existe una receta única de elaboración, sino variantes a partir de una serie de ingredientes base que pueden ser representados por distintos productos. Se prepara con café y un poco de licor. </p> <div class="contenedor-botones"> <a href="#ventana3" class="btn btn-primary btn-lg" data-toggle="modal" >Leer mas </a> <div class="modal fade" id="ventana3"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title">Postre</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img8.jpg" alt=""> </a> <p>Un tiramisú se compone siempre de un ingrediente sólido humedecido en café, sobre el que se superpone (de forma alterna o no) una crema cuya base son huevos batidos con azúcar; se presenta espolvoreado con cacao en polvo. Partiendo de estos elementos básicos, es posible realizar diferentes versiones del postre utilizando distintos representantes de los mismos y añadiendo otros ingredientes. El ingrediente sólido y seco pueden ser galletas, bizcochos, Savoiardi, etc. Los huevos pueden ser separados en yemas y claras, batiéndose independientemente (las claras a punto de nieve). Hoy en día es muy habitual añadirle a los huevos nata montada o queso fresco. El queso que se suele utilizar en el tiramisú es el Mascarpone (por su dulzor y consistencia natosa); no obstante, cualquier queso fresco (sin sabor marcado) que, una vez batido, pueda convertirse en una crema es igualmente indicado. Al café (en principio, café solo), se le puede añadir ron o Amaretto ron algún otro tipo de licor para aromatizarlo y reforzar el sabor. Por último, es habitual espolvorear el postre con cacao en polvo para provocar sensación de contraste con el dulce y para reforzar el regusto a café. Compuesto normalmente a base de capas alternas de bizcocho y crema, se deja asentar durante unas horas en el frigorífico antes de ser servido.</p> </div> <div class="modal-footer"> <div class="contenedor-botones"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> <a href="#ventana9" class="btn btn-primary btn-lg" data-toggle="modal" >Ordenar</a> <div class="modal fade" id="ventana9"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title pull-left">Ordenar</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> </a> <p class="post-contenido text-justify">Ya estas registrado?</p> </div> <div class="modal-footer"> <button class="btn btn-primary" data-dismiss="modal">Cerrar</button> <button onclick="myfunction2()" type="button" class="btn btn-default" data-dismiss="modal">Registrarse</button> <script> function myfunction2(){ window.open("registrarb.php"); } </script> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </article> <!--<nav> <div class="center-block"> <ul class="pagination"> <li class="disabled"><a href="#">«<span class="sr-only">Anterior</span></a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">» <span class="sr-only">Siguiente</span></a></li> </ul> </div> </nav>--> </section> <aside class="col-md-3 hidden-xs hidden-ms"> <h4>Menu especial</h4> <div class="list-group"> <a href="#" class="list-group-item active">Japonesa</a> <a href="#" class="list-group-item">Italiana</a> <a href="#" class="list-group-item active">China</a> <a href="#" class="list-group-item">Brazileña</a> <a href="#" class="list-group-item active">Argentina</a> </div> <div class="contenedor-botones"> <h4>Proximos platillos</h4> <a class="list-group-item"> <h4 class="list-group-item-heading">Chiles Rellenos</h4> <img class="img-thumbnail" src="img/img11.jpg" alt=""> <a href="#ventana4" class="btn btn-block btn-primary" data-toggle="modal" >Leer mas </a> <div class="modal fade" id="ventana4"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title">Chiles Rellenos</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img11.jpg" alt=""> </a> <p>La cerveza de raíz, zarzaparrilla o root beer es una bebida fermentada, que contiene 0,35% de alcohol, elaborada mediante una combinación de vainilla, corteza de cerezo, raíz de orozuz (regaliz), corteza de raíz de sasafrás (que en su forma natural llega a ser carcinogénica), nuez moscada, anís, y melaza, entre otros ...</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> </div> </div> </div> </div> </div> <br> <div class="contenedor-botones"> <a class="list-group-item"> <h4 class="list-group-item-heading">Enfrijoladas</h4> <img class="img-thumbnail" src="img/img9.jpg" alt=""> <a href="#ventana4" class="btn btn-block btn-primary" data-toggle="modal" >Leer mas </a> <div class="modal fade" id="ventana4"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title">Chiles Rellenos</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img9.jpg" alt=""> </a> <p>La cerveza de raíz, zarzaparrilla o root beer es una bebida fermentada, que contiene 0,35% de alcohol, elaborada mediante una combinación de vainilla, corteza de cerezo, raíz de orozuz (regaliz), corteza de raíz de sasafrás (que en su forma natural llega a ser carcinogénica), nuez moscada, anís, y melaza, entre otros ...</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> </div> </div> </div> </div> </div> </a> <br> <div class="contenedor-botones"> <a class="list-group-item"> <h4 class="list-group-item-heading">Lonche de pierna</h4> <img class="img-thumbnail" src="img/img10.jpg" alt=""> <a href="#ventana4" class="btn btn-block btn-primary" data-toggle="modal" >Leer mas </a> <div class="modal fade" id="ventana4"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title">Chiles Rellenos</h2> </div> <div class="modal-body"> <a href="#" class="thumb pull-left"> <img class="img-thumbnail" src="img/img10.jpg" alt=""> </a> <p>La cerveza de raíz, zarzaparrilla o root beer es una bebida fermentada, que contiene 0,35% de alcohol, elaborada mediante una combinación de vainilla, corteza de cerezo, raíz de orozuz (regaliz), corteza de raíz de sasafrás (que en su forma natural llega a ser carcinogénica), nuez moscada, anís, y melaza, entre otros ...</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> </div> </div> </div> </div> </div> </a> </aside> </div> </section> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
.navbar{ margin-bottom: 0; } .jumbotron{ background: #428BCA; color: #fff; padding: 20px 0; } /*post*/ .main{ margin-top: 20px; margin-bottom: 20px; } .post { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #999; } .post .post-title a{ color: #333; } .post .thumb{ margin-right: 10px; width: 40%; } .post .thumb img { width: 90%; } .post .contenedores-botones{ width: 100%; } /* media query*/ @media screen and (max-width: 768px){ .post .thumb{ width: 100%; margin-bottom: 20px; margin-right: 0; } }

Related: See More


Questions / Comments: