Hero Section


A Hero Section is the first thing users see on a webpage. It typically includes a headline, subheading, call-to-action (CTA) button, and an eye-catching background or image.

Video Without Thumbnail

Tagline goes here

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Subheadline goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

  • Lorem Ipsum is simply dummy
  • Lorem Ipsum is simply dummy
  • Lorem Ipsum is simply dummy
  • Lorem Ipsum is simply dummy
  • Lorem Ipsum is simply dummy
  • Lorem Ipsum is simply dummy
Lorem Ipsum is simply dummy
<section id="hero" class="bg-primary heroWrapper">
  <div class="container position--relative">
    <div class="row align-items-center">
      <div class="col-12 content-wrapper">
        <p class="m-0 overline--one">Tagline goes here</p>
        <h1 class="large-text-2 heading"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h1>
        <h4 class="medium-text-1 m-0 sub-heading"> Subheadline goes here </h4>
        <p class="para--two sub-txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
        <div class="feedback-parent d-flex">
          <div class="rating-wrapper d-flex">
            <span class="rating-num">4.5</span>
            <div class="rating-parent">
              <span class="blueprint-icon icon-star_full"></span>
              <span class="blueprint-icon icon-star_half"></span>
              <span class="blueprint-icon icon-star_empty"></span>
              <span class="blueprint-icon icon-star_empty"></span>
              <span class="blueprint-icon icon-star_empty"></span>
            </div>
          </div>
          <span class="enrolled-no para--two"> (XXX ratings) XXXX enrolled </span>
        </div>
        <div class="features-parent tick--list-parent">
          <ul class="row list-unstyled p-0 m-0">
            <li class="col-sm-6 para--two"> Lorem Ipsum is simply dummy </li>
            <li class="col-sm-6 para--two"> Lorem Ipsum is simply dummy </li>
            <li class="col-sm-6 para--two"> Lorem Ipsum is simply dummy </li>
            <li class="col-sm-6 para--two"> Lorem Ipsum is simply dummy </li>
            <li class="col-sm-6 para--two"> Lorem Ipsum is simply dummy </li>
            <li class="col-sm-6 para--two"> Lorem Ipsum is simply dummy </li>
          </ul>
        </div>
        <div class="intro-video d-flex align-items-center">
          <div class="video-thumb-popup inner-video-thumb-popup">
            <svg class="play-icon inner-video-thumb no-thumbnail" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_10_141)">
                <circle cx="20" cy="20" r="20" fill="white" fill-opacity="0.5" />
                <circle cx="20" cy="20" r="15" fill="black" />
                <path d="M23.9005 19.2319C24.3799 19.6317 24.3799 20.3681 23.9005 20.7679L19.2297 24.6631C18.5784 25.2062 17.5892 24.7431 17.5892 23.8951L17.5892 16.1047C17.5892 15.2567 18.5784 14.7936 19.2297 15.3368L23.9005 19.2319Z" fill="white" />
              </g>
              <defs>
                <clipPath id="clip0_10_141">
                  <rect width="40" height="40" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </div>
          <span class="intro-txt para--two">Lorem Ipsum is simply dummy</span>
        </div>
      </div>
      <div class="lead-form-wrapper"></div>
    </div>
  </div>
</section>