Flipkart like footer

      No Comments on Flipkart like footer

Flipkart like footer:


Flipkart like footer

Styling the footer

Styling the footer container- the box that holds the footer:

.footer_scanfcode
{
  background-color:#fff;
  padding:1% 4%;
  box-shadow:0px 1px 4px 1px #ccc;
  font-family: Roboto,Arial,sans-serif;
}

Styling the headings (HELP, FLIPKART, MISC) and the footer links:

.footer_scanfcode h6
{
  padding: 0 7px;
  line-height:23px;
  font-size: 13px;
   font-weight:500;
  color: #565656;
}
.links_flipkart_footer
{
  display: block;
  font-weight: 400;
  font-size: 11px;
  border-bottom: 1px solid #e4e4e4;
  padding:0px 7px;
  color: #565656; 
  line-height:17px;
}
.links_flipkart_footer:last-child {
    border-bottom: 0;
}

CSS for the image in footer (.flip_image):

.flip_image
{
  background-image: url("https://img1a.flixcart.com/www/prod/images/social-sprite-new-a01ff2d2.png");
  background-position: -326px -46px;
  width: 130px;
  height: 65px;
}

Styling the row containing copyright content and social links:

.row_cnt_sc
{
  font-weight: 500;
  border-top: 1px solid #e4e4e4;
  color: #565656;
  font-weight: 300;
  line-height: 31px;
  font-size:12px;
  margin:0px 7px;
}
.row_cnt_sc a
{
 padding: 0 5px;
 border-right: 1px solid #878787;
 color: #565656;
}
.row_cnt_sc a:hover
{
  text-decoration:none;
}
.icons_sc
{
  float:right;
}
.icons_sc .fa
{
  color:#fff;
  background-color:#565656;
  border-radius:100%;
  padding:5px 8px;
  margin:0px 5px;
}

HTML

<div class="col-md-12 footer_scanfcode">
 <div class="col-md-4"> // (HELP container)
  <h6 style='font-weight:500;'>HELP</h6> //heading
    <a href='#' class='links_flipkart_footer'>Payments</a>
    <a href='#' class='links_flipkart_footer'>Saved Cards</a> 
    <a href='#' class='links_flipkart_footer'>Shipping</a>
    <a href='#' class='links_flipkart_footer'>Cancellations & Return</a>
    <a href='#' class='links_flipkart_footer'>FAQ</a> 
    <a href='#' class='links_flipkart_footer'>Report Infringement</a>
 </div>
 <div class="col-md-4">
   <h6 style='font-weight:500;'>FLIPKART</h6>
   <a href='#' class='links_flipkart_footer'>Contact Us</a>
   <a href='#' class='links_flipkart_footer'>About Us</a>
   <a href='#' class='links_flipkart_footer'>Careers</a>
   <a href='#' class='links_flipkart_footer'>Flipkart Stories</a> 
   <a href='#' class='links_flipkart_footer'>Press</a>
   <a href='#' class='links_flipkart_footer'>Sell on Flipkart</a>
  </div>
 <div class="col-md-4">
   <h6 style='font-weight:500;'>MISC</h6>
    <a href='#' class='links_flipkart_footer'>Online Shopping</a>
    <a href='#' class='links_flipkart_footer'>About Us</a> 
    <a href='#' class='links_flipkart_footer'>Affiliate Program </a>
    <a href='#' class='links_flipkart_footer'>Gift Card</a> 
    <a href='#' class='links_flipkart_footer'>Flipkart First Subscription</a>
  <div class='flip_image'></div>
 </div>
<div class="col-md-12 row_cnt_sc">
  <div class="row">
    <span>
       <span>Policies:</span>
       <a href="#">Returns Policy</a>
       <a href="#">Terms of use</a>
       <a href="#">Security</a>
       <a href="#">Privacy</a>
       <a href="#">Infringement</a>
    </span>
    <span>© 2007-2017 scanfcode.com</span>
    <span class="icons_sc">Keep in touch 
     <i class="fa fa-facebook"></i>
     <i class="fa fa-twitter"></i>
     <i class="fa fa-google-plus"></i>
     <i class="fa fa-youtube-play"></i>
   </span>
  </div>
 </div>
</div>

Leave a Reply

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