1
00:00:01,310 --> 00:00:05,840
Now what I'm going to do is that I'm going to work on a section called Featured, which is going to

2
00:00:05,840 --> 00:00:07,730
display featured products.

3
00:00:08,300 --> 00:00:11,920
So first of all, here, I'm going to create a new section.

4
00:00:11,930 --> 00:00:14,750
I'm going to say here, I'm going to add a comment first.

5
00:00:17,050 --> 00:00:19,300
And then I'm going to say featured.

6
00:00:21,960 --> 00:00:24,360
And then t shirt.

7
00:00:27,000 --> 00:00:28,620
And then I'm going to give you the section here.

8
00:00:28,620 --> 00:00:31,240
I'm going to say section and I'm going to give you a section on it.

9
00:00:31,800 --> 00:00:34,500
And then it is going to be featured features.

10
00:00:35,190 --> 00:00:38,250
And then inside that feature, do we need a dev?

11
00:00:39,000 --> 00:00:40,230
We need you to be at this.

12
00:00:40,770 --> 00:00:46,170
And for this dev, I'm going to give its first class called container, which which is as normal as

13
00:00:46,170 --> 00:00:46,680
usual.

14
00:00:47,760 --> 00:00:54,960
This class is going to add the container is going to add a padding margin from the right and left.

15
00:00:55,410 --> 00:01:00,000
And I'm going to also say your text center, because I want to center the text.

16
00:01:01,410 --> 00:01:02,610
Text Center.

17
00:01:02,610 --> 00:01:08,070
But Lainey, let me work on this later because they want to show you how these classes are going to

18
00:01:08,070 --> 00:01:11,910
affect the design and inside that this.

19
00:01:13,330 --> 00:01:22,300
First of all, I want to display here a I'm going to say inch three and then I'm going to say our.

20
00:01:23,970 --> 00:01:24,770
Featured.

21
00:01:25,850 --> 00:01:26,150
Right.

22
00:01:26,420 --> 00:01:27,590
Or we just our future.

23
00:01:28,320 --> 00:01:35,270
And then I'm going to display H.R., which is a separator and just as a producer and below this, I'm

24
00:01:35,270 --> 00:01:41,750
going to display a paragraph here being like this, H.R., I'm going to say B and I'm going to add the

25
00:01:42,110 --> 00:01:43,190
some text.

26
00:01:43,190 --> 00:01:46,370
I'm going to say, here you can.

27
00:01:47,400 --> 00:01:50,370
Check out our.

28
00:01:52,010 --> 00:01:52,670
You.

29
00:01:54,110 --> 00:01:57,020
Products or featured products.

30
00:01:58,610 --> 00:02:01,550
Insurance fraud.

31
00:02:03,760 --> 00:02:04,810
Laney, Steve and Laney.

32
00:02:07,610 --> 00:02:08,240
Refresh.

33
00:02:08,900 --> 00:02:11,810
So if I refresh, as you can see here, it's being displayed here.

34
00:02:11,810 --> 00:02:15,130
But first of all, I want to display this in the middle.

35
00:02:15,140 --> 00:02:20,060
Therefore, I'm going to say here for this container and I'm going to say text center.

36
00:02:21,520 --> 00:02:30,940
Takes centre and I also want to add margins from the top and now from the top and bottom and from right

37
00:02:30,940 --> 00:02:31,390
and left.

38
00:02:31,990 --> 00:02:39,940
And that can be done using the margin top five, which is where we strap class and the padding Y, which

39
00:02:39,940 --> 00:02:43,630
is going to have a padding from the top and bottom.

40
00:02:45,520 --> 00:02:50,050
And also I'm going to add the I'm going to add the padding and margin to the section itself.

41
00:02:50,590 --> 00:03:00,800
So for the section itself, I'm going to take a class I've been trying to see in Y five and P B PHI.

42
00:03:00,850 --> 00:03:05,800
So this is a margin five through the top and bottom and this is for the bottom.

43
00:03:06,250 --> 00:03:08,620
This is padding through the bottom.

44
00:03:09,880 --> 00:03:11,120
bb5.

45
00:03:11,170 --> 00:03:13,240
B b b I think twice.

46
00:03:14,020 --> 00:03:15,820
Now, let me show you the difference.

47
00:03:16,540 --> 00:03:19,660
As you can see, it's going to be displayed in the middle, which looks amazing.

48
00:03:21,060 --> 00:03:24,600
Now what I'm going to do is that I'm going to work on the featured products.

49
00:03:25,060 --> 00:03:30,510
So to do that, I'm going to create the the products and to create the products we need at them.

50
00:03:31,080 --> 00:03:38,040
And we need to give this live a class called Raw in order to get the raw that will contain several products.

51
00:03:38,610 --> 00:03:42,960
So I'm going to say you're all here and and it's and that's raw.

52
00:03:43,740 --> 00:03:48,840
First, I'm going to create the first product by saying you think that and I'm going to give this.

53
00:03:48,840 --> 00:03:57,750
There's a class called product product, which is going to be my class that I'm going to work on shortly.

54
00:03:58,350 --> 00:04:07,890
And I am going to say column allergy three, which means that each product will take three columns out

55
00:04:07,890 --> 00:04:08,490
of 12.

56
00:04:09,210 --> 00:04:16,110
If the screen is large, if the screen is medium, I'm going to say column me and then four, which

57
00:04:16,110 --> 00:04:23,550
means that the the product, each product will take four columns out of 12 if the screen is medium.

58
00:04:23,760 --> 00:04:27,870
Medium screen sizes for medium screen sizes for small screens.

59
00:04:29,400 --> 00:04:39,930
I would say you call esim dual, which means that for small screens, each product would take 1212 out

60
00:04:39,930 --> 00:04:46,530
of 12, which means that if the small if the screen is small, only one product would be displayed.

61
00:04:48,600 --> 00:04:53,550
So inside that inside the product, we need that image point for the product.

62
00:04:54,510 --> 00:04:57,300
So I'm going to say image and I'm going to give it also a class.

63
00:04:57,870 --> 00:05:06,180
The class is the is the image fluid, which is a bootstrap class again.

64
00:05:06,600 --> 00:05:13,740
And the margin I'm going to give it also margin bottom three and I'm going to say here source and I'm

65
00:05:13,740 --> 00:05:20,940
going to keep this empty now shortly I'm going to add an image below the image we want.

66
00:05:21,330 --> 00:05:23,460
Below the image we want a text.

67
00:05:23,940 --> 00:05:32,400
So I'm going to get a name for that text and I'm going to say I'm going to say, here, let me use instead

68
00:05:32,400 --> 00:05:41,820
of the text, let me say instead of def, I'm going to say here it's five and for the price I'm going

69
00:05:41,820 --> 00:05:47,400
to give it a class and that class is going to be P name.

70
00:05:49,080 --> 00:05:53,940
And here I'm going to display the name of the product.

71
00:05:53,940 --> 00:05:55,080
So let me see.

72
00:05:56,810 --> 00:05:58,190
It's or it's.

73
00:06:03,780 --> 00:06:09,060
And below this, I'm going to give you I'm going to use the edge for to display the price.

74
00:06:09,060 --> 00:06:11,970
So I'm going to say it's four and I'm going to give it a class.

75
00:06:12,480 --> 00:06:17,070
And that would be the would be named B price.

76
00:06:18,720 --> 00:06:22,670
And then I'm going to say here, I'm going to target price.

77
00:06:22,680 --> 00:06:23,820
Let me say here.

78
00:06:28,880 --> 00:06:32,480
This price and below I'm going to display it by.

79
00:06:34,010 --> 00:06:36,720
I'm going to see him so far this morning.

80
00:06:36,740 --> 00:06:38,540
I'm going to I'm going to say bye now.

81
00:06:40,430 --> 00:06:46,460
And I'm going to also give it a glass glass by now.

82
00:06:48,300 --> 00:06:50,970
Let me save a lady and then over to the browser.

83
00:06:52,920 --> 00:06:55,110
And leaving your name instead of buy.

84
00:06:55,110 --> 00:06:59,790
Now let me say buy button, because otherwise they wouldn't know that this is about it.

85
00:07:00,660 --> 00:07:01,290
Bye bye.

86
00:07:02,220 --> 00:07:03,750
Let me now save and refresh.

87
00:07:04,350 --> 00:07:09,030
And as you can see, the product will be displayed here, but we still need to work on a design.

88
00:07:09,510 --> 00:07:12,060
So first of all, we need to add margin and bank.

89
00:07:12,510 --> 00:07:18,240
So to add a margin and padding, what I'm going to do is that I'm going to add a margin comparing to

90
00:07:18,240 --> 00:07:22,170
the here to the to this there to this draw itself.

91
00:07:22,170 --> 00:07:26,010
There itself, I'm going to say m x auto.

92
00:07:26,670 --> 00:07:31,770
So this is going to center center each product.

93
00:07:31,890 --> 00:07:37,830
It's going to add the some space here from the left and right so that it will be centered.

94
00:07:37,830 --> 00:07:46,620
However, it will be centered, but also the the there will be here space and this is going to be applied

95
00:07:46,620 --> 00:07:48,060
to the raw itself.

96
00:07:48,060 --> 00:07:49,950
It's not going to be applied to each product.

97
00:07:50,430 --> 00:07:53,340
So it will look amazing shortly.

98
00:07:53,340 --> 00:07:58,440
Shortly when I refresh, you will see what this is going to do to the are to the to there.

99
00:07:59,220 --> 00:08:01,080
And I'm going to also give it a container.

100
00:08:01,080 --> 00:08:08,280
I'm going to say you container fluid, which is going to also add some space container.

101
00:08:08,550 --> 00:08:10,200
Look, this is a bootstrap plus.

102
00:08:11,370 --> 00:08:20,040
Which is going to add some space from the right and left and make sure that the things will be displayed

103
00:08:20,040 --> 00:08:20,640
perfectly.

104
00:08:21,630 --> 00:08:28,530
And for for this for for for the techs, I want to center the techs.

105
00:08:28,890 --> 00:08:33,180
And to center them, we need to say text center.

106
00:08:36,290 --> 00:08:38,810
This is going to censor the text.

107
00:08:39,320 --> 00:08:51,110
So this is for for for this part and for for here we want let me check this one here.

108
00:08:51,110 --> 00:08:52,010
We need to expand.

109
00:08:52,080 --> 00:08:54,620
We need to center this and we need to add margin.

110
00:08:54,620 --> 00:08:55,430
We added margin.

111
00:08:55,460 --> 00:08:56,750
Everything's perfectly safe.

112
00:08:56,750 --> 00:08:57,980
And let me refresh now.

113
00:08:58,610 --> 00:09:01,310
And as you can see, it's going to look amazing.

114
00:09:01,910 --> 00:09:03,350
It's going to be displayed here.

115
00:09:03,740 --> 00:09:06,110
Now, what we need to do is that we need to display the image.

116
00:09:06,650 --> 00:09:09,530
So you have some images and let me show you the images that they have.

117
00:09:10,130 --> 00:09:12,620
So you have this folder which contains some images.

118
00:09:13,100 --> 00:09:16,040
I'm going to add these images to my project.

119
00:09:16,700 --> 00:09:18,680
So here I'm going to.

120
00:09:19,640 --> 00:09:20,120
Here.

121
00:09:20,120 --> 00:09:24,260
I'm going to open this and then I'm going to open the images.

122
00:09:24,920 --> 00:09:27,990
For the images for this section we have the feature.

