Mit der HTML-Struktur für den Footer an Ort und Stelle haben wir alles, was wir brauchen, um mit dem Styling zu beginnen und diesen Footer so aussehen zu lassen, wie wir ihn in Photoshop entworfen haben.
Wir erstellen eine neue SCSS-Datei nur für den Footer, da dies sinnvoll ist, um ihn modular zu halten, und das ist es, was wir für alles andere getan haben. Wir importieren ihn am Ende in die Haupt-Stylesheet.
Wir dunkeln den Footer ab, indem wir einen leichten RGBa-Hintergrund verwenden. Sass hilft uns dabei ein wenig, da man dies in Sass tun kann, was super cool ist: rgba(black, 0.5); Wir verwenden einen innenliegenden Schatten, um den Regal-ähnlichen Effekt zu erzeugen.
Wir rücken den Inhalt mit linken und rechten Innenabständen vom Rand weg. Sofort müssen wir die Höhe dieses Innenabstands an den aktuellen Breakpoint anpassen.
Wir gestalten den unteren Footer auf ganz ähnliche Weise. Er ist nur etwas dunkler, damit er wie eine weitere Ebene tiefer aussieht.