In this final screencast of building out the footer, we work on the bottom footer where the CodePen and ShopTalk areas are.

We have to change the HTML a bit as come come to the realization that the four chunks along the bottom (logo, text, logo, text) would make sense to be a series of inline block elements that are centered on each other (vertical-align: middle;).

We run into the issue where there is extra space between inline-block elements so we use the font-size: 0; trick from this article.

We get the layout working in the end, but you don't actually see me drop in the real images. Like we did with the Photostar I make a new Photoshop file just for these footer logos. This just makes it easier to deal with and future updates to these logos easier. I also make them 2x in size and scale them down so they look good on Retina displays. I drop them in the placeholder image tags we have and it works great.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag