Website: The Hero Section

07. The Hero Section

A powerful intro – to captivate our visitors at first glance

Mentor Hiram Abif

Hiram examines the draft with a critical eye, draws a line with his pen, and begins dividing the space into boxes. “Alright, you need a clear structure. Otherwise, this’ll turn into an uncontrollable mess – and Seraphina will start messing with the layout again.”

He sketches out a large area and taps on it with the pen.
“This is where the first box goes. A placeholder for Morrigan’s slideshow – so we can show everyone just how much we love our homeland.”

Your task

Create a new section named hero-section.

It’s the first impression – the opening chapter of our story. Give it the appropriate classes so it fits into the grand layout like a gear in the city’s clockwork.

Inside this section, set up two containers – two parallel tracks, ready to play their roles.

The first gets the class slider-container. Its content remains empty for now, like a display case before opening.
The second gets the classes hero and center. This is where the magic happens.

– The Leader’s Message –
Insert an image of our leader Kael:
img/heroes/kael.jpg
Give it the classes img-fluid and multiply – so it stays flexible and powerful.

Then come the words.
Use the predefined classes for headings and paragraphs, and use to charge certain words with resistance. Your cheat sheet knows the way.

For the body text, use the class my-sm – a breath of air, a bit of space to breathe.

And then the call to action:
A link with the class btn,
generous margin (my-lg),
and an icon in front.
The icon arrow_circle_right belongs at the start – a forward arrow, a signal to move out.

It may still look unfinished – but don’t worry. Seraphina will join you later for the fine-tuning. She has an eye for detail.
And you? You’re here to take care of the structure.

Solve the task here in the console [–> Open in a new tab]

HTML

<!-- Hero Section -->
<section id="hero-section" class="slide-grid container">
     <div class="slider-container">
          <!-- Placeholder for Slideshow -->
     </div>
     <div class="hero center">
          <img src="img/heroes/kael.jpg" alt="" class="img-fluid multiply">
          <h1 class="lh-sm">Vive la <span class="secondary fw-bold">Résistance</span></h1>
          <p class="fs-title headline fw-bold">The <span class="secondary bold">Flame</span> is rising!
          </p>
          <p class="my-sm">Join us as we overthrow Cobol and rewrite the future of Aetheron. Together, we will free
               Gart, hack the machines, and create a city where humans and robots live side by side.</p>
          <a href="#contact" class="btn my-lg"><i class="material-icons-rounded">arrow_circle_right</i>Join the
               Rebellion!</a>
     </div>
</section>