Header in HTML and CSS

      No Comments on Header in HTML and CSS

Header in HTML and CSS

Header in HTML and CSS

HTML:

<div class="topbar">
<span class="glyphicon glyphicon-phone phone_icon"></span><span class="phone_number">Call us at +011111-1111</span><span class="help_links"><a href="#">Help Center</a>| <a href="#">Terms & Conditions</a></span>
</div>
<!-- topbar -->
<header class="header">
<span class="logo"><img src="star1.png" alt="" /><span class="heading"></span></span><span class="navigation"><a href="#">HOME</a><a href="#">LIST A PROPERTY</a><a href="#">LOGIN / SIGNUP</a><a href="#">AGENTS</a><a href="#">CONTACT US</a></span>
</header>

CSS:

<style>
.topbar
{
  height:25px;
    width:100%;
    padding:4px;
    color:#e6e6e6;
    font-size:12px;
    background-color: #003399;
}
.phone_icon
{
    margin-left:6%;
    margin-right:5px;
}
.help_links
{
    float:right;
    margin:0px 6%;  
}
.help_links a
{
    color:#e6e6e6;
    margin:0px 5px; 
}
.help_links a:hover
{
    color:#003399;
}

/* top bar */
.header
{
    width:100%;
    padding:18px;
    background-color: #fff;
    text-align: center;
   
}
.logo 
{
  
    width:200px;margin:0px 100px;
}
.logo img
{
    width:50px;height:58px;padding:4px 0px;
}
.heading
{
    font-size:20px;vertical-align: bottom;margin-left:5px;
}
.navigation
{
  margin:30px;
}
.navigation a
{
    vertical-align:central;margin:0px 20px;font-size:13px;color:#000;
}
.navigation a:hover
{
    text-decoration:none;color:#003399;border-bottom:solid 3px #003399;padding-bottom:3px;
}

@media screen and (max-width: 580px) {
  
  .help_links
{  
    margin:0px 1%;    
}
.phone_number,.phone_icon
{
    margin-left:1%;
    margin-right:1px;font-size:5px;
} 
}

</style>

Call us at +011111-11111Help Center| Terms & Conditions

HOMELIST A PROPERTYLOGIN / SIGNUPAGENTSCONTACT US

Leave a Reply

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