Hero
The hero section is the initial impression users encounter upon visiting a website. It is comprised of an H1 heading and an image of a couple holding a potted plant, greeting users upon visiting a website. This section also includes a prominent call-to-action button and is designed to be responsive across all devices.
Illustration of a Hero Implementation
the Outback Oasis
Explore Our Nursery
HTML Code
<section class="c-hero">
<h1 class="c-hero__heading u-primary-font u-h1 l-p-1">Bring home<br>the Outback Oasis</h1>
<div class="c-hero__overlay"></div>
<img class="c-hero__img" src="images/evergreen.jpg" alt="couple carrying potted evergreen tree">
<a class="c-hero__explore-link l-p-1 u-primary-cta-bgcolor u-primary-cta-font u-button l-ml-1-25 l-mt-1" href="coming-soon.html">Explore Our Nursery</a>
</section>