<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="footer"> <div class="footer-content"> <div class="container"> <div class="footer-frst"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <div class="footer-zone"> <img src="http://www.qinside.biz/portals/0/images/google.png" alt="image view" class="img-responsive"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque bibendum efficitur. Etiam mattis, tortor non tincidunt euismod. Cras et maximus magna. Etiam mattis, tortor non tincidunt euismod. </p> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> </ul> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="link"> <h3>Links</h3> <ul> <li> <a href="#">Top-Tour</a></li> <li> <a href="#">New-Travel</a></li> <li> <a href="#">How-To</a></li> <li> <a href="#">Tips and Tricks</a></li> <li> <a href="#">Best-Tour</a></li> <li> <a href="#">Top-Travel</a></li> </ul> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="link"> <h3>useful links</h3> <ul> <li> <a href="#">Top-Tour</a></li> <li> <a href="#">New-Travel</a></li> <li> <a href="#">How-To</a></li> <li> <a href="#">Tips and Tricks</a></li> <li> <a href="#">Best-Tour</a></li> <li> <a href="#">Top-Travel</a></li> </ul> </div> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> <div class="link footer-gallery"> <h3>gallery</h3> <div class="row gallery-bottom"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> </div> <div class="row "> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> <div class="gallery-image"> <img src="https://igx.4sqi.net/img/general/200x200/0_OGr2UYgM7kwo1CB-AMVaDzY2rtFT3Ae7jf21-FEvY.jpg" alt="image view"> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"> <div class="footer-zone"> <h4> @2016 Zone Tour</h4> </div> </div> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> <div class="footer-home"> <ul> <li><a href="#">Home</a></li> <li><a href="#">DESTINATION</a></li> <li><a href="#">blog</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact</a></li> </ul> </div> </div> </div> </div> </div> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

.footer-content{background:url(https://www.baystonemedia.com/images/source/10037.png)center center no-repeat; float:left; width:100%;} .footer-zone img{width:30%;} .footer-zone p{letter-spacing:1px;color:#ccc; line-height:24px; margin-top:20px;} .footer-frst{float:left; width:100%; padding:80px 0; font-family:myriad pro;} .footer-zone ul{ list-style:none; padding:0px; margin:0px;} .footer-zone ul li{float:left;font-size:20px;} .footer-zone ul li a{padding-left:15px; color:#fff;} .footer-zone ul li a:hover{color:#f4b843;} .footer-zone{float:left; width:100%;} .link h3{text-transform:uppercase;color:#fff; font-size:18px; margin-top:0; margin-bottom:30px; font-weight:700; } .link ul{list-style:none; margin:0px; padding:0px;} .link ul li{ margin-bottom:8px;} .link ul li a{font-size:14px; color:#ccc; text-decoration:none; letter-spacing:2px;} .link ul li a:hover{color:#f4b843;} .link ul li a::before{ font-family: "FontAwesome"; content: "?"; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; text-decoration: none; padding-right: 10px;} .gallery-image img{width:85px; height:85px;} .gallery-bottom{margin-bottom:10px;} .footer-bottom{background:#0c0c0c; padding:20px 0; color:#fff;float:left; width:100%;} .footer-zone h4{margin:0px !important; font-size:15px; letter-spacing:1px;} .footer-home{float:right;} .footer-home ul{margin:0px; padding:0px; list-style:none;} .footer-home ul li{float:left; padding-right:40px; font-size:14px; text-transform:uppercase; font-weight:500;} .footer-home ul li a{color:#fff; text-decoration:none; }