A trendy topbar CSS

      No Comments on A trendy topbar CSS

With CSS it is possible to create trendy, good looking and informative topbars.A trendy topbar Css can be used for every type of website

Result:

#34-strreet A Newyork +91-987654321

Here is the code for : A trendy topbar CSS

<style>
#topbar
{
line-height: 40px;font-size:100%; border: solid 1px lightgray;background-color:#fff;
}
.topbarcontent
{
 height:100%;padding:10px;cursor:grab;border-right:solid 1px lightgray;   
}
.topbarcontent:hover
{
    color:#009973;
}
#topbarin
{
    float: right;
    margin-right:10%;color:#4d4d4d;
}
#topbarin1
{
    float: left;
    margin-left:12%;color:#666;
   
}
</style>
<div id="topbar" class="col-md-12" style="height: 40px;">
<span id="topbarin1">
<span class="topbarcontent" style="border-left:solid 1px lightgray;">
<i class="fa fa-facebook-square"></i> 
</span>
<span class="topbarcontent">
<i class="fa fa-google-plus-square"></i>
</span>
<span class="topbarcontent">
<i class="fa fa-pinterest"></i>
</span> 
</span> 
<span id="topbarin"> 
<span class="topbarcontent" style="border-left: solid 1px lightgray;">
#34-strreet A Newyork 
</span> 
<span class="topbarcontent">
+91-987654321 
</span> 
</span>
</div>

Leave a Reply

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