Avec la structure HTML du pied de page en place, nous avons ce dont nous avons besoin pour commencer à styliser et obtenir ce pied de page qui ressemble à ce que nous avons conçu dans Photoshop.
Nous créons un nouveau fichier SCSS juste pour le pied de page, car cela a du sens de rester modulaire et c'est ce que nous avons fait pour tout le reste. Nous l '@importons dans la feuille de style principale en bas.
Nous assombrissons le pied de page en utilisant juste un petit fond RGBa. Sass nous aide un peu car vous pouvez le faire dans Sass, ce qui est super cool rgba(black, 0.5):; Nous utilisons une ombre de boîte en médaillon pour créer l'effet d'étagère.
Nous poussons le contenu loin des bords avec un rembourrage gauche et droit. Tout de suite, nous devons ajuster la quantité de ce remplissage en fonction du point d'arrêt actuel.
Nous stylisons le pied de page inférieur de la même manière. C'est juste un peu plus sombre pour le faire paraître d'un autre niveau plus bas.