Com a estrutura HTML para o rodapé no lugar, temos o que precisamos para começar a estilizar e fazer com que o rodapé se pareça com o que desenhamos no Photoshop.
Criamos um novo arquivo SCSS apenas para o rodapé, porque faz sentido mantê-lo modularizado e é isso que temos feito para todo o resto. Nós o importamos para a folha de estilo principal na parte inferior.
Escurecemos o rodapé usando apenas um pouco de fundo RGBa. Sass nos ajuda um pouco porque você pode fazer isso no Sass que é super legal rgba(black, 0.5):; Usamos uma sombra de caixa embutida para criar o efeito de prateleira.
Empurramos o conteúdo para longe das bordas com preenchimento esquerdo e direito. Precisamos ajustar imediatamente a quantidade desse preenchimento com base no ponto de interrupção atual.
Nós estilizamos o rodapé inferior da mesma maneira. É apenas um pouco mais escuro para parecer outro nível abaixo.