Home Html CSS Tutorial Create Hero section with Html and CSS – Simple Hero section

Create Hero section with Html and CSS – Simple Hero section

11
0
Hero Section
Hero Section Html and CSS

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

(Visited 39 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here