Footer Component

Creating a Footer

You will have access to the code of the header below. Similar to the header, we will have all the links in the footer too.

The specification of the footer links is as follows:

• the footer links should be horizontally centered, and there should be 30 pixels between two adjacent links
• the font-size of each link is 10px

We will vertically center the footer. The markup of the footer is given below:

    <footer class="footer">
      <a href="#home" class="footer-link">Home</a>
      <a href="#posts" class="footer-link">Blog</a> 
      <a href="#contact" class="footer-link">Contact</a>
    </footer>

We will create the CSS belonging to the markup in the code editor below using Flexbox.

First, let’s define the container.

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

To create a 30 pixel gap between the links, let’s use a 15px margin around the links.

.footer-link {
  font-size: 10px;
  margin: 15px;
}