Instructor: And let's keep working
and actually finish a 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 a 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 flex box, right?
So let's try out if that would be a good fit.
So basically applying flex box 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 flex box 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 a different class name.
So this should now be different
because of course it's absolutely centered.
And so at the styles that we need are different
than the ones from the container.
So let's call this one here
the header
container,
copy this.
And
after the navigation, which is how it looks like
in the coat, 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
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 to 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 elements with 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 elements width
and of the elements 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 while at least up 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 always really stays in the top
even if it has to overlap this navigation bar here
and 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 here 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 text 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 hero.
So just write here,
hero.jpac.
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 just
it's just this small part here
of 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 this value of cover here 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'll 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 is not enough contrast here right now
between this text and this image, so it's quite confusing.
And so we need to darken down that image.
Now doing that is not really trivial
so it is a bit harder than it might seem.
So you might have 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 dash 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 0, 0, 0.
And then the other value, let's make it also black.
So that is the trick here.
So it 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 actually, so let's put this here, like
to zero,
six,
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.
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 gray here.
It looks a little bit better than just pure black usually.
But again, that is a design decision that 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 while nothing happened here,
let's inspect why that is.
So here we have
our
margin top
of 32 pixels
but it is actually crossed out, and that's because here
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 here, 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 overwriting 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 wide space here
on top.
So that's obviously not what we want
so you 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.