1
00:00:00,390 --> 00:00:07,950
Now I'm going to be working on the next section, which is going to be a section for displaying three

2
00:00:08,730 --> 00:00:09,210
cards.

3
00:00:09,300 --> 00:00:14,370
Each single card will display a product, a new product in our website.

4
00:00:14,880 --> 00:00:18,300
So here I'm going to create a new section called New.

5
00:00:20,090 --> 00:00:22,250
And then I'm going to say section.

6
00:00:22,910 --> 00:00:25,550
And then for this section first, I'm going to give it as usual.

7
00:00:25,550 --> 00:00:27,450
I'm going to give it an ID.

8
00:00:28,400 --> 00:00:31,550
I'm going to say I.D. and it is going to be new.

9
00:00:32,270 --> 00:00:37,400
And then I'm going to also give it that class and that class is going to be with.

10
00:00:38,720 --> 00:00:43,940
With 100 and inside that section.

11
00:00:44,300 --> 00:00:46,520
First, I'm going to divide that section.

12
00:00:46,520 --> 00:00:49,340
I'm going to use the right to divide that section into three columns.

13
00:00:50,090 --> 00:00:56,630
So I'm going to say them and then I'm going to give this David class, the raw class, to divide the

14
00:00:56,630 --> 00:01:06,680
page into a area of a row that consists of three columns, and I'm going to remove the batting and the

15
00:01:06,680 --> 00:01:07,310
margins.

16
00:01:07,940 --> 00:01:15,590
So I'm going to say B0, M0, B0 means that I don't want any padding and M0 means that I don't want

17
00:01:15,590 --> 00:01:17,210
any margins.

18
00:01:17,210 --> 00:01:19,340
And these are both steady.

19
00:01:19,340 --> 00:01:20,960
All of these are bootstrap classes.

20
00:01:22,030 --> 00:01:25,510
Next, I'm going to display the first column so far.

21
00:01:25,510 --> 00:01:28,780
The first column I'm going to say them plus.

22
00:01:29,790 --> 00:01:34,830
And I'm going to give it first a class called one, which is my class, and then I'm going to give it

23
00:01:34,860 --> 00:01:36,060
bootstrap glasses.

24
00:01:36,060 --> 00:01:37,530
First column.

25
00:01:37,830 --> 00:01:41,460
Elite Four and column.

26
00:01:42,020 --> 00:01:46,980
Medium, medium 12 and column.

27
00:01:47,730 --> 00:01:49,320
Small 12.

28
00:01:49,770 --> 00:01:56,940
Which means that four large screens, three, three draw, three columns will be displayed, pair up

29
00:01:57,420 --> 00:01:58,350
or medium screens.

30
00:01:58,350 --> 00:02:00,450
Only one column will be displayed.

31
00:02:00,450 --> 00:02:02,550
There are four small screens.

32
00:02:02,550 --> 00:02:04,200
Only one column will be displayed.

33
00:02:04,200 --> 00:02:04,620
Zero.

34
00:02:05,610 --> 00:02:07,470
Finally, I'm going to remove the padding.

35
00:02:07,470 --> 00:02:09,870
I'm going to say here p zero.

36
00:02:11,530 --> 00:02:14,290
And then inside that, I'm going to display an image.

37
00:02:15,130 --> 00:02:18,250
I'm going to say image and then I'm going to say source.

38
00:02:19,420 --> 00:02:25,990
And then I'm going to give this I'm going to first give this image a class and bootstrap class called

39
00:02:26,320 --> 00:02:29,950
image flow, which is going to make the image responsive.

40
00:02:30,850 --> 00:02:41,350
And for the source, I'm going to say source, I'm going to say assets images for slash one JPEG and

41
00:02:41,350 --> 00:02:43,390
I'm going to get that image later.

42
00:02:44,380 --> 00:02:45,400
Below the image.

43
00:02:45,400 --> 00:02:49,120
Below the image, I'm going to display a a section.

44
00:02:51,110 --> 00:02:54,170
And I'm going to give it a class called Details.

45
00:02:57,000 --> 00:03:00,870
And for for this details, I'm going to display two things.

46
00:03:01,410 --> 00:03:08,970
I'm going to display a text that's going to be displayed in H2 and in title to me and let's say.

47
00:03:12,620 --> 00:03:13,660
Dreamily.

48
00:03:15,770 --> 00:03:16,580
Awesome.

49
00:03:20,260 --> 00:03:20,830
Yes.

50
00:03:21,970 --> 00:03:29,620
And then below, I'm going to play a button for the button and I'm just going to say shop now.

51
00:03:32,770 --> 00:03:35,770
And I'm going to give it a bootstrap class.

52
00:03:37,150 --> 00:03:37,630
Called.

53
00:03:38,710 --> 00:03:39,310
Next.

54
00:03:41,270 --> 00:03:41,900
Upper.

55
00:03:44,020 --> 00:03:44,500
Case.

56
00:03:45,430 --> 00:03:48,850
Laney, Save and Laney have been over to the browser and refresh.

57
00:03:49,660 --> 00:03:52,380
And as you can see, we have one column.

58
00:03:52,390 --> 00:03:58,750
Let's display two columns here on the V in the middle and on the right side.

59
00:03:59,230 --> 00:03:59,680
So.

60
00:04:00,870 --> 00:04:01,410
To do that.

61
00:04:01,410 --> 00:04:03,060
We need to copy this part.

62
00:04:03,900 --> 00:04:04,410
Let me hear.

63
00:04:04,410 --> 00:04:04,800
Say.

64
00:04:07,390 --> 00:04:07,900
One.

65
00:04:09,400 --> 00:04:10,900
And this is the end of one.

66
00:04:15,720 --> 00:04:20,070
So here I'm going to say two, and then I'm going to say here.

67
00:04:23,930 --> 00:04:24,230
Very.

68
00:04:25,460 --> 00:04:28,340
And I'm going to copy this and paste it here.

69
00:04:30,160 --> 00:04:31,390
And pasted it here.

70
00:04:32,790 --> 00:04:35,040
So for two, let's display a different text.

71
00:04:35,700 --> 00:04:36,410
I'm going to say.

72
00:04:37,500 --> 00:04:37,950
You're.

73
00:04:39,590 --> 00:04:40,280
Awesome.

74
00:04:47,320 --> 00:04:48,640
Anything you want to display.

75
00:04:52,020 --> 00:04:56,500
You know, I'm going to say 50% of.

76
00:05:04,010 --> 00:05:08,540
And for the images, I'm going to say too, and I'm going to say a year three.

77
00:05:09,350 --> 00:05:10,520
So we have one, two or three.

78
00:05:12,820 --> 00:05:14,080
And let me add the images.

79
00:05:14,080 --> 00:05:15,610
So I have here three images.

80
00:05:16,080 --> 00:05:18,760
I'm going to drag these images and drop them on to the.

81
00:05:19,710 --> 00:05:20,610
Images folder.

82
00:05:22,820 --> 00:05:24,320
So we have one, two and three.

83
00:05:24,500 --> 00:05:25,640
So these are the images.

84
00:05:26,420 --> 00:05:29,210
And let me now heading over to the browser and test.

85
00:05:30,080 --> 00:05:33,560
So now in the browser, as you can see, we have one, two and three.

86
00:05:34,280 --> 00:05:38,180
But the problem is with the images, they don't have the same sizes.

87
00:05:38,210 --> 00:05:39,230
Let me work on this.

88
00:05:39,980 --> 00:05:41,590
So, first of all, this image is too small.

89
00:05:41,600 --> 00:05:43,580
We need to replace this with a bigger image.

90
00:05:43,700 --> 00:05:44,150
Image.

91
00:05:45,020 --> 00:05:46,280
So I have another image.

92
00:05:46,280 --> 00:05:50,500
Let me add this image on test with this image limits this image.

93
00:05:50,510 --> 00:05:52,880
And I think this image is bigger.

94
00:05:52,880 --> 00:05:53,810
As you can see, it's bigger.

95
00:05:54,380 --> 00:06:01,220
However, we still need to work on the size because some images might be greater than others.

96
00:06:01,580 --> 00:06:04,730
Therefore, we need to we need to work on the design of these images.

97
00:06:05,240 --> 00:06:09,260
So what I'm going to do is that I'm going to head on over to see this, and I'm going to work on the

98
00:06:09,260 --> 00:06:10,550
design of these images.

99
00:06:12,050 --> 00:06:14,090
First of all, I'm going to work on the new section.

100
00:06:14,570 --> 00:06:20,750
Remember, we have a year this new section in the email, we have this new idea.

101
00:06:21,290 --> 00:06:23,390
So in the thesis.

102
00:06:23,390 --> 00:06:24,530
And this time the thesis.

103
00:06:26,610 --> 00:06:30,120
I'm going to add here the new I'm going to say new.

104
00:06:30,900 --> 00:06:34,230
And then for this new, I'm going to say that one.

105
00:06:36,040 --> 00:06:37,390
And then image.

106
00:06:39,490 --> 00:06:43,140
And remember, this one is for.

107
00:06:43,150 --> 00:06:44,530
For this and this and this.

108
00:06:45,960 --> 00:06:46,530
So.

109
00:06:47,800 --> 00:06:49,180
The image is going to be.

110
00:06:49,180 --> 00:06:55,270
This image is refers to all images or images that are inside this inside one glass.

111
00:06:56,530 --> 00:06:58,690
So for the image, we need to change the width and height.

112
00:06:58,690 --> 00:07:03,220
I'm going to say with the width 100% and the height.

113
00:07:05,480 --> 00:07:06,440
100%.

114
00:07:08,690 --> 00:07:11,000
Now the images should have the same size.

115
00:07:13,190 --> 00:07:18,680
So the images should have the same size, and I think they look great now.

116
00:07:19,880 --> 00:07:21,950
The next thing that I'm going to work on is the.

117
00:07:23,050 --> 00:07:27,580
He's that I'm going to add some background because I'm going to change the background position.

118
00:07:27,940 --> 00:07:32,530
So the background position, Magna position, is going to be center because they want to center the

119
00:07:32,530 --> 00:07:32,950
images.

120
00:07:33,820 --> 00:07:39,460
We're going to say the background position center and the background repeat is none.

121
00:07:40,540 --> 00:07:46,420
Back ground, repeat, none, no, repeat.

122
00:07:47,230 --> 00:07:48,670
And the background size.

123
00:07:50,200 --> 00:07:50,740
Cover.

124
00:07:52,240 --> 00:07:54,580
Now, let me refresh.

125
00:07:55,560 --> 00:07:58,650
And as you can see, it's going to look great.

126
00:08:00,480 --> 00:08:07,950
Next, we need to work on the deposition of this one.

127
00:08:09,080 --> 00:08:13,850
Of this of the one they complete, they have suffered a complete death.

128
00:08:14,000 --> 00:08:14,730
I'm going to give it.

129
00:08:14,750 --> 00:08:17,600
I'm going to say you knew that one.

130
00:08:18,260 --> 00:08:26,750
And I'm going to give it a position relative and I'm going to display this modern LeBaron and the text

131
00:08:27,110 --> 00:08:30,440
inside or above the image to do this.

132
00:08:30,650 --> 00:08:35,600
To do this, we have to change the details.

133
00:08:35,600 --> 00:08:36,800
Section, position.

134
00:08:37,190 --> 00:08:38,840
Remember the details.

135
00:08:39,230 --> 00:08:41,300
This details is below the image.

136
00:08:41,690 --> 00:08:46,850
And in order to display the details above of the image, we need to give the details here.

137
00:08:46,850 --> 00:08:52,910
We need to say a new and then that one and then that details.

138
00:08:56,300 --> 00:08:56,930
Details.

139
00:08:57,350 --> 00:08:59,720
We need to change the position.

140
00:08:59,810 --> 00:09:02,690
So I'm going to change the position to absolute.

141
00:09:03,980 --> 00:09:05,070
Absolutely.

142
00:09:06,920 --> 00:09:07,460
And.

143
00:09:09,430 --> 00:09:10,080
Right up.

144
00:09:10,960 --> 00:09:12,040
He's going to be zero.

145
00:09:12,850 --> 00:09:13,690
And the left.

146
00:09:14,770 --> 00:09:16,720
Left is also going to be zero.

147
00:09:17,680 --> 00:09:22,180
Whereas the the the color I'm going to change the color.

148
00:09:22,780 --> 00:09:27,430
The color is going to be barely would.

149
00:09:29,590 --> 00:09:31,030
And the font weight.

150
00:09:31,030 --> 00:09:32,050
I'm going to change the font weight.

151
00:09:33,430 --> 00:09:34,090
To people.

152
00:09:38,630 --> 00:09:43,280
Transition point for AIDS.

153
00:09:46,490 --> 00:09:52,550
And I'm going to give it also opacity of point eight and background color.

154
00:10:03,580 --> 00:10:04,780
Background color.

155
00:10:05,230 --> 00:10:07,180
So the color is going to be a black color.

156
00:10:07,990 --> 00:10:13,780
I'm going to say RGV one, one, one.

157
00:10:16,070 --> 00:10:17,000
And that's it.

158
00:10:17,030 --> 00:10:17,540
Let me see.

159
00:10:19,490 --> 00:10:21,200
Let me show you what's going to happen now.

160
00:10:21,560 --> 00:10:29,750
Now, what happens is that the the text and the button will be displayed above the image and they will

161
00:10:29,750 --> 00:10:33,500
be displayed inside this section.

162
00:10:33,500 --> 00:10:38,900
But we want this section to be extended and to take the complete size as the image.

163
00:10:39,260 --> 00:10:42,380
And to do this, we need to increase the width and height.

164
00:10:42,920 --> 00:10:47,060
Therefore, I'm going to say here, width 100%.

165
00:10:47,990 --> 00:10:52,130
And the height, height is also 100%.

166
00:10:52,910 --> 00:11:02,120
So this means that this black area will take the complete will take the same exact size and they will

167
00:11:02,120 --> 00:11:04,520
take the same exact height and width as the image.

168
00:11:05,000 --> 00:11:06,050
Now, let me refresh.

169
00:11:06,470 --> 00:11:07,940
And as you can see, it's going to look like this.

170
00:11:08,600 --> 00:11:11,570
But let's decrease the the opacity a little.

171
00:11:11,570 --> 00:11:13,640
I'm going to say opacity 7.7.

172
00:11:14,910 --> 00:11:16,080
So this is the opacity.

173
00:11:17,790 --> 00:11:21,900
Opacity is a little you can decrease the opacity even 2.5.

174
00:11:25,560 --> 00:11:27,960
So as you can see, you can decrease and increase the capacity.

175
00:11:28,980 --> 00:11:35,640
And also we need to move the text and the button to be displayed in the in the middle.

176
00:11:37,240 --> 00:11:44,770
So in order to do that, we have to we have to change the limit.

177
00:11:44,920 --> 00:11:46,210
We are showing you what we can do.

178
00:11:46,630 --> 00:11:48,850
We have to change the details.

179
00:11:49,690 --> 00:11:53,170
The less we have to change the one.

180
00:11:54,460 --> 00:11:56,440
The one glass.

181
00:11:56,440 --> 00:11:57,310
This one glass.

182
00:11:57,640 --> 00:12:00,880
Because this one glass contains the baton and the text.

183
00:12:01,720 --> 00:12:09,130
Therefore, what I'm going to do here is that for the for this I'm going to say new.

184
00:12:09,730 --> 00:12:12,790
And then one and then.

185
00:12:13,810 --> 00:12:14,500
And.

186
00:12:17,020 --> 00:12:17,740
Child.

187
00:12:20,130 --> 00:12:23,580
One got details?

188
00:12:24,240 --> 00:12:25,170
What does this mean?

189
00:12:25,560 --> 00:12:28,860
This means that I'm accessing the first.

190
00:12:29,670 --> 00:12:30,660
The first one.

191
00:12:31,320 --> 00:12:33,950
The first child of the.

192
00:12:33,960 --> 00:12:34,770
Of the one.

193
00:12:34,770 --> 00:12:36,080
Which is this child.

194
00:12:36,090 --> 00:12:36,810
Which is this.

195
00:12:37,440 --> 00:12:38,550
Which is the details.

196
00:12:38,880 --> 00:12:41,600
So I'm basically accessing the details.

197
00:12:42,600 --> 00:12:45,810
The details of the first child.

198
00:12:46,740 --> 00:12:48,530
So in other words, I'm accessing this.

199
00:12:48,540 --> 00:12:50,250
I'm accessing the first details.

200
00:12:50,760 --> 00:12:55,410
So for the first details, class, which is this which is this text.

201
00:12:56,340 --> 00:13:02,850
What I'm going to do is that I'm going to change the display to explain is going to be flicks.

202
00:13:04,680 --> 00:13:05,350
Display.

203
00:13:08,110 --> 00:13:13,390
Flex and the justify content is going to be center.

204
00:13:14,020 --> 00:13:19,330
This is going to center the text and the flex flex.

205
00:13:20,840 --> 00:13:31,280
The -- reflects the -- you were going to be gone, whereas the line items is going to be

206
00:13:31,280 --> 00:13:32,870
start line items.

207
00:13:33,770 --> 00:13:36,170
A line item is going to be flexed sort.

208
00:13:37,500 --> 00:13:38,010
Alex.

209
00:13:39,800 --> 00:13:40,170
Start.

210
00:13:41,240 --> 00:13:43,250
And finally, the text.

211
00:13:44,120 --> 00:13:46,610
The text, the line is going to be start.

212
00:13:48,730 --> 00:13:56,080
Now if I can refresh that X will be displayed on the left side, in the middle, vertically in the middle,

213
00:13:56,080 --> 00:14:00,910
in terms of the of vertically, it's going to be in the middle.

214
00:14:00,910 --> 00:14:03,040
But horizontally it's going to be on the left.

215
00:14:04,360 --> 00:14:06,100
As you can see, it's going to be vertically.

216
00:14:06,880 --> 00:14:14,710
It's going to be in the middle because they said the center, the drastic content center and the the

217
00:14:14,980 --> 00:14:21,850
the aligned items, this is like start and the text line is START, which means that it's going to be

218
00:14:21,850 --> 00:14:23,020
displayed on the left side.

219
00:14:23,500 --> 00:14:28,690
And if this is not clear, you can increase the opacity here.

220
00:14:28,690 --> 00:14:31,060
The opacity could be 8.8.

221
00:14:31,480 --> 00:14:37,210
Now, if it's 8.8, it's going to be darker and the text will be displayed better.