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.
Tagline 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
<section id="hero" class="bg-image-gradient heroWrapper" style="background: url(./assets/component-images/program-card.svg) no-repeat; background-size: cover;">
<div class="container position--relative">
<div class="row items--flex-end">
<div class="col-12 col-lg-7 left-col 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>
<div class="col-12 col-lg-5 right-col m-t-30 m-t-lg-0">
<div style="background: white; height: 600px; color: #333;"> Form Will Come Here </div>
</div>
</div>
</div>
</section>