Diseño de Footer Responsive para Landing Page

Resumen

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).