I den här sista screencasten för att bygga ut sidfoten arbetar vi på bottenfoten där CodePen och ShopTalk är.
Vi måste ändra HTML lite när vi kommer till insikten att de fyra bitarna längs botten (logotyp, text, logotyp, text) skulle vara vettiga att vara en serie inbyggda blockelement som är centrerade på varandra ( vertical-align: middle;).
Vi stöter på frågan där det finns extra utrymme mellan inline-blockelement så vi använder fontstorleken: 0; trick från den här artikeln.
Vi får layouten att fungera i slutändan, men du ser mig faktiskt inte tappa de riktiga bilderna. Som vi gjorde med Photostar skapar jag en ny Photoshop-fil bara för dessa sidfotlogotyper. Detta gör det bara enklare att hantera och framtida uppdateringar av dessa logotyper lättare. Jag gör dem också 2x i storlek och skalar ner dem så att de ser bra ut på Retina-skärmar. Jag släpper dem i platshållarens bildtaggar vi har och det fungerar bra.
Filer
- 74-sidfot Logos.psd.zip