Adding the hero section

Afterimplementingour header,we can now go the next step,whichisthe heroSection.The herosectionis,inweb design, usually composedwitha big image,a title,a description,andaCall toAction(CTA).Itservesasan overview of the website because it's the first thing the visitor will see.

In our design, we have the following:

It's quite simple. It's composed of a background image, with a gradient overlay and some text with a button on the left. If we try to mark out the outline of each block, we could have something like this:

Maybe this can help you visualize what we're trying to do in HTML/CSS.Let's start with the HTML:

We can start first by creating a section (purple) that will hold everything:

<sectionid="hero">
</section>

We'll add an id so it's easier to call upon it later.

We now have to create a container (fuschia) that will contain all the elements inside but also be centered horizontally. For that, we'll create a div with the class container:

<section id="hero...