Footer

What We're Aiming For...

Adding the Footer Grid

We'll use a grid to setup the layout for the footer row and set the background-color/text to dark/white. We now have three columns in the footer row.

<footer class="footer-container">
</footer>
.footer-container {
  background-color: var(--dark-color);
  color: #fff;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
}

Adding the First Column Content

There is a logo, followed by a paragraph of text.

<div>
  <img src="images/logo_light.png" />
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
    dolorem magnam sunt possimus perspiciatis quis suscipit quidem
    tempora, error numquam.
  </p>
</div>
.footer-container img {
  width: 150px;
}

Adding the Second Column Content

Here, we're introducing a new type of HTML element, the form. For this exercise, we're going to do a brief initial introduction to forms, before studying them in greater detail in a later exercise.

Form Overview

The purpose of a form is to collect input from the user. The <form> element is a container that contains <input> elements that receive the user input. There is a wide variety of input types that HTML supports. A few examples include numeric, text, email, password, date, checkbox, and radio button. The type "submit" which is used in the second <input> element in the form below, is used to specify the button that will be used to submit the form.

<div>
  <h3>Sign-up for our Newsletter</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Reprehenderit, totam!
  </p>
  <form>
    <input type="email" name="email" placeholder="Enter your email" />
    <input type="submit" value="Subscribe" class="btn btn-primary" />
  </form>
</div>

Attribute CSS Selector

And here's one more type of CSS selector that we have not yet introduced. It's called an attribute selector, because the bracket notation allows you to select on an element and additionally specify the value of an attribute that must be present for the selection to be a match.

Attribute selectors are a more advanced feature, and there are a lot more options for how they can be used. If you want to learn more about them you can read the MDN Documentation.

This CSS attribute selector is targeting the specific <input> element that has the type attribute set to "email".

.footer-container input[type='email'] {
  padding: 8px;
  margin-bottom: 8px;
}

Adding the Third Column Content

You should be starting to recognize the patterns. Everything in this column has been introduced in previous exercises.

<div>
  <h3>Connect with Us</h3>
  <ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Subscriptions</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</div>
.footer-container a {
  color: #fff;
}

.footer-container a:hover {
  color: red;
}

Making the Footer Responsive

The modifications to the footer are similar to those for the article grid, just changing the default number of columns to be one and increasing it to three when the screen width is greater than 600px.

  .footer-container {
    grid-template-columns: 1fr;
  }
  
  @media screen and (min-width:600px) {
    .footer-container {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

Wrapping Up

Here's a link to the published version of this site.

PreviousNavigation BarNextColors

Last updated