Hero Section

Hero Area

Hero area is a large banner area just after the header. Hero area describes your product or highlights your purpose of your brand. Hero area has a big image, small description text for your product, a button (depends on requirement). Hero area not always static, you can set it as a slider using slider plugins or custom code, include animation into it also height is not always same of the hero area, you can set the height as per your requirement.

Basically hero area shows on all pages but on e-commerce websites (Online shopping), the hero area shows only on homepage.

Each website’s UI is different from each other so depends on you, how you want the hero area.

Hero area screenshot

HTML Structure

<section class="hero-area">
  <div class="inner-wrapper">
    <h1>About My Product</h1>
    <p>Lorem ipsum is simple dummy text of the of the printing and typesetting in industry</p>
  </div>
</section>

CSS: For hero section UI

   

.hero-area{

    background-image: url(banner.jpg);
    background-position: center;
    background-size: cover;
    height: 300px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}

.inner-wrapper{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}

.hero-area h1{
  font-size:45px;
}


.hero-area p{
font-size:20px
margin: 20px 0;
}



With Buttons

You can add the button in the hero section.

Source:


.hero-area{

    background-image: url(banner.jpg);
    background-position: center;
    background-size: cover;
    height: 300px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}

.inner-wrapper{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
}

.hero-area h1{
  font-size:45px;
}


.hero-area p{
 font-size:20px;
 margin:20px 0;
}



.hero-area .button {
    padding: 10px 28px;
    font-size: 20px;
    border: 2px solid #000;
    color: #000;
}

Output: