1
00:00:00,750 --> 00:00:03,990
Now what I'm going to do is that I'm going to work on the design of this area.

2
00:00:04,470 --> 00:00:06,720
So, first of all, here in the index.

3
00:00:08,110 --> 00:00:09,570
Below this navigation bar.

4
00:00:09,580 --> 00:00:10,660
I'm going to add a comment.

5
00:00:10,660 --> 00:00:14,050
I'm going to say your home.

6
00:00:14,830 --> 00:00:20,230
This is going to be the home section and I'm going to create a section here and I'm going to give this

7
00:00:20,230 --> 00:00:20,800
section.

8
00:00:21,460 --> 00:00:22,870
And I called home.

9
00:00:24,160 --> 00:00:25,450
I called home.

10
00:00:26,020 --> 00:00:29,170
And then inside that section, first we need a map.

11
00:00:29,770 --> 00:00:37,840
When you do this and for this there, I'm going to give it a class and let me just keep this class empty

12
00:00:37,840 --> 00:00:40,090
for now and then inside.

13
00:00:40,540 --> 00:00:46,450
And I'm going to be telling you why this why I kept this empty for now.

14
00:00:46,480 --> 00:00:48,670
Later, you will understand why.

15
00:00:48,760 --> 00:00:53,680
Because I want to explain something very important when it comes to this, when it comes to design.

16
00:00:53,680 --> 00:01:02,260
Later inside this wave, I want to display it twice and I want to display each one.

17
00:01:05,060 --> 00:01:11,600
And they want to display also a paragraph and they want about it.

18
00:01:14,430 --> 00:01:17,010
Now for this five I'm going to display.

19
00:01:17,040 --> 00:01:18,180
Let's say here you.

20
00:01:21,020 --> 00:01:22,040
Our rivals.

21
00:01:25,920 --> 00:01:27,090
All capital letters.

22
00:01:27,450 --> 00:01:31,650
And then for the one I'm going to say here best.

23
00:01:34,510 --> 00:01:37,450
Prices for.

24
00:01:41,670 --> 00:01:49,980
Or best, let's say, best prices for best or for the best quality or this year or whatever you want

25
00:01:50,700 --> 00:01:51,300
this season.

26
00:01:51,300 --> 00:01:56,340
Let's say this quality this season with best prices this season.

27
00:01:58,780 --> 00:02:01,680
And then for the paragraph, I'm going to display the following text.

28
00:02:01,690 --> 00:02:02,250
I'm going to say.

29
00:02:04,870 --> 00:02:07,260
Your shop.

30
00:02:08,770 --> 00:02:09,760
Offers.

31
00:02:11,170 --> 00:02:13,360
The best.

32
00:02:16,390 --> 00:02:19,450
Products or.

33
00:02:23,120 --> 00:02:23,840
The most.

34
00:02:25,850 --> 00:02:30,860
Or double prices, whatever you want to display here.

35
00:02:31,550 --> 00:02:34,370
And therefore, imagine I'm going to say shop now.

36
00:02:36,650 --> 00:02:37,160
Shop.

37
00:02:38,610 --> 00:02:39,090
Now.

38
00:02:41,960 --> 00:02:46,790
Let me see if I let me refresh here and show you that it's going to look like this.

39
00:02:46,820 --> 00:02:49,730
Of course, the design needs a lot of things.

40
00:02:49,730 --> 00:02:53,300
We need to work on the design to look to make this look better than this.

41
00:02:53,930 --> 00:02:55,310
So let's work on the design.

42
00:02:55,700 --> 00:02:58,670
The first thing that we need to work on is the obviously the home.

43
00:02:59,150 --> 00:03:01,910
So we have an image called home and we need to work on design.

44
00:03:02,570 --> 00:03:07,040
So let me let me hit it over to the style that's easiest.

45
00:03:07,060 --> 00:03:08,840
I'm going to head on over to the styling, see this?

46
00:03:09,440 --> 00:03:13,960
And then here I'm going to start working on the home.

47
00:03:13,970 --> 00:03:18,560
So the home is the home here, is it?

48
00:03:18,860 --> 00:03:22,340
Therefore, I'm going to say hashtag home because it's an idea.

49
00:03:22,910 --> 00:03:25,780
And then I'm going to first change the background color.

50
00:03:25,790 --> 00:03:29,750
I'm going to say background, color, macro, the image.

51
00:03:29,760 --> 00:03:31,540
Actually, I'm going to add an image.

52
00:03:31,550 --> 00:03:36,520
I'm going to say the image and then you are out and then I'm going to give this image later.

53
00:03:36,530 --> 00:03:38,840
But let me let me keep this empty for now.

54
00:03:39,290 --> 00:03:40,730
And then I'm going to change the width.

55
00:03:41,270 --> 00:03:45,860
The wet is going to be 100% because they want it to take the complete screen width.

56
00:03:48,350 --> 00:03:51,730
And the height is going to be a specific height.

57
00:03:51,740 --> 00:03:54,590
The height is going to be 100 VH.

58
00:03:55,220 --> 00:03:57,290
And it depends upon the height of the image.

59
00:03:57,950 --> 00:04:02,230
So I'm going to be using an image that is smaller than this.

60
00:04:02,240 --> 00:04:02,780
So then what?

61
00:04:03,110 --> 00:04:06,950
So I don't have to worry about the height, the background, size.

62
00:04:08,530 --> 00:04:16,000
Is going to be cover, which means that it's going to cover the background area, the background position.

63
00:04:17,110 --> 00:04:21,490
The background position is going to be 90% percent.

64
00:04:21,490 --> 00:04:25,270
But Lainey, let me work on this later because I want to explain something important.

65
00:04:25,280 --> 00:04:27,610
If I do this now, you will you will not understand.

66
00:04:28,150 --> 00:04:29,470
So let me get the image first.

67
00:04:30,940 --> 00:04:35,920
So I have this image and in order to add this image, you need to open up the images folder.