Snapdeal like header for desktop

      No Comments on Snapdeal like header for desktop

Snapdeal like header for desktop:

Snapdeal like header for desktop

Code:

CSS:
body
{
  padding:0px;margin:0px;
}
.top_bar_snapdeal
{
  display:block;
  width:100%;
  font-size:12px;
  background-color:#cc003d;
  color:#fff;
  height:28px;
  padding:5px 35px 0px 65px;
}
.top_bar_snapdeal li
{
  list-style-type:none;
  float:left;
  margin:0px 20px;
}
.top_bar_snapdeal img
{
  vertical-align:top;
  height:20px;
}
.main_bar_snapdeal
{
    background-color:#e40046;
    height: 60px;
    padding-left:55px;
}

.search_bar_snapdeal input
{
    width:75%;
    padding:8px 25px;
    border-radius:3px 0px 0px 3px;
    border:solid 1px lightgray;
    color:#999;
}
.btn_snapdeal
{
  padding:8px 25px;
  border-radius:0px 3px 3px 0px;  
  border:solid 1px #333;
  background-color: #333;
  color:#fff;
}
.cart
{
    color:#fff;
    padding:23px 25px 0px 25px;
    border-left:solid 1px #cc003d;
    height: 60px;
    border-right:solid 1px #cc003d;
    width:110px;
    
}
.signin
{
    color:#fff;
}
#user
{
    font-size:18px;
    border-radius:100%;
    padding:5px;
    background-color:#cc003d;margin-top:15px;
}
.icon_cnt .glyphicon
{
    margin-left:10px;
} 
HTML:
<div class="col-md-12 top_bar_snapdeal">
  <span>India's Fastest Growing Shopping Destination </span><span style="float:right;display:inline">
    <ul>
      <li>Donate Food For Education</li>
      <li>Help Center</li>
      <li>Sell on Snapdeal</li>
      <li><img src="https://i4.sdlcdn.com/img/platinum09/downloadappicon2ndsep.png" />
               Download App</li>
    </ul>
  </span>
</div>
<div class="col-md-12 main_bar_snapdeal">

<div class="col-md-2" style="padding-top:13px;">
<img title="Snapdeal" class="notIeLogoHeader aspectRatioEqual sdHomepage cur-pointer"
 src="https://i3.sdlcdn.com/img/snapdeal/darwin/logo/sdLatestLogo.svg" height="30" width="132">
 </div>
 <div class="col-md-7 search_bar_snapdeal" style="padding-top:13px;">
 <input type="text" placeholder="Search products & brands"/><button type="submit" class="btn_snapdeal"><i class="glyphicon glyphicon-search"></i> Search</button>
 </div>
 <div class="col-md-3 icon_cnt">
 <div class="col-md-1 cart">
 <span style="vertical-align:top;">Cart</span><span class="glyphicon glyphicon-shopping-cart" style="font-size:18px;"></span> 
 </div>
 <div class="col-md-7 signin">
 <span style="vertical-align:middle;">Sign In</span><span class="glyphicon glyphicon-user" id="user"></span></div>
 </div>
</div>

Snapdeal like header for desktop

Leave a Reply

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