Social Media Footer

By Laurel Beyers

F6
#
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;
}
JS

Similar Building Blocks

containers

Responsive Social Media Section

F6
by Laurel Beyers
containers

Responsive Table

F6
by Rafi
containers

Marketing Site Footer

F6
by Rafi