<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 ----------> <footer class="bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 no-padding"> <div class="footer-block"> <img src="https://via.placeholder.com/75" alt="" class="logo-footer"> <div class="f_text color-grey-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore magna aliqua. Ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="col-lg-2 col-md-2 col-sm-6 no-padding"> <div class="footer-block"> <h6>follow us:</h6> <ul class="footer-folow"> <li class="color-fb"><a href=""><i class="fa fa-facebook"></i>facebook<span class="bg-white">12</span></a> </li> <li class="color-tw"><a href=""><i class="fa fa-twitter"></i>twitter<span class="bg-white">27</span></a> </li> <li class="color-gg"><a href=""><i class="fa fa-google-plus"></i>google +<span class="bg-white">51</span></a></li> <li class="color-pin"><a href=""><i class="fa fa-pinterest"></i>pinterest<span class="bg-white">70</span></a></li> </ul> </div> </div> <div class="col-lg-2 col-md-2 col-sm-3 col-sm-3 no-padding"> <div class="footer-block no-separ"> <h6>best tours</h6> <ul> <li><a class="link-green" href="#">Camping holidays</a></li> <li><a class="link-green" href="#">Self-catering holidays</a></li> <li><a class="link-green" href="#">Safaris and wildlife</a></li> <li><a class="link-green" href="#">Activity and adventure</a></li> <li><a class="link-green" href="#">Food and wine holidays</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-2 col-sm-3 col-sm-3 no-padding"> <div class="footer-block"> <h6>popular countries</h6> <div class="row"> <div class="col-md-6"> <ul> <li><a class="link-green" href="#">France</a></li> <li><a class="link-green" href="#">Spain</a></li> <li><a class="link-green" href="#">Ukraine</a></li> <li><a class="link-green" href="#">Turkey</a></li> <li><a class="link-green" href="#">India</a></li> </ul> </div> <div class="col-md-6"> <ul> <li><a class="link-green" href="#">France</a></li> <li><a class="link-green" href="#">Spain</a></li> <li><a class="link-green" href="#">Ukraine</a></li> <li><a class="link-green" href="#">Turkey</a></li> <li><a class="link-green" href="#">India</a></li> </ul> </div> </div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 no-padding"> <div class="footer-block no-separ"> <h6>twitter:</h6> <ul class="f_twitter"> <li class="color-grey-7"><i class="color-white fa fa-twitter"></i><span class="color-white">@faq</span> vestibulum accumsan est malesuada sem auctor, aliquet nisi ornare.</li> <li class="color-grey-7"><i class="color-white fa fa-twitter"></i><span class="color-white">@ger</span> suspendisse id pharetra lacus, et hendrerit mi. Praesent at tortor.</li> <li class="color-grey-7"><i class="color-white fa fa-twitter"></i><span class="color-white">@iva</span> donec volutpat enim at interdum pretium. Vestibulum ante ipsum primis in.</li> </ul> </div> </div> </div> </div> <div class="footer-link bg-black"> <div class="container"> <div class="row"> <div class="col-md-12"> <ul> <li><a class="link-green" href="#">Privacy Policy </a></li> <li><a class="link-green" href="#">About Us</a></li> <li><a class="link-green" href="#">Support </a></li> <li><a class="link-green" href="#">FAQ</a></li> <li><a class="link-green" href="#">Blog</a></li> <li><a class="link-green" href="#"> Forum</a></li> </ul> <div class="copyright"> <span>© 2020 All rights reserved. </span> </div> </div> </div> </div> </div> </footer>

ul { list-style: none; } .bg-dark { background: #1b1b1b!important; } footer { position: relative; width: 100%; padding-top: 70px; overflow: hidden; } .no-padding { padding-left: 0; padding-right: 0; } .footer-block { position: relative; width: 100%; margin-bottom: 70px; float: left; padding-right: 15px; padding-left: 15px; } .logo-footer { margin-top: -7px; margin-bottom: 43px; } .f_text { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 22px; font-weight: 400; } .color-grey-7 { color: #777777; } footer { position: relative; width: 100%; padding-top: 70px; overflow: hidden; } .instagram-wiget { position: relative; width: 100%; padding-right: 10px; } .instagram-wiget a:hover img { opacity: 0.7; } .logo-footer { margin-top: -7px; margin-bottom: 43px; } .footer-block { position: relative; width: 100%; margin-bottom: 70px; float: left; padding-right: 15px; padding-left: 15px; } .row30 .footer-block { padding-right: 30px; padding-left: 30px; } .footer-block h6 { padding-bottom: 15px; color: #fff; } .footer-block:before { content: ''; position: absolute; width: 1px; height: 100%; right: 0px; top: 0px; background: #383838; } .no-separ.footer-block:before { display: none; } .footer-block ul { position: relative; float: left; padding: 0; margin: 0; } .footer-block li { line-height: 25px; font-size: 16px; font-weight: 300; } .footer-block li a { color: #777; font-size: 13px; line-height: 30px; } .footer-folow { position: relative; width: 100%; max-width: 130px; } .footer-folow li { margin-bottom: 5px; width: 100%; -moz-border-radius: 3px; border-radius: 3px; float: left; font-size: 13px; padding-left: 13px; } .footer-folow li a { width: 100%; position: relative; float: left; color: #fff; line-height: 33px; } .footer-folow li a:hover { color: #fff; } .footer-folow li i { padding-right: 13px; display: inline-block; position: relative; } .footer-folow li span { position: absolute; right: 0px; height: 100%; top: 0px; padding: 0px 10px; color: #222; -moz-border-radius: 3px; border-radius: 3px; font-size: 13px; font-weight: 700; width: 35px; text-align: center; } .color-in { background: #11669c; } .color-in-2 { background: #0d5989; } .color-fb { background: #3b5998; } .color-fb-2 { background: #223f7c; } .color-tw { background: #00abf1; } .color-tw-2 { background: #0094d0; } .color-gg { background: #d0422a; } .color-gg-2 { background: #bf280f; } .color-pin { background: #cc2127; } .color-pin-2 { background: #b6090f; } .footer-form { padding-top: 15px; } .form-input { position: relative; float: left; width: 100%; margin-bottom: 15px; border: 1px solid #565656; -moz-border-radius: 25px; border-radius: 25px; padding: 15px; display: inline-block; line-height: 14px; } .form-input input { position: relative; width: 100%; font-size: 10px; height: 100%; background: none; color: #fff; } .form-input span { position: absolute; right: 15px; top: 16px; color: #777; } .footer-form input[type="submit"] { position: relative; width: 100%; display: inline-block; font-size: 13px; text-transform: uppercase; color: #fff; -moz-border-radius: 25px; border-radius: 25px; text-align: center; padding: 15px 0px; font-weight: 700; letter-spacing: 3px; } .footer-form input[type="submit"].bg-aqua { border: 1px solid #ff6600; } .footer-form input[type="submit"]:hover { background: none; color: #ff6600; } .footer-form input[type="submit"].bg-grey:hover { color: #fff; } .footer-link { position: relative; width: 100%; padding: 30px 0px 18px; } .footer-link ul { position: relative; float: left; margin: 0; padding: 0; } .footer-link ul li { position: relative; float: left; font-size: 13px; font-weight: 400; color: #fff; margin-right: 17px; text-transform: uppercase; letter-spacing: 1px; line-height: 13px; } .footer-link ul li a { color: #FFFFFF; } .footer-link ul li a:HOVER { color: #e6a630; text-decoration: none; } .copyright { position: relative; float: right; } .copyright span { color: #777; font-size: 12px; line-height: 12px; } .bg-dark .f_twitter li { font-size: 11px; } .color-white { color: #fff; } .f_twitter li { position: relative; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 18px; font-weight: 400; padding-left: 30px; margin-bottom: 16px; } .f_twitter li .fa { position: absolute; top: 5px; left: 0px; font-size: 16px; } .bg-black { background: #141414; } @media screen and (max-width: 767px) { .footer-link ul { width: 100%; text-align: center; } .footer-link ul li { width: 100%; padding-bottom: 8px; margin-right: 0px; } }