In diesem letzten Screencast zur Erstellung des Footers arbeiten wir am unteren Footer, wo sich die Bereiche CodePen und ShopTalk befinden.
Wir müssen das HTML ein wenig ändern, da wir zu der Erkenntnis gekommen sind, dass die vier Blöcke am unteren Rand (Logo, Text, Logo, Text) sinnvoll als eine Reihe von Inline-Block-Elementen dargestellt werden können, die übereinander zentriert sind (vertical-align: middle;).
Wir stoßen auf das Problem, dass zwischen Inline-Block-Elementen zusätzlicher Platz vorhanden ist, daher verwenden wir den Trick `font-size: 0;` aus diesem Artikel.
Am Ende funktioniert das Layout, aber Sie sehen nicht, wie ich die echten Bilder einfüge. Wie bei Photostar erstelle ich eine neue Photoshop-Datei nur für diese Footer-Logos. Das macht die Handhabung und zukünftige Aktualisierungen dieser Logos einfacher. Ich erstelle sie auch 2x in der Größe und skaliere sie herunter, damit sie auf Retina-Displays gut aussehen. Ich füge sie in die Platzhalter-Bild-Tags ein, die wir haben, und es funktioniert hervorragend.