Bootstrap 3.3.0 Snippet by tarun90

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"> <!--footer start from here--> <footer> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 footerleft "> <div class="logofooter"> <img src="http://pg.gaarsam.com//pgimg/pg-logo.png"> </div> <br> <p><i class="fa fa-map-pin"></i> 617, West End Mall, Janakpuri, New Delhi -        110059, INDIA</p> <p><i class="fa fa-phone"></i> Phone (India) : +91 9312 690 490</p> <p><i class="fa fa-envelope"></i> E-mail : <a href="mailto:info@propertiesguru.com?Subject=Hello" target="_top">info@propertiesguru.com</a></p> <h4 class="heading4">Follow us:<br> <a href="https://www.facebook.com/#"><i id="social-fb" class="fa fa-facebook fa-2x social"></i></a> <a href="https://twitter.com/#"><i id="social-tw" class="fa fa-twitter fa-2x social"></i></a> <a href="https://plus.google.com/#"><i id="social-gp" class="fa fa-google-plus fa-2x social"></i></a> <a href="https://youtube.com/#"><i id="social-yt" class="fa fa-youtube-play fa-2x social"></i></a></h4> <hr class="style1"> <p>Need any help?Write to us at: </p> <p><i class="fa fa-envelope"></i><a href="mailto:support@propertiesguru.com?Subject=Hello" target="_top">support@propertiesguru.com</a></p> </div> <div class="col-md-2 col-sm-6 paddingtop-bottom"> <h6 class="heading7">QUICK LINKS</h6> <ul class="footer-ul"> <li><a href="#"> List your property</a></li> <li><a href="#"> Properties for Sale</a></li> <li><a href="#"> Properties for Rent</a></li> <li><a href="#"> Home Loan</a></li> <li><a href="#"> Customer Care</a></li> </ul> </div> <div class="col-md-3 col-sm-6 paddingtop-bottom"> <h6 class="heading7">PROPERTIES FOR SALE</h6> <div class="footer-ul"> <li><a href="#">Buy Properties in Mumbai</a></li> <li><a href="#">Buy Properties in Bangalore</a></li> <li><a href="#">Buy Properties in Pune</a></li> <li><a href="#">Buy Properties in Chennai</a></li> <li><a href="#">Buy Properties in Kolkata</a></li> <li><a href="#">Buy Properties in Delhi</a></li> <li><a href="#">Buy Properties in Gurgaon</a></li> <li><a href="#">Buy Properties in Greater Noida</a></li> <li><a href="#">Buy Properties in Noida</a></li> </div> </div> <div class="col-md-3 col-sm-6 paddingtop-bottom"> <h6 class="heading7">PROPERTIES FOR RENT</h6> <div class="footer-ul"> <li><a href="#">Rent Properties in Mumbai</a></li> <li><a href="#">Rent Properties in Bangalore</a></li> <li><a href="#">Rent Properties in Pune</a></li> <li><a href="#">Rent Properties in Chennai</a></li> <li><a href="#">Rent Properties in Kolkata</a></li> <li><a href="#">Rent Properties in Delhi</a></li> <li><a href="#">Rent Properties in Gurgaon</a></li> <li><a href="#">Rent Properties in Greater Noida</a></li> <li><a href="#">Rent Properties in Noida</a></li> </div> </div> </div> </div> </footer> <!--footer start from here--> <div class="copyright"> <div class="container"> <div class="col-md-6"> <p>All Rights Reserved. © Copyright 2017 PropertiesGuru.com</p> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300); footer { background-color:#242627; min-height:350px; font-family: 'Open Sans', sans-serif; } .footerleft { margin-top:50px; padding:0 36px; } .logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;} .footerleft p { color:#fff; font-size:12px !important; font-family: 'Open Sans', sans-serif; margin-bottom:10px;} .footerleft p i { width:20px; color:#999;} .paddingtop-bottom { margin-top:50px;} .footer-ul { list-style-type:none; padding-left:0px; margin-left:2px;} .footer-ul li { line-height:29px; font-size:12px;} .footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; } .footer-ul i { margin-right:10px;} .footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#8f8f8f; } .social:hover { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } hr.style1 { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(225, 225, 225, 0), rgba(225, 225, 225, 0.75), rgba(225, 225, 225, 0)); }} .icon-ul { list-style-type:none !important; margin:0px; padding:0px;} .icon-ul li { line-height:75px; width:100%; float:left;} .icon { float:left; margin-right:5px;} .copyright { min-height:40px; background-color:#000000;} .copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0px;} .heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;} .heading4 { color:#d9d6d6; margin-bottom:22px;} .post p { font-size:12px; color:#8f8f8f; line-height:20px;} .post p span { display:block; color:#8f8f8f;} .bottom_ul { list-style-type:none; float:right; margin-bottom:0px;} .bottom_ul li { float:left; line-height:40px;} .bottom_ul li:after { content:"/"; color:#8f8f8f; margin-right:8px; margin-left:8px;} .bottom_ul li a { color:#8f8f8f; font-size:12px;} .social:hover { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); } .social { -webkit-transform: scale(0.5); /* Browser Variations: */ -moz-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; } /* Multicoloured Hover Variations */ #social-fb:hover { color: #4060A5; } #social-tw:hover { color: #00ABE3; } #social-gp:hover { color: #e64522; } #social-yt:hover { color: #DF192A; }

Related: See More

Questions / Comments: