Dalam screencast terakhir untuk membuat footer, kita mengerjakan footer bawah di mana area CodePen dan ShopTalk berada.
Kita harus mengubah HTML sedikit karena menyadari bahwa empat potongan di bagian bawah (logo, teks, logo, teks) akan masuk akal menjadi serangkaian elemen blok sebaris yang berpusat satu sama lain ( vertical-align: middle;).
Kami mengalami masalah di mana ada ruang ekstra di antara elemen blok-sebaris jadi kami menggunakan font-size: 0; trik dari artikel ini.
Kami mendapatkan tata letak berfungsi pada akhirnya, tetapi Anda tidak benar-benar melihat saya jatuh dalam gambar nyata. Seperti yang kami lakukan dengan Photostar, saya membuat file Photoshop baru hanya untuk logo footer ini. Ini hanya membuatnya lebih mudah untuk ditangani dan pembaruan di masa mendatang untuk logo ini lebih mudah. Saya juga membuatnya berukuran 2x dan memperkecil ukurannya sehingga terlihat bagus di layar Retina. Saya meletakkannya di tag gambar placeholder yang kami miliki dan itu berfungsi dengan baik.
File
- 74-Footer Logos.psd.zip