Last active
July 21, 2019 18:02
-
-
Save beseidel/f66715336d93b8a6bcd600d9fef4d8e6 to your computer and use it in GitHub Desktop.
Social Media Footer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <footer class="section"> | |
| <div class="container"> | |
| <p>John Doe ©2016 website.com</p> | |
| <ul> | |
| <li><a target="_blank" class="facebook" href="https://www.facebook.com/"><i class="fa fa-fw fa-2x fa-inverse fa-facebook"></i></a></li> | |
| <li><a target="_blank" class="twitter" href="https://www.twitter.com/"><i class="fa fa-fw fa-2x fa-inverse fa-twitter"></i></a></li> | |
| <li><a target="_blank" class="google-plus" href="https://plus.google.com/"><i class="fa fa-fw fa-2x fa-inverse fa-google-plus"></i></a></li> | |
| <li><a target="_blank" class="linkedin" href="https://www.linkedin.com/"><i class="fa fa-fw fa-2x fa-inverse fa-linkedin"></i></a></li> | |
| <li><a target="_blank" class="instagram" href="https://www.instagram.com/"><i class="fa fa-fw fa-2x fa-inverse fa-instagram"></i></a></li> | |
| <li><a target="_blank" class="youtube" href="https://www.youtube.com/"><i class="fa fa-fw fa-2x fa-inverse fa-youtube"></i></a></li> | |
| <li><a target="_blank" class="vimeo" href="https://www.vimeo.com/"><i class="fa fa-fw fa-2x fa-inverse fa-vimeo-square"></i></a></li> | |
| <li><a target="_blank" class="tumblr" href="https://www.tumblr.com/"><i class="fa fa-fw fa-2x fa-inverse fa-tumblr"></i></a></li> | |
| <li><a target="_blank" class="dribbble" href="https://www.dribbble.com/"><i class="fa fa-fw fa-2x fa-inverse fa-dribbble"></i></a></li> | |
| <li><a target="_blank" class="behance" href="https://www.behance.com/"><i class="fa fa-fw fa-2x fa-inverse fa-behance"></i></a></li> | |
| <li><a target="_blank" class="flickr" href="https://www.flickr.com/"><i class="fa fa-fw fa-2x fa-inverse fa-flickr"></i></a></li> | |
| <li><a target="_blank" class="github" href="https://www.github.com/"><i class="fa fa-fw fa-2x fa-inverse fa-github"></i></a></li> | |
| </ul> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| footer { | |
| background:#363b3f; | |
| padding-bottom: 20px; | |
| } | |
| footer p { | |
| font-size:12px; | |
| color:#fff; | |
| text-align:center; | |
| padding-top: 20px; | |
| } | |
| footer ul { | |
| width: 100%; | |
| text-align: center; | |
| margin-top: 20px; | |
| padding-left: 0px; | |
| } | |
| footer li { | |
| display: inline-block; | |
| margin: 4px; | |
| } | |
| footer li a { | |
| display: block; | |
| text-decoration: none; | |
| border-bottom: medium none; | |
| padding: 10px; | |
| border-radius: 3px; | |
| transition: all 0.3s ease-in 0s, all 1s ease 0s; | |
| background: #444749; | |
| } | |
| footer .facebook:hover { | |
| background-color:#365397; | |
| } | |
| footer .twitter:hover { | |
| background-color:#00a9f1; | |
| } | |
| footer .google-plus:hover { | |
| background-color:#e0452c; | |
| } | |
| footer .youtube:hover { | |
| background-color:#ff3333; | |
| } | |
| footer .flickr:hover { | |
| background-color:#ea0066; | |
| } | |
| footer .dribbble:hover { | |
| background-color:#ed4584; | |
| } | |
| footer .behance:hover { | |
| background-color:#3fbff0; | |
| } | |
| footer .instagram:hover { | |
| background-color:#396d9a; | |
| } | |
| footer .vimeo:hover { | |
| background-color:#48b6ed; | |
| } | |
| footer .tumblr:hover { | |
| background-color:#304c68; | |
| } | |
| footer .linkedin:hover { | |
| background-color:#006db3; | |
| } | |
| footer .github:hover { | |
| background-color:#2f2f2f; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment