Cómo hacer Footer de Página Web de Restaurante (HTML y CSS)

En este post vamos a hacer el footer de la página web de un restaurante. En el anterior episodio vimos como hacer el header del restaurante (con un menú de navegación responsive). Después de completar esta sección del pie de página, ya tendremos nuestra home o página de inicio hecha.

Además (y como siempre), vamos a hacer el diseño completamente responsive en CSS, utilizando las media queries. Si, nuestras queridas media queries…

En el vídeo vamos a hacer una de las cosas más importantes en diseño web. Vamos a reutilizar el código del anterior vídeo y solo tendremos que centrarnos en diseñar nuestro footer.

Te lo dejo por aquí, por si lo quieres ver.

Footer de restaurante en HTML

Como hemos comentado, vamos a reutilizar el código para ahorrar tiempo y solo nos centraremos en crear la estructura del footer y maquetarla.

La estructura HTML

Para hacer el footer lo que haremos será crear una estructura de columnas (parecido a Bootstrap). Haremos un contenedor principal y dentro colocaremos todos los divs, que serán las columnas.

Después haremos un segundo apartado debajo del todo para crear una segunda sección dentro del footer, para mostrar el «famoso» Copyright. Y a la derecha, aparecerán los enlaces de las pestañas legales.

  <footer class="footer">

    <div class="wrap-footer">
      <div class="text-element-footer element-footer">
      <h3 class="main-c">Web de Restaurante</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, blanditiis hic quaerat nesciunt, labore eligendi consequatur voluptas dolores earum soluta tenetur iure officia error accusamus?</p>
      </div>
      <div class="text-element-footer element-footer">
        <h5>Dirección</h5>
        <ul>
          <li>Calle de los Tutoriales</li>
          <li>La Comarca - 0007</li>
          <li>Mvl: (+34) 600 00 00 00</li>
          <li>Tel: (+34) 900 00 00 00</li>
        </ul>
      </div>
      <div class="text-element-footer link-elements-footer element-footer">
    <h5>Más Información</h5>
    <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/agencia-seo">Nosotros</a></li>
    <li><a href="/diseno-web">Carta</a></li>
    <li><a href="/precios">Blog</a></li>
    <li><a href="/contacto">Contactar</a></li>
    </ul>
    </div>
    <div class="rrss-element-footer element-footer">
    <h5>Redes Sociales</h5>
    <ul>
    <li>
    <a href="https://facebook.com" target="_blank" rel="nofollow noopener noreferer"><img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNTEyIDc1djM2MmMwIDQxLjM5ODQzOC0zMy42MDE1NjIgNzUtNzUgNzVoLTEyMWwtMzAtMzBoLTMwbC0zMCAzMGgtMTUxYy00MS4zOTg0MzggMC03NS0zMy42MDE1NjItNzUtNzV2LTM2MmMwLTQxLjM5ODQzOCAzMy42MDE1NjItNzUgNzUtNzVoMzYyYzQxLjM5ODQzOCAwIDc1IDMzLjYwMTU2MiA3NSA3NXptMCAwIiBmaWxsPSIjNzk4NGViIi8+PHBhdGggZD0ibTUxMiA3NXYzNjJjMCA0MS4zOTg0MzgtMzMuNjAxNTYyIDc1LTc1IDc1aC0xMjFsLTMwLTMwaC0xNXYtNDgyaDE2NmM0MS4zOTg0MzggMCA3NSAzMy42MDE1NjIgNzUgNzV6bTAgMCIgZmlsbD0iIzQ2NjFkMSIvPjxwYXRoIGQ9Im0zMTYgMTgwdjYwaDkwbC0xNSA5MGgtNzV2MTgyaC05MHYtMTgyaC02MHYtOTBoNjB2LTYwYzAtMzMuMzAwNzgxIDE4LjMwMDc4MS02Mi40MDIzNDQgNDUtNzggMTMuMTk5MjE5LTcuNSAyOC44MDA3ODEtMTIgNDUtMTJoOTB2OTB6bTAgMCIgZmlsbD0iI2VjZWNmMSIvPjxwYXRoIGQ9Im0zMTYgMTgwdjYwaDkwbC0xNSA5MGgtNzV2MTgyaC00NXYtNDEwYzEzLjE5OTIxOS03LjUgMjguODAwNzgxLTEyIDQ1LTEyaDkwdjkwem0wIDAiIGZpbGw9IiNlMmUyZTciLz48L3N2Zz4=" alt="icono redes sociales"></a>
    </li>
    <li>
    <a href="mailto:[email protected]"><img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIC0zMSA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yMTEgMjcwLTQwLjkxNzk2OSA0My42NzU3ODEgMTAuOTE3OTY5IDc2LjMyNDIxOSAxMjAtOTB6bTAgMCIgZmlsbD0iIzAwYzBmMSIvPjxwYXRoIGQ9Im0wIDE4MCAxMjEgNjAgOTAgMzAgMjEwIDE4MCA5MS00NTB6bTAgMCIgZmlsbD0iIzc2ZTJmOCIvPjxwYXRoIGQ9Im0xMjEgMjQwIDYwIDE1MCAzMC0xMjAgMjEwLTE4MHptMCAwIiBmaWxsPSIjMjVkOWY4Ii8+PC9zdmc+" alt="icono redes sociales"></a>
    </li>
    <li>
    <a href="https://wa.me/600112233"><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="/politica-privacidad">Política de Privacidad</a></li>
    <li><a href="/politica-cookies">Política de Cookies</a></li>
    <li><a href="/aviso-legal">Aviso Legal</a></li>
    </ul>
    </div>
    </div>
  </footer>

