Stylish Footer Tutorial HTML5 CSS3

Source Files

The HTML


<script type="prism-html-markup">
<footer>
  <div id="footer_container">
    <p class="copyright_text">&copy; copyright 2016 xo pixel.<br>
    designed and developed by xo pixel.</p>
    <ul class="social">
      <li>
        <a href="https://twitter.com/xopixell" target="_blank">twitter.</a>
      </li>
      <li>
        <a href="https://pinterest.com/xopixel" target="_blank">pinterest.</a>
      </li>
      <li>
        <a href="https://www.behance.net/marisablr" target="_blank">behance.</a>
      </li>
      <li>
        <a href="https://ca.linkedin.com/in/marisablair" target="_blank">linkedin.</a>
      </li>
    </ul>
  </div>
</footer>
</script>

The CSS


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,400,300,700);
@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);
body {
  margin: 0;
  padding: 0;
}
footer {
  background-image: url('https://bit.ly/21hO6hH');
}
#footer_container {
  max-width: 940px;
  height: 100px;
  margin: 0 auto;
  padding-top: 2%;
}
.social {
  list-style: none;
}
.social li a {
  font-family: 'Permanent Marker', cursive;
  font-size: 20px;
  display: inline;
  float: right;
  padding: 10px;
  color: #A3A3A3;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
.social li a:hover {
  color: #ff7bac;
}
.copyright_text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  padding-top: 2%;
  float: left;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.65em;
  color: #A3A3A3;
}

Like this article?

5 comments

  1. your videos are really helpfull…i am creating a website for property dealers but i am having a problem adding these social icons on the left just like yours.Kindly make a video on it plzzzz.

  2. Hi Marisa! This tutorial was very useful! I’m building an HTML5 and CSS3 site for my club, but I’m having some issues with Footer sections. Can I send my code to you by email?

    1. Hi Bruno,
      Yay, that’s good to hear! I’m actually working on the final touches for my new PixelFix program–I made a video on it late last year. Hold off on emailing it to me for now, and I’ll announce when the program is open and I’m available for code reviews!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.