Mit der HTML-Struktur für die Fußzeile haben wir alles, was wir brauchen, um mit dem Styling zu beginnen und diese Fußzeile so aussehen zu lassen, wie wir sie in Photoshop entworfen haben.
Wir erstellen eine neue SCSS-Datei nur für die Fußzeile, da dies nur sinnvoll ist, um modular zu bleiben, und das haben wir für alles andere getan. Wir importieren es in das Haupt-Stylesheet unten.
Wir verdunkeln die Fußzeile mit nur einem kleinen RGBa-Hintergrund. Sass hilft uns ein bisschen, weil du das in Sass machen kannst, was super cool ist : rgba(black, 0.5)
; Wir verwenden einen eingebauten Kastenschatten, um den regalartigen Effekt zu erzielen.
Wir schieben den Inhalt mit linker und rechter Polsterung von den Rändern weg. Sofort müssen wir den Betrag dieser Auffüllung basierend auf dem aktuellen Haltepunkt anpassen.
Wir gestalten die untere Fußzeile ähnlich. Es ist nur ein bisschen dunkler, damit es ein weiteres Level tiefer aussieht.