Fíjate que para insertar los iconos de las redes sociales utilizo imágenes vectoriales, en formato SVG directamente en HTML. Por esa razón en la fuente de las etiquetas de las imágenes aparece un montón de caracteres.

Footer de restaurante en CSS

Vamos ahora con la parte de la maquetación. Utilizaremos la misma hoja de estilos y empezaremos a escribir nuestro código debajo del todo.

En este caso y como casi siempre, utilizaremos Flexbox y CSS Grid para la maquetación del footer y dividiremos en columnas todos los divs que hemos creado en HTML.

/************************

Footer

************************/

footer{
  background-color: #fff;
  color: var(--second-c);
}
footer ul{
  padding:0;
}
footer li{
  list-style: none;
}
.wrap-footer{
  display: grid;
  grid-template-columns: 30% 15% 15% 20%;
  column-gap: 5%;
  padding: 1rem;
  margin: 2rem auto;
  max-width: 1200px;
}
.logo-element_footer{
  display: flex;
  margin: 2rem 0;
}
.logo-element_footer img{
  max-height: 75px;
}
.element-footer h5{
  margin: 1rem 0;
}
.text-element-footer li{
  line-height: 2;
}
.link-elements-footer li a{
  color:#FFC300;
}
.rrss-element-footer ul{
  display: flex;
  flex-flow: wrap;
}
.rrss-element-footer img{
  width: 35px;
}
.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;
  flex-flow: row;
}
.legal-creds ul li{
  padding-right: 1rem;
}
.legal-creds ul a{
  color: #576171;
  font-size: .9rem;
}

Como ves tampoco ha sido tanto código. ¡Pero ojo! Recuerda que hemos reutilizado el código del anterior vídeo.

Footer de restaurante Responsive

Y vamos con la última parte, vamos a utilizar las media queries para hacer el footer de nuestra página web adaptable o responsive. Para que se adapte a todo tipo de pantallas y dispositivos.

Usaremos 3 medididas. Las dos primeras, de 768px y 480px son las que usamos en los anteriores vídeos por ejemplo donde aprendíamos como Cómo hacer un Menú de Restaurante en HTML y CSS. Y la última medida de 320px la usaremos por si el usuario visita nuestra página desde una pantalla muy pequeña.

@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;
  }
}

Y hasta aquí el vídeo de esta pequeña saga, para crear la página web de nuestro restaurante. Ya tenemos por fin nuestro footer. Ya falta muy poco para tener nuestro proyecto acabado.

Recuerda que si tienes cualquier duda o sugerencia puedes dejármelo en los comentarios de más abajo o en el propio vídeo de Youtube.