123
00:09:28,010 --> 00:09:30,890
So I have here for featured images.

124
00:09:30,890 --> 00:09:39,530
I'm going to move each one here to this our images folder one and then two and then three.

125
00:09:40,910 --> 00:09:41,950
And then four.

126
00:09:42,530 --> 00:09:44,210
So we will have four images.

127
00:09:45,580 --> 00:09:50,350
Now what I'm going to do is that let me close all of these.

128
00:09:50,920 --> 00:09:53,470
Let me close down all of these steps here.

129
00:09:53,470 --> 00:09:55,090
We need to say source.

130
00:09:55,540 --> 00:09:59,770
And then for the source, I'm going to say assets for slash.

131
00:10:00,460 --> 00:10:03,970
Images for slash featured one.

132
00:10:04,030 --> 00:10:05,310
Featured one JP.

133
00:10:06,400 --> 00:10:07,570
Let me now save.

134
00:10:08,230 --> 00:10:10,060
Now let's head in over to the browser to test.

135
00:10:11,540 --> 00:10:13,310
So as you can see, it's going to look amazing.

136
00:10:14,270 --> 00:10:17,870
Now we have only one product, but we want to keep it here.

137
00:10:18,260 --> 00:10:19,460
Three other products.

138
00:10:19,820 --> 00:10:23,250
So to do this, we don't need to do anything, anything special.

139
00:10:23,270 --> 00:10:32,630
All we need to do is that we need to copy this part and and paste it four times because basically three

140
00:10:32,630 --> 00:10:34,190
times because we already have one.

141
00:10:34,700 --> 00:10:40,520
However, I'm going to here before I do this, I'm going to display here some stars.

142
00:10:41,120 --> 00:10:43,220
So stars for reviews.

143
00:10:43,730 --> 00:10:44,510
So to do this.

144
00:10:45,660 --> 00:10:46,440
I'm going to stay here.

145
00:10:46,440 --> 00:10:48,090
I'm going to get here.

146
00:10:48,180 --> 00:10:54,000
They've called that has a class called Star.

147
00:10:54,030 --> 00:10:55,320
I'm going to say a class star.

148
00:10:55,860 --> 00:10:58,440
And then I'm going to use a.

149
00:10:59,940 --> 00:11:02,160
A font awesome star.

150
00:11:02,160 --> 00:11:05,130
So I'm going to say here I am.

151
00:11:05,130 --> 00:11:08,610
Then for this I am going to give it a glass.

152
00:11:09,570 --> 00:11:13,230
And that glass is a not a bootstrap, it's a font.

153
00:11:13,260 --> 00:11:21,300
Awesome glass called if a font awesome and then a font awesome star font awesome star.

154
00:11:21,720 --> 00:11:27,090
And then I'm going to repeat this five times because I want to display five stars.

155
00:11:27,090 --> 00:11:31,170
One, two, three, four, five.

156
00:11:31,650 --> 00:11:35,700
Now, let me show you how this would look like.

157
00:11:36,120 --> 00:11:40,560
As you can see, we have here one, two, three, four, five stars, which looks amazing.

158
00:11:42,140 --> 00:11:43,910
So this is for this section.

159
00:11:45,230 --> 00:11:50,360
Finally, I'm going to repeat this four times and then I'm going to work on the reasoning.

160
00:11:50,930 --> 00:11:56,300
So in order to repeat this, we just need to copy this part.

161
00:11:57,400 --> 00:11:59,560
We need to start copying from here.

162
00:12:00,460 --> 00:12:02,230
So from here I'm going to copy from here.

163
00:12:03,950 --> 00:12:05,150
I'm going I'm going to business.

164
00:12:07,260 --> 00:12:07,830
One.

165
00:12:10,570 --> 00:12:12,580
Two and three.

166
00:12:13,390 --> 00:12:14,680
And I'm going to change the images.

