The background image looks good but what is missing is
the styling of our content of that hero.
Now what we would need here is a container actually,
which well, it contains these three elements,
which we could then style.
So we could add the styling list container,
this black background color, and so on.
Now for this container,
we could use a non semantic block element, right?
Because this container doesn't have any semantic meaning.
It's just required to group the content here
and to add styling to it.
And that's again, a perfect example for our div.
Let's add the div now in the code.
For this, we'll go right here.
Add a div and now at the content of this hero into it.
Quickly format this here.
And as this hero content is, well, a single item here.
So to say, we could also add an ID being named hero content.
With that,
we can identify the different parts of that section.
ID hero is the background image hero content is, well,
the content that we want to display here
as part of this hero area.
This means we can now go back to our styles.CSS file.
And then refer to the hero content ID, which was created.
And how can we style this now?
Well first, the hero content should be kind of
in the middle here of that page.
And therefore, maybe defining a width,
a smaller width, than the actual entire page,
would be a good first step.
Therefore, we use the width property here.
And the width could be maybe 900 pixels.
Let's see if I zoom out a bit, maybe, then you see it.
This seems to look all right.
If we increase the width for maybe a bit, you can see it.
That's good.
Okay. So we define the width.
Then we could add a background color
to make it better visible.
For this. I prepared an RGBA color.
RGBA right here, because if we check the finished page,
you see that it should be slightly transparent here.
Therefore we have to change the opacity,
and this can be done with an RGB color code.
The color I prepared here is 51 47 and for the opacity, 0.8.
Let's check this.
Yeah, that's the tone.
So we are coming closer to it.
Then we could add two more properties
we always use for styling purposes,
with one being the box shadow with two pixels left to right,
four pixels top to bottom,
and a pixel blur radius and an RGB code
of 68, 67, 67.
And also a border radius.
So to have these rounded corners again of eight pixels.
We check the box again.
Yeah, we see this looks even better.
We still have the problem that
it's not positioned correctly, right?
It should be positioned, well, in the center and not in the
top left corner, but we'll tackle this soon.
And also the content here is directly positioned
at the top left and bottom.
So that doesn't look perfect.
Therefore let's first apply the text align property here
to center the content.
Remember, if we apply text aligned to our container,
then this will be applied to its content.
Therefore, the texts we have in there.
So we centered it and to get more space
to the top and to the bottom,
we could add some padding top and bottom.
Padding left right is not required.
So let's also add this padding here of top and bottom,
maybe 50 pixels and zero left, right
And yeah, I think just doesn't look too shabby, that's okay.
However, we still have the problem that
the box is not centered.
And as we learned, we can use text aligned
to center the text content of the container,
but we also have an option to
center our block elements right here.
And which property do we need for that?
We need the margin, so let's also use this concept.
So margin, and here we don't need any margin
top or bottom so we can set to zero.
But left and right should be set to auto.
With that, our element should be automatically centered.
Let's see, yeah this is also working.
However, the positioning of the element
is still not correct.
We want to be in the middle of that background image
and not centered to the top, right?
For this, we need to dive into another core concept of CSS,
the positioning of elements in the document flow.