Sample website footer

Awesome website footer

by Vishnuprasad ps

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer>
<div class="flbx"></div>
<div class="footer-col">
  <div class="container">
  <div class="row">
  
  <div class="col-sm-4 col-xs-6 f-adr-col">
  <div class="f-address">
  <h3 class="head">
  Heading
  </h3>
  <div class="text">
  <p>
  Lorem ipsum dolor sit amet<br>
  consectetur adipiscing elit<br>
  sed do eiusmod tempor.
   </p>
   <p>
  incididunt:  labore et dolore magna<br>
  aliqua:  Ut enim ad minim<br>
  veniam: quis nostrud exercitation
  </p>
   </div>
  </div>
  </div>
  <div class="col-sm-5 col-xs-6">
  <div class="f-nav">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Product & Services</a></li>
  <li><a href="#">Careers</a></li>
  <li><a href="#">Contact US</a></li>
  </ul>
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Product & Services</a></li>
  <li><a href="#">Careers</a></li>
  <li><a href="#">Contact US</a></li>
  </ul>
  </div>
  </div>
  <div class="col-sm-3 col-xs-12">
  <div class="f-right">
  <a href="#" class="btn-color">Product Catalogue</a>
  <div class="f-social">
  <ul>
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  </ul>
  </div>
  </div>
  </div>
  
  </div>
  </div>
</div>
</footer>
<div class="panel-footer">
<div class="container">
Copyright ©2017
</div>
</div>

CSS

ul, li {
  list-style:none;
  padding:0;
  margin:0;
}
.head {
  margin: 0 0 10px
}
footer {
  padding-top: 40px;
  position: relative;
}
.footer-col {
  background: #333;
}
footer .flbx {
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  background:#ffc50b;
  width:350px;
  height:100%;
}
.f-address {
  background:#ffc50b;
  color:#333;
  margin-top:-40px;
  padding-top:40px;
  padding-bottom:60px;
}

.f-nav {
  padding-top:40px;
  padding-left:20px;
  display:inline-block;
  width:100%
}
.f-nav ul {
  float:left;
  width:50%
}
.f-nav ul li {
  float:none;
}
.f-nav ul li a {
  display:block;
  color:#666;
  padding: 5px 0
}
.f-nav ul li a:hover {
  color:#ffc50b;
}
.f-right {
  padding-top:40px;
  float:right
}
.btn-color {
  display:inline-block;
  padding: 9px 20px;
  border: 2px solid #ffc50b;
  color: #ffc50b;
  text-transform:uppercase;
}
.f-social ul {
  float:right;
  margin: 15px 0
}
.f-social ul li {
  float:left;
}
.f-social ul li a {
  display:block;
  color:#fff;
  font-size:18px;
  text-align:center;
  width:36px;
  height:36px;
  padding: 6px 10px;
  margin-left:3px
}
.f-social ul li a:hover {
  background: #ffc50b;
  color:#000;
}
.panel-footer {
  background: #000;
  color:#9c9c9c;
  border:0
}

@media (max-width: 1200px) {
footer .flbx {
  width:250px;
}  
}

@media (max-width: 992px) {
footer {
    padding-top: 0;
}
footer .flbx {
  display:none
}
.f-adr-col {
  background: #ffc50b;
}
.f-address {
    margin-top: 0;
    padding-bottom: 40px;
    padding-left: 15px;
}
.f-right {
    padding-top: 10px;
    padding-bottom:5px;
    float: none;
    width: 100%;
    display:inline-block
}
footer .btn-color {
    float: left;
}
.f-social {
    display: inline-block;
    float: right;
}
.f-social ul {
    margin: 0;
}
}