Hoy vamos a diseñar unas tarjetas de comida en HTML y CSS de un Restaurante. Adaptaremos el diseño a todo tipo de pantallas para que se vea bien en cualquier dispositivo, esto lo haremos con las media queries en CSS.
Estas tarjetas de comida formarán parte de una sección de la página web de un restaurante en HTML y CSS que veremos en el próximo vídeo. De hecho, este proyecto es parecido al diseño de tarjetas de blog en HTMl y CSS que vimos en un post anterior.
Técnicamente estas tarjetas pueden servir para presentar cualquier cosa. Puedes usarlas en cualquier página web para presentar cualquier producto o servicio.
Tarjetas de comida HTML y CSS
Veamos pues como se hacen estas tarjetas.
Lo primero que haremos será la estructura HTML, después maquetaremos todo el diseño con CSS y al final utilizaremos las media queries para hacer el diseño responsive. Te dejo por aquí el vídeo donde lo hago paso a paso.
Vamos pues con el código HTML.
Tarjetas de comida en HTML
Primero haremos un envoltorio con varias clases que usaremos más adelante. Luego haremos las tarjetas (un total de 4 tarjetas) con otro envoltorio dentro donde envuelve el título, el texto, el precio y un cta o botón de pedir.
<div class="wrap column-4 columns">
<div class="tarjeta-rest" style="background: url(img/pizza-bg.jpg) center; background-size: cover;">
<div class="wrap-text_tarjeta-rest">
<h3>Pizza</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati veniam distinctio dignissimos, sequi corporis nobis voluptate inventore, quisquam est illo perspiciatis cupiditate? Ducimus, ea sapiente?
<div class="cta-wrap_tarjeta-rest">
<div class="precio_tarjeta-rest">
<span>12€</span>
</div>
<div class="cta_tarjeta-rest">
<a href="">Pedir ahora</a>
</div>
</div>
</p>
</div>
</div>
<div class="tarjeta-rest" style="background: url(img/hamburguesas-bg.jpg) center; background-size: cover;">
<div class="wrap-text_tarjeta-rest">
<h3>Hamburguesas</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati veniam distinctio dignissimos, sequi corporis nobis voluptate inventore, quisquam est illo perspiciatis cupiditate? Ducimus, ea sapiente?
<div class="cta-wrap_tarjeta-rest">
<div class="precio_tarjeta-rest">
<span>12€</span>
</div>
<div class="cta_tarjeta-rest">
<a href="">Pedir ahora</a>
</div>
</div>
</p>
</div>
</div>
<div class="tarjeta-rest" style="background: url(img/sushi-bg.jpg) center; background-size: cover;">
<div class="wrap-text_tarjeta-rest">
<h3>Sushi</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati veniam distinctio dignissimos, sequi corporis nobis voluptate inventore, quisquam est illo perspiciatis cupiditate? Ducimus, ea sapiente?
<div class="cta-wrap_tarjeta-rest">
<div class="precio_tarjeta-rest">
<span>12€</span>
</div>
<div class="cta_tarjeta-rest">
<a href="">Pedir ahora</a>
</div>
</div>
</p>
</div>
</div>
<div class="tarjeta-rest" style="background: url(img/alitas-pollo-bg.jpg) center; background-size: cover;">
<div class="wrap-text_tarjeta-rest">
<h3>Alitas de pollo</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati veniam distinctio dignissimos, sequi corporis nobis voluptate inventore, quisquam est illo perspiciatis cupiditate? Ducimus, ea sapiente?
<div class="cta-wrap_tarjeta-rest">
<div class="precio_tarjeta-rest">
<span>12€</span>
</div>
<div class="cta_tarjeta-rest">
<a href="">Pedir ahora</a>
</div>
</div>
</p>
</div>
</div>
</div>Si te fijas usamos la etiqueta style para insertar el fondo de cada tarjeta con una imagen. Colocamos varias propiedades como background-size para que el fondo se muestre correctamente.
En este caso he utilizado un efecto de sombra para que quede el texto flotante sobre la imagen pero podríamos emplear cualquier otro efecto. Podríamos hacer un efecto de desenfocado o blur en CSS por ejemplo, que también quedaría bien.
Una vez creada toda la estructura en HTML pasaremos a crear los estilos en la hoja de estilos o style.css.
Tarjetas de comida en CSS
Para la parte de CSS hemos empezado completamente desde el principio. He añadido una fuente utilizando el selector HTML para que aparezca la fuente en todos los elementos HTML de la página. Luego he creado un pequeño resset utilizando el selector body para que no tenga ningún margin o padding de estos raros que pone el navegador.
Al final he hecho lo que casi siempre hacemos en un diseño web, quietar el dichoso text-decoration, para quitar el subrayado de todos los enlaces.
html{
font-family: system-ui;
}
body{
margin: 2rem 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
a{
text-decoration: none;
}Después pasaremos a maquetar toda la parte de las tarjetas. Esta parte es un poco larga y te la dejo a continuación para que le eches un vistazo.
.wrap{
max-width: 1200px;
margin: 0 auto;
}
.column-4{
display: grid;
grid-template-columns: repeat(4,1fr);
column-gap: 1rem;
row-gap: 1rem;
}
.tarjeta-rest{
background-repeat: no-repeat;
height: 400px;
border-radius: 6px;
padding: 1rem .5rem;
display: flex;
align-items: end;
}
.wrap-text_tarjeta-rest{
color: #fff;
padding: .5rem;
border-radius: 6px;
background: linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / .5));
}
.wrap-text_tarjeta-rest p{
color: #f2f2f2;
}
.cta-wrap_tarjeta-rest{
display: flex;
justify-content: space-between;
}
.precio_tarjeta-rest span{
font-size: 1.5rem;
font-weight: bold;
}
.cta_tarjeta-rest{
background-color:#FFC300;
padding: .25rem 1rem;
border-radius: 4px;
}
.cta_tarjeta-rest a{
color: #fff;
font-weight: bold;
}Con estas líneas de código en CSS ya tendríamos toda la parte de estilos completada.
Diseño responsive de tarjetas con Media Queries
Y ahora, para finalizar, convertiremos este diseño en responsive y adaptable a todas las pantallas con las media queries.
@media (max-width:1024px){
.column-4{
grid-template-columns: repeat(3,1fr);
}
}
@media (max-width:768px){
.column-4{
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:480px){
.column-4{
grid-template-columns: repeat(1,1fr);
}
}Hemos utilizado tres media queries con diferentes medidas para que cuando la pantalla sea igual o inferior al valor marcado (en el max´width) se reduzcan sus columnas.
De esta forma ya tendríamos completamente acabadas estas tarjetas y se verían bien en cualquier dispositivo.
En el próximo vídeo realizaremos otra sección de un restaurante, así que estate atengo al canal de Youtube!
Recuerda que puedes dejarme cualquier duda que tengas en los comentarios y te responderé lo más rápido que pueda.