"Stylish Footer "
Bootstrap 3.3.0 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <footer id="contact" class="contact-us"> <div class="container"> <div class="row"> <div class="contact-area"> <h2>Contact Us</h2> <ul class="contact-list"> <li> <i class="fa fa-phone"></i> <a href="##"> +44 (0) 232 090 505</a> </li> <li> <i class="fa fa-envelope"></i> <a href="#"> hi@dsfg.co.uk</a> </li> <li> <i class="fa fa-map-marker"></i> <a href="#"> Rampura,Dhaka Bangladesh k</a> </li> </ul> <div class="socials-box"> <div class="social-content"> <div class="social-title"> <h2>Join Our Social Community</h2> </div> <div class="socials"> <a class="item soc-gp" target="_blank" href="#"> <span class="icn"></span>Circle us </a> <a class="item soc-in" target="_blank" href="#"> <span class="icn"></span> Join us </a> <a class="item soc-fb" target="_blank" href="#"> <span class="icn"></span> Like us </a> <a class="item soc-inst" target="_blank" href="#"> <span class="icn"></span> Instagram </a> <a class="item soc-tw" target="_blank" href="#"> <span class="icn"></span> Follow us </a> <a class="item soc-subscr" target="_blank" href="#"> <span class="icn"></span> Subscribe </a> </div> </div> </div> </div> </div> </div> </footer>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i,800|Vollkorn:400,400i,600,600i,700,700i'); * { margin: 0; padding: 0; outline: 0; box-sizing: border-box; } body { font-family: 'Vollkorn', 'Poppins', sans-serif, serif; } ul { list-style: none; } /* footer */ .contact-area { position: relative; } .contact-us { background: gray url(https://subtlepatterns.com/patterns/geometry2.png) repeat 0 0; width: 100%; margin: 0; text-align: center; height: 300px; padding: 60px 0; box-sizing: border-box; -webkit-animation: slide 20s linear infinite; } @-webkit-keyframes slide { from { background-position: 0 0; } to { background-position: -400px 0; } } .contact-list li i.fa { color: #000; font-size: 16px; margin-right: 5px; } .contact-list li { margin-bottom: 15px; } .contact-list li a { color: #000; font-size: 16px; -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; transition: all 350ms ease; } .contact-list li a:hover { background-color: #FF7779; text-decoration: none; } .social-content { position: relative; z-index: 2; max-width: 1578px; background: #00a3de; border-radius: 5px; text-align: center; padding: 50px 20px; margin: 0 auto; } .social-title { display: block; color: #0477ae; margin-bottom: 20px; letter-spacing: -1px; } .socials { display: table; width: 100%; table-layout: fixed; border: 1px solid #5cc2e9; max-width: 1444px; margin: 0 auto; } .socials .item:first-child { border-left: none; } .socials .item { background: rgba(37, 37, 37, .1); border-left: 1px solid #5cc2e9; display: table-cell; height: 73px; color: #fff; vertical-align: middle; text-align: center; transition: background .2s ease-out; } /* End footer */

Related: See More

Questions / Comments: