1
00:00:00,930 --> 00:00:04,440
Now what I'm going to do is that I'm going to create here a banner below this section.

2
00:00:04,920 --> 00:00:08,970
So here in the index that each email below this.

3
00:00:09,030 --> 00:00:11,160
Let me close this because it's here.

4
00:00:11,160 --> 00:00:12,420
This takes a lot of space.

5
00:00:12,990 --> 00:00:15,750
So I'm going to close it and then I'm going to do it here.

6
00:00:15,750 --> 00:00:19,200
And you I'm going to add the comment and then I'm going to say Banner.

7
00:00:21,610 --> 00:00:25,470
And then here I'm going to be at the U.S. and I'm going to give this section.

8
00:00:25,480 --> 00:00:28,630
It would be banner.

9
00:00:30,370 --> 00:00:33,580
And then inside that section, we, as usual, we need a again.

10
00:00:34,330 --> 00:00:37,760
And for this I'm going to give it a glass.

11
00:00:38,100 --> 00:00:42,130
We container, glass, glass, container.

12
00:00:44,610 --> 00:00:50,120
And I'm going to here and inside it, I'm going to add some text.

13
00:00:50,130 --> 00:00:52,350
I'm going to hear say a trois.

14
00:00:53,370 --> 00:00:53,940
Let me see.

15
00:00:54,050 --> 00:00:55,050
It's a made.

16
00:01:00,440 --> 00:01:01,520
Season.

17
00:01:07,710 --> 00:01:08,190
Sale.

18
00:01:11,690 --> 00:01:14,240
And below this, I'm going to display some texts.

19
00:01:14,930 --> 00:01:16,670
I'm going to say each one.

20
00:01:17,360 --> 00:01:19,190
And then I'm going to say Autumn.

21
00:01:21,520 --> 00:01:23,530
Some collection.

22
00:01:25,430 --> 00:01:32,360
All action and I'm going to add a break because they want the vortex that we displayed below the the

23
00:01:32,690 --> 00:01:34,120
the remaining of the fixed.

24
00:01:34,130 --> 00:01:37,220
They want it to be displayed below, I'm going to say up to.

25
00:01:38,810 --> 00:01:39,500
30.

26
00:01:40,720 --> 00:01:41,650
Percent off.

27
00:01:44,070 --> 00:01:45,900
And below, I'm going to display a button here.

28
00:01:45,900 --> 00:01:46,770
I'm going to say button.

29
00:01:48,790 --> 00:01:51,520
And for this money, I'm going to give it a class.

30
00:01:52,720 --> 00:01:57,060
And that last one would be text uppercase, uppercase.

31
00:01:58,390 --> 00:01:59,950
And here I'm just going to this.

32
00:01:59,950 --> 00:02:01,780
I'm going to display on the bottom shop now.

33
00:02:02,770 --> 00:02:05,440
Shop now and for.

34
00:02:06,750 --> 00:02:07,560
For the banner.

35
00:02:07,560 --> 00:02:18,300
I'm going to give it a a margin and I'm going to take less aim y five and by5.

36
00:02:18,690 --> 00:02:21,240
So this is going to give it margin.

37
00:02:22,680 --> 00:02:23,910
Top and bottom five.

38
00:02:24,450 --> 00:02:25,200
And padding.

39
00:02:26,190 --> 00:02:26,610
Padding.

40
00:02:26,610 --> 00:02:27,640
Top and bottom five.

41
00:02:28,320 --> 00:02:29,910
And these are bootstrap classes.

42
00:02:31,320 --> 00:02:35,610
And Laney now save and Laney hit it over to the browser and refresh.

43
00:02:36,270 --> 00:02:37,680
And as you can see, this is the banner.

44
00:02:38,100 --> 00:02:41,850
And of course, this is not a banner because we we don't have an image.

45
00:02:41,850 --> 00:02:45,200
So we need to display an image in the background similar to this.

46
00:02:45,210 --> 00:02:47,400
We have already done this, but this is going to be different.

47
00:02:47,790 --> 00:02:53,280
The difference is that this is going to be smaller and also it's going to look it's going to be kind

48
00:02:53,280 --> 00:02:56,190
of scrollable where the image will be scrollable.

49
00:02:56,190 --> 00:03:02,520
So the the image will will remain inside the the section.

50
00:03:02,520 --> 00:03:06,180
It's not it's not going to go away if you scroll in.

51
00:03:06,420 --> 00:03:07,770
Let me show you what I mean.

52
00:03:08,190 --> 00:03:11,880
After I finish this design, you will you will see what I mean.

53
00:03:12,360 --> 00:03:16,620
So remember here I have given it I have given this section and it's called the banner.

54
00:03:16,980 --> 00:03:21,420
So in the style, we need to clear this up, this idea, and work on the design.

55
00:03:21,810 --> 00:03:23,610
So in the in this case.

56
00:03:24,790 --> 00:03:25,330
Here.

57
00:03:25,330 --> 00:03:27,960
I'm going to need to say I.D..

58
00:03:28,960 --> 00:03:30,160
Hashtag banner.

59
00:03:30,640 --> 00:03:37,030
And since we already have a redesign of the home, we can copy the design from the home section, from

60
00:03:37,030 --> 00:03:37,780
the home elements.

61
00:03:37,780 --> 00:03:39,880
Remember this home?

62
00:03:41,890 --> 00:03:43,470
Listen, we can't copy this card.

63
00:03:43,480 --> 00:03:46,540
Let me copy this card and then let me paste it here.

64
00:03:47,930 --> 00:03:52,280
Limit pace the code here in the banner and we need to change the image.

65
00:03:52,290 --> 00:03:53,840
But I don't have an image now.

66
00:03:53,840 --> 00:03:55,400
I'm going to change the image later.

67
00:03:55,400 --> 00:03:59,540
Therefore I'm going to keep the same exact image and later I'm going to change the image.

68
00:04:00,350 --> 00:04:02,720
And we don't need to change much.

69
00:04:03,680 --> 00:04:08,390
The only thing that we want to change is that we need to change the X and Y positions.

70
00:04:08,870 --> 00:04:16,940
So for for the X position, for the X position, I'm going to say center, because I want the image

71
00:04:16,940 --> 00:04:28,550
to be centered horizontally from for the background position y I want, I want this to be 80% AP X So

72
00:04:28,840 --> 00:04:30,190
there is no problem with this.

73
00:04:31,070 --> 00:04:36,350
Another thing that they want to do is that they want to remove the repeat because you don't want the

74
00:04:36,350 --> 00:04:37,490
image to be repeated.

75
00:04:37,670 --> 00:04:45,020
Therefore, I'm going to say here background, repeat, no, repeat and the attachment.

76
00:04:45,080 --> 00:04:47,060
This is what's what's important here.

77
00:04:47,990 --> 00:04:52,220
Laney, you say back ground attachment and showing you what this is going to do.

78
00:04:52,670 --> 00:05:01,190
This is going to if I say here fixed, this is going to make the image attached to the to the element.

79
00:05:01,400 --> 00:05:02,690
You will see this shortly.

80
00:05:02,690 --> 00:05:03,770
Let me now save Laney.

81
00:05:05,060 --> 00:05:11,030
Laney, before I save and test, let me work on the on the designs of latex.

82
00:05:11,870 --> 00:05:20,920
But let me first test because I don't want to work on other things and I forget showing you this look.

83
00:05:20,970 --> 00:05:24,860
So let me refresh and show you how it's going to look like.

84
00:05:24,860 --> 00:05:27,350
So as you can see, this is how it's going to look like.

85
00:05:27,860 --> 00:05:28,840
It's going to be that.

86
00:05:29,240 --> 00:05:31,310
It's going to the image is not going to go away.