167
00:12:17,050 --> 00:12:18,970
So the first image is featured one.

168
00:12:19,570 --> 00:12:21,520
The second image is featured two.

169
00:12:22,480 --> 00:12:24,970
And the third image is featured three.

170
00:12:26,860 --> 00:12:30,850
And the last image is featured for Leni.

171
00:12:30,850 --> 00:12:32,230
Now save and Leni refresh.

172
00:12:34,120 --> 00:12:37,420
And as you can see, we will have one, two, three, four, and they look amazing.

173
00:12:38,800 --> 00:12:45,340
Now I'm going to work on the design, so I'm going to head on over to see this maybe open up thesis.

174
00:12:46,480 --> 00:12:49,570
And now we need to start working on the design.

175
00:12:50,380 --> 00:12:54,760
So remember, we have a glass called container.

176
00:12:55,390 --> 00:12:57,430
We have a glass called product.

177
00:12:57,970 --> 00:13:00,250
Remember, we have in your glass called product.

178
00:13:01,060 --> 00:13:01,900
This product.

179
00:13:03,300 --> 00:13:03,930
This product.

180
00:13:03,930 --> 00:13:04,880
So we need to work on this.

181
00:13:04,950 --> 00:13:09,330
This product is the device that contains the complete product.

182
00:13:09,870 --> 00:13:15,600
So here at the bottom, I'm going to here at a comment and then I'm going to say.

183
00:13:18,350 --> 00:13:20,900
Products so far.

184
00:13:20,900 --> 00:13:26,900
The product section I'm going to give you, I'm going to senior dot product and then first, I'm going

185
00:13:26,900 --> 00:13:29,150
to give this product a cursor.

186
00:13:29,150 --> 00:13:37,430
I'm going to say cursor pointer, cursor pointer, which is going to make this pointer, which is going

187
00:13:37,430 --> 00:13:43,040
to make the item clickable cursor pointer will make this icon clickable.

188
00:13:43,250 --> 00:13:45,470
Whenever you hover over it, it's going to be clickable.

189
00:13:46,630 --> 00:13:50,380
So this is for the project and I'm going to also give it margin bottom.

190
00:13:50,920 --> 00:13:52,570
So I'm going to add here some margin.

191
00:13:54,570 --> 00:13:59,670
Because they want this margin for the in order not to interfere with the next section.

192
00:14:00,090 --> 00:14:01,500
So I'm going to say margin bottom.

193
00:14:03,190 --> 00:14:04,420
To RIM.

194
00:14:06,060 --> 00:14:08,580
And then I'm going to work on the image.

195
00:14:08,580 --> 00:14:09,660
I'm going to say project.

196
00:14:10,880 --> 00:14:12,880
Project image.

197
00:14:14,770 --> 00:14:15,520
And the image.

198
00:14:15,520 --> 00:14:17,830
I'm going to give this image a transition.

199
00:14:18,820 --> 00:14:23,290
Transition of point, 3 seconds all.

200
00:14:26,100 --> 00:14:32,160
And upon hovering on the image, I'm going to say your product and then hover.

201
00:14:32,460 --> 00:14:36,870
If I hover over the product, I'm going to change the opacity of the image.

202
00:14:37,410 --> 00:14:38,580
So I'm going to say image.

203
00:14:38,970 --> 00:14:44,850
I'm going to see product hover, which means that if I hover over the product here, the image will

204
00:14:44,850 --> 00:14:45,980
have a different opacity.

205
00:14:45,990 --> 00:14:47,550
I'm going to see here opacity.

206
00:14:48,490 --> 00:14:52,030
Opacity and the opacity is going to be point seven.

207
00:14:52,660 --> 00:14:53,280
Let me see.

208
00:14:53,290 --> 00:14:57,820
And let me now heading over to the browser and refresh.

209
00:14:59,050 --> 00:15:05,620
And if I hover, as you can see, the opacity will be point to seven, which looks amazing.