Hi everyone, today we are going to learn how to create the Hero section banner with Html and CSS.
The hero section banner is the most important part of a homepage landing page and could contain an outstanding call-to-action.
the hero section is the first thing user see when they arrived at the landing page which tells them what the site is about. this section contains elements such as a navigation bar, logo, call to action button, image and description word about the website.
Today I design a beautiful hero section banner in Figma for this tutorial and I share the step by step in the below video with HTML and CSS only. you can follow along and also source code below
You May Also Like This
More Tutorials on youtube – Click Here
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>hero section html css</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Hero section start here -->
<section id="hero">
<!-- Container start here -->
<div class="container">
<!-- navbar start here -->
<div class="navbar">
<div class="logo">
<img src="Chatapp-logo.png" alt="chatapp logo" />
</div>
<nav class="menu">
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
<a href="#" class="btn-try">Try it </a>
</nav>
</div>
<!-- navbar end here -->
<!-- Hero box start here -->
<div class="hero-box">
<div class="hero-details">
<h1 class="hero-heading">Have your best chat</h1>
<p class="hero-desc">fast, easy & unlimited team chat</p>
<div class="btn-box">
<a href="#" class="cta-btn free"> Try it Free</a>
<a href="#" class="cta-btn demo"> Get Demo</a>
</div>
</div>
<div class="hero-image">
<img src="hero-image-min.png" alt="hero image" />
</div>
</div>
<!-- Hero box end here -->
</div>
<!-- Container end here -->
</section>
<!-- Hero section end here -->
</body>
</html>
CSS
/* Google Font
font-family: 'Mulish', sans-serif;
font-family: 'Roboto', sans-serif; */
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&family=Roboto:wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
}
#hero{
width: 100%;
height: 1024px;
background: linear-gradient(90deg, #5240ad 0%, rgba(82,64,173, 0.65) 100%);
padding-top: 32px;
}
.container{
max-width: 1140px;
margin: 0 auto;
}
.navbar{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
.navbar .menu a:not(:last-child){
color: #ffffff;
margin-left: 20px;
font-size: 14px;
letter-spacing: 0.5px;
transition: 0.4s;
}
.navbar .menu a:not(:last-child):hover{
border-bottom: 2px solid #ffffff;
padding-bottom: 10px;
}
.navbar .menu .btn-try{
color: #ffffff;
margin-left: 20px;
padding: 10px 25px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50px;
font-size: 14px;
transition: 0.2s;
}
.navbar .menu .btn-try:hover{
background: #ffffff;
color: #5240ad;
}
.hero-box{
display: flex;
justify-content: space-between;
align-items: center;
}
.hero-box .hero-details{
width: 50%;
}
.hero-box .hero-details .hero-heading{
font-size: 90px;
line-height: 106px;
color: #ffffff;
font-family: 'Mulish', sans-serif;
}
.hero-box .hero-details .hero-desc{
color: #ffffff;
font-size: 18px;
margin: 30px 0;
}
.hero-box .hero-details .btn-box{
margin-top: 60px;
}
.hero-box .hero-details .cta-btn{
background: #ffffff;
padding: 15px 30px;
margin-right: 30px;
border-radius: 50px;
}
.hero-box .hero-details .cta-btn:hover{
background: rgba(255, 255, 255, 0.2);
}
.hero-box .hero-details .demo{
background: transparent;
color: #ffffff;
border: 1px solid #ffffff;
}
.hero-box .hero-image{
width: 50%;
}
.hero-box .hero-image img{
width: 577px;
}
If you need the Figma file comment below I will share it with you
Thanks