87
00:05:31,730 --> 00:05:34,340
It will always be inside.

88
00:05:34,340 --> 00:05:36,020
That section, as you can see.

89
00:05:36,480 --> 00:05:37,250
Looks amazing.

90
00:05:39,320 --> 00:05:40,760
But we need to change.

91
00:05:40,760 --> 00:05:45,830
As I told you, the difference between this and this is that, first of all, the height is too large

92
00:05:46,130 --> 00:05:46,400
here.

93
00:05:46,400 --> 00:05:47,330
The height is too large.

94
00:05:47,900 --> 00:05:51,860
And here it's it's attached to the elements.

95
00:05:52,220 --> 00:05:54,270
So we need to decrease the height here.

96
00:05:54,290 --> 00:05:56,330
I'm going to say height instead of 100.

97
00:05:56,960 --> 00:05:59,370
I'm going to say only 66.

98
00:05:59,500 --> 00:06:00,860
So only 60, you.

99
00:06:01,900 --> 00:06:05,320
Now let me refresh and show you the difference.

100
00:06:06,330 --> 00:06:16,500
So as you can see now, it's going to only take 60 the end from the from the screen height, which looks

101
00:06:16,500 --> 00:06:16,830
amazing.

102
00:06:17,400 --> 00:06:19,410
Let's also work on.

103
00:06:20,580 --> 00:06:21,520
On these texts.

104
00:06:22,320 --> 00:06:27,000
So in order to work on these texts, we need to say here, banner.

105
00:06:29,220 --> 00:06:33,770
Banner and then h for we we have the war.

106
00:06:34,200 --> 00:06:36,360
I'm going to change the color.

107
00:06:36,360 --> 00:06:39,750
I think the itch for color looks good.

108
00:06:39,750 --> 00:06:41,010
So we don't need to change this.

109
00:06:41,010 --> 00:06:43,620
Actually, let's change the color of the itch one.

110
00:06:44,220 --> 00:06:46,710
So for the itch, each one.

111
00:06:46,710 --> 00:06:48,180
Let me check one more time.

112
00:06:48,540 --> 00:06:50,160
We have this, each one and we have this.

113
00:06:50,550 --> 00:06:56,520
Let's change the color of the each one here.

114
00:06:59,810 --> 00:07:00,650
I'm going to stay here.

115
00:07:01,520 --> 00:07:02,030
Color.

116
00:07:03,490 --> 00:07:07,120
I'm not going to use the, quote, coral scholar.

117
00:07:09,660 --> 00:07:11,160
And here this is the color.

118
00:07:11,910 --> 00:07:14,310
Let's also work on the button for this button.

119
00:07:15,330 --> 00:07:22,320
For this button, I'm going to say your banner and this button, then button.

120
00:07:23,890 --> 00:07:24,730
So four things about it.

121
00:07:24,740 --> 00:07:27,550
I'm going to change only the background color I'm going to name by color.

122
00:07:29,310 --> 00:07:32,930
Back ground color.

123
00:07:32,970 --> 00:07:37,740
And the background color is going to be the orange color that they used the earlier which is this color.

124
00:07:39,570 --> 00:07:40,380
So now.

125
00:07:41,620 --> 00:07:42,940
As you can see, it looks amazing.

126
00:07:44,050 --> 00:07:45,250
It looks now amazing.

127
00:07:45,810 --> 00:07:48,940
Now, let's also add a an effect to it, I'm going to say here.

128
00:07:50,980 --> 00:07:56,620
Banner and then button and then hover.

129
00:07:57,760 --> 00:08:04,390
And if I hover over it, I want to be back down to color, to go black.

130
00:08:08,780 --> 00:08:09,440
Race color.

131
00:08:10,850 --> 00:08:13,520
So let me now show you how it's going to look like.

132
00:08:14,270 --> 00:08:16,880
So as you can see, if I hover over, it's going to look like this.