Simple Footer using HTML CSS and Bootstrap framework

Simple Footer using HTML CSS and Bootstrap framework :


Simple Footer HTML:

<div class="col-md-12 footer">
<div class="col-md-4 about_scanfcode">
   <h4>LOGO</h4>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been  the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
        <p><i class="fa fa-map-pin"></i> 210, Narotam Nagar, Mohali, Punjab-141401,INDIA</p>
        <p><i class="fa fa-phone"></i> Phone (India) : +91 9876543210</p>
        <p><i class="fa fa-envelope"></i> E-mail : code@scanfcode.com</p>
</div>
<div class="col-md-3 links_scanfcode">
 <h4>General Links</h4>
 <ul>
	<li><a href='#'>Blog</a></li>
        <li><a href='#'>About Us</a></li>
	<li><a href='#'>Contact Us</a></li>
	<li><a href='#'>Terms & Conditions</a></li>
	<li><a href='#'>Privacy Policy</a></li>
	<li><a href='#'>Sitemaps</a></li>
	<li><a href='#'>Frequently asked question</a></li>
 </ul>
</div>
<div class="col-md-5 feedback">
 <h4>Subscribe</h4>
 <form>
 <input type="text" placeholder="Enter your email"/><button type="submit" class="btn btn-primary">SUBSCRIBE</button>
 <h4 style="margin-top:50px;">Connect+</h4>
 
      <li><a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a></li>
      <li><a target="_blank" href="https://twitter.com/"><i class="fa fa-twitter"></i></a></li>
      <li><a target="_blank" href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
      <li><a target="_blank" href="https://plus.google.com/"><i class="fa fa-google-plus"></i></a></li>
      <li><a target="_blank" href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a></li>
</div>
<div class="col-md-12" style="text-align:center;padding:5px;color:#fff;">
	© 2017, Scanfcode, All rights reserved
</div>
</div>

Simple Footer CSS:

.footer
{
background-color:#0c1a1e;padding:3% 4%;
}
.footer h4
{
color:#fff;
}

/* section containg about and address  */
.about_scanfcode p:first-child  // styles only first paragraph
{
color:#f2f2f2;
line-height:140%;
font-size:13px;
width:100%;
text-align:justify;
}
.about_scanfcode p
{
color:#d3d3d3;
font-size:12px;
}
.about_scanfcode i //icons
{
color:#666;
}

/*  general link section */
.links_scanfcode li
{
 list-style-type:none;margin:10px 0px;
}
.links_scanfcode a
{
 color:#666;
 
}
/* feedback and social icons */
.feedback button
{
border-radius:0px;height:47px;
}
.feedback input:focus
{
 border:solid 1px green;
}
.feedback li
{
  list-style-type:none;
  display:inline;
  margin:30px 10px;
}
.feedback i
{
  font-size:24px;
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
}
.feedback a:hover i
{
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
}
 .fa-facebook:hover {
     color: #3B5998;
 }
 .fa-twitter:hover {
     color: #4099FF;
 }
 .fa-google-plus:hover {
     color: #d34836;
 }
.fa-linkedin:hover {
     color: #f39c12;
 }
.fa-pinterest:hover
{
  color:#ff00cc;
}

Leave a Reply

Your email address will not be published. Required fields are marked *