Most Reviews

WebTutor Articale

How to create header using html css
Header Area

How to create header using html css 

I’ve discuss broadly. so you can easily learn how to create basic header are.

 

1. Copy the HTML code and paste your HTML file.

<div class="header-area">
  <div class="header">
    <div class="logo">
      <img src="images/logo.svg" alt="Logo">
    </div>
    <div class="mainmenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolios</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

 

2. Copy the CSS code and paste your CSS file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header-area{
    height: 100px;
    background: gold;
}
.header{
    width: 1170px;
    margin: 0 auto;
}
.logo{
    width: 20%;
    float: left;
}
.mainmenu{
    width: 80%;
    float: right;
    text-align: right;
    line-height: 100px;
}
.mainmenu ul{
    list-style: none;
}
.mainmenu ul li{
    display: inline-block;
}
.mainmenu ul li a{
    text-decoration: none;
    color: #000;
    font-size: 18px;
    padding: 3px 20px;
    font-weight: 500;
} 
Previous

How to create header using html css

Next

How to create header using html css

Related posts

Leave a Reply

Required fields are marked *