<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <script src="https://use.fontawesome.com/f59bcd8580.js"></script> <footer class="pt-5 pb-4" id="contact"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4"> <h5 class="mb-4 font-weight-bold">ABOUT US</h5> <p class="mb-4">Etiam laoreet in ex quis efficitur.</p> <ul class="f-address"> <li> <div class="row"> <div class="col-1"><i class="fa fa-map-marker"></i></div> <div class="col-10"> <h6 class="font-weight-bold mb-0">Address:</h6> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </li> <li> <div class="row"> <div class="col-1"><i class="fa fa-envelope"></i></div> <div class="col-10"> <h6 class="font-weight-bold mb-0">Have any questions?</h6> <p><a href="#">Support@userthemes.com</a></p> </div> </div> </li> <li> <div class="row"> <div class="col-1"><i class="fa fa-phone"></i></div> <div class="col-10"> <h6 class="font-weight-bold mb-0">Address:</h6> <p><a href="#">+XX (0) XX XX-XXXX-XXXX</a></p> </div> </div> </li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4"> <h5 class="mb-4 font-weight-bold">FRESH TWEETS</h5> <ul class="f-address"> <li> <div class="row"> <div class="col-1"><i class="fa fa-twitter"></i></div> <div class="col-10"> <p class="mb-0"><a href="#">@userthemesrel </a> HTML Version Out Now</p> <label>10 Mins Ago</label> </div> </div> </li> <li> <div class="row"> <div class="col-1"><i class="fa fa-twitter"></i></div> <div class="col-10"> <p class="mb-0"><a href="#">@userthemesrel </a> HTML Version Out Now</p> <label>10 Mins Ago</label> </div> </div> </li> <li> <div class="row"> <div class="col-1"><i class="fa fa-twitter"></i></div> <div class="col-10"> <p class="mb-0"><a href="#">@userthemesrel </a> HTML Version Out Now</p> <label>10 Mins Ago</label> </div> </div> </li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4"> <h5 class="mb-4 font-weight-bold">LATEST UPDATES</h5> <ul class="recent-post"> <li> <label class="mr-3">28 <br><span>APR</span></label> <span>Rendomised words which dont look eveable.</span> </li> <li> <label class="mr-3">29 <br><span>APR</span></label> <span>Rendomised words which dont look eveable.</span> </li> <li> <label class="mr-3">30 <br><span>APR</span></label> <span>Rendomised words which dont look eveable.</span> </li> </ul> </div> <div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4"> <h5 class="mb-4 font-weight-bold">CONNECT WITH US</h5> <div class="input-group"> <input type="text" class="form-control" placeholder="Your Email Address"> <span class="input-group-addon" id="basic-addon2"><i class="fa fa-check"></i></span> </div> <ul class="social-pet mt-4"> <li><a href="#" title="facebook"><i class="fa fa-facebook-f pt-2"></i></a></li> <li><a href="#" title="twitter"><i class="fa fa-twitter pt-2"></i></a></li> <li><a href="#" title="google-plus"><i class="fa fa-google-plus pt-2"></i></a></li> <li><a href="#" title="instagram"><i class="fa fa-instagram pt-2"></i></a></li> </ul> </div> </div> </div> </footer> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

/*=-footer-=*/ footer { color: #fff; background-attachment: fixed; background-color:#222; background-image: url(https://s7.postimg.org/uyf0oioaz/footer-bg.png); background-size: cover; background-position: bottom; } footer p { color: #ccc; } footer a { color: #ccc; } .social-pet li { display: inline-block; margin-right: 10px; } .social-pet li a { height: 35px; width: 35px; border-radius: 50%; text-align: center; display: block; line-height: 35px; background-color: #3a5a95; color: #fff; } .social-pet li:nth-child(2) a { background-color: #57aced; } .social-pet li:nth-child(3) a { background-color: #dd4f43; } .social-pet li:nth-child(4) a { background-color: #6b27b2; } .social-pet li a:hover { background-color: #0141a2; } .social-pet li a:hover i { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .recent-post li { display: block; color: #ccc; margin-bottom: 25px; } .recent-post li label { float: left; border: 2px solid #ccc; padding: 1px 7px; text-align: center; } .recent-post li label span { color: #fff; } footer .input-group-addon { background-color: #0141a2; padding: 10px; } .f-address li { display: inline-block; } .f-address li i { color: #2995de; font-size: 18px; } .f-address li a { color: #ccc; } /*=-Copyright-=*/ .copyright { background-color: #111; padding: 12px 0; font-size:14px; }