201.07 On Your Own Project: Company Site #01

201-07-on-your-own-project-company-site-01.markdown

201.07 On Your Own Project: Company Site #01

A Pen by Pete Hanson on CodePen.

License.

index.html

<footer>
  <ul>
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="email">Email</a></li>
    <li><a href="#" class="instagram">Instagram</a></li>
  </ul>
</footer>

style.css

footer ul {
  padding: 0;
  margin: 0;
}

footer li {
  display: inline-block;
  padding: 0 60px;
}

footer li a {
  display: block;
  width: 46px;
  height: 46px;
  text-indent: -8685px;
  overflow: hidden;
  background: transparent url("http://pdxwolfy.org/LS/FE/201/lesson_9/spacedesign/images/icons_social-media.png") 0 0 no-repeat;
}

footer li a.twitter { 
  background-position: 0 0; 
}

footer li a.facebook { 
  background-position: 0 -46px; 
}

footer li a.email { 
  background-position: 0 -92px; 
}

footer li a.instagram { 
  background-position: 0 -138px; 
}