Social Media Footer

By Laurel Beyers

social-media footer

How do I use This?

A Responsive footer with social media icons and logo space.

HTML

<footer class="social-footer">
  <div class="social-footer-left">
    <a href="#"><img class="logo" src="https://placehold.it/150x30"></a>
  </div>
  <div class="social-footer-icons">
    <ul class="menu simple">
      <li><a href="https://www.facebook.com/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
      <li><a href="https://www.instagram.com/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
      <li><a href="https://www.pinterest.com/"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
      <li><a href="https://twitter.com/?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</footer>

.social-footer {
  padding: 1rem;
  background: $dark-gray;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .social-footer-icons {
    li:last-of-type {
      margin-right: 0;
    }

    .fa {
      font-size: 1.3rem;
      color: $white;

      &:hover {
        color: darken($dark-gray, 25%);
        transition: color 0.3s ease-in;
      }
    }
  }
}

.social-footer {
  padding: 1rem;
  background: #8a8a8a;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.social-footer .social-footer-icons li:last-of-type {
  margin-right: 0;
}

.social-footer .social-footer-icons .fa {
  font-size: 1.3rem;
  color: #fefefe;
}

.social-footer .social-footer-icons .fa:hover {
  color: #4a4a4a;
  transition: color 0.3s ease-in;
}

Social Media Footer

By Laurel Beyers

Responsive Social Media Section

Responsive Table

Marketing Site Footer

Social Media Footer

By Laurel Beyers

Similar Building Blocks

Responsive Social Media Section

Responsive Table

Marketing Site Footer