HTML Code -
<html>
<body>
<center><h1>Best Footer Design</h1></center>
<div class="socials">
<div class="container">
<aside class="footer_widget">
<ul class="socialicons">
<li><a target="_blank" href="https://www.facebook.com/756dk"><img alt="Facebook" src="https://tunedballoondemo.files.wordpress.com/2014/02/facebook.png"></a></li>
<li><a target="_blank" href="https://twitter.com/kapoordeepanshu"><img alt="Twitter" src="https://tunedballoondemo.files.wordpress.com/2014/02/twitter.png"></a></li>
<li><a target="_blank" href="https://plus.google.com/+DeepanshuKapoorcybersecurity"><img alt="Google" src="https://tunedballoondemo.files.wordpress.com/2014/02/google.png"></a></li>
<li><a target="_blank" href="https://www.youtube.com/channel/UC27t7pR8bt7HQVBEniIj39g"><img alt="YouTube" src="https://tunedballoondemo.files.wordpress.com/2014/02/youtube.png"></a></li>
<li><a target="_blank" href="https://instagram.com/kapoordeepanshu/"><img alt="Instagram" src="https://tunedballoondemo.files.wordpress.com/2014/02/instagram.png"></a></li>
</ul>
</aside> </div>
<!-- end container -->
</div>
</body>
</html>
CSS Code -
.socials {
background: none repeat scroll 0 0 #110614;
color: #fff;
margin-top: 50px;
padding: 15px 0 5px;
text-align: center;
}
.container:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
.container {
width: 1280px;
}
.container {
margin: 0 auto;
position: relative;
width: 960px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ul.socialicons {
padding: 8px 0;
text-align: center;
}
ol, ul {
list-style: outside none none;
}
aside.footer_widget ul li {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
padding: 0;
}
.socials ul li {
color: #fff;
display: inline-block;
}
ul.socialicons li {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
padding: 5px 0;
}
aside ul li {
font-size: 1em;
padding: 5px 0;
}
