DROPCODING BLOG

Cómo hacer la Página Web de un Restaurante en HTML y CSS (Responsive)

por:

Categoría:

CSS, HTML

Ha llegado la hora, ya tenemos aquí el último tutorial de la serie donde explicamos como crear una página web de un restaurante (desde cero).

En este tutorial vamos a juntar todo lo que hemos aprendido de esta serie y los pondremos en práctica. Desde crear un menú de restaurante en html, hasta hacer una carta para nuestro restaurante.

Vamos a crear la página principal del sitio web del restaurante y lo haremos completamente responsive, se va a adaptar completamente a todos los disipativos y pantallas.

En este artículo encontrarás el vídeo donde realizo toda la maquetación y diseño de la página.

También te puede interesar: Cómo crear página web HTML, CSS y JS (responsive)

Además, encontrarás también todo el código que vamos a utilizar (lo veas a encontrar más adelante).

Diseño de Página web de Restaurante

En el vídeo he dividido la parte de HTML y CSS en secciones. De esta forma, cuando acabamos la creación de la estructura de una sección, la maquetamos y acto seguido creamos los media queries ¡De esta forma se hace un poco menos pesado!

A continuación dejo todo el código HTML y algunos tips útiles.

Configurando el entorno de trabajo

Usaremos Visual Studio Code como «editor de código». Aunque puedes utilizar el editor que tu quieras.

Después crearemos un archivo index.html, que es donde va a ir todo el código o estructura HTML.

Y luego crearemos la hoja de estilos style.css.

Ahora, escribiremos las primeras líneas de código. Primero crearemos la parte del Doctype y del head en HTML.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Poller+One&display=swap">
</head>
<body>

Fíjate que al final del código, hemos abierto la etiqueta del <body> donde va a ir todo el contenido de la página.

Vamos a cargar una fuente de Google Fonts, a través de la etiqueta <link>.

Ahora, lo que haremos será crear unos estilos generales en el archivo style.css.

:root{
  --main-c:#FFC300;
  --black-c:#000;
}

