In this section, we will be working on the footer section.

The footer is basically the same as the header, so to facilitate the coding, we will simply copy and paste the code from our header and change a few things:

<header>
  <a id="logo" href="/"><img src="img/logo.png" srcset="img/logo.png 1x, img/logo@2x.png 2x"></a>
  <ul class="main-nav">
    <li><a href="upcoming.html">Upcoming events</a></li>
    <li><a href="past.html">Past events</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="about.html">About us</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="right-nav">
    <li><a href="login.html">Login</a></li>
    <li><a href="#"><iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
  </ul>
</header>

Here are the things that we need to change:

• Change the <header> tag to a <footer> tag
• Add a .container div inside our footer as it follows the grid
• Change our logo image to "logo-footer.png"

This is the final HTML:

<footer>
  <div class="container">
    <a id="logo" href="/"><img src="img/logo-footer.png" srcset="img/logo-footer.png 1x, img/logo-footer@2x.png 2x"></a>
    <ul class="main-nav">
      <li><a href="upcoming.html">Upcoming events</a></li>
      <li><a href="past.html">Past events</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="about.html">About us</a></li>
      <li><a href="blog.html">Blog</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul class="right-nav">
      <li><a href="login.html">Login</a></li>
      <li><a href="#"><iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fphilippehongcreative&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=235448876515718" width="51" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></a></li>
    </ul>
  </div>
</footer>

Let's jump to the CSS. We're first going to target our footer:

footer {
  background: black;
  color: white;
}

We're calling the footer without any dot or # because we're calling the tag by itself. It also means that every other footer tag will be selected. So, we need to make sure that we'll only select the tag footer for the footer element.

We add a background black like it is in the design but also add a color:white at the parent level. We're lazy, we don't want to add every time.

footer .container {
  display: flex;
  height: 120px;
}

This is getting interesting; we now have targeted the .container inside the footer and changed its property to flex, so we can display those elements inline.

We're not going to specify the width for each child element because we want them to take as much space as they would naturally take.

For the final touch, we'll add some padding to the logo to align it with the menu:

footer .logo {
  padding-top: 20px;
}

footer .main-nav li, footer .right-nav li {
  list-style-type: none;
  display: inline-block;
}

footer .main-nav li a, footer .right-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

We also took some styling from the header and copied it here:

We have our footer done now!

Here's the final CSS code:

/* FOOTER SECTION */

footer {
  background: black;
  color: white;
}

footer .container {
  display: flex;
  height: 120px;
}

footer .logo {
  padding-top: 20px;
}

footer .main-nav li, footer .right-nav li {
  list-style-type: none;
  display: inline-block;
}

footer .main-nav li a, footer .right-nav li a {
  color: white;
  text-decoration: none;
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 20px;
  letter-spacing: 4px;
  padding: 0px 15px;
}

/* END FOOTER SECTION */