Sólo nos queda una última sección a nuestro proyecto. Esta es la sección del footer.
Vamos a nuestro archivo HTML y empecemos a maquetar.
Estructura del footer
El pie de página se divide en dos secciones bastante simples: una con los enlaces a redes sociales y otro con el logotipo de la empresa. Conociendo esto podemos crear las etiquetas que necesitamos.
- En la primera sección agregamos los nombres de las redes mostradas en el diseño. Agregamos # a la dirección del enlace para evitar que se actualice la página al hacer clic sobre el mismo.
- En la segunda sección llamamos la imagen con una etiqueta img. Agregamos una descripción sobre la imagen para la parte de accesibilidad.
- Agregamos clases a cada una de las secciones con left y right, respectivamente.
<footer>
<section>
<ul>
<li><a href="#">Linkedin</a></li>
<li><a href="#">Crunchbase</a></li>
<li><a href="#">Hackernews</a></li>
</ul>
</section>
<section>
<img src="./assets/img/logo-footer.svg" alt="Logo Batatabit">
</section>
</footer>
Cómo dar estilos al footer
Ten presente los siguientes elementos:
Contenedor
- Llamamos la etiqueta footer directamente para aplicar estilos.
- Usamos display: flex para que ambas secciones estén una a lado de otra.
- Le damos un ancho del 100% y un alto de 150px.
- Establecemos el color de fondo con la variable –bitcoin-orange.
footer {
display: flex;
width: 100%;
height: 150px;
background-color: var(--bitcoin-orange);
}
Secciones
- Llamamos la etiqueta section desde la etiqueta footer para trabajar con las dos secciones.
- Mantenemos el display: flex.
- Centramos las cajas con justify-content: center.
- Alineamos los elementos dentro de los contenedores con align-items: center.
footer section {
display: flex;
width: 50%;
justify-content: center;
align-items: center;
}
- Llamamos la etiqueta ul desde la clase .left de la etiqueta footer para ser específicos.
- Ajustamos el ancho de la fuente en 1.4rem y su peso en 500.
- Le damos un interlineado de 1.8rem.
- Quitamos los bullet points de los elementos con list-style: none.
footer .left ul {
font-size: 1.4
font-weight: 500;
line-height: 1.8
list-style: none;
}
- A cada elemento de la lista le damos un margen superior e inferior de 10px y 0 a los lados.
- Quitamos el subrrayado de los textos que genera la etiqueta a con text-decoration: none.
- Cambiamos el color del texto con –just-white.
.left li {
margin: 10px 0;
}
.left a {
text-decoration: none;
color: var(--just-white);
}
¡El diseño está completo! ¿O no? Acabas de finalizar todas las secciones por trabajar y el resultado es bastante bueno desde un dispositivo móvil, ¡pero sólo desde allí! Aún nos queda la parte de los media queries que adaptarán todos los elementos a distintos anchos.
Contribución creada por: José Miguel Veintimilla (Platzi Contributor).
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?