/** Estilos Generales **/
html{
  font-family: 'Josefin Sans', sans-serif;
}
body{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
a:visited{
  color: inherit;
}
li{
  list-style: none;
}
p{
  font-size: 1.1rem;
}
h1{
  font-size: 2.4rem;
}
h2{
  font-size: 2rem;
}
h3{
  font-size: 1.8rem;
}
h4{
  font-size: 1.6rem;
}
h5{
  font-size: 1.4rem;
}
h6{
  font-size: 1.2rem;
}


/* Enlaces & Botones*/

.cta-main{
  background-color: var(--main-c);
  padding: 1rem 1rem ;
  color: #fff;
  font-size: bold;
  border-radius: 2px;
}

Hemos empezado declarando unas variables en CSS para poder seleccionar el color principal de nuestra página y el secundario de forma rápida y fácil.

SPOILER ALERT: Las imágenes no se incluyen en el tutorial.

Encabezado (Header) y Hero del sitio

En el diseño web en general es normal empezar de arriba abjo. Se podría de decir que es muy común empezar «la casa por el tejado». Por esa razón vamos a empezar a crear nuestro header y menú del restaurante.

Por aquí te dejo el vídeo donde vimos como hacerlo, por si te interesa.

Aprovechamos para crear el header, con dos secciones. Por un lado, tenemos el logo del sitio web y por otro lado, creamos el menú principal de la página. Que por cierto, este menú será un menú de navegación responsive utilizando solamente css.

Aquí dejo el código de la estructura en HTML, junto con todo el Doctype.

<div class="wrap-header-hero">
<header class="main-header">
  <div class="header-wrap">
    <div class="wrap-logo-header">
      <a class="logo-header" href="/">
        WebDeRestaurante
      </a>
    </div>
    <div class="wrap-nav-header">
      <nav class="nav-header">
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
          <i class="toggle-menu">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDM4NCAzODQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTM2OCAxNTQuNjY3OTY5aC0zNTJjLTguODMyMDMxIDAtMTYtNy4xNjc5NjktMTYtMTZzNy4xNjc5NjktMTYgMTYtMTZoMzUyYzguODMyMDMxIDAgMTYgNy4xNjc5NjkgMTYgMTZzLTcuMTY3OTY5IDE2LTE2IDE2em0wIDAiIGZpbGw9IiMwMDAwMDAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im0zNjggMzJoLTM1MmMtOC44MzIwMzEgMC0xNi03LjE2Nzk2OS0xNi0xNnM3LjE2Nzk2OS0xNiAxNi0xNmgzNTJjOC44MzIwMzEgMCAxNiA3LjE2Nzk2OSAxNiAxNnMtNy4xNjc5NjkgMTYtMTYgMTZ6bTAgMCIgZmlsbD0iIzAwMDAwMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTM2OCAyNzcuMzMyMDMxaC0zNTJjLTguODMyMDMxIDAtMTYtNy4xNjc5NjktMTYtMTZzNy4xNjc5NjktMTYgMTYtMTZoMzUyYzguODMyMDMxIDAgMTYgNy4xNjc5NjkgMTYgMTZzLTcuMTY3OTY5IDE2LTE2IDE2em0wIDAiIGZpbGw9IiMwMDAwMDAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48L2c+PC9zdmc+" />
          </i>
        </label>

        <ul class="main-menu">
          <li class="menu-item"><a href="">Inicio</a></li>
          <li class="menu-item"><a href="">Nostros</a></li>
          <li class="menu-item"><a href="">Carta</a></li>
          <li class="menu-item"><a href="">Blog</a></li>
          <li id="nav-main-contact" class="menu-item"><a href="">Contacto</a></li>
        </ul>

      </nav>
    </div>
  </div>
 </header>

  <main class="main-section">

  
      <!-- Aquí van a ir todas las secciones -->
      
      <!-- Poner todo el código a partir de aquí -->



  </main>
<!-- Cierre de la etiqueta main -->

Y por aquí dejo todo el código CSS para maquetar tanto el header, como el menú responsive y el Hero. Es decir, ¡Tres en uno!

Código CSS del Header:

/* Header Restaurante */

header.main-header{
  position: relative;    
  top: 0;
  width: 100%;
  z-index:9999;
}
.header-wrap{
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background-color: transparent;
  z-index: 999;
}
.wrap-logo-header{
  display: flex;
  align-items: center;
  flex-basis: 15%;
}
.logo-header{
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
}

/* menu header */

.nav-header{
  display: flex;
  align-items: center;
  width: 100%;
}
.nav-wrap-header{
  display: flex;
  flex-basis: 50%;
}

ul.main-menu{
  display: flex;
  width: 100%;
  z-index: 99;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
}

ul.main-menu #nav-main-contact{
  display: flex;
  align-items: center;
  padding: .5rem 1rem;
  background-color: var(--main-c);
  color: #fff;
}
li.menu-item{
  margin: .75rem;
  display: flex;
}
li.menu-item a{
  padding: .5rem 1rem;
  color: #fff;
}
li.menu-item a:hover{
  color: var(--main-c);
}

i.toggle-menu img{
  width: 27px;
  z-index: 99;
}

i.toggle-menu{
  display: none;
  background-color: #fff;
  border: none;
  z-index: 9999;
}

input#check{
  display: none;
}

@media (min-width:880px){
  .header-wrap{
    padding: .5rem 5rem;
  }
}

@media (min-width:768px){
  a.logo-header{
    color: #fff;
  }
}

@media (max-width:768px){
  header.main-header{
    margin-bottom: 4rem;
  }
  .header-wrap{
    position: fixed;
    width: 100%;
    background-color: #fff;
    padding: 0;
    top: 0;
    z-index: 9999;
    height: 60px;
  }
  .wrap-logo-header{
    position: fixed;
    z-index:999;
    top: 3%;
    left: 3%;
  }
  .logo-header, li.menu-item a{
    color: #222;
  }

  i.toggle-menu{
    display: flex;
  }
  ul.main-menu,#nav-main-contact{
    display: none;
    left: 0;
    margin: 0;
    padding: 0;
  }
  ul.main-menu{
    position: fixed;
    background-color: #fff;
  }
  label.checkbtn{
    position: fixed;
    right: 3%;
    top: 3%;
    z-index: 9999;
    cursor: pointer;
  }
  #check:checked ~ ul{
    display: flex;
    z-index: 9;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    top: 0;
    font-size: 2rem;
  }
}

CSS del Hero:

/* Hero Section HomePage */
.wrap-header-hero{
  background: linear-gradient(to bottom, rgb(0 0 0 / .75), rgb(0 0 0 / .5)), url(img/hero-front-page-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-home-page{
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap-hero-home-page{
  color: #fff;
  text-align: center;
  width: 50%;
}

.wrap-hero-home-page p{
  margin-bottom: 2rem;
}

@media (max-width:768px){
  .wrap-hero-home-page{
    width: 100%;
    padding: 1rem;
  }
}

Ya tenemos completado la parte del Header, el menú y el Hero.

Tarjetas de Comida

Ahora vamos a crear unas tarjetas de comida para destacar algunos platos de nuestro restaurante. También podemos destacar por ejemplo, otras páginas o categorías de nuestro sitio o lo que queramos. Dejo el vídeo donde hicimos el ejemplo.

Empezaremos creando una sección y dividiremos en columnas el diseño con un grid. Veamos el código html primero.

  <!-- Tarjetas de comida -->
  <section class="wrap section">
    <div class="wrap-title-section">
      <h2>Tarjetas de Comida</h2>
    </div>
    <div class="column-4 columns">
      <div style="background:url(img/pizza-bg.jpg)center;background-size: cover;" class="tarjeta-rest">
        <div class="wrap-text_tarjeta-rest">
          <h3>Pizza Especial</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid iure animi, quos tempora voluptas.</p>
          <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>
        </div>  
      </div>
      <div style="background:url(img/hamburguesas-bg.jpg)center;background-size: cover;" class="tarjeta-rest">
        <div class="wrap-text_tarjeta-rest">
          <h3>Pizza Especial</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid iure animi, quos tempora voluptas.</p>
          <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>
        </div>  
      </div>
      <div style="background:url(img/sushi-bg.jpg)center;background-size: cover;" class="tarjeta-rest">
        <div class="wrap-text_tarjeta-rest">
          <h3>Pizza Especial</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid iure animi, quos tempora voluptas.</p>
          <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>
        </div>  
      </div>
      <div style="background:url(img/alitas-pollo-bg.jpg)center;background-size: cover;" class="tarjeta-rest">
        <div class="wrap-text_tarjeta-rest">
          <h3>Pizza Especial</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquid iure animi, quos tempora voluptas.</p>
          <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>
        </div>  
      </div>
    </div>
  </section>

Ahora vamos con el código CSS de las tarjetas de comida.

/* Tarjetas de Comida */
.section{
  max-width: 1200px;
  margin: 8rem auto;
  padding: 1rem;
}

.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: var(--main-c);
  padding: .25rem 1rem;
  border-radius: 4px;
}
.cta_tarjeta-rest a{
  color: #fff;
  font-weight: bold;
}

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

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

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

Acabamos como siempre con las media queries, para adaptar el diseño.

Seleccionamos el número de columnas en función del tamaño de la pantalla utilizando CSS Grid.

Menú del Restaurante

Vamos con el Menú del restaurante, que en este caso formará parte de una de las secciones de la Homepage. Aquí rescataremos el diseño que vimos anteriormente. Por si te lo has perdido, dejo por aquí el video.

Aquí lo que haremos será separar en 3 columnas el diseño y luego ir mostrando esas columnas en función de las medidas de la pantalla que lo esté viendo el usuario.

Vamos con la parte de HTML del menú:

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

Y ahora con la parte de CSS del Menú del Restaurante:

/* Menu Restaurante */
.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: var(--main-c);
  height: 2px;
  width: 30px;
  border: none;
}
.precio-menu{
  font-weight: bold;
}
.precio-menu span{
  font-size: 2rem;
}

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

Como ves, aquí utilizamos bastante menos código. Esta era facilita…

Galería de Imágenes

Ahora vamos a ir con una galería de imágenes, simple pero efectiva.

Puedes usar esta galería prácticamente en cualquier diseño web que hagas para presentar, productos, servicios, categorías, artículos ¡Lo que tu quieras!

Código HTML de galería de imágenes:

    <!-- Galería de imágenes -->
    <section class="section">
      <div class="wrap-title-section">
        <h2>Galería de imágenes</h2>
      </div>
      <div class="column-4 galeria-platos">
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        <div class="imagen-galeria">
          <img src="img/foto galeria.jpg" alt="">
        </div>
        
      </div>
    </section>

Ahora pasaremos en el código CSS de la Galería de imágenes. Esta es la sección más corta y más simple, así que aproevechar!

/* Gerlía de Imágenes */

.imagen-galeria, .imagen-galeria img{
  max-width: 275px;
  border-radius: 4px;
}

@media (max-width:880px){
  .galeria-platos{
    display: flex;
    flex-flow: wrap;
    justify-content: center;
  }
}

Fíjate que aquí hemos utilizado un flex-wrap para hacer el diseño completamente responsive. Esta es una manera muy rápida de maquetar un diseño y hacerlo adaptativo.

Diseño últimos artículos de blog

Venga que ya nos acercamos al final. Ahora haremos unas tarjetas para presentar los artículos del Blog. Evidentemente esta parte no incluye la funcionalidad, simplemente la maquetación de la sección donde se mostrarían los últimos artículos, posts destacados o lo que queramos.

Código HTML de artículos de Blog.

  <!-- Articulos de Blog  -->
  <section class="section">
    <div class="wrap-title-section">
      <h2>Artículos del Blog</h2>
    </div>
    <div class="card-wrap">
      <article class="card">
        <header class="header-card">
          <img src="img/plato-blog-1.jpg" alt="">
        </header>
        <footer class="footer-card">
          <div class="categoria-card">
            <span>Categoría</span>
          </div>
          <div class="texto-card">
            <h3>Lorem ipsum dolor sit.</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatibus mollitia voluptas ducimus maxime numquam modi suscipit eius tempore ad?</p>
          </div>
          <div class="perfil-card">
            <div class="img-perfil-card">
              <img src="img/perfil-1.jpg" alt="">
            </div>
            <div class="text-perfil-card">
              <span>Nombre</span>
              <span>Fecha</span>
            </div>
          </div>
        </footer>
      </article>
      <article class="card">
        <header class="header-card">
          <img src="img/plato-blog-2.jpg" alt="">
        </header>
        <footer class="footer-card">
          <div class="categoria-card">
            <span>Categoría</span>
          </div>
          <div class="texto-card">
            <h3>Lorem ipsum dolor sit.</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatibus mollitia voluptas ducimus maxime numquam modi suscipit eius tempore ad?</p>
          </div>
          <div class="perfil-card">
            <div class="img-perfil-card">
              <img src="img/perfil-2.jpg" alt="">
            </div>
            <div class="text-perfil-card">
              <span>Nombre</span>
              <span>Fecha</span>
            </div>
          </div>
        </footer>
      </article>
      <article class="card">
        <header class="header-card">
          <img src="img/plato-blog-3.jpg" alt="">
        </header>
        <footer class="footer-card">
          <div class="categoria-card">
            <span>Categoría</span>
          </div>
          <div class="texto-card">
            <h3>Lorem ipsum dolor sit.</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatibus mollitia voluptas ducimus maxime numquam modi suscipit eius tempore ad?</p>
          </div>
          <div class="perfil-card">
            <div class="img-perfil-card">
              <img src="img/perfil-3.jpg" alt="">
            </div>
            <div class="text-perfil-card">
              <span>Nombre</span>
              <span>Fecha</span>
            </div>
          </div>
        </footer>
      </article>
    </div>
  </section>

Código CSS para maquetar esta sección de artículos del Blog.

/* Tarjetas de Blog */
article.card{
  max-width: 350px;
  background-color: #f8f8f8;
  margin: 1rem;
  box-shadow: 0px 0px 12px #d7d7d7;
}
.header-card{
  display: flex;
}
.header-card img{
  border-radius: 8px 8px 0 0;
  max-height: 200px;
  height: 200px;
  width: 100%;
}

.categoria-card{
  margin-top: 1rem;
}

.categoria-card span{
  background: var(--main-c);
  border-radius: 4px;
  padding: .2rem .5rem;
  color: #fff;
}

.card footer{
  display: flex;
  flex-flow: column;
  padding: 0 1rem;
}

.perfil-card{
  display: flex;
  align-items: center;
}

.img-perfil-card{
  display: flex;
}

.img-perfil-card img{
  width: 50px;
  border-radius: 50%;
  margin: 1rem 1rem 1rem 0;
}
.text-perfil-card{
  display: flex;
  flex-flow: column;
}
.text-perfil-card span:nth-child(2){
  color: #cfcfcf; 
}
.card-wrap{
  display: flex;
  flex-flow: wrap;
}

@media (max-width:768px){
  .card-wrap{
    justify-content: center;
  }
}

Footer de Sitio Web

Ahora sí, ya hemos llegado a la última sección de este tutorial. Acabamos con el footer o pie de página del restaurante.

Vamos con el vídeo primero, por si le quieres echar un vistazo.

En el Footer de la página hemos creado un contenedor principal y luego hemos dividido las diferentes partes en columnas. De esta forma es mucho más fácil hacerlo responsive y queda muy bien.

Código HTML del footer.

  <footer class="footer">
    <div class="wrap-footer">
      <div class="text-element-footer element-footer">
        <h3>Restaurante</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, commodi quaerat! Impedit eaque officia nulla quidem dolore aut animi culpa.</p>
      </div>
      <div class="text-element-footer element-footer">
        <h5>Dirección</h5>
        <ul>
          <li>Calle, 82</li>
          <li>Población - 0000</li>
          <li>Movil: (+34) 600 00 00 00</li>
          <li>Fax: (+34) 900 00 00 00</li>
        </ul>
      </div>
      <div class="text-element-footer element-footer">
        <h5>Más información</h5>
        <ul>
          <li><a href="/">Inicio</a></li>
          <li><a href="/">Nosotros</a></li>
          <li><a href="/">Carta</a></li>
          <li><a href="/">Blog</a></li>
          <li><a href="/">Contacto</a></li>
        </ul>
      </div>
      <div class="rrss-element-footer element-footer">
        <h5>Redes Sociales</h5>
        <ul>
          <li><a href="/">
            <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNTEyIDc1djM2MmMwIDQxLjM5ODQzOC0zMy42MDE1NjIgNzUtNzUgNzVoLTEyMWwtMzAtMzBoLTMwbC0zMCAzMGgtMTUxYy00MS4zOTg0MzggMC03NS0zMy42MDE1NjItNzUtNzV2LTM2MmMwLTQxLjM5ODQzOCAzMy42MDE1NjItNzUgNzUtNzVoMzYyYzQxLjM5ODQzOCAwIDc1IDMzLjYwMTU2MiA3NSA3NXptMCAwIiBmaWxsPSIjNzk4NGViIi8+PHBhdGggZD0ibTUxMiA3NXYzNjJjMCA0MS4zOTg0MzgtMzMuNjAxNTYyIDc1LTc1IDc1aC0xMjFsLTMwLTMwaC0xNXYtNDgyaDE2NmM0MS4zOTg0MzggMCA3NSAzMy42MDE1NjIgNzUgNzV6bTAgMCIgZmlsbD0iIzQ2NjFkMSIvPjxwYXRoIGQ9Im0zMTYgMTgwdjYwaDkwbC0xNSA5MGgtNzV2MTgyaC05MHYtMTgyaC02MHYtOTBoNjB2LTYwYzAtMzMuMzAwNzgxIDE4LjMwMDc4MS02Mi40MDIzNDQgNDUtNzggMTMuMTk5MjE5LTcuNSAyOC44MDA3ODEtMTIgNDUtMTJoOTB2OTB6bTAgMCIgZmlsbD0iI2VjZWNmMSIvPjxwYXRoIGQ9Im0zMTYgMTgwdjYwaDkwbC0xNSA5MGgtNzV2MTgyaC00NXYtNDEwYzEzLjE5OTIxOS03LjUgMjguODAwNzgxLTEyIDQ1LTEyaDkwdjkwem0wIDAiIGZpbGw9IiNlMmUyZTciLz48L3N2Zz4=" alt="icono redes sociales">
          </a></li>
          <li><a href="">
            <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIC0zMSA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yMTEgMjcwLTQwLjkxNzk2OSA0My42NzU3ODEgMTAuOTE3OTY5IDc2LjMyNDIxOSAxMjAtOTB6bTAgMCIgZmlsbD0iIzAwYzBmMSIvPjxwYXRoIGQ9Im0wIDE4MCAxMjEgNjAgOTAgMzAgMjEwIDE4MCA5MS00NTB6bTAgMCIgZmlsbD0iIzc2ZTJmOCIvPjxwYXRoIGQ9Im0xMjEgMjQwIDYwIDE1MCAzMC0xMjAgMjEwLTE4MHptMCAwIiBmaWxsPSIjMjVkOWY4Ii8+PC9zdmc+" alt="icono redes sociales">
          </a></li>
          <li><a href="">
            <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjU2IDBjLTE0MC42OTkyMTkgMC0yNTYgMTE1LjMwMDc4MS0yNTYgMjU2IDAgNDYuNSAxMi41OTc2NTYgOTEuNSAzNi4zMDA3ODEgMTMxLjEwMTU2MmwtMzYuMzAwNzgxIDEyNC44OTg0MzggMTI0Ljg5ODQzOC0zNi4zMDA3ODFjMzkuNjAxNTYyIDIzLjY5OTIxOSA4NC42MDE1NjIgMzYuMzAwNzgxIDEzMS4xMDE1NjIgMzYuMzAwNzgxIDE0MC42OTkyMTkgMCAyNTYtMTE1LjMwMDc4MSAyNTYtMjU2cy0xMTUuMzAwNzgxLTI1Ni0yNTYtMjU2em0wIDAiIGZpbGw9IiMwMGRkN2IiLz48cGF0aCBkPSJtNTEyIDI1NmMwIDE0MC42OTkyMTktMTE1LjMwMDc4MSAyNTYtMjU2IDI1NnYtNTEyYzE0MC42OTkyMTkgMCAyNTYgMTE1LjMwMDc4MSAyNTYgMjU2em0wIDAiIGZpbGw9IiMwMGNjNzEiLz48cGF0aCBkPSJtNDE3LjE5OTIxOSAzNjQuMzAwNzgxLTEyIDExLjY5OTIxOWMtMTYuODAwNzgxIDE2LjgwMDc4MS01NS44MDA3ODEgMTUuNTk3NjU2LTgwLjY5OTIxOSAxMC44MDA3ODEtMjIuMTk5MjE5LTQuMTk5MjE5LTQ2LTE0LjEwMTU2Mi02OC41LTI3LjkwMjM0My02MS4xOTkyMTktMzcuMTk5MjE5LTExNi42OTkyMTktMTAzLjE5OTIxOS0xMzAuMTk5MjE5LTE2Mi41OTc2NTctOS4zMDA3ODEtNDAuMjAzMTI1LTQuMTk5MjE5LTc1IDktODguNWwxMi0xMmM2LjYwMTU2My02LjMwMDc4MSAxNy4wOTc2NTctNi4zMDA3ODEgMjMuNjk5MjE5IDBsNDcuNjk5MjE5IDQ3LjY5OTIxOWMzLjMwMDc4MSAzLjMwMDc4MSA1LjEwMTU2MiA3LjUgNS4xMDE1NjIgMTJzLTEuODAwNzgxIDguNjk5MjE5LTUuMTAxNTYyIDEybC0xMiAxMS42OTkyMTljLTEyLjg5ODQzOCAxMy4xOTkyMTktMTIuODk4NDM4IDM0LjUgMCA0Ny42OTkyMTlsNDkuODAwNzgxIDQ4LjkwMjM0MyAyOS4wOTc2NTYgMjguODAwNzgxYzEzLjIwMzEyNSAxMy4xOTkyMTkgMzUuNTAzOTA2IDEzLjE5OTIxOSA0OC43MDMxMjUgMGwxMS42OTkyMTktMTIuMDAzOTA2YzYuMzAwNzgxLTYgMTcuNjk5MjE5LTYgMjQgMGw0Ny42OTkyMTkgNDcuNzAzMTI1YzYuMzAwNzgxIDYuNTk3NjU3IDYuNjAxNTYyIDE3LjA5NzY1NyAwIDI0em0wIDAiIGZpbGw9IiNlY2VjZjEiLz48cGF0aCBkPSJtNDE3LjE5OTIxOSAzNjQuMzAwNzgxLTEyIDExLjY5OTIxOWMtMTYuODAwNzgxIDE2LjgwMDc4MS01NS44MDA3ODEgMTUuNTk3NjU2LTgwLjY5OTIxOSAxMC44MDA3ODEtMjIuMTk5MjE5LTQuMTk5MjE5LTQ2LTE0LjEwMTU2Mi02OC41LTI3LjkwMjM0M3YtODMuMDk3NjU3bDI5LjA5NzY1NiAyOC44MDA3ODFjMTMuMjAzMTI1IDEzLjE5OTIxOSAzNS41MDM5MDYgMTMuMTk5MjE5IDQ4LjcwMzEyNSAwbDExLjY5OTIxOS0xMi4wMDM5MDZjNi4zMDA3ODEtNiAxNy42OTkyMTktNiAyNCAwbDQ3LjY5OTIxOSA0Ny43MDMxMjVjNi4zMDA3ODEgNi41OTc2NTcgNi42MDE1NjIgMTcuMDk3NjU3IDAgMjR6bTAgMCIgZmlsbD0iI2UyZTJlNyIvPjwvc3ZnPg==" alt="icono redes sociales">
          </a></li>
        </ul>
      </div>
    </div>
    <div class="footer-creds">
      <div class="copy-creds">
        <p>©2022 · Todos los derechos reservados.</p>
      </div>
      <div class="legal-creds">
        <ul>
          <li><a href="">Política de Privacidad</a></li>
          <li><a href="">Plítica de Cookies</a></li>
          <li><a href="">Aviso Legal</a></li>
        </ul>
      </div>
    </div>
  </footer>

</body>
</html>

Fíjate que acabamos cerrando la etiqueta de <body> y <html> que hemos abierto al principio de la página.

Código CSS de Footer

/* Footer de la página */

footer{
  background-color: #fff;
  color: var(--black-c);
}

footer ul{
  padding: 0;
}

.wrap-footer{
  display: grid;
  grid-template-columns: 30% 15% 15% 20%;
  column-gap: 5%;
  padding: 1rem;
  margin: 2rem auto;
  max-width: 1200px;
}

element-footer h5{
  margin: 1rem 0;
}

.text-element-footer{
  line-height: 2;
}

.text-element-footer li a{
  color: var(--main-c);
}

.rrss-element-footer ul{
  display: flex;
  flex-wrap: wrap;
}

.rrss-element-footer img{
  width: 45px;
}
.rrss-element-footer li{
  margin-right: 1rem;
}

.footer-creds{
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  color: #576171;
  font-size: .9rem;
  max-width: 1200px;
  margin: 0 auto;
}

.legal-creds ul{
  display: flex;
}

.legal-creds ul li{
  padding-right: 1rem;
}

.legal-creds ul li a{
  color: #576171;
}

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

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

@media (max-width:320px){
  .footer-creds{
    flex-flow: column;
  }
}

Como siempre usamos las media queries para adaptar el diseño. Hemos utilizado todo tipo de medidas, hasta llegar a los 320px para aquellas pantallas más pequeñas. De esta forma, nos aseguramos que se vea bien en cualquier dispositivo.

Y hasta aquí el pedazo de tutorial para crear nuestra página web del Restaurante. Si quieres rizar un poco más el rizo te dejo por aquí un pequeño bonus.

Bonus: Sección de Contacto y Carta de Restaurante

Como te habrás fijado, en este tutorial nos centramos en la parte de la Home o Página de Inicio. Si quieres ver otras partes, para saber como hago por ejemplo, la página de contacto del Restaurante, te lo dejo por aquí también.

Y hasta aquí todo este rollazo de código ¡Y encima gratis!

Y por si fuera poco, tienes los comentarios de abajo para dejarme cualquier pregunta o sugerencia que quieras hacerme ¿Qué más se puede pedir?

¡Hasta la próxima!

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

6 thoughts on “Cómo hacer la Página Web de un Restaurante en HTML y CSS (Responsive)”

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

También te puede interesar: