Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,320 --> 00:00:03,920
So let's quickly continue formatting
2
00:00:03,920 --> 00:00:05,363
our pricing tables.
3
00:00:07,220 --> 00:00:10,820
And first of all, let's give them here a background color
4
00:00:10,820 --> 00:00:14,773
to make them stand out from the rest of the section here.
5
00:00:15,960 --> 00:00:17,260
So...
6
00:00:19,310 --> 00:00:22,733
Yeah, we hadn't even selected them yet.
7
00:00:23,900 --> 00:00:25,443
So pricing plan.
8
00:00:30,400 --> 00:00:32,030
And then the background color
9
00:00:32,030 --> 00:00:34,833
of this very light orange here.
10
00:00:35,830 --> 00:00:38,313
So basically, or very lightest tint.
11
00:00:39,960 --> 00:00:43,630
And so, yeah, so we have the color,
12
00:00:43,630 --> 00:00:46,580
but of course, there are a lot of things to fix.
13
00:00:46,580 --> 00:00:50,250
So we need some spacing here, so some padding.
14
00:00:50,250 --> 00:00:52,853
And let's also make the borders round.
15
00:00:54,020 --> 00:00:57,383
So using the same border radius as we used up here.
16
00:00:58,230 --> 00:01:01,363
So I believe that was 11 pixels.
17
00:01:04,260 --> 00:01:05,703
So border radius.
18
00:01:07,430 --> 00:01:08,683
11 pixels.
19
00:01:11,200 --> 00:01:14,047
And adding a nice big padding of 4.8 rem.
20
00:01:17,760 --> 00:01:19,283
So let's try that.
21
00:01:21,350 --> 00:01:24,740
And that is already starting to look good.
22
00:01:24,740 --> 00:01:28,370
However, there are some things that are not really good.
23
00:01:28,370 --> 00:01:30,800
And the first of all is that these columns
24
00:01:30,800 --> 00:01:34,150
are very, very wide, right?
25
00:01:34,150 --> 00:01:36,880
So they are this wide because we simply created
26
00:01:36,880 --> 00:01:39,500
a grid with two columns here.
27
00:01:39,500 --> 00:01:42,240
However, we do not want these elements here
28
00:01:42,240 --> 00:01:45,290
to fill the entire column basically.
29
00:01:45,290 --> 00:01:47,470
And that is, of course, possible.
30
00:01:47,470 --> 00:01:50,093
We can simply make them a little bit less wide.
31
00:01:50,930 --> 00:01:53,620
So right now, these elements, they occupy
32
00:01:53,620 --> 00:01:57,320
the entire grid cell because they are block level elements
33
00:01:57,320 --> 00:02:00,530
and so they will expand to 100% of width
34
00:02:00,530 --> 00:02:02,640
of the available space.
35
00:02:02,640 --> 00:02:03,700
Right.
36
00:02:03,700 --> 00:02:06,353
And we can, of course, easily see that here.
37
00:02:07,810 --> 00:02:11,570
So between these dashed lines here, as you know,
38
00:02:11,570 --> 00:02:13,450
we have the grid cells.
39
00:02:13,450 --> 00:02:16,430
So one grid cell and one grid cell.
40
00:02:16,430 --> 00:02:19,150
And so each of these elements is occupying
41
00:02:19,150 --> 00:02:21,293
by default that entire cell.
42
00:02:22,130 --> 00:02:25,470
But let's change that by making them
43
00:02:25,470 --> 00:02:26,963
a little bit less white.
44
00:02:28,720 --> 00:02:33,530
So for example, just 75% of the available width.
45
00:02:33,530 --> 00:02:36,233
And so that's how it looks like then.
46
00:02:37,860 --> 00:02:41,520
So that looks a little bit nicer, right?
47
00:02:41,520 --> 00:02:45,590
However, of course, this one should now still move here.
48
00:02:45,590 --> 00:02:48,910
So that then the entire thing is basically centered
49
00:02:48,910 --> 00:02:52,970
and so that we don't have this huge spacing between the two.
50
00:02:52,970 --> 00:02:55,710
So we still want this exact same gap.
51
00:02:55,710 --> 00:02:59,790
And so what we want to do is to place this item here
52
00:02:59,790 --> 00:03:01,380
on the right side.
53
00:03:01,380 --> 00:03:04,680
So basically, we want to align a grid item
54
00:03:04,680 --> 00:03:06,960
inside of a grid cell.
55
00:03:06,960 --> 00:03:08,810
And the way we do that is by using
56
00:03:08,810 --> 00:03:12,520
the justify items property, right?
57
00:03:12,520 --> 00:03:16,750
So I know that is way back, we learned that many,
58
00:03:16,750 --> 00:03:18,210
many hours ago.
59
00:03:18,210 --> 00:03:20,333
But now it is important again.
60
00:03:21,490 --> 00:03:23,890
So let's try that right here.
61
00:03:23,890 --> 00:03:27,550
So with align or actually justify,
62
00:03:27,550 --> 00:03:30,170
because align is vertically and justify
63
00:03:30,170 --> 00:03:32,170
is horizontally, right?
64
00:03:32,170 --> 00:03:33,950
And so here, this is clearly an issue
65
00:03:33,950 --> 00:03:35,583
of horizontal alignment.
66
00:03:36,880 --> 00:03:41,880
And so if we set justify-items and set it to end,
67
00:03:44,010 --> 00:03:48,600
then both of them would move to the right side, right?
68
00:03:48,600 --> 00:03:51,430
And so this is what we want for the first one,
69
00:03:51,430 --> 00:03:53,570
but not for the second one.
70
00:03:53,570 --> 00:03:57,950
And so instead of using justify-items on the grid container,
71
00:03:57,950 --> 00:04:01,540
we can simply do it for one grid element itself.
72
00:04:01,540 --> 00:04:05,207
So for one grid item, we can add justify-self
73
00:04:05,207 --> 00:04:06,993
and then set that to end.
74
00:04:08,240 --> 00:04:09,073
Okay.
75
00:04:09,073 --> 00:04:12,370
So again, we learned all that a little bit back,
76
00:04:12,370 --> 00:04:15,593
but if you don't remember that, that is not a big problem.
77
00:04:16,800 --> 00:04:17,633
Okay.
78
00:04:18,910 --> 00:04:23,400
So let's add another class here.
79
00:04:23,400 --> 00:04:25,650
So just to select this one and also one
80
00:04:25,650 --> 00:04:28,963
to then select the other one, which we will also need later.
81
00:04:29,950 --> 00:04:32,923
So I'm using -- for a variation again.
82
00:04:34,420 --> 00:04:35,993
So this one is the starter.
83
00:04:37,050 --> 00:04:39,823
So let's copy that here.
84
00:04:43,340 --> 00:04:46,410
And so as I just demonstrated in the dev tools,
85
00:04:46,410 --> 00:04:49,760
here we want justify-self, right?
86
00:04:49,760 --> 00:04:53,390
And then push it all the way to the end.
87
00:04:53,390 --> 00:04:57,430
And so in the end, we end up with this.
88
00:04:57,430 --> 00:05:00,730
And so this looks a lot better than what we had before.
89
00:05:00,730 --> 00:05:03,960
The columns are now at a nice width.
90
00:05:03,960 --> 00:05:06,390
So they look quite natural this way.
91
00:05:06,390 --> 00:05:08,900
And yeah, they are still centered
92
00:05:08,900 --> 00:05:12,220
and you see that this one here is aligned to the right side.
93
00:05:12,220 --> 00:05:16,163
And the first one is by default aligned to the left side.
94
00:05:17,250 --> 00:05:18,350
Right.
95
00:05:18,350 --> 00:05:20,930
So very nice, very beautiful.
96
00:05:20,930 --> 00:05:23,203
Now we just have this problem that here,
97
00:05:24,100 --> 00:05:26,560
this content broke into two lines.
98
00:05:26,560 --> 00:05:29,650
But we can fix that by making this text,
99
00:05:29,650 --> 00:05:31,263
I think, a little bit shorter.
100
00:05:32,730 --> 00:05:34,240
Right.
101
00:05:34,240 --> 00:05:36,370
So that's one of the problems.
102
00:05:36,370 --> 00:05:37,913
Let's fix that one first.
103
00:05:39,530 --> 00:05:42,580
So order times are between 11 and 9.
104
00:05:42,580 --> 00:05:47,110
So this we can abbreviate to order from 11 AM to 9 PM.
105
00:05:52,070 --> 00:05:53,940
So that's the same but shorter.
106
00:05:53,940 --> 00:05:56,350
And so that looks a lot nicer.
107
00:05:56,350 --> 00:06:00,360
But now another problem is that here, this and this one,
108
00:06:00,360 --> 00:06:02,750
they are not really aligned, right?
109
00:06:02,750 --> 00:06:04,620
So that looks quite off.
110
00:06:04,620 --> 00:06:07,210
And so one solution would be
111
00:06:07,210 --> 00:06:10,030
to somehow push this one here to the end.
112
00:06:10,030 --> 00:06:12,530
But another solution that I also like
113
00:06:12,530 --> 00:06:15,930
is to basically add another bullet point here
114
00:06:15,930 --> 00:06:18,060
and then add nothing.
115
00:06:18,060 --> 00:06:20,550
So saying that this one here is missing one
116
00:06:20,550 --> 00:06:22,903
of the features that this one has.
117
00:06:23,750 --> 00:06:27,090
So if you see, this one is quite similar to this one,
118
00:06:27,090 --> 00:06:31,040
this one to this one, and these two are actually the same.
119
00:06:31,040 --> 00:06:32,700
But then this one gets access
120
00:06:32,700 --> 00:06:35,950
to the latest recipes while this one does not.
121
00:06:35,950 --> 00:06:39,560
And so let's add another bullet point here.
122
00:06:39,560 --> 00:06:42,470
And actually using another icon.
123
00:06:42,470 --> 00:06:46,850
So instead of a check mark, we can like use a cross
124
00:06:46,850 --> 00:06:47,683
or something.
125
00:06:49,320 --> 00:06:50,823
Well, not that.
126
00:06:53,720 --> 00:06:54,720
Yeah, this one here.
127
00:06:56,180 --> 00:06:57,343
So let's copy that.
128
00:06:59,010 --> 00:07:00,933
And then going back here.
129
00:07:01,900 --> 00:07:03,630
Yeah, it's this one.
130
00:07:03,630 --> 00:07:05,193
So let's duplicate this.
131
00:07:09,350 --> 00:07:13,963
And change the icon, and then we don't need any text at all.
132
00:07:15,860 --> 00:07:18,770
So you will see that it now looks quite nice,
133
00:07:18,770 --> 00:07:21,963
simply showing basically that this one does not exist.
134
00:07:22,850 --> 00:07:26,230
Of course, we need to format it also the same way.
135
00:07:26,230 --> 00:07:28,113
So giving it the same class.
136
00:07:31,060 --> 00:07:34,080
And so now this is the effect that I was looking for.
137
00:07:34,080 --> 00:07:37,670
And so now it makes it that both of these pricing tables
138
00:07:37,670 --> 00:07:40,200
have exactly the same size.
139
00:07:40,200 --> 00:07:41,120
Nice.
140
00:07:41,120 --> 00:07:42,720
And now let's start a little bit
141
00:07:42,720 --> 00:07:44,473
about visual hierarchy here.
142
00:07:45,360 --> 00:07:49,520
So these two pricing tables, they now look exactly the same.
143
00:07:49,520 --> 00:07:52,020
But what we want our user to do
144
00:07:52,020 --> 00:07:55,870
is to basically select this one here on the right, right?
145
00:07:55,870 --> 00:07:59,530
Because, well, this one here makes the company more money.
146
00:07:59,530 --> 00:08:01,280
And so we can say that this one here
147
00:08:01,280 --> 00:08:04,650
is the best value because it actually is.
148
00:08:04,650 --> 00:08:07,960
And we can also like highlight this one here.
149
00:08:07,960 --> 00:08:09,510
And the way I'm going to do that
150
00:08:09,510 --> 00:08:13,740
is by deemphasizing this one here on the left.
151
00:08:13,740 --> 00:08:16,060
So remember that that is one of the techniques
152
00:08:16,060 --> 00:08:19,960
that we can use for creating a visual hierarchy
153
00:08:19,960 --> 00:08:22,960
between like these bigger components.
154
00:08:22,960 --> 00:08:25,170
And so that's what I'm going to do now.
155
00:08:25,170 --> 00:08:27,660
So only this one will have this background color.
156
00:08:27,660 --> 00:08:30,160
And here, I will remove it.
157
00:08:30,160 --> 00:08:31,020
So...
158
00:08:32,670 --> 00:08:37,373
Let's add a similar class name to the second one.
159
00:08:38,780 --> 00:08:42,667
So pricing-plan--complete.
160
00:08:52,280 --> 00:08:57,280
And then I will add that background-color only to this one.
161
00:08:59,425 --> 00:09:00,258
Okay.
162
00:09:02,350 --> 00:09:07,210
So this actually already creates a nice effect, right?
163
00:09:07,210 --> 00:09:10,420
We can immediately see that somehow, this is more important.
164
00:09:10,420 --> 00:09:13,310
So this draws a lot more attention.
165
00:09:13,310 --> 00:09:15,770
However, like this, I think that
166
00:09:15,770 --> 00:09:19,340
this one here feels kind of lost, right?
167
00:09:19,340 --> 00:09:23,430
So to fix that, we can just give it a small border just
168
00:09:23,430 --> 00:09:27,520
so that it doesn't look completely detached from this one
169
00:09:27,520 --> 00:09:30,890
because it's kind of lacking a structure right now.
170
00:09:30,890 --> 00:09:35,890
So if we give it back some border, then that should fix it.
171
00:09:35,890 --> 00:09:38,853
So let's add a border of two pixels,
172
00:09:41,270 --> 00:09:44,090
solid and with the exact same color.
173
00:09:44,090 --> 00:09:48,280
So just ever so subtle, just so we can see that it
174
00:09:48,280 --> 00:09:51,223
is a bit distinguished from the rest of the background.
175
00:09:52,250 --> 00:09:53,163
Okay.
176
00:09:54,550 --> 00:09:56,453
So that looks way better.
177
00:09:57,450 --> 00:10:00,460
There is just one very small problem of alignment
178
00:10:00,460 --> 00:10:04,980
that we created by adding these two pixels here as a border.
179
00:10:04,980 --> 00:10:07,460
So let me show you by scrolling down here,
180
00:10:07,460 --> 00:10:10,460
and then as these two buttons here approach the end
181
00:10:10,460 --> 00:10:12,770
of the screen, watch how this one here
182
00:10:12,770 --> 00:10:15,980
is a little bit higher up than this one.
183
00:10:15,980 --> 00:10:18,920
And so the reason for that is these two pixels
184
00:10:18,920 --> 00:10:21,240
that we added basically on top
185
00:10:21,240 --> 00:10:23,063
of the already existing padding.
186
00:10:24,890 --> 00:10:26,240
All right.
187
00:10:26,240 --> 00:10:28,210
So remember from the box model
188
00:10:28,210 --> 00:10:30,860
how these basically add up together.
189
00:10:30,860 --> 00:10:34,300
And so we need to remove these two pixels.
190
00:10:34,300 --> 00:10:35,263
So for this one.
191
00:10:36,220 --> 00:10:39,560
So actually, this padding will only apply
192
00:10:39,560 --> 00:10:42,260
to the complete pricing.
193
00:10:42,260 --> 00:10:44,950
And then this one here, to compensate,
194
00:10:44,950 --> 00:10:49,253
will have a little bit less, so 4.6 rem.
195
00:10:50,510 --> 00:10:55,140
So this is just a minor issue but now it is fixed.
196
00:10:55,140 --> 00:10:57,680
And so it's perfect now.
197
00:10:57,680 --> 00:10:59,910
Let's also emphasize a little bit here some
198
00:10:59,910 --> 00:11:01,520
of these numbers.
199
00:11:01,520 --> 00:11:04,863
So just, again, to make this one here a bit more prominent.
200
00:11:06,840 --> 00:11:08,573
So in the second one.
201
00:11:09,970 --> 00:11:12,493
Yeah, let's use our strong element.
202
00:11:14,290 --> 00:11:15,953
So two meals per day.
203
00:11:17,440 --> 00:11:19,340
Let's actually include the meals here.
204
00:11:20,381 --> 00:11:21,957
And then here order 24/7.
205
00:11:29,500 --> 00:11:31,040
All right.
206
00:11:31,040 --> 00:11:34,420
And so with this, we are almost finished here.
207
00:11:34,420 --> 00:11:36,290
And we could leave it like this,
208
00:11:36,290 --> 00:11:38,090
but I want to add something more,
209
00:11:38,090 --> 00:11:41,750
which is basically like a ribbon here saying
210
00:11:41,750 --> 00:11:44,200
that this one is the best value.
211
00:11:44,200 --> 00:11:46,770
And so this is gonna be similar to something
212
00:11:46,770 --> 00:11:50,080
that we already did before a couple of times.
213
00:11:50,080 --> 00:11:55,080
So again, basically, we will add like an element here,
214
00:11:55,210 --> 00:11:59,580
which will go like this, and then it should say best value.
215
00:11:59,580 --> 00:12:02,840
So how do you think we could do that?
216
00:12:02,840 --> 00:12:07,190
Well, one great way would be to use a before
217
00:12:07,190 --> 00:12:09,253
or an after pseudo-element.
218
00:12:10,680 --> 00:12:12,120
All right.
219
00:12:12,120 --> 00:12:13,713
So on this one.
220
00:12:17,640 --> 00:12:21,593
So let's copy that and, well, I didn't want this one.
221
00:12:24,410 --> 00:12:25,370
Right.
222
00:12:25,370 --> 00:12:30,370
And then here, the content should be best value.
223
00:12:32,100 --> 00:12:35,100
And so that should then immediately place it somewhere here.
224
00:12:35,990 --> 00:12:37,263
Yeah, so here it is.
225
00:12:38,650 --> 00:12:41,520
So nice, but let's now format it
226
00:12:41,520 --> 00:12:43,493
and place it in this corner.
227
00:12:45,060 --> 00:12:47,710
So for that, we're going to use absolute positioning.
228
00:12:51,360 --> 00:12:52,670
Absolute.
229
00:12:52,670 --> 00:12:56,610
And so for that, of course, the parent element inside
230
00:12:56,610 --> 00:13:00,760
of which it should be placed, we need to make it
231
00:13:00,760 --> 00:13:02,843
a relative positioned element.
232
00:13:06,030 --> 00:13:09,503
So this one here, let's make the text uppercase.
233
00:13:10,730 --> 00:13:12,963
So text-transform: uppercase.
234
00:13:14,810 --> 00:13:18,923
Let's increase the font size here, 1.4 rem maybe.
235
00:13:19,870 --> 00:13:22,363
And let's make it bold as well.
236
00:13:23,700 --> 00:13:25,423
And like really bold this time.
237
00:13:26,380 --> 00:13:29,310
Oh, and of course, we still need to position it here.
238
00:13:29,310 --> 00:13:34,310
And let's just start with top zero and right zero.
239
00:13:36,450 --> 00:13:37,760
All right.
240
00:13:37,760 --> 00:13:40,683
And let's give it some background color as well.
241
00:13:46,237 --> 00:13:48,143
And we could, of course, use the orange color
242
00:13:48,143 --> 00:13:49,900
that we have been using.
243
00:13:49,900 --> 00:13:53,290
But let's actually go for this yellow here.
244
00:13:53,290 --> 00:13:57,490
So this is one that we used for the text previously.
245
00:13:57,490 --> 00:13:59,613
So let's reuse that same color here.
246
00:14:01,000 --> 00:14:04,060
All right, and there it is already.
247
00:14:04,060 --> 00:14:05,843
So already nicely positioned.
248
00:14:07,090 --> 00:14:09,060
Let's maybe give it some padding
249
00:14:09,060 --> 00:14:12,703
and then we can position it exactly where we want it.
250
00:14:14,660 --> 00:14:17,620
So padding maybe eight pixels at the top
251
00:14:17,620 --> 00:14:19,650
to make it not too big.
252
00:14:19,650 --> 00:14:23,340
And then on the sides, it doesn't really matter for now.
253
00:14:23,340 --> 00:14:27,393
Let's just use 3.2 rem right here.
254
00:14:28,410 --> 00:14:32,840
And the text, I think, could be also a bit darker.
255
00:14:32,840 --> 00:14:36,083
So the contrast didn't look so nice there on the yellow.
256
00:14:37,660 --> 00:14:39,053
Yeah, that's better.
257
00:14:40,200 --> 00:14:41,360
All right.
258
00:14:41,360 --> 00:14:45,290
So remember, I said that I want it kind of to be like this.
259
00:14:45,290 --> 00:14:48,000
So we want to rotate it a little bit.
260
00:14:48,000 --> 00:14:52,680
And so for that, we can use, again, transform.
261
00:14:52,680 --> 00:14:56,190
And now, indeed, we will use the rotate
262
00:14:56,190 --> 00:14:58,240
that I had shown you before.
263
00:14:58,240 --> 00:15:00,023
So 45 degrees.
264
00:15:01,300 --> 00:15:04,993
And so that is already looking like something.
265
00:15:06,420 --> 00:15:09,400
But now to position it exactly where we want it to be,
266
00:15:09,400 --> 00:15:13,507
we need to play around like with the top
267
00:15:13,507 --> 00:15:16,603
and right values until we find the right position.
268
00:15:17,900 --> 00:15:20,090
So let's open up this one here
269
00:15:20,090 --> 00:15:23,503
and find the pseudo-element here in the HTML.
270
00:15:25,450 --> 00:15:27,860
And then let's play around, as I said,
271
00:15:27,860 --> 00:15:29,460
a little bit with these numbers.
272
00:15:31,900 --> 00:15:34,643
So let's say maybe we start at 5%.
273
00:15:35,703 --> 00:15:37,190
So we want to make this here actually
274
00:15:37,190 --> 00:15:42,120
also basically flexible so that when something changes here,
275
00:15:42,120 --> 00:15:46,830
then the position here stays also at the same place.
276
00:15:46,830 --> 00:15:50,530
And I'm using percentages here because that's just usually
277
00:15:50,530 --> 00:15:53,573
the best choice when we're building a flexible layout.
278
00:15:54,960 --> 00:15:58,313
So on the right, let's also like say 5%.
279
00:15:59,360 --> 00:16:01,730
Or actually, that must be minus.
280
00:16:01,730 --> 00:16:03,283
Man, that's not really enough.
281
00:16:04,850 --> 00:16:07,173
So let's go a bit down.
282
00:16:08,310 --> 00:16:09,530
Okay.
283
00:16:09,530 --> 00:16:11,160
Let's maybe give it some more space here,
284
00:16:11,160 --> 00:16:13,570
actually, like this.
285
00:16:13,570 --> 00:16:15,113
Or maybe like this, yeah.
286
00:16:16,660 --> 00:16:20,010
And then we need to just position it nicely.
287
00:16:20,010 --> 00:16:25,010
And yeah, I think like this, it looks okay, right?
288
00:16:25,110 --> 00:16:28,320
Now, what we need to do next is, of course,
289
00:16:28,320 --> 00:16:31,050
basically cut off these corners here.
290
00:16:31,050 --> 00:16:34,890
So these we do not want, right?
291
00:16:34,890 --> 00:16:37,513
So do you remember how we can do that?
292
00:16:38,540 --> 00:16:42,830
Well, we can simply use overflow: hidden.
293
00:16:46,040 --> 00:16:48,800
Well, actually, not on this one.
294
00:16:48,800 --> 00:16:51,490
So the overflow: hidden needs to be always
295
00:16:51,490 --> 00:16:53,450
on the parent element.
296
00:16:53,450 --> 00:16:57,883
So basically, the one on which this one here is overflowing.
297
00:16:58,740 --> 00:17:01,650
So this parent element here, this one we'll want
298
00:17:01,650 --> 00:17:05,480
to hide the content that is overflowing it.
299
00:17:05,480 --> 00:17:06,340
Okay.
300
00:17:06,340 --> 00:17:07,920
So let's add that there.
301
00:17:07,920 --> 00:17:11,190
And let's also memorize these values here.
302
00:17:11,190 --> 00:17:12,843
So six and minus seven.
303
00:17:15,740 --> 00:17:19,940
So six here and minus seven.
304
00:17:19,940 --> 00:17:21,393
Percent, of course.
305
00:17:23,030 --> 00:17:23,950
Okay.
306
00:17:23,950 --> 00:17:27,020
And now, as I was saying, it is this parent element here
307
00:17:27,020 --> 00:17:30,943
which needs the overflow: hidden.
308
00:17:32,670 --> 00:17:34,290
Okay.
309
00:17:34,290 --> 00:17:36,320
And nice.
310
00:17:36,320 --> 00:17:39,430
But still not perfect because here, of course,
311
00:17:39,430 --> 00:17:41,910
we want this to go all the way out.
312
00:17:41,910 --> 00:17:44,163
So we don't want to see any corners there.
313
00:17:45,130 --> 00:17:47,590
So we need to increase the padding here a bit,
314
00:17:47,590 --> 00:17:48,823
let's say four.
315
00:17:50,150 --> 00:17:52,250
And so that makes it then bigger,
316
00:17:52,250 --> 00:17:55,090
but it also makes it so that, yeah,
317
00:17:55,090 --> 00:17:57,593
that it changed kind of here the position again.
318
00:17:58,720 --> 00:18:02,603
So let's just add something big here, like eight rem,
319
00:18:04,790 --> 00:18:07,313
just to make sure that that doesn't happen.
320
00:18:08,620 --> 00:18:11,623
So let's play around with this a little bit here.
321
00:18:13,420 --> 00:18:16,370
And that is starting to look good,
322
00:18:16,370 --> 00:18:21,370
but to see it better, we need to turn off this one, right?
323
00:18:24,930 --> 00:18:28,000
So this is basically a lot of just playing around
324
00:18:28,000 --> 00:18:31,120
until we find the right value here.
325
00:18:31,120 --> 00:18:33,890
And yeah, this might be it, actually.
326
00:18:33,890 --> 00:18:37,430
I think this looks now as if it was centered.
327
00:18:37,430 --> 00:18:39,853
And so let's leave it like this.
328
00:18:41,120 --> 00:18:44,920
So you see that here, we cannot use like a nice flexbox
329
00:18:44,920 --> 00:18:48,230
or something like this to make it really centered.
330
00:18:48,230 --> 00:18:52,700
So this is just playing around until we find the right spot.
331
00:18:52,700 --> 00:18:54,133
So minus 18 here.
332
00:18:57,860 --> 00:19:00,333
And then down here, the padding is eight.
333
00:19:02,380 --> 00:19:07,380
So minus 18 and eight rem here.
334
00:19:08,900 --> 00:19:11,490
So now that should be fixed.
335
00:19:11,490 --> 00:19:13,853
And that does look very beautiful.
336
00:19:14,840 --> 00:19:16,540
So this definitely gives it
337
00:19:16,540 --> 00:19:19,423
another really nice visual effect right here.
338
00:19:20,320 --> 00:19:21,910
Okay.
339
00:19:21,910 --> 00:19:25,230
So this part here, I now consider it finished.
340
00:19:25,230 --> 00:19:28,550
And so let's actually very quickly just get started
341
00:19:28,550 --> 00:19:32,020
on the next part, which is the features part,
342
00:19:32,020 --> 00:19:34,990
just so I can show you something else.
343
00:19:34,990 --> 00:19:39,990
So right here, after this first grid right here,
344
00:19:43,120 --> 00:19:46,100
so we have this grid here, so container grid
345
00:19:46,100 --> 00:19:47,530
with two columns.
346
00:19:47,530 --> 00:19:52,260
But now we want another grid right after it, right?
347
00:19:52,260 --> 00:19:54,040
And that's no problem at all.
348
00:19:54,040 --> 00:19:58,183
We can simply create another similar thing to this.
349
00:20:01,590 --> 00:20:02,993
So right here.
350
00:20:06,630 --> 00:20:09,393
So div container.
351
00:20:10,450 --> 00:20:12,181
And it's a grid.
352
00:20:12,181 --> 00:20:16,300
And here, let's see how many features we have,
353
00:20:16,300 --> 00:20:17,633
but it should be four.
354
00:20:19,910 --> 00:20:24,910
So yeah, one, two, three, and four.
355
00:20:29,230 --> 00:20:34,110
And so let's just add four div elements here really fast
356
00:20:35,610 --> 00:20:36,953
called feature.
357
00:20:39,830 --> 00:20:41,380
And then just duplicating them.
358
00:20:43,810 --> 00:20:48,650
And so here, we want the one with four columns.
359
00:20:48,650 --> 00:20:51,220
And this one, I think, we already have.
360
00:20:51,220 --> 00:20:52,653
Yeah, here it is.
361
00:20:53,500 --> 00:20:56,680
So four equally sized columns.
362
00:20:56,680 --> 00:20:57,730
Okay.
363
00:20:57,730 --> 00:21:00,153
But now here is what I actually want to show you,
364
00:21:01,710 --> 00:21:05,210
which is the fact that there is now, of course,
365
00:21:05,210 --> 00:21:08,320
no spacing between these grids here.
366
00:21:08,320 --> 00:21:10,920
So this is the first time this is happening
367
00:21:10,920 --> 00:21:14,550
where we have multiple grids inside of the same section.
368
00:21:14,550 --> 00:21:17,490
But that is, of course, perfectly acceptable.
369
00:21:17,490 --> 00:21:20,060
So absolutely nothing wrong with that.
370
00:21:20,060 --> 00:21:22,620
And it should actually be really common.
371
00:21:22,620 --> 00:21:25,280
And so we need a way of working
372
00:21:25,280 --> 00:21:27,920
with that situation automatically.
373
00:21:27,920 --> 00:21:30,960
So we do not want to like manually have
374
00:21:30,960 --> 00:21:35,430
to add now some margin-bottom to this first grid.
375
00:21:35,430 --> 00:21:38,813
So instead, we basically want that to happen automatically.
376
00:21:40,180 --> 00:21:44,370
So what we can do here is to basically add
377
00:21:44,370 --> 00:21:47,933
a margin-bottom to this grid right here.
378
00:21:49,360 --> 00:21:53,610
So let's use, once again, our 9.6 rem here,
379
00:21:53,610 --> 00:21:56,010
which is kind of a standard that we have been using
380
00:21:56,010 --> 00:21:57,833
for vertical spacing.
381
00:21:58,780 --> 00:22:01,320
So let's check that out.
382
00:22:01,320 --> 00:22:04,870
And indeed, now here we have that space that we need.
383
00:22:04,870 --> 00:22:08,010
However, if we move up here, you will see
384
00:22:08,010 --> 00:22:11,263
that space being added everywhere.
385
00:22:12,880 --> 00:22:15,220
Well, here, that's actually not the case,
386
00:22:15,220 --> 00:22:17,700
but here, we set it manually, I remember.
387
00:22:17,700 --> 00:22:19,493
And so that's why it's not here.
388
00:22:20,470 --> 00:22:23,963
But in this one, it should now be there.
389
00:22:25,580 --> 00:22:28,320
So this grid now has, of course, that margin
390
00:22:28,320 --> 00:22:31,080
and then plus all this additional padding.
391
00:22:31,080 --> 00:22:35,000
So here we have way too much space because this one,
392
00:22:35,000 --> 00:22:39,070
we actually do not want this margin-bottom, right?
393
00:22:39,070 --> 00:22:41,960
Because indeed, there is only one grid here.
394
00:22:41,960 --> 00:22:43,810
And so it doesn't make sense
395
00:22:43,810 --> 00:22:45,983
that this one has a margin-bottom as well.
396
00:22:46,950 --> 00:22:50,673
So that is actually quite simple to fix.
397
00:22:52,770 --> 00:22:55,870
Because we can simply say that when a grid
398
00:22:55,870 --> 00:23:00,870
is the last child, then the margin-bottom should be zero.
399
00:23:05,220 --> 00:23:10,220
And so, well, let's fire up our inspector here again.
400
00:23:12,940 --> 00:23:15,890
And so indeed, now the margin here is gone.
401
00:23:15,890 --> 00:23:16,723
Right.
402
00:23:16,723 --> 00:23:18,790
It has a margin-bottom of zero.
403
00:23:18,790 --> 00:23:20,490
While this one here at the bottom,
404
00:23:21,430 --> 00:23:24,133
it still maintains the one that we want.
405
00:23:25,200 --> 00:23:29,255
So in the pricing section, now this grid does have
406
00:23:29,255 --> 00:23:32,443
the 9.6 rem and this one does not.
407
00:23:34,040 --> 00:23:34,950
Okay.
408
00:23:34,950 --> 00:23:37,120
So this is a new and important addition
409
00:23:37,120 --> 00:23:40,000
to our grid because this will allow us
410
00:23:40,000 --> 00:23:43,630
to basically have multiple grids inside
411
00:23:43,630 --> 00:23:44,853
of the same section.
412
00:23:46,120 --> 00:23:46,953
Okay.
413
00:23:48,010 --> 00:23:51,690
Now, we can just make this even a little bit nicer
414
00:23:51,690 --> 00:23:55,940
and using a trick that I haven't shown you before.
415
00:23:55,940 --> 00:23:57,453
So let me show it to you now.
416
00:23:58,300 --> 00:24:01,260
So there is another pseudo-class that we can use,
417
00:24:01,260 --> 00:24:03,173
which is the not.
418
00:24:05,350 --> 00:24:08,130
So here, what we're gonna say is a grid
419
00:24:08,130 --> 00:24:13,130
that is not the last child will have this margin
420
00:24:15,020 --> 00:24:15,853
and that's it.
421
00:24:17,430 --> 00:24:21,720
So we can remove it from here and we can remove all this
422
00:24:21,720 --> 00:24:24,603
and have it all in just this one line of code.
423
00:24:25,630 --> 00:24:28,490
So this probably looks a bit confusing,
424
00:24:28,490 --> 00:24:31,600
so let's analyze what we just did here.
425
00:24:31,600 --> 00:24:34,070
So before, basically by default,
426
00:24:34,070 --> 00:24:36,540
we were always adding this margin here
427
00:24:36,540 --> 00:24:38,340
on all the grid elements.
428
00:24:38,340 --> 00:24:40,860
And then after that, we selected the ones
429
00:24:40,860 --> 00:24:43,960
that were the last and removed it.
430
00:24:43,960 --> 00:24:46,310
So first, we put it everywhere
431
00:24:46,310 --> 00:24:49,380
and then we removed it on some of them.
432
00:24:49,380 --> 00:24:50,213
Right.
433
00:24:50,213 --> 00:24:52,950
But now we are doing it the other way around.
434
00:24:52,950 --> 00:24:57,923
Now we will only add it if it is not the last child, okay.
435
00:24:59,040 --> 00:25:01,130
So that is different, right?
436
00:25:01,130 --> 00:25:03,990
We will not simply add it always by default.
437
00:25:03,990 --> 00:25:08,160
Instead, we will only add this margin to the bottom if,
438
00:25:08,160 --> 00:25:13,000
again, the grid element is not the last child inside
439
00:25:13,000 --> 00:25:14,423
of its parent container.
440
00:25:15,690 --> 00:25:18,770
Okay, so I think this makes sense.
441
00:25:18,770 --> 00:25:22,330
And this code is a little bit nicer than this one.
442
00:25:22,330 --> 00:25:23,360
All right.
443
00:25:23,360 --> 00:25:27,390
And if you want to practice using this kind of code here,
444
00:25:27,390 --> 00:25:30,020
then you can go back to many, many examples
445
00:25:30,020 --> 00:25:31,920
where we did this.
446
00:25:31,920 --> 00:25:33,970
So without using the not.
447
00:25:33,970 --> 00:25:36,560
And so all there, you can replace
448
00:25:36,560 --> 00:25:41,203
what we did here using the not pseudo-class with last-child.
449
00:25:42,640 --> 00:25:45,853
Okay, so that would be good for you to practice, I think.
450
00:25:48,150 --> 00:25:51,860
And so with that, we can now build this feature section
451
00:25:51,860 --> 00:25:55,573
or this feature part here right in the next video.
32872
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.