<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <footer> <div class="footer-section"> <div class="container wow fadeInUp"> <div class="footer-four-columns"> <div class="col-md-3 footer-column wow fadeInUp"> <h4>About </h4> <img class="img-responsive" src="https://ak1.picdn.net/shutterstock/videos/2880220/thumb/4.jpg" alt="img"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <br><b> Read More <i class="fa fa-angle-double-right"></i></b> </div> <div class="col-md-3 footer-column wow fadeInUp"> <h4> LINK BLOCK</h4> <ul> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Lorem ipsum dolor sit</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Amet consectetur</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Praesent vel sem id</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Curabitur hendrerit est</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Aliquam eget erat nec sapien</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Cras id augue nunc</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> In nec justo non</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Vivamus mollis enim ut</a> </li> <li> <a href="#"> <i class="fa fa-angle-double-right"></i> Curabitur hendrerit est</a> </li> </ul> </div> <div class="col-md-3 footer-column wow fadeInUp"> <h4>FORM THE BLOG</h4> <p><b class="col3">Post Title</b><br> Friday, 6th April 2000 Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. <br><b> Read More <i class="fa fa-angle-double-right"></i></b> </p> <p><b class="col3">Post Title</b><br> Friday, 6th April 2000 Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. <br><b> Read More <i class="fa fa-angle-double-right"></i></b> </p> </div> <div class="col-md-3 footer-column wow fadeInUp"> <h4>CONTACT US</h4> <p> Tel: xxxxx xxxxxxxxxx <br> Fax: xxxxx xxxxxxxxxx <br> Email: <b>contact@mydomain.com</b><br> </p> <h3> NEWSLETTER </h3> <div class="form"> <input type="text" placeholder="Name" name=""> <input type="Email" placeholder="Email" name=""><br> <button> SUBMIT </button> </div> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="footer-bottom-area"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="footer-bottom"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="fba-copyright text-center"> <p>Copyright © 2017 Designed by Habibullah. All rights reserved.</p> </div> </div> </div> </div> </div> </div> </div> </div> </footer>

.footer-section { background: #222222; color: #666666; padding: 5em 0; } footer img { border: 1px solid #666666; padding: 8px; } .footer-column b { color: #669933; } .footer-column h4 { font-size: 2em; margin-bottom: .5em; } .footer-column p { font-size: .96em; line-height: 1.8em; } footer.footer-column ul, li, a { font-size: 16px; text-decoration: none; list-style: none; color: #669933; padding: 5px; } .footer-column input { color: inherit; background-color: #353535; padding: 8px; border: 0; border-radius: 5px; margin: 8px; } .footer-column button { display: inline-block; justify-content: left; margin-right: 70%; margin-left: 3%; padding: 7px; color: #ffffff; background-color: #7c9c37; border: 0; border-radius: 6px; } .footer-bottom-area { padding: 12px 2%; background-color: #222222; border-top: 2px solid #000; } .footer-bottom-area p { color: #666666; }