Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,330 --> 00:00:03,400
So we're getting closer to the end
2
00:00:03,400 --> 00:00:05,590
of our Omnifood project,
3
00:00:05,590 --> 00:00:08,110
but there's still three sections to go.
4
00:00:08,110 --> 00:00:10,190
And so this next one will be
5
00:00:10,190 --> 00:00:12,613
the section on pricing and features.
6
00:00:13,960 --> 00:00:16,500
So remember how we had already decided
7
00:00:16,500 --> 00:00:18,888
that we're gonna join together the pricing
8
00:00:18,888 --> 00:00:22,620
and also the features of the Omnifood product,
9
00:00:22,620 --> 00:00:24,900
into one single section.
10
00:00:24,900 --> 00:00:27,030
And so this is the one we will build over
11
00:00:27,030 --> 00:00:29,030
the next few lectures.
12
00:00:29,030 --> 00:00:33,410
So in our content file, we had two pricing plans
13
00:00:33,410 --> 00:00:36,580
and so we will create these two pricing tables
14
00:00:36,580 --> 00:00:39,400
just like in this example, on the right side.
15
00:00:39,400 --> 00:00:42,270
So with the name of the plan at the top,
16
00:00:42,270 --> 00:00:44,500
so with this really big font size there,
17
00:00:44,500 --> 00:00:47,110
and then after that just a list of
18
00:00:47,110 --> 00:00:50,720
the features that are included in that pricing plan.
19
00:00:50,720 --> 00:00:54,910
And then finally also a call to action button below it.
20
00:00:54,910 --> 00:00:58,720
Okay? So two pricing tables site by site.
21
00:00:58,720 --> 00:01:00,760
And then after that, we will have
22
00:01:00,760 --> 00:01:04,790
the typical four columns with the other features
23
00:01:04,790 --> 00:01:07,800
that are also included in Omnifood.
24
00:01:07,800 --> 00:01:10,700
So here we will have some icon that I will want
25
00:01:10,700 --> 00:01:13,370
to enclose in like a colored shape.
26
00:01:13,370 --> 00:01:16,059
So it just like here in this other design example,
27
00:01:16,059 --> 00:01:19,803
and then below that a small text and the description.
28
00:01:21,070 --> 00:01:22,950
We're gonna start in this lecture
29
00:01:22,950 --> 00:01:26,080
and probably the next one with the pricing tables,
30
00:01:26,080 --> 00:01:29,890
and then in the end we will also build these features.
31
00:01:29,890 --> 00:01:32,493
So let's now go have some fun with that.
32
00:01:34,420 --> 00:01:39,390
And as always adding a new section here,
33
00:01:39,390 --> 00:01:43,690
with the class of section pricing.
34
00:01:47,210 --> 00:01:50,179
And as the very first thing we will want
35
00:01:50,179 --> 00:01:52,423
our typical heading here.
36
00:01:54,000 --> 00:01:57,810
So here in the testimonials, it is not the way we want,
37
00:01:57,810 --> 00:02:01,140
because remember that this section is quite different
38
00:02:01,140 --> 00:02:02,173
from the other ones.
39
00:02:03,140 --> 00:02:06,550
So instead what we want is this entire container,
40
00:02:06,550 --> 00:02:09,163
which will center the content in the viewport.
41
00:02:10,090 --> 00:02:11,173
So all of this here.
42
00:02:14,498 --> 00:02:16,760
So let's paste that here very quick.
43
00:02:17,800 --> 00:02:20,640
But we still need to get rid of this center text
44
00:02:20,640 --> 00:02:24,223
because here we do not want to center these headings.
45
00:02:25,430 --> 00:02:28,690
So this one is, pricing
46
00:02:28,690 --> 00:02:30,930
and let's see if we have some title here
47
00:02:30,930 --> 00:02:32,393
for the pricing plans.
48
00:02:34,940 --> 00:02:37,153
So maybe somewhere up here.
49
00:02:39,861 --> 00:02:42,770
Well, where is the pricing actually?
50
00:02:42,770 --> 00:02:43,713
Ah, here it is.
51
00:02:44,860 --> 00:02:47,850
So here it just says we have two pricing plans,
52
00:02:47,850 --> 00:02:51,570
but that doesn't really sound so convincing.
53
00:02:51,570 --> 00:02:54,430
So of course we want users to sign up
54
00:02:54,430 --> 00:02:56,000
for one of these plans.
55
00:02:56,000 --> 00:02:59,063
And so we should have a pretty convincing headline here.
56
00:03:00,230 --> 00:03:04,100
So I'm gonna write a headline, that basically tells users
57
00:03:04,100 --> 00:03:06,620
that Omnifood allows them to eat well,
58
00:03:06,620 --> 00:03:08,820
while still being cheap.
59
00:03:08,820 --> 00:03:11,223
Well not cheap, but not so expensive.
60
00:03:12,060 --> 00:03:13,117
So we can say,
61
00:03:13,117 --> 00:03:18,117
"Eating well without breaking the bank".
62
00:03:20,100 --> 00:03:21,260
Okay.
63
00:03:21,260 --> 00:03:24,760
And so these kinds of titles of course you ideally
64
00:03:24,760 --> 00:03:26,930
want to get them from your client.
65
00:03:26,930 --> 00:03:29,700
But if you don't, then you will just have to
66
00:03:29,700 --> 00:03:31,880
basically write them on your own.
67
00:03:31,880 --> 00:03:34,040
But then don't forget to also charge them
68
00:03:34,040 --> 00:03:35,590
something extra for doing that.
69
00:03:38,900 --> 00:03:40,680
Okay, of course you don't have to
70
00:03:40,680 --> 00:03:43,543
but I would at least try that.
71
00:03:45,660 --> 00:03:50,373
So as always, let's copy this first part here.
72
00:03:52,420 --> 00:03:55,630
So a section pricing,
73
00:03:55,630 --> 00:03:58,900
and let's give it as always the same padding here.
74
00:03:58,900 --> 00:04:01,523
And then let's already go check it out.
75
00:04:03,052 --> 00:04:05,195
And there it is.
76
00:04:05,195 --> 00:04:07,050
Nice.
77
00:04:07,050 --> 00:04:10,500
So let's now add another container,
78
00:04:10,500 --> 00:04:13,110
which we will make our grid container
79
00:04:13,110 --> 00:04:16,303
so that in there we can have both our pricing tables
80
00:04:16,303 --> 00:04:17,473
side by side.
81
00:04:21,140 --> 00:04:24,211
So I'm going to create a new container
82
00:04:24,211 --> 00:04:27,650
and here this one, I will also make it a grid
83
00:04:27,650 --> 00:04:29,483
and a grid of two columns.
84
00:04:30,430 --> 00:04:33,390
So, grid two cols.
85
00:04:38,413 --> 00:04:39,320
Okay.
86
00:04:39,320 --> 00:04:42,257
So let's call each of them a "pricing plan".
87
00:04:48,120 --> 00:04:50,070
And then let's just duplicate this here
88
00:04:51,043 --> 00:04:53,800
to plan one and plan two.
89
00:04:53,800 --> 00:04:55,400
And then let's see if they are
90
00:04:55,400 --> 00:04:57,650 line:15%
all already nicely side-by-side.
91
00:04:57,650 --> 00:05:01,103 line:15%
And of course they are, thanks to our reusable grid.
92
00:05:02,700 --> 00:05:03,820
Okay.
93
00:05:03,820 --> 00:05:06,303
And now let's start filling each of them up.
94
00:05:07,260 --> 00:05:09,063
So let's get our content here.
95
00:05:10,670 --> 00:05:12,520
So we have this sentence here,
96
00:05:12,520 --> 00:05:16,850
that we could probably place after these pricing plans.
97
00:05:16,850 --> 00:05:21,170
And that then here we have the plans themselves.
98
00:05:21,170 --> 00:05:23,020
So let's just get the first one here.
99
00:05:26,330 --> 00:05:28,347
So let's place that somewhere down here,
100
00:05:29,370 --> 00:05:31,190
and okay.
101
00:05:31,190 --> 00:05:34,370
So we want to start with the name of the plan.
102
00:05:34,370 --> 00:05:35,203
Remember?
103
00:05:37,590 --> 00:05:41,153
And so let's call that one the, "plan name".
104
00:05:45,368 --> 00:05:48,833
Plan name, so this one is the starter.
105
00:05:50,720 --> 00:05:52,593
Next up we have the price.
106
00:05:53,900 --> 00:05:56,360
So let's use another paragraph here,
107
00:05:56,360 --> 00:05:59,933
but we could as well also use a spin element.
108
00:06:03,570 --> 00:06:05,283
So, plan price.
109
00:06:07,130 --> 00:06:12,130
So this one is $399 per month.
110
00:06:13,110 --> 00:06:15,370
However, here I actually don't want to write
111
00:06:15,370 --> 00:06:18,156
the per month immediately after this.
112
00:06:18,156 --> 00:06:21,420
And instead I will want to put it in a new line.
113
00:06:21,420 --> 00:06:22,620
As I will show you soon.
114
00:06:23,720 --> 00:06:28,260
However, remember how just the number itself of the price,
115
00:06:28,260 --> 00:06:30,456
so just this value here was really big in
116
00:06:30,456 --> 00:06:33,730
that example, I showed you in the beginning.
117
00:06:33,730 --> 00:06:36,150
And so here, I want to do the same thing.
118
00:06:36,150 --> 00:06:39,856
And so I'll just wrap this dollar sign here
119
00:06:39,856 --> 00:06:41,530
into its own span,
120
00:06:41,530 --> 00:06:43,973
so that we can then format it individually.
121
00:06:45,480 --> 00:06:46,313
Okay.
122
00:06:50,660 --> 00:06:54,060
Then next is where we will put that per month,
123
00:06:54,060 --> 00:06:56,350
but I will actually write a bit more.
124
00:06:56,350 --> 00:06:59,267
So, let's call this one the "plan text".
125
00:07:00,140 --> 00:07:01,000
And so here,
126
00:07:01,000 --> 00:07:05,020
something nice that I've been seeing is that some companies
127
00:07:05,020 --> 00:07:08,370
display their price basically per day.
128
00:07:08,370 --> 00:07:09,830
So in this case here,
129
00:07:09,830 --> 00:07:14,830
what users get for their $399 per month is one meal per day.
130
00:07:16,100 --> 00:07:16,933
Right?
131
00:07:16,933 --> 00:07:19,140
And so we can do a quick calculation
132
00:07:19,140 --> 00:07:23,200
of dividing 399 by
133
00:07:24,060 --> 00:07:25,820
30 days per month.
134
00:07:25,820 --> 00:07:28,210
So that's normally the average day in a month.
135
00:07:28,210 --> 00:07:30,920
And so we can now say that, this is
136
00:07:30,920 --> 00:07:33,970
basically just $13 per meal.
137
00:07:33,970 --> 00:07:34,803
Right?
138
00:07:34,803 --> 00:07:36,403
And so that's not too bad.
139
00:07:37,690 --> 00:07:39,500
So that sounds good for the user,
140
00:07:39,500 --> 00:07:41,633
and so we can write that right here.
141
00:07:42,754 --> 00:07:46,720
So per month, just to make it really clear,
142
00:07:46,720 --> 00:07:49,500
and then, that's just
143
00:07:51,207 --> 00:07:53,623
$13 per meal.
144
00:07:56,670 --> 00:07:58,200
Right?
145
00:07:58,200 --> 00:08:02,500
Then next we have basically here, this list of features.
146
00:08:02,500 --> 00:08:06,500
Now we already kind of have something like this on our page.
147
00:08:06,500 --> 00:08:09,693
Right? We already have a list pre-built.
148
00:08:11,680 --> 00:08:15,776
So, what I mean is this list right here.
149
00:08:15,776 --> 00:08:20,210
So this is also, well in this case not a list of features,
150
00:08:20,210 --> 00:08:22,020
but it is still a list.
151
00:08:22,020 --> 00:08:25,490
And so this I think would look quite good also
152
00:08:25,490 --> 00:08:26,645
in our pricing table.
153
00:08:26,645 --> 00:08:30,893
And so what we can do is to now reuse this list.
154
00:08:32,920 --> 00:08:36,550
So let's actually go where it is defined
155
00:08:36,550 --> 00:08:37,713
which is right here.
156
00:08:38,760 --> 00:08:41,340
So here in the meals section,
157
00:08:41,340 --> 00:08:44,600
and there was actually a reason why I didn't call this here
158
00:08:44,600 --> 00:08:47,020
immediately the "meal list".
159
00:08:47,020 --> 00:08:49,970
So everything here was like meal icon, meal attribute,
160
00:08:49,970 --> 00:08:52,550
but this one I just called it, "list".
161
00:08:52,550 --> 00:08:54,840
And that is because the list is always
162
00:08:54,840 --> 00:08:58,200
a good candidate for reusability.
163
00:08:58,200 --> 00:09:00,360
And so that's what we will do now.
164
00:09:00,360 --> 00:09:02,760
So I'll just cut the code from here
165
00:09:02,760 --> 00:09:05,180
and put it here in our general file,
166
00:09:05,180 --> 00:09:08,803
just so we know that it is something reusable.
167
00:09:10,640 --> 00:09:12,933
Just here, before these helpers.
168
00:09:14,910 --> 00:09:15,743
Okay.
169
00:09:17,102 --> 00:09:19,180
And so now let's also then simply go ahead
170
00:09:19,180 --> 00:09:21,273
and copy the HTML.
171
00:09:22,700 --> 00:09:23,533
So,
172
00:09:25,960 --> 00:09:27,470
just like this.
173
00:09:27,470 --> 00:09:28,820
So I'm just copying one li,
174
00:09:29,760 --> 00:09:33,603
and then I can just duplicate it a couple of times.
175
00:09:35,460 --> 00:09:37,743
So right here after this paragraph.
176
00:09:43,590 --> 00:09:45,030
Okay.
177
00:09:45,030 --> 00:09:47,733
So this first one is one meal per day.
178
00:09:49,290 --> 00:09:51,093
So instead of vegetarian,
179
00:09:52,120 --> 00:09:55,190
and then I'm just duplicating this twice now
180
00:09:55,190 --> 00:09:57,163
using that shortcut,
181
00:09:58,020 --> 00:10:00,853
then the order times are between 11 and 9.
182
00:10:02,948 --> 00:10:05,330
Let's put that here.
183
00:10:05,330 --> 00:10:07,273
And finally delivery is free.
184
00:10:08,230 --> 00:10:11,950
So in a way these are also Omnifood features,
185
00:10:11,950 --> 00:10:15,280
but these ones are displayed right in the pricing table
186
00:10:15,280 --> 00:10:17,113
because they are really important.
187
00:10:19,040 --> 00:10:20,913
So let's see what this looks like.
188
00:10:22,470 --> 00:10:23,563
And, okay.
189
00:10:24,740 --> 00:10:28,230 line:15%
So at least now the list is already formatted,
190
00:10:28,230 --> 00:10:32,280 line:15%
while the rest of the pricing plan of course is not yet,
191
00:10:32,280 --> 00:10:34,943
but we will leave that for a little bit later.
192
00:10:36,030 --> 00:10:39,773
So that we can now actually create the second one.
193
00:10:41,000 --> 00:10:43,720
Actually there's still something missing. Remember?
194
00:10:43,720 --> 00:10:46,847
Because I also want to place a call to action button
195
00:10:46,847 --> 00:10:48,323
at the very end here.
196
00:10:49,970 --> 00:10:52,920
And actually that call to action button might be exactly
197
00:10:52,920 --> 00:10:55,670
the same as in the header.
198
00:10:55,670 --> 00:10:58,207
So the one that says, "Start eating well".
199
00:10:59,240 --> 00:11:01,963
So let's grab simply this one from here.
200
00:11:02,800 --> 00:11:05,530
And so that then will also lead the user
201
00:11:05,530 --> 00:11:07,233
to that call to action section
202
00:11:07,233 --> 00:11:09,733
that we will build a little bit later.
203
00:11:11,550 --> 00:11:15,401
So that should be here right after this ul.
204
00:11:15,401 --> 00:11:19,240
And here, of course we do not need this class,
205
00:11:19,240 --> 00:11:20,783
so no margin on the right.
206
00:11:21,620 --> 00:11:22,863
And that's it.
207
00:11:25,090 --> 00:11:26,713
Let's just check it out again.
208
00:11:28,800 --> 00:11:29,693
And, yeah.
209
00:11:30,870 --> 00:11:31,770
Nice.
210
00:11:31,770 --> 00:11:35,060
So now let's just duplicate the same thing here
211
00:11:35,060 --> 00:11:36,663
for plan number two.
212
00:11:38,770 --> 00:11:41,903
So basically copying all of this.
213
00:11:44,641 --> 00:11:46,963
Then we can just replace this entire thing,
214
00:11:48,690 --> 00:11:50,223
getting the content here.
215
00:11:57,380 --> 00:11:59,780
Let's just paste it here somewhere.
216
00:11:59,780 --> 00:12:02,197
And so this one is called the "Complete".
217
00:12:06,390 --> 00:12:07,373
So that's,
218
00:12:08,387 --> 00:12:11,700
$649 per month.
219
00:12:11,700 --> 00:12:15,263
And here we actually get two meals per day.
220
00:12:17,180 --> 00:12:19,560
So this here should be, meals.
221
00:12:19,560 --> 00:12:22,230
And so instead of getting 30 meals per month,
222
00:12:22,230 --> 00:12:24,560
we actually get 60 now.
223
00:12:24,560 --> 00:12:27,803
So let's see what that is per a meal then.
224
00:12:28,820 --> 00:12:31,860
So 6 9 4 divided by 60
225
00:12:32,710 --> 00:12:36,100
and actually that's 6 4 9.
226
00:12:36,100 --> 00:12:39,763
So that's about $11 per meal, right?
227
00:12:41,010 --> 00:12:43,920
So clearly this one here is cheaper.
228
00:12:43,920 --> 00:12:46,573
And so with this we make it immediately obvious.
229
00:12:47,760 --> 00:12:49,543
Well that it is cheaper indeed.
230
00:12:51,080 --> 00:12:56,080
So two meals per day, when we place that here.
231
00:12:56,090 --> 00:13:00,670
So two meals, this one we can order 24/7.
232
00:13:00,670 --> 00:13:02,653
So that's also an advantage.
233
00:13:04,230 --> 00:13:06,250
Delivery is free as well.
234
00:13:06,250 --> 00:13:09,580
So this one is the same, but then there is another one.
235
00:13:09,580 --> 00:13:13,060
So let's duplicate this very quick
236
00:13:13,060 --> 00:13:16,283
and get access to the latest recipes.
237
00:13:24,070 --> 00:13:25,730
Okay.
238
00:13:25,730 --> 00:13:29,023
And for some reason it keeps jumping back up.
239
00:13:30,385 --> 00:13:31,218
Okay.
240
00:13:31,218 --> 00:13:34,643
And now let's add some visual styles here to this text.
241
00:13:36,860 --> 00:13:41,343
So let's select these class names.
242
00:13:42,202 --> 00:13:45,330
So the pricing plan let's leave it for later.
243
00:13:45,330 --> 00:13:48,610
So that's more of a layout part.
244
00:13:48,610 --> 00:13:52,930
And instead, I'm going to copy these three right here.
245
00:13:52,930 --> 00:13:55,043
So the name, price, and text.
246
00:14:01,210 --> 00:14:03,859
And then again I'm using the alt or option trick
247
00:14:03,859 --> 00:14:05,913
of selecting everything.
248
00:14:05,913 --> 00:14:07,853
Then moving here to the back,
249
00:14:09,510 --> 00:14:12,470
and doing it all at the same time like this.
250
00:14:12,470 --> 00:14:13,303
Now okay.
251
00:14:14,280 --> 00:14:16,780
Now, first of all we want these three here
252
00:14:16,780 --> 00:14:20,070
to be centered inside of the plan.
253
00:14:20,070 --> 00:14:23,860
So we could now add text align center to all of them,
254
00:14:23,860 --> 00:14:27,680
but I think it would be better to actually create like
255
00:14:27,680 --> 00:14:29,460
a distinction here in the code
256
00:14:29,460 --> 00:14:32,850
between this top part of the pricing plan.
257
00:14:32,850 --> 00:14:36,343
So these three here and then the list afterwards.
258
00:14:37,250 --> 00:14:41,190
So I think that also semantically, this makes more sense.
259
00:14:41,190 --> 00:14:44,573
And so here we can use a header element.
260
00:14:46,050 --> 00:14:49,900
So basically saying that these three elements here
261
00:14:49,900 --> 00:14:51,420
are the introduction.
262
00:14:51,420 --> 00:14:54,450
So the Rd header of this component,
263
00:14:54,450 --> 00:14:55,883
so of all this content.
264
00:14:56,970 --> 00:14:59,020
So let's call this here the "plan header"
265
00:15:01,490 --> 00:15:03,696
and put that here.
266
00:15:03,696 --> 00:15:06,240
And then I will do just the same in
267
00:15:06,240 --> 00:15:07,440
the other one of course.
268
00:15:14,090 --> 00:15:14,993
Okay.
269
00:15:15,830 --> 00:15:18,840
And so now we can also select that,
270
00:15:18,840 --> 00:15:23,083
and add text align center to debt itself.
271
00:15:24,350 --> 00:15:26,100
So text align center,
272
00:15:26,100 --> 00:15:28,693
and we can then also create some space after it.
273
00:15:29,590 --> 00:15:30,860
For example, by saying
274
00:15:32,027 --> 00:15:36,137
"margin bottom of 48 pixels".
275
00:15:37,819 --> 00:15:38,652
Okay.
276
00:15:41,390 --> 00:15:44,180 line:15%
So that's already a start here.
277
00:15:44,180 --> 00:15:47,150 line:15%
And of course we are still lacking a lot
278
00:15:47,150 --> 00:15:49,653
of styling there, so let's keep going.
279
00:15:50,570 --> 00:15:52,640
So the plan name,
280
00:15:52,640 --> 00:15:55,867
I want it to be a bit similar to the subheadings.
281
00:15:55,867 --> 00:15:58,543
So what this means is,
282
00:15:59,480 --> 00:16:01,743
let's use this color here.
283
00:16:02,680 --> 00:16:05,723
So this, a little bit darker version of the orange.
284
00:16:06,940 --> 00:16:11,940
We also wants to make it a bit bold using 600 here.
285
00:16:12,156 --> 00:16:17,156
And let's give it a font size of, well let's start with 1.8.
286
00:16:20,060 --> 00:16:22,293
I want it to be uppercase as well.
287
00:16:27,300 --> 00:16:31,953
And let's even give it some letter spacing of 0.75. Okay.
288
00:16:33,560 --> 00:16:36,683
Then let's think about the price.
289
00:16:37,880 --> 00:16:41,503
So remember how here, I want to make the text really big.
290
00:16:42,790 --> 00:16:46,823
So let's check our list here of big values.
291
00:16:47,960 --> 00:16:51,400
So something like 74 or 62.
292
00:16:51,400 --> 00:16:53,093
Let's try 74.
293
00:16:54,475 --> 00:16:57,430
7.4 rem
294
00:16:57,430 --> 00:16:58,933
make it bold as well.
295
00:17:02,960 --> 00:17:05,930
And also make it darker.
296
00:17:05,930 --> 00:17:09,610
So just like all our headings that we usually have,
297
00:17:09,610 --> 00:17:11,330
even though this is not a heading,
298
00:17:11,330 --> 00:17:13,230
but it will look a little bit similar.
299
00:17:15,490 --> 00:17:18,193
Then as for the plan text,
300
00:17:19,588 --> 00:17:24,588 line:15%
let's start with our typical 1.8 rem font size,
301
00:17:25,820 --> 00:17:30,820 line:15%
and line height of also 1.8 here.
302
00:17:30,870 --> 00:17:33,975
Okay. So let's check it out.
303
00:17:33,975 --> 00:17:36,839 line:15%
And of course we still need some spacing
304
00:17:36,839 --> 00:17:41,750 line:15%
and well, in general I think the entire text here
305
00:17:41,750 --> 00:17:44,100 line:15%
is a bit too big.
306
00:17:44,100 --> 00:17:45,940 line:15%
So this text here for example,
307
00:17:45,940 --> 00:17:49,030 line:15%
is more like a supporting text.
308
00:17:49,030 --> 00:17:52,744 line:15%
And so let's make that smaller and also lighter.
309
00:17:52,744 --> 00:17:55,850 line:15%
So this one here is our default text size
310
00:17:55,850 --> 00:17:58,290 line:15%
and also the default text color.
311
00:17:58,290 --> 00:18:01,130 line:15%
So let's make this one smaller and lighter.
312
00:18:01,130 --> 00:18:03,770 line:15%
And the same for these here actually.
313
00:18:03,770 --> 00:18:07,228 line:15%
So everything is a bit too big for me. And then of course,
314
00:18:07,228 --> 00:18:11,113 line:15%
we also need to select this one and make it smaller.
315
00:18:11,950 --> 00:18:15,267
So again, just like in that design example
316
00:18:15,267 --> 00:18:16,773
I showed you in the beginning.
317
00:18:17,790 --> 00:18:21,243
So 1.6 here has also decreased the line height.
318
00:18:22,860 --> 00:18:25,308
Well right now the line is actually not breaking.
319
00:18:25,308 --> 00:18:27,830
So we cannot even see the line height,
320
00:18:27,830 --> 00:18:31,280
but later on when the page becomes smaller and there is less
321
00:18:31,280 --> 00:18:35,160
space, then the line will have probably multiple lines.
322
00:18:35,160 --> 00:18:37,313
And then the line height becomes important.
323
00:18:38,550 --> 00:18:42,280
So here let's also go to the smaller one, 6.2 rem
324
00:18:43,410 --> 00:18:45,160
and the same here.
325
00:18:45,160 --> 00:18:47,740
So we got a little bit carried away here
326
00:18:47,740 --> 00:18:49,720
with our font sizes.
327
00:18:49,720 --> 00:18:51,723
But like this, it should be better.
328
00:18:54,660 --> 00:18:58,890
Let's also add some margin to the bottom here,
329
00:18:58,890 --> 00:19:00,773
3.2 rem, let's say.
330
00:19:01,780 --> 00:19:05,083
And then also to the price itself.
331
00:19:06,800 --> 00:19:08,533
Margin bottom.
332
00:19:11,340 --> 00:19:13,240
And here I will use less spacing
333
00:19:13,240 --> 00:19:15,826
because I think the price enter text
334
00:19:15,826 --> 00:19:18,210
which kind of describes the price,
335
00:19:18,210 --> 00:19:20,160
they belong closer together
336
00:19:20,160 --> 00:19:22,590
than the plan name and the price.
337
00:19:22,590 --> 00:19:25,733
So here we're once again using the law of proximity.
338
00:19:27,870 --> 00:19:30,820
Okay. And then this one here does not need any
339
00:19:30,820 --> 00:19:31,763
margin to the bottom
340
00:19:31,763 --> 00:19:35,190
because, well the margin here has already been
341
00:19:35,190 --> 00:19:38,558
taken care of up here in the margin bottom
342
00:19:38,558 --> 00:19:40,653
of the plan header.
343
00:19:41,690 --> 00:19:43,960
Now, just before we go check it out,
344
00:19:43,960 --> 00:19:48,710
we should also format that dollar sign there.
345
00:19:48,710 --> 00:19:50,783
So that is in plan price.
346
00:19:53,350 --> 00:19:55,973
And then the spend element in there,
347
00:19:58,820 --> 00:20:00,260
let's make it smaller.
348
00:20:00,260 --> 00:20:04,203
But also not like super small, let's say like 3 rem.
349
00:20:06,780 --> 00:20:09,290 line:15%
And if we don't want it to be as bold,
350
00:20:09,290 --> 00:20:12,017 line:15%
then we need to also override the font weight
351
00:20:12,017 --> 00:20:14,653 line:15%
that it is now inheriting from this one.
352
00:20:16,190 --> 00:20:19,920 line:15%
Right. So this is a child element of the plan price.
353
00:20:19,920 --> 00:20:23,340 line:15%
And so it is indeed inheriting the font weight.
354
00:20:23,340 --> 00:20:27,233 line:15%
And so let's make it a little bit less so.
355
00:20:30,360 --> 00:20:33,204 line:15%
Let's also add some margin to the right here.
356
00:20:33,204 --> 00:20:36,350 line:15%
So to get some space between the two,
357
00:20:36,350 --> 00:20:38,920 line:15%
and here eight pixels might be good.
358
00:20:38,920 --> 00:20:41,083 line:15%
So, 0.8 rem.
359
00:20:42,630 --> 00:20:47,630 line:15%
So let's check that and yeah, that looks quite nice.
360
00:20:48,180 --> 00:20:52,640 line:15%
But now I do think that the text here is actually too small,
361
00:20:52,640 --> 00:20:54,202 line:15%
the name of the price here.
362
00:20:54,202 --> 00:20:57,300 line:15%
But now after all I do actually think
363
00:20:57,300 --> 00:20:59,870 line:15%
that this text here is way too small.
364
00:20:59,870 --> 00:21:04,220 line:15%
So the name of the price is indeed quite important.
365
00:21:04,220 --> 00:21:06,083 line:15%
So let's make it bigger.
366
00:21:08,216 --> 00:21:10,793
So here, like 2 rem maybe even.
367
00:21:13,530 --> 00:21:14,363
Yeah.
368
00:21:14,363 --> 00:21:16,360 line:15%
I think that makes sense like this.
369
00:21:16,360 --> 00:21:19,320 line:15%
And now as for spacing, what we need next
370
00:21:19,320 --> 00:21:22,228 line:15%
is some space between this one and this one.
371
00:21:22,228 --> 00:21:25,913 line:15%
And I also want to center horizontally this button here.
372
00:21:27,160 --> 00:21:31,600 line:15%
So we can now add some more helper classes to this button,
373
00:21:31,600 --> 00:21:35,487 line:15%
but instead I will simply create like,
374
00:21:35,487 --> 00:21:38,843
apparent element to this one here.
375
00:21:43,670 --> 00:21:48,447
So this one let's call it the "plan sign up".
376
00:21:53,682 --> 00:21:54,515
Okay.
377
00:22:02,620 --> 00:22:05,200 line:15%
So let's text align center it,
378
00:22:05,200 --> 00:22:08,520 line:15%
and then here we can add some margin to the top.
379
00:22:08,520 --> 00:22:11,970 line:15%
So basically to create some space between the list
380
00:22:11,970 --> 00:22:13,973 line:15%
and this element here.
381
00:22:14,920 --> 00:22:18,200 line:15%
So instead of using a margin bottom on the list,
382
00:22:18,200 --> 00:22:21,837 line:15%
we simply use margin top on the element below that,
383
00:22:21,837 --> 00:22:25,710 line:15%
because remember, the list is a reusable item.
384
00:22:25,710 --> 00:22:27,213 line:15%
So a reusable component
385
00:22:27,213 --> 00:22:29,933 line:15%
and so there we do not want any margins.
386
00:22:31,630 --> 00:22:33,900
So between the header and the list
387
00:22:33,900 --> 00:22:35,153
there is a margin of 4.8,
388
00:22:36,120 --> 00:22:38,163
and so let's use the same here.
389
00:22:40,470 --> 00:22:45,163
So margin top here and now again, 4.8 rem.
390
00:22:47,155 --> 00:22:48,587 line:15%
Okay.
391
00:22:48,587 --> 00:22:51,580 line:15%
Oh and of course we need to do the same thing here on
392
00:22:51,580 --> 00:22:53,163 line:15%
the left side as well.
393
00:22:54,589 --> 00:22:56,320
So
394
00:22:57,439 --> 00:22:58,980
just copying this
395
00:23:03,890 --> 00:23:05,644
and there we go.
396
00:23:05,644 --> 00:23:07,280
Okay.
397
00:23:07,280 --> 00:23:10,580
So that is already looking like something.
398
00:23:10,580 --> 00:23:14,040
Oh, and I forgot to make this text here lighter.
399
00:23:14,040 --> 00:23:16,950
So remember how I said I was gonna make it smaller
400
00:23:16,950 --> 00:23:20,203
and lighter, but I forgot the lighter part.
401
00:23:21,700 --> 00:23:26,003
So color here and remember how we used to use 7 7 7,
402
00:23:27,610 --> 00:23:30,961
but remember that on the orange light background
403
00:23:30,961 --> 00:23:33,060
that was not accessible.
404
00:23:33,060 --> 00:23:35,420
So here I will again use this one
405
00:23:35,420 --> 00:23:37,520
because we will want to add actually some
406
00:23:37,520 --> 00:23:39,653
background color a bit later here.
407
00:23:41,040 --> 00:23:43,360
So going back that looks even better
408
00:23:43,360 --> 00:23:46,440
I think in terms of visual hierarchy.
409
00:23:46,440 --> 00:23:50,180
And yeah, this is starting to look designed,
410
00:23:50,180 --> 00:23:52,840
starting to look nice, but there are still a lot
411
00:23:52,840 --> 00:23:55,490
of things that we will want to fix here.
412
00:23:55,490 --> 00:23:58,343
And so let's actually do that in the next video.
29850
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.