Diseño de Footer Responsive para Landing Page

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.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    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).