Use Code in HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Property Hero Page Design</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul class="menu" id="menulink">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Property</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="logo">
<img src="logo.png" alt="">
</div>
<div class="hamburger" id="togglebtn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="Btn">
<button><i class="fa-solid fa-phone"></i>+91 778 457 848</button>
</div>
</nav>
</header>
<section class="hero">
<div class="herobox">
<h1>Find Your Properties</h1>
<div class="searchbox">
<i class="fa-solid fa-house"></i>
<input type="text" placeholder="Find Your Properties" class="searchtxt">
<button type="submit"><i class="fa-solid fa-search"></i></button>
</div>
</div>
</section>
<script>
var menu = document.getElementById("menulink");
var toggle = document.getElementById("togglebtn");
toggle.onclick = function(){
menu.classList.toggle('show');
toggle.classList.toggle('open');
}
</script>
</body>
</html>
Use Code in CSS File
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Outfit", sans-serif;
}
header{
width: 100%;
min-height: 50px;
display: flex;
justify-content:center;
align-items: center;
}
nav{
width: 1200px;
min-height: 50px;
padding: 10px 20px;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
}
nav ul li a{
text-decoration: none;
padding: 10px 15px;
color: black;
font-weight: 600;
}
nav ul li a:hover{
color: rgb(26, 0 ,117);
}
nav .logo img{
width: 100px;
}
nav .Btn button{
padding: 10px 25px;
background-color: rgb(26, 0 ,117);
color: white;
font-size: 15px;
font-weight: bold;
border-radius: 5px;
border: none;
cursor: pointer;
}
nav .Btn button i{
margin-right: 10px;
}
nav .hamburger{
width: 30px;
height: 30px;
padding: 2px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
justify-content: center;
display: none;
}
.hamburger .bar{
width: 100%;
height: 3px;
border-radius: 10px;
background-color: rgb(0, 0, 0);
transition: all 0.4s ease;
}
.hamburger .bar:nth-child(2){
transform: translateX(5px);
}
.hamburger.open .bar:nth-child(2){
width: 0;
}
.hamburger.open .bar:nth-child(1){
transform: rotate(45deg)translate(6px, 5px);
}
.hamburger.open .bar:nth-child(3){
transform: rotate(-45deg)translate(7px, -7px);
}
.hero{
width: 100%;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
}
.herobox{
width: 1200px;
min-height: 500px;
border-radius: 20px;
background-image: url(headerimage.jpg);
background-color: rgba(0,0,0,0.4);
background-blend-mode: multiply;
background-size: cover;
background-position: 10% 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.herobox h1{
color: white;
font-size: 60px;
}
.herobox .searchbox{
width: 400px;
height: 55px;
padding: 10px;
background-color: white;
border-radius: 50px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.searchbox > i{
color: rgb(202, 202, 202);
margin: 0 15px;
}
.searchbox .searchtxt{
width: 100%;
height: 100%;
padding-left: 20px;
border-radius: 50px;
border:none;
outline: none;
}
.searchbox button{
width: 40px;
height: 40px;
border-radius: 50px;
position: absolute;
right: 10px;
border: none;
background-color: rgb(26, 0 ,117);
color: white;
}
@media (max-width:600px){
.herobox h1{
font-size: 50px;
text-align: center;
}
.herobox .searchbox{
width: 315px;
}
}
@media (max-width:900px){
nav ul{
display: none;
}
nav .Btn{
display: none;
}
nav .hamburger{
display: flex;
}
#menulink{
transition: 1s ease;
}
#menulink.menu.show{
display: flex;
transition: 1s ease;
}
nav .menu{
border: none;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
width: 50%;
background-color: rgb(255, 255, 255);
min-height: 250px;
position: absolute;
top: 80px;
right: 20px;
border-radius: 15px;
z-index: 1000;
transition: 1s ease;
}
}
