All language subtitles for 097 Building a Hero Section - Part 2.en_US

And let's keep working

and actually finish our hero section.

And this is where we left off.

And what we want to do now is to vertically center this box,

which has all of this content, right,

but at the same time,

keeping this navigation bar here at the very top.

So let's explore different ways of actually doing that.

And probably the first thing that comes to mind

would be flexbox, right?

So let's try out if that would be a good fit.

So basically applying flexbox here on the entire header.

So let's see.

Display, flex,

and then in order to vertically center,

align items and center.

So let's see.

But that would, of course,

first put these two elements side by side

and then vertically center them.

So it looks nice on this one here,

but it does not look good on the navigation bar

because we actually want this one to stay at the very top.

And so flexbox is probably not the best way here to go.

Now, in order to solve this,

there are actually multiple ways.

So there are multiple ways

in which we can achieve this layout,

so this design here that we want,

but the one that we're going to use

is to basically vertically center this box here

using that trick that I showed you earlier

with absolute positioning

and then using the transform function with translate.

So, remember that?

So I actually showed you a diagram back then.

And so now let's do the same thing here.

So this one we don't need.

And instead what we now want is to center this element here,

so this container.

And so actually we need to give this here

a different class name.

So this should not be different

because of course, it's absolutely centered,

and so the styles that we need

are different than the ones from the container.

So let's called this one here the header container.

Copy this.

And after the navigation,

which is how it looks like in the code,

and we still want the width to be 1200 pixels.

So that is the same.

But now remember we want to position it absolutely.

Position absolute.

And let's start here by putting it at left 50%

and right 50%

because remember it that we actually want

to center this element, right,

and so 50% is kind of the middle.

But of course, we then will need to use

the transform function as well.

But for now, let's take a look at what it looks like

like this.

And so let's even give us some background color here again.

And let's say violet.

All right.

So it did move already 50% here of the parent element

to the right, but not to the bottom.

And I think that is because we forgot to actually set

the relatively positioned container.

So we want this element here to be absolutely positioned

inside of the header, right.

And so never forget to then set the position relative

on that one.

So, well actually here, we also have a mistake.

So of course, it needs to be 50% from the left

and from the top, not from the right.

That would not work.

No, right.

So basically, at this point here it is now 50% from the top

and from the right.

And remember that these 50% are in relation

to the parent element.

So it's 50% of this parent element here to the bottom

and also 50% of this parent element width here to the right.

Okay, and so now we need to fix that

by basically moving it up a little bit back

so that it's actually in the middle.

So I hope you remember this technique.

And if not, you can always go back and look at that slide

with that visual explanation that I showed you.

But what we will do now is to use the transform property

with the translate function,

and then we will move it back up 50% of the element's width

and off the element's height.

So minus 50 in both cases right here.

And again, I will write it down here

that these are in relation to the element size,

while these two are in relation to the parent size.

And so that is the reason why this works

and why it looks beautifully like this now.

So if we change this, well at least to these 1200 pixels,

then it stays nicely in the center,

and actually it will stay in the center forever.

And of course, also the same vertically.

So you see, it really stays in the top,

even if it has to overlap this navigation bar here

in this extreme situation.

Okay, so this is exactly what we wanted.

So that's amazing.

And now comparing it to this one here,

you see that here, actually, the text kind of finishes here

like it looks like in the middle of the page, right.

So that maybe looks like it's a little bit

difficult to achieve,

but actually, it's very easy.

So basically, what we want is to simply have

another container here,

and so that element will then simply occupy

50% of the width.

And so that will then contain these elements, right.

And so by doing that,

we basically leave some space here for her face

and for this part here of the background image.

And then we have this texture beautifully on top

of this blurred part.

So that's why I chose to put the text

and all this content here really on the left side.

Okay, of course there could be other design decisions.

So I also showed you that we could actually center the text,

which is what some websites do.

And just as an aside, this would be very easy.

All we would have to do is on the container element,

so the container element of those texts elements,

here we would simply have to do text align center.

And so this would work quite nice

if the image was different.

So basically, if the focus point of the image

was down here in the bottom, for example,

then this would work perfectly,

but that's not the case,

so let's comment that out.

And then, as I was saying,

we will simply create another element right here.

So let's call this the header-container-inner.

Okay, then moving that down.

So header-container-inner, let's put it right here.

And as I was saying, all we have to do is give this one

a width of 50%, which is again,

in relation to the parent element.

So it will essentially be 600 pixels, so half of 1200,

but let's start to get used to using percentages

for this kind of thing.

Now, just some background color very quickly,

just for debugging, and there we go.

So the contrast here is quite bad,

but we can see that actually this worked.

So now this is the container for the text,

which occupies exactly 50% of this bigger container.

All right.

And so in the end, achieving a layout like this

is all about thinking about these boxes

and how we want them to be laid out

and to be displayed in our website, right.

So really, it's all just a matter of logically thinking

about these boxes and to push them around until, in the end,

they are exactly where we want them to be.

Now let's just remove some of the line height here

in this heading.

Looks a little bit off.

Let's use something really small, 1.05.

And finally, let's get rid of all of these background colors

so that now we can finally

add our beautiful background image there.

So let's see.

And there we go, beautiful.

So this is what we're looking for.

So all we're missing is this background color,

and then of course, setting this text to white,

but that is very easy.

So that background image should be the background

of this entire header element, right.

And so this is where we can now define,

for the first time ever, the background image property.

And now to specify the image

we need to write URL and then open and close parenthesis.

And then here, we need to specify the path of the image

in relation to our current file.

And so in this case, that is simply a hero.

So just to right here, hero.jpg.

And we don't even need any quotes here

around this image path,

so all we need is to add this and we're good.

And you already see the image being loaded up here

in the gutter, which means that this path is correct.

So we will have this background image now already,

but it will not look as expected, as you see.

So this image is in fact huge.

And so therefore, we only can see

a small part of that image right now.

Right.

So these lights that we see here are basically,

well, it's just this small part here

off the website somehow, right.

And so therefore, we now need some way

of shrinking that image down.

But fortunately for us, there is a nice and handy property,

which is called the background-size.

And here there are a couple of different options,

and mainly those are contain and cover,

but I usually, and I think everyone,

most of the times just uses cover.

And what does the value of cover here will do

is to figure out automatically the exact size

that the image needs to be to cover, as the name says here,

the entire element.

And so now as we check this out, it looks a lot better.

And so as we resize,

you will see that always the image covers the element,

no matter what we do.

All right.

So this looks great already,

but there is still a crucial difference here.

And that difference is that here,

we actually have this dark overlay over this image, right.

So remember from one of our web design sections

that when our image is too light,

in order to actually make the text readable,

we can, as one of the options,

make the image a little bit darker.

And so that's what this darker overlay here is all about.

So of course, right now our text is even still gray.

So let's make it white here in the first place.

So we can actually see what we need to do.

So just like this.

And I mean, technically we could read it, right,

but still it looks kind of off.

There's not enough contrast here right now

between this text and this image.

So it's quite confusing,

and so we need to dark and down that image.

Now, doing that is not really trivial,

so it is a bit harder than it might seem.

So you might've thought that there was some simple property

that would simply do that, but in fact, there is not.

Instead, what we need to do

is to basically create a stack of background images

where the first background image

is a gradient that is transparent.

So that sounded a little bit confusing.

So let me actually show you how it works.

And actually to do this,

let's create a gradient somewhere else,

just so you see how the syntax works.

So to create a gradient, we still use the background image,

and then we use the linear gradient function like this.

So linear-gradient, and then we can specify two colors.

So let's say red and blue,

okay, just to test a very simple gradient.

And so you see, now we do have this gradient

going from red to blue.

Okay, so that's the very basic syntax

of the linear gradient.

And we can do some more stuff like changing the direction.

For example, we can say to right,

so as a first option here.

I think this is how it works at least.

And, yeah.

So now it goes from red to blue from left to right.

Okay, but anyway, we will explore gradients

a little bit more in the next section,

but I just wanted to show you how they work.

And that's important because, as I said,

we actually need a linear gradient

to make a background image darker.

So this is kind of a strange trick.

So let me show it to you.

So here in the same background image,

we will now specify a linear gradient.

And then with a comma, we basically specify a second image.

So this is kind of a stack where this background image here,

which is this gradient, is on top of this one.

And we could, in fact, specify many different

background images even, not just one or two.

So again, this will create a stack where this one is on top,

and this one here is on the bottom.

But now, what colors are we actually going to use?

Well, we want to make the image darker, right?

And so let's start with black, so 000,

and then the other value, let's make it also black.

So that is the trick here,

which is to make both colors here the same.

But of course, we don't want absolute black

because then we would get this, okay.

So we want some opacity here, so some RGBA.

So let's do that by clicking here on the title again.

And so, we already had it, actually.

So let's put this here, like to 0.6,

and then let's do the same here for the second color.

And now we should actually get a usable result.

Well, not quite, actually.

Let's go back here.

That's because I did not delete the hash here,

but here we go.

So that's beautiful, right?

And, yeah, it is the same color here all over the image,

again, because we made the gradient

go from one color to the second one,

which are both exactly the same.

But of course, it wouldn't have to be that way.

We can specify some other,

let's say just some random colors here,

just to see that in this case, of course,

we could go from black to this kind of blue color here.

Right.

But of course, we don't want that.

We want them to be the same,

but let's just use some kind of a gray here.

It looks a little bit better than just pure black usually.

But again, that is a design decision you have to take.

So of course, you can use pure black,

but I think using some shade of gray here

looks a little bit better.

So it gives us this kind of softer touch here.

And so I think now we actually have the exact same design

as in our final result.

There's just some spacing here going on.

So let's add that.

So that's in the navigation, so here.

And let me actually show you how to not do it.

So let's say margin-top 32 pixels.

So why do you think that is not going to work as intended?

And well, nothing happened here.

Let's inspect why that is.

So here we have our a margin-top of 32 pixels,

but it is actually crossed out,

and that's because from the container,

we get margin top and bottom of zero.

And so remember our priorities.

So a class selector has more priority

than a simple element selector,

and so that's why this one here overrides this one.

But here in the developer tools,

we can actually also set styles right here.

And so this element style will basically set them

right here as inline styles.

And so remember that those have an even higher priority.

So just to experiment, so margin-top 32 pixels.

So you see now it's set that here,

and it's now overriding that zero.

Now I mentioned that I wanted to show you

why this doesn't work.

And the reason is that now this actually will create

an empty space outside of the box, right.

And so that will then therefore create

this white space here on top.

So that's obviously not what we want,

so we want to go with padding instead.

So let's see.

And there we go.

And with that, we actually finished this header component.

So a lot of new CSS we learned here,

and in particular, we learned how to set

this background image here,

we learned about the background size,

And also we learned about this new VH unit.

And also, and probably even more importantly,

we kept thinking about how to achieve

the layouts that we wanted using the code tools

that we have at this point.

So teaching you that is probably

my most important goal here

because looking at properties is very simple,

but learning how to think about how to create a layout

exactly like this with all the properties

that we would like it to have

is not so easy to look up on the web.

And so I hope that with all these exercises

and all these small projects

you are starting to get better and better at that.

But anyway, that wraps up this small mini project.

And so now there's only one more component

or one more layout to build in this section.

And so I hope to see you there soon.