Con la estructura HTML para el pie de página en su lugar, tenemos lo que necesitamos para comenzar a diseñar y hacer que este pie de página se vea como lo que diseñamos en Photoshop.
Creamos un nuevo archivo SCSS solo para el pie de página, porque tiene sentido mantenerlo modular y eso es lo que hemos estado haciendo para todo lo demás. Lo @importamos a la hoja de estilo principal en la parte inferior.
Oscurecemos el pie de página usando solo un poco de fondo RGBa. Sass nos ayuda un poco, porque se puede hacer esto en Sass que es super cool: rgba(black, 0.5); Usamos una sombra de caja insertada para crear el efecto de estante.
Empujamos el contenido lejos de los bordes con relleno izquierdo y derecho. De inmediato, debemos ajustar la cantidad de ese relleno en función del punto de interrupción actual.
Diseñamos el pie de página inferior de la misma manera. Es un poco más oscuro para que parezca otro nivel más bajo.