1
00:00:00,860 --> 00:00:01,470
Welcome back.

2
00:00:02,000 --> 00:00:05,210
Now that we have our navigation, let's focus on our cover.

3
00:00:06,390 --> 00:00:08,220
If we go back to our e-mail page.

4
00:00:09,370 --> 00:00:15,940
We have our cover live here, and we can just keep the live here as it is because we won't really know

5
00:00:15,940 --> 00:00:17,580
what the cover will be just yet.

6
00:00:18,010 --> 00:00:21,730
But I want to add a new class called container here.

7
00:00:22,920 --> 00:00:29,160
And this container is going to define some properties for us that will make this truly a cover image,

8
00:00:29,160 --> 00:00:33,240
just like we have in our solution web page over here.

9
00:00:34,530 --> 00:00:41,490
And let's add those exclamation marks, because we're excited, oh, not for context for the cover,

10
00:00:41,800 --> 00:00:44,030
let's add the exclamation marks over here.

11
00:00:44,310 --> 00:00:44,700
Nice.

12
00:00:45,820 --> 00:00:50,110
All right, we'll go to our style that counts.

13
00:00:51,790 --> 00:00:53,650
And we'll add on our.

14
00:00:54,670 --> 00:00:55,540
Cover style now.

15
00:00:59,190 --> 00:01:01,240
This is actually going to be fairly easy.

16
00:01:02,010 --> 00:01:02,910
We want to have.

17
00:01:03,840 --> 00:01:10,440
Let's say a display of flex or first of all, let's make sure that we have the container class.

18
00:01:11,580 --> 00:01:17,820
And we'll have a display of Fleck's and I'm not using it here because, well, we're not going to have

19
00:01:17,820 --> 00:01:18,810
any grid items.

20
00:01:18,810 --> 00:01:20,430
We won't have that many items in a cover.

21
00:01:20,440 --> 00:01:25,950
It's usually a button or a background image or some text and display.

22
00:01:25,950 --> 00:01:27,750
Flex just makes things nice and simple.

23
00:01:28,380 --> 00:01:32,030
And usually we want things in the cover to be centered.

24
00:01:32,160 --> 00:01:35,930
That is, we want this cover to be right in the center.

25
00:01:35,940 --> 00:01:39,260
And as we make things smaller, it's always going to be in the center.

26
00:01:39,870 --> 00:01:43,860
That's something that we see a lot of and a lot of websites.

27
00:01:44,610 --> 00:01:47,880
And to do that, especially with Flex Box, is really easy.

28
00:01:48,150 --> 00:01:53,610
All we need to say is to align items center and to justify content.

29
00:01:56,860 --> 00:02:00,730
Just like that, if I save here and refresh.

30
00:02:01,300 --> 00:02:08,050
All right, this is centered and as I move things perfect, everything is absolutely centered.

31
00:02:10,220 --> 00:02:13,600
But obviously, cover image should be a little bit larger, right?

32
00:02:13,850 --> 00:02:14,750
What do we do here?

33
00:02:15,810 --> 00:02:19,780
And I want to introduce to you something that you haven't seen before, but don't get scared.

34
00:02:19,860 --> 00:02:20,630
It's not that hard.

35
00:02:21,760 --> 00:02:26,000
I'm going to have height and just to start us off.

36
00:02:26,020 --> 00:02:31,090
I'm going to show you usually you might do something like five hundred pixels and if I refresh, awesome,

37
00:02:31,420 --> 00:02:33,790
I have a nice little height.

38
00:02:34,990 --> 00:02:39,190
But there's a problem here, right, because I'm saying 500 pixel here.

39
00:02:40,580 --> 00:02:45,680
If the viewport if I move things around, if I lift things up, you'll see that.

40
00:02:46,900 --> 00:02:55,060
All right, the view is not responsive when I go up, because it's always five hundred pixels and this

41
00:02:55,060 --> 00:02:56,600
might not be the worst idea ever.

42
00:02:56,620 --> 00:02:58,450
Maybe you want your website to be like that.

43
00:02:58,810 --> 00:03:07,000
But if you do want this to be responsive in terms of going up and down as well, what we can do is use

44
00:03:07,000 --> 00:03:08,430
something called VH.

45
00:03:09,520 --> 00:03:17,950
That is the viewport height, and I like using viewport height, a new unit that we haven't seen before

46
00:03:18,160 --> 00:03:25,090
for making things responsive when it comes to height and what the states it's going to look at the viewport

47
00:03:25,090 --> 00:03:32,920
that is the view of the Web page and make sure that there's always a percentage of that viewport dedicated

48
00:03:33,070 --> 00:03:34,040
to this container.

49
00:03:34,600 --> 00:03:47,170
So if I do 50 H and if I refresh here, you'll see that my cover will be 50 percent of our viewport

50
00:03:47,620 --> 00:03:49,030
if I do one hundred.

51
00:03:56,730 --> 00:04:05,820
The cover fills up the entire viewport, the cool part is if I go up and down, this adjusts exactly

52
00:04:05,820 --> 00:04:08,760
according to the viewport height.

53
00:04:08,790 --> 00:04:10,410
That is the window of the browser.

54
00:04:11,720 --> 00:04:14,180
Very cool, right, and everything is still centered.

55
00:04:15,140 --> 00:04:22,490
So I like using the VA for something like a container, so let's keep it at 50 and if I refresh.

56
00:04:23,780 --> 00:04:26,750
Look at that, nice and responsive.

57
00:04:26,840 --> 00:04:27,710
How cool is that?

58
00:04:32,540 --> 00:04:33,740
And that's it for the cover.

59
00:04:34,100 --> 00:04:35,080
Not that hard, right?

60
00:04:36,440 --> 00:04:40,370
Let's move on to the project grid in the next video by.