In this tutorial, I will help you to design a header for the beauty products website I hope this will help you a lot for designing different website headers.
HTML WITH CSS:
______________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name=" " content=" "/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Web</title>
<style>
body{
padding: 0%;
margin: 0%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navi{
width: 100%;
height: 80px;
background-color: bisque;
opacity: 0.9;
z-index: 2;
}
.logo{
width: 10%;
padding:2px 0px 0px 55px ;
float: left;
}
.logo, .nav-list{
display: inline-block;
}
ul,li{
float: right;
list-style-type: none;
display: inline-block;
padding:10px 0px 0px 55px;
}
a:hover{
color: rgb(236, 95, 62);
}
.nav-list{
width: 80%;
float: right;
position: absolute;
}
li{
font-weight: bold;
text-decoration: none;
}
a{
text-decoration: none;
color: black;
}
.btn{
height: 5px;
widows: 10px;
background-color:rgb(236, 95, 62);
color: white;
padding: 8px 15px 8px 15px;
border-style: solid;
border-color:rgb(236, 95, 62);
border-radius: 5px;
}
.btn:hover{
background-color:white;
color: rgb(236, 95, 62);
border-color: white;
}
.pic{
background-image:url('beauty.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 550px;
position: absolute;
z-index: -1;
margin-top: -80px;
}
.section{
width: 100%;
position: absolute;
}
.heading{
padding: 230px 0px 0px 0px;
}
.beauty{
font-size: 50px;
font-style: italic;
line-height: 15px;
text-align: center;
}
.intro{
font-size: 15px;
font-weight: 400;
text-align: center;
letter-spacing: 1px;
line-height: 8%;
}
.btn2,.btn3{
background-color: rgb(236, 95, 62);
padding: 10px 35px 10px 35px;
border-style: solid;
border-color: rgb(236, 95, 62);
border-radius: 30px;
font-size: 15px;
font-weight: 700;
margin-left: 8px;
outline:none;
color:white;
}
.btn3{
padding: 10px 45px 10px 45px;
background-color:wheat;
border-style: solid;
border-width: 2px;
border-color: white;
}
.buttons{
margin-left: 470px;
}
.btn2:hover{
color: rgb(236, 95, 62);
background-color: white;
border-color: white;
cursor: pointer;
}
.btn3:hover{
background-color: white;
color:rgb(236, 95, 62);
cursor: pointer;
}
.contain{
width: 100%;
height: 200px;
background-color:white;
position: absolute;
top: 550px;
}
.con1{
width: 15%;
height: 100px;
float: left;
}
.con2{
width: 35%;
height: 220px;
background-color:wheat;
float: left;
opacity: 0.8;
}
.con4{
width: 35%;
height: 220px;
background-color: rgb(236, 95, 62);
float: right;
opacity: 0.8;
}
.con3{
width: 15%;
height: 100px;
float: right;
}
.con2,.con4{
margin-top: -100px;
}
.con2 h3{
padding: 5px 5px 5px 30px ;
text-transform: capitalize;
letter-spacing: 1px;
font-weight: 6 00;
color:darkred;
font-style: italic;
}
.line{
width: 100px;
height: 2px;
position: relative;
top: -17px;
left: -140px;
background-color: black;
border-style: solid;
border-color:black;
outline:none;
}
.contain h5{
font-weight: 400;
font-size: 14px;
padding: 0px 5px 5px 30px ;
margin-top: -12px;
letter-spacing: 1px;
}
.btn6{
background-color: rgb(236, 95, 62);
padding: 10px 45px 10px 45px;
border-style: solid;
border-color: rgb(236, 95, 62);
border-radius: 30px;
font-size: 15px;
font-weight: 700;
outline:none;
color: white;
margin:0px 0px 0px 50px;
}
.go{
text-decoration: none;
}
.con4 h3{
padding: 5px 5px 5px 30px ;
text-transform: capitalize;
letter-spacing: 1px;
font-weight: 6 00;
color:darkred;
font-style: italic;
}
.btn7{
background-color:wheat;
padding: 10px 35px 10px 35px;
border-style: solid;
border-color:white;
border-radius: 30px;
font-size: 15px;
font-weight: 700;
outline:none;
color:black;
margin:0px 0px 0px 50px;
}
.btn7:hover{
background-color: white;
color:rgb(236, 95, 62);
cursor: pointer;
}
.btn6:hover{
color: rgb(236, 95, 62);
background-color: white;
border-color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="navi">
<div class="logo">
<h1>Beautify</h1>
</div>
<div class="nav-list">
<ul>
<li><a href="#" class="btn">REQUEST A QUOTE</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Applicatons</a></li>
<li><a href="">Products</a></li>
</ul>
</div>
</div>
<div class="pic">
<div class="heading">
<h1 class="beauty">Beautify Your Skin</h1>
<h6 class="intro">All you need about the beautiful face and glowing skin is here for you </h6>
<div class="buttons">
<button class="btn2" type="button">Explore</button>
<button class="btn3" type="button">Tips</button>
</div>
</div>
</div>
<div class="contain">
<div class="con1"></div>
<div class="con2">
<h3>We're provide you different products of beauty </h3><hr class="line">
<h5>All beauty products is avaiable at the one place
in the store at the distance of just click on button
</h5>
<button type="button" class="btn6">Store</button>
</div>
<div class="con3"></div>
<div class="con4">
<h3>Our multiple products is on the top in beauty markeet</h3><hr class="line">
<h5>See our beauty products that are top in the world markeet
and win the trust of millions
</h5>
<button type="button" class="btn7">Products</button>
</div>
</div>
<div></div>
</div>
</body>
</html>
0 Comments