Welcome back.
Now that we have our navigation, let's focus on our cover.
If we go back to our e-mail page.
We have our cover live here, and we can just keep the live here as it is because we won't really know
what the cover will be just yet.
But I want to add a new class called container here.
And this container is going to define some properties for us that will make this truly a cover image,
just like we have in our solution web page over here.
And let's add those exclamation marks, because we're excited, oh, not for context for the cover,
let's add the exclamation marks over here.
Nice.
All right, we'll go to our style that counts.
And we'll add on our.
Cover style now.
This is actually going to be fairly easy.
We want to have.
Let's say a display of flex or first of all, let's make sure that we have the container class.
And we'll have a display of Fleck's and I'm not using it here because, well, we're not going to have
any grid items.
We won't have that many items in a cover.
It's usually a button or a background image or some text and display.
Flex just makes things nice and simple.
And usually we want things in the cover to be centered.
That is, we want this cover to be right in the center.
And as we make things smaller, it's always going to be in the center.
That's something that we see a lot of and a lot of websites.
And to do that, especially with Flex Box, is really easy.
All we need to say is to align items center and to justify content.
Just like that, if I save here and refresh.
All right, this is centered and as I move things perfect, everything is absolutely centered.
But obviously, cover image should be a little bit larger, right?
What do we do here?
And I want to introduce to you something that you haven't seen before, but don't get scared.
It's not that hard.
I'm going to have height and just to start us off.
I'm going to show you usually you might do something like five hundred pixels and if I refresh, awesome,
I have a nice little height.
But there's a problem here, right, because I'm saying 500 pixel here.
If the viewport if I move things around, if I lift things up, you'll see that.
All right, the view is not responsive when I go up, because it's always five hundred pixels and this
might not be the worst idea ever.
Maybe you want your website to be like that.
But if you do want this to be responsive in terms of going up and down as well, what we can do is use
something called VH.
That is the viewport height, and I like using viewport height, a new unit that we haven't seen before
for making things responsive when it comes to height and what the states it's going to look at the viewport
that is the view of the Web page and make sure that there's always a percentage of that viewport dedicated
to this container.
So if I do 50 H and if I refresh here, you'll see that my cover will be 50 percent of our viewport
if I do one hundred.
The cover fills up the entire viewport, the cool part is if I go up and down, this adjusts exactly
according to the viewport height.
That is the window of the browser.
Very cool, right, and everything is still centered.
So I like using the VA for something like a container, so let's keep it at 50 and if I refresh.
Look at that, nice and responsive.
How cool is that?
And that's it for the cover.
Not that hard, right?
Let's move on to the project grid in the next video by.