The header for this project is fairly minimal in design. It will include a logo, some post filter links, and a search field. The footer for this project, however, is the most complex one we've done yet. It will include two sections, a number of links, an e-mail sign-up form, and space for an advertisement—any good magazine design will include some space for ads.
Let's start with updating the header first. For this project, I'm going to use a couple of HTML5 tags to mix things up. For each project in this book, I try to change how I build the header to show you that there are several ways by which you can construct a header. Some will use the default Bootstrap header, but some will be totally custom. The first thing that we're going to do is wrap the entire header in the <header> tag:
<header> … </header>
Everything contained within the header is going to be centered horizontally, so let's apply a single style to this tag:
header...