Cómo hacer un Menú de Restaurante en HTML y CSS

Hoy veremos algo que seguramente te tocará hacer algún día como diseñador web. Estoy hablando de crear un menú para la página web de un Restaurante en html y css. Y como es lógico, lo haremos responsive, claro. Aunque es realmente fácil crear un diseño de este tipo, se nos puede hacer un poco cuesta arriba, sobre todo si es la primera vez. Pero no te preocupes, aquí está el menda para ayudarte o como mínimo para inspirarte (aunque solo sea un poco).

Recuerda que este vídeo forma parte de la serie donde explico como hacer una página web de un restaurante. Este tutorial será parecido a los dos últimos que vimos anteriormente, sobre como crear una carta de un restaurante (que no es lo mismo que un menú). Y el otro, fue el de las Tarjetas de comida para un Restaurante.

Bueno, vamos al lío.

Cómo hacer Menú de Restaurante

Como se que te gusta ver vídeos de Youtube, aquí te dejo el tutorial completo en vídeo.

¡El código, el código! ¿Dónde está el código «bro»?

¡Calma! Lo dejo a continuación.

Vamos con el HTML primero.

Menú de Restaurante en HTML

Empezaremos con un section que utilizaremos como envoltorio principal. Después, haremos el título de la sección y debajo, haremos el envoltorio de los menús, que será el encargado de mostrar el diseño de las tres columnas con un display grid. Este div tendrá dos clases, la clase «column-3» y «columns».

Después haremos el diseño de cada menú, poniendo un título (h3), subtítulos h4 y cada plato o característica que quieras poner.

<section class="wrap">
  <h2>Menú de Restaurante</h2>
  <div class="column-3 columns">

    <!-- Menús -->

  </div>
</section>

Después de todo esto, colocaremos el fondo del menú con la etiqueta style en HTML. Usaremos la imagen que tenemos en la carpeta img y añadiremos el varias propiedades de CSS para centrarlo y para que ocupe todo el espacio disponible.

<section class="wrap">
  <h2>Menú de Restaurante</h2>
  <div class="column-3 columns">
    <div class="menu-restaurante" style="background: url(/img/fondo-menu-restaurante.jpg) center;background-size: cover;">
      <h3>Menú mediodia</h3>
      <hr>
      <h4>Primeros Platos</h4>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit.</p>
      <br>
      <h4>Segundos Platos</h4>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit.</p>
      <br>
      <p class="precio-menu">
        Precio:
        <span>17€</span>
      </p>
    </div>
    <div class="menu-restaurante" style="background: url(/img/fondo-menu-restaurante.jpg) center;background-size: cover;">
      <h3>Menú noche</h3>
      <hr>
      <h4>Primeros Platos</h4>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit.</p>
      <br>
      <h4>Segundos Platos</h4>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit.</p>
      <br>
      <p class="precio-menu">
        Precio:
        <span>19€</span>
      </p>
    </div>
    <div class="menu-restaurante" style="background: url(/img/fondo-menu-restaurante.jpg) center;background-size: cover;">
      <h3>Menú fin de semana</h3>
      <hr>
      <h4>Primeros Platos</h4>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit.</p>
      <br>
      <h4>Segundos Platos</h4>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem, ipsum dolor.</p>
      <p>Lorem ipsum dolor sit.</p>
      <br>
      <p class="precio-menu">
        Precio:
        <span>21€</span>
      </p>
    </div>
  </div>
</section>

Y ya tendríamos terminada la parte de HTML. Ahora vamos a la parte de la maquetación.

Menú de Restaurante en CSS

Una vez hecho toda la estructura, iremos con los estilos. Usaremos la hoja de estilos y recuerda enlazar el CSS con tu archivo HTML con la etiqueta link.

Primero haremos unos estilos generales para colocar la fuente en toda la página y luego haremos unas medidas (iguales a las del tutorial anterior).

html{
  font-family: system-ui;
}

.wrap{
  max-width: 1200px;
  margin: 0 auto;
}

Después de esto haremos los estilos de la del menú en CSS. Haremos el díseño en CSS grid y maquetaremos el interior de cada columna con flexbox. Fácil, sencillo y para toda la familia.

.column-3{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

.menu-restaurante{
  color: #fff;  
  text-align: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  display: flex;
  flex-flow: column;
}

hr{
  background: #FFC300;
  height: 2.5px;
  width: 30px;
  border: none;
}

.precio-menu{
  font-weight: bold;
}

.precio-menu span{
  font-size: 2rem;
  color: #FFC300;
}

Y ahora solo haría falta pasar a la parte de las media queries.

Hacer menú de restaurante responsive

Una vez terminada la estructura y la maquetación de nuestro menú para el restaurante, ya solo hace falta convertir nuestro diseño en responsive. Ya sabes, para que se vea bien en cualquier pantalla. Para ello utilizaremos nuestras amigas las media queries, que siempre están ahí cuando más lo necesitas.

@media (max-width:768px){
  .columns{
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:480px){
  .columns{
    grid-template-columns: repeat(1,1fr);
  }
}

Como ves, usamos 2 simples media queries para definir el número de columnas en función de los pixels de la pantalla que se esté viendo.

Bastante fácil ¿No?

Pues ya estaría por aquí, me despido y nos vemos en el próximo tutorial. Recuerda que puedes preguntarme lo que quieras, déjamelo en los comentarios de aquí o en el vídeo de Youtube, un saludo!