En el anterior post vimos como crear unas tarjetas de comida en HTML y CSS para un restaurante y en este post vamos a hacer una carta de restaurante en HTML y CSS completamente responsive.
Y antes de nada me gustaría dedicar este tutorial a todos los diseñadores/as que alguna vez han tenido que hacer la página web de un restaurante para un cliente y con ello, han tenido que hacer la carta en HTML y CSS (o con otras tecnologías). No quiero darle muchas vueltas al asunto, pero esto es algo que me pasó a mí y que supongo que les pasa a otros muchos diseñadores web.
Así que, espero que este post pueda servir un poco a alguien como fuente de inspiración (aunque sea solo un poco).
Carta de Restaurante en HTML y CSS
Una carta de un restaurante es algo bastante sencillo de hacer, pero se puede convertir en todo un reto, dependiendo por ejemplo, de las directrices del cliente y de sus expectativas. Pero en este caso, he hecho una carta utilizando html y css de forma bastante sencilla, digamos, para todos los públicos. Te dejo aquí el vídeo por si le quieres echar un vistazo.
Y ahora, vamos a picar un poco de código.
Carta de Restaurante en HTML
Empezamos como siempre, haciendo la estructura HTML. En este caso, vamos a emplear la etiqueta <section> para envolver toda los «platos» de la carta. Ya que esta carta formará parte de la página web de un restaurante.
Una vez hecha la apertura y cierre de la etiqueta <section> haremos un <div> para envolver el título de cada categoría de comida y después haremos la galería o regilla de platos.
<section class="wrap">
<div class="wrap-title-section">
<h2>Hamburguesas</h2>
</div>
<div class="wrap column-2 carta">
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/bocadillo-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/bocadillo-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/bocadillo-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/bocadillo-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
</div>
<div class="wrap-title-section">
<h2>Pizzas</h2>
</div>
<div class="wrap column-2 carta">
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pizza.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pizza.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pizza.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pizza.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
</div>
<div class="wrap-title-section">
<h2>Pastas</h2>
</div>
<div class="wrap column-2 carta">
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pasta-fresca-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pasta-fresca-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pasta-fresca-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
<div class="plato-carta">
<div class="img-plato-carta">
<img src="img/pasta-fresca-carta.png" alt="">
</div>
<div class="title-plato-carta">
<h4>Lorem, ipsum dolor.</h4>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="precio-plato-carta">
<span>9€</span>
</div>
</div>
</div>
</section>Como puedes ver, he repetido todo el proceso tres veces, para hacer tres categorías de comida «Hamburguesas», «pizzas» y «pastas».
Carta de Restaurante en CSS
Cuando tengamos ya toda la estructura y todas las categorías de comida que queramos, vamos a maquetar con CSS.
Acuerdate siempre de enlazar la hoja de estilos CSS con tu archivo HTML.
Para ello utilizaremos display grid, para hacer la galería de platos. Luego para darle estilos a los platos y a los tres envoltorios que hay dentro (envoltorio de la imagen, de la descripción y del precio) usaremos un display: flex.
/** Tarjetas Restaurante **/
.wrap{
max-width: 1200px;
margin: 0 auto;
}
.column-2.carta{
display: grid;
grid-template-columns: repeat(2,1fr);
column-gap: 1rem;
row-gap: 1rem;
}
.plato-carta{
display: flex;
align-items: center;
border: 1px solid #e5e5e5;
border-radius: 6px;
}
.img-plato-carta{
display: flex;
flex-basis: 25%;
justify-content: center;
}
.img-plato-carta img{
max-width: 100px;
max-height: 75px;
}
.title-plato-carta{
border: 1px solid #e5e5e5;
border-bottom: none;
border-top: none;
flex-basis: 60%;
padding: 0 1rem;
}
.precio-plato-carta{
display: flex;
flex-basis: 15%;
justify-content: center;
font-weight: bold;
}Con estas pocas líneas de CSS ya tendríamos nuestra carta de un restaurante en HTML Y CSS maquetada. Ahora solo haría falta hacer el diseño responsive.
Carta de Restaurante Responsive
Para hacer la carta responsive y que se vea bien en cualquier pantalla o dispositivo usaremos un módulo de CSS llamado media queries, que nos permiten de forma fácil hacer un diseño adaptable.
@media (max-width:680px){
.column-2.carta{
grid-template-columns: repeat(1,1fr);
}
}En este caso, estamos declarando que si la pantalla es igual o inferior a 680px aplique los estilos que le hemos indicado. Es decir, que en vez de aparecer 2 columnas, aparezca 1.
Y hasta aquí este pequeño tutorial sobre como hacer una carta de un restaurante. Seguramente, si eres diseñador web en Barcelona o te dedicas al ámbito del desarrollo te tocará hacer una carta de un restaurante tarde o temprano y cuando llegue la hora más vale estar preparado ¡Te ahorrarás un montón de tiempo y de problemas!
esta de huevos el programa