My code's not working!

×

  1. Double check all your files are saved.
  2. Check each quote has a pair.
  3. Do all of your HTML tags have a closing tag?
  4. Ask a mentor for help!

Add Styles to The Footer

Alright, so the last section of our page is our footer. Let’s add some styles so it matches the rest of our page.

First, let’s add some colors:

  footer {
    background-color: #82bef5;
    color: #fff;
  }

Let’s add images, so that our users can click an icon and go to your social media links. We’ve included icons for facebook, twitter and linkedin, as well as an email icon.

To do this, let’s open up profile.html. Let’s add some img tags inside of our anchor tags. Change the HTML inside your footer tag to look like this:

<a href="http://facebook.com" target="_blank">
  <img src="assets/social_media/facebook-logo.svg" alt="Facebook Icon">
</a>
<a href="http://linkedin.com" target="_blank">
  <img src="assets/social_media/linkedin-logo.svg" alt="LinkedIn Icon">
</a>
<a href="http://twitter.com" target="_blank">
  <img src="assets/social_media/twitter-logo.svg" alt="Twitter Icon">
</a>
<a href="mailto:test@test.com" target="_blank">
  <img src="assets/social_media/mail-black-envelope-symbol.svg" alt="Email Icon">
</a>

Let’s add some CSS so our icons are the right size for our page. Open up styles.css

  #social-media img {
    width: 35px;
    padding: 1.5%;
  }

Save styles.css and profile.html and refresh your page.

This is looking pretty good! Let’s add our ‘center’ class to the footer.

  <footer class="center" id="social-media">