Flipkart like header for Desktop

      No Comments on Flipkart like header for Desktop

Flipkart like header for Desktop

Flipkart like header for Desktop

<head>
<style>
header
{
    
   background-color:#2874f0;height:85px;
}
.topbar_flipkart 
{
    width:100%;
    display:block;
    text-align:right;
    
}
.topbar_flipkart ul
{
    margin-right:170px;
    
}
.topbar_flipkart li
{
    list-style-type:none;
    display:inline;
   
}
.topbar_flipkart a
{
    color: #f2f2f2;
    text-decoration: none;
    font-size:11px;
    margin:0px 7px;
}
.logoba_flipkart
{
    margin-left:180px;
}
.logoba_flipkart img
{
    height:35px;
    width:140px;
    padding:0px;   
}
.searc_bar_flipkart
{
    width:50%;
    padding:0px;
    border-radius:2px;
    border:solid 1px lightgray;
    font-size:11px;
    margin-top:3px;
    margin-right:0px;
    box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);
    height:35px;
}
.button_searc_flipkart
{
    padding:7px;
    font-size:13px;
    margin-top:3px;
    width:60px;
    margin-left:0px;
    background-color:#ffe11b;
    border:solid 1px lightgrey;
    box-shadow:0 1px 2px 0 ;
    
}
.drop_link:hover
{
    background-color:#fff;
    padding:3px;
    margin:0px 1px;
    color:#404040;width:100%;
}
.flipkart_drop
{
    border-radius:0px;
    
    padding:0px;
    text-align:left;
}
.cart_button_flipkart
{
    color:#f2f2f2;
    background-color:;
    padding:6px;
    background-color: #2469d9;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
    text-align: center;
    margin-top:3px;
    border:solid 1px #2469d9;
    margin-left:20px;
}
.item-number
{
    padding:2px 4px;
    background-color:#1d55af;
    
}
</style>
</head>
<body style="margin:0px;padding:0px">
<header>
<div class="topbar_flipkart" style="padding: 0px;">
<ul>
<li><a href="#">Sell on scanfcode</a></li>
<li><a href="#">Adverstise</a></li>
<li><a href="#">Gift card</a></li>
<li><a href="#">Download app</a></li>
<li><a href="#">24*7 Customer care</a></li>
<li><a href="#">Track order</a></li>
<li><a href="#"><i class="fa fa-bell"></i></a></li>
<li class="dropdown">
 <a href="#"  data-toggle="dropdown" class="drop_link">Hi user
  <span class="caret"></span></a>
  <ul class="dropdown-menu flipkart_drop">
                        <li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets"> My Order</a></li>
                        <li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Gift Card</a></li>
                        <li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">Change Password </a></li>
                        <li class="profile-li"><a class="profile-links" href="https://github.com/chawlaaditya8/snippets">logout</a></li>
  </ul>

</li>
</ul>
</div>
<div class="logoba_flipkart" style="padding: 0px;">
  <span><img src="//img1a.flixcart.com/www/linchpin/fk-cp-zion/img/fk-logo_9fddff.png" alt="Flipkart like header for Desktop" title="Flipkart like header for Desktop"></span>
  <span><input type="text" class="searc_bar_flipkart" placeholder="Search for Products, Brands and More"/><button type="submit" class="button_searc_flipkart"><i class="fa fa-search"></i></button></span>
  <span><button class="cart_button_flipkart"><span class="glyphicon glyphicon-shopping-cart"></span> CART <span class="item-number">0</span></button></span>
</div>
</header>
</body>

Leave a Reply

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