Con la struttura HTML per il piè di pagina in posizione, abbiamo ciò di cui abbiamo bisogno per iniziare a disegnare e ottenere questo piè di pagina simile a quello che abbiamo progettato in Photoshop.
Creiamo un nuovo file SCSS solo per il piè di pagina, perché ha senso mantenerlo modulare ed è quello che abbiamo fatto per tutto il resto. Lo @importiamo nel foglio di stile principale in basso.
Scuriamo il piè di pagina usando solo un po 'di sfondo RGBa. Sass ci aiuta un po 'perché si può fare questo in Sass che è super cool: rgba(black, 0.5); Usiamo un'ombra a riquadro per creare l'effetto simile a uno scaffale.
Spingiamo il contenuto lontano dai bordi con imbottitura sinistra e destra. Immediatamente dobbiamo regolare la quantità di quel riempimento in base al punto di interruzione corrente.
Modelliamo il piè di pagina in fondo allo stesso modo. È solo un po 'più scuro per farlo sembrare un altro livello inferiore.