Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,650 --> 00:00:05,593
Let's now continue to work on our meals section.
2
00:00:07,380 --> 00:00:10,630
So it's time now to format these lines here
3
00:00:10,630 --> 00:00:12,520
a little bit better.
4
00:00:12,520 --> 00:00:16,180
So making these icons here maybe orange
5
00:00:16,180 --> 00:00:18,440
and adding some space here.
6
00:00:18,440 --> 00:00:21,723
And probably also making them a little bit bigger.
7
00:00:24,810 --> 00:00:29,790
So, right now we don't have any class name here yet,
8
00:00:29,790 --> 00:00:33,460
but of course we can add a class to these ion icons,
9
00:00:33,460 --> 00:00:35,553
just like on any other element.
10
00:00:37,550 --> 00:00:39,323
So this is the meal icon.
11
00:00:44,600 --> 00:00:46,253
So let's add that here.
12
00:00:52,540 --> 00:00:54,980
And here we can format it just like before
13
00:00:54,980 --> 00:00:57,400
with height and width.
14
00:00:57,400 --> 00:01:02,400
So let's use 2.4 REM and a width of 2.4.
15
00:01:05,170 --> 00:01:06,850
And these two should be the same
16
00:01:06,850 --> 00:01:11,283
because usually these icons are drawn in a rectangular box.
17
00:01:13,050 --> 00:01:15,860
Now here, I'm not sure if we should set the stroke
18
00:01:16,780 --> 00:01:18,550
or the fill.
19
00:01:18,550 --> 00:01:20,200
So let's just start with this one
20
00:01:21,820 --> 00:01:23,853
and setting it to our color.
21
00:01:26,200 --> 00:01:30,330
And while the stroke did not really change,
22
00:01:30,330 --> 00:01:35,150
let's try fill, and that also doesn't work.
23
00:01:35,150 --> 00:01:38,030
And so let's also try color.
24
00:01:38,030 --> 00:01:39,733
And so that does the trick.
25
00:01:40,590 --> 00:01:44,010
So these icons here apparently are treated a bit
26
00:01:44,010 --> 00:01:46,030
as if they were text.
27
00:01:46,030 --> 00:01:49,500
And so this is another one that we should experiment with
28
00:01:49,500 --> 00:01:52,420
when we want to style icons like this.
29
00:01:52,420 --> 00:01:54,230
So each of these icon packs
30
00:01:54,230 --> 00:01:56,720
does in fact work a little bit differently.
31
00:01:56,720 --> 00:01:58,750
And so we always need to experiment
32
00:01:58,750 --> 00:02:01,970
with which of the properties we can style them.
33
00:02:01,970 --> 00:02:05,640
So, especially with the color, okay?
34
00:02:05,640 --> 00:02:08,350
Sometimes we even need to use font size
35
00:02:08,350 --> 00:02:12,190
to style them in terms of the size.
36
00:02:12,190 --> 00:02:14,620
And that would actually also work here.
37
00:02:14,620 --> 00:02:16,480
So if I turned off this,
38
00:02:16,480 --> 00:02:21,340
I could use font size of 2.4 REM
39
00:02:21,340 --> 00:02:24,713
and that would then make them just as big
40
00:02:24,713 --> 00:02:29,060
as they are now with hight and width, okay?
41
00:02:29,060 --> 00:02:31,150
So whenever you need to style icons,
42
00:02:31,150 --> 00:02:33,523
you need to experiment with all of these.
43
00:02:34,820 --> 00:02:38,000
But anyway, the one that worked was color.
44
00:02:38,000 --> 00:02:42,400
And so now let's vertically aligned the text with the icon
45
00:02:42,400 --> 00:02:44,810
and also add some spacing.
46
00:02:44,810 --> 00:02:49,487
And so that again is a perfect use case for flexbox, right?
47
00:02:50,480 --> 00:02:54,000
And the flex container of the icon and the text
48
00:02:54,000 --> 00:02:56,370
is of course the meal attribute.
49
00:02:56,370 --> 00:02:59,243
So the list icons, right?
50
00:03:00,150 --> 00:03:02,543
So display flex,
51
00:03:03,730 --> 00:03:07,433
then align items to align them vertically,
52
00:03:08,500 --> 00:03:13,120
center and then let's add some gap property here.
53
00:03:13,120 --> 00:03:16,470
Let's say 1.6 REM.
54
00:03:16,470 --> 00:03:21,230
Okay, so that's starting to look quite nicer.
55
00:03:21,230 --> 00:03:23,780
Now here, let's make this a bit more interesting
56
00:03:23,780 --> 00:03:25,830
and add some visual hierarchy
57
00:03:25,830 --> 00:03:29,263
by giving these values here some more font width,
58
00:03:30,100 --> 00:03:32,330
so these three numbers.
59
00:03:32,330 --> 00:03:35,813
So I'm simply going to wrap them into a strong element.
60
00:03:39,210 --> 00:03:43,530
So strong, and let's actually type the number here again,
61
00:03:43,530 --> 00:03:44,653
and delete this one.
62
00:03:50,470 --> 00:03:52,010
Just like this.
63
00:03:52,010 --> 00:03:54,520
Oh, and here the value disappeared.
64
00:03:54,520 --> 00:03:56,163
I think it was 74.
65
00:03:57,720 --> 00:03:59,973
And then here the same.
66
00:04:07,020 --> 00:04:10,060
Okay, however, strong probably looks
67
00:04:10,060 --> 00:04:12,590
a bit too strong, right?
68
00:04:12,590 --> 00:04:14,820
So I think that doesn't look so nice
69
00:04:14,820 --> 00:04:18,650
because the font width here is way too bold.
70
00:04:18,650 --> 00:04:20,970
So let's take it down a little bit
71
00:04:20,970 --> 00:04:23,230
and let's actually do that by default
72
00:04:23,230 --> 00:04:25,840
whenever we use the strong tag.
73
00:04:25,840 --> 00:04:28,580
Now this is something that I do all the time,
74
00:04:28,580 --> 00:04:32,780
which is to basically just redefine the strong element
75
00:04:32,780 --> 00:04:37,780
to make it with just a font weight of 500 instead of 700,
76
00:04:39,350 --> 00:04:41,863
which is probably the default, okay?
77
00:04:44,560 --> 00:04:46,900
So of course, that goes into the general
78
00:04:46,900 --> 00:04:48,930
and not the style CSS,
79
00:04:48,930 --> 00:04:53,210
which is just for the individual sections and components.
80
00:04:53,210 --> 00:04:56,113
And so that looks a lot better actually.
81
00:04:57,070 --> 00:05:00,840
Next up let's format this tag here.
82
00:05:00,840 --> 00:05:03,313
So that doesn't look quite nice yet.
83
00:05:04,230 --> 00:05:05,973
And so where is that?
84
00:05:07,300 --> 00:05:10,103
Ah, it's right here with the tag class.
85
00:05:11,680 --> 00:05:15,370
So, I like to follow the same order
86
00:05:19,090 --> 00:05:21,163
as the elements appear in HTML.
87
00:05:22,360 --> 00:05:24,890
So let's first set it to an inline block
88
00:05:24,890 --> 00:05:27,253
so that we can apply some paddings to it.
89
00:05:30,090 --> 00:05:32,910
So probably some very small padding
90
00:05:32,910 --> 00:05:37,533
and so, and actually that's in the other file.
91
00:05:38,550 --> 00:05:41,203
So let's see what we have for small values.
92
00:05:42,180 --> 00:05:44,480
So we have 2, 4, 8,
93
00:05:44,480 --> 00:05:47,513
so let's maybe experiment with four and eight pixels.
94
00:05:48,750 --> 00:05:53,613
So four pixels or actually 0.4 REM
95
00:05:54,660 --> 00:05:58,023
and 0.8 REM on the sides.
96
00:06:00,400 --> 00:06:02,550
That's also decreased the font size to 1.2.
97
00:06:06,120 --> 00:06:09,160
Make the text uppercase.
98
00:06:09,160 --> 00:06:12,310
So text transform uppercase.
99
00:06:12,310 --> 00:06:15,770
And so these are all like the typical formattings
100
00:06:15,770 --> 00:06:17,650
of the tag element.
101
00:06:17,650 --> 00:06:19,723
So like a small tag component,
102
00:06:21,000 --> 00:06:24,790
and of course we also need some background color.
103
00:06:24,790 --> 00:06:26,410
Now this is vegetarian,
104
00:06:26,410 --> 00:06:30,170
and so I would say we need some green color there.
105
00:06:30,170 --> 00:06:33,363
So actually let's get that here from open color.
106
00:06:34,750 --> 00:06:39,750
So let's just click on green here, and maybe this one.
107
00:06:42,630 --> 00:06:44,103
So this is nice and light.
108
00:06:46,650 --> 00:06:48,113
So let's try that.
109
00:06:49,230 --> 00:06:53,117
So background color like this,
110
00:06:56,700 --> 00:06:58,040
and since we're at it
111
00:06:58,040 --> 00:07:01,780
let's make also the text color a darker
112
00:07:01,780 --> 00:07:03,620
because on a background color
113
00:07:03,620 --> 00:07:05,513
usually we need some darker text.
114
00:07:06,930 --> 00:07:09,750
All right, so looking good already.
115
00:07:09,750 --> 00:07:11,780
We just need to give it some spacing
116
00:07:11,780 --> 00:07:15,020
and I also want to make the borders round.
117
00:07:15,020 --> 00:07:17,710
So that's really one of the defining characteristics
118
00:07:17,710 --> 00:07:19,373
of tags, usually.
119
00:07:20,430 --> 00:07:22,313
Now, as for the spacing,
120
00:07:22,313 --> 00:07:24,740
remember how I said in the beginning
121
00:07:24,740 --> 00:07:26,100
that for the next meal,
122
00:07:26,100 --> 00:07:30,040
we will actually have two categories, so two tags.
123
00:07:30,040 --> 00:07:32,450
And so we should probably wrap those two
124
00:07:32,450 --> 00:07:34,490
inside of some parent element
125
00:07:34,490 --> 00:07:37,673
onto which we will then add some margin bottom, okay?
126
00:07:40,280 --> 00:07:42,423
But first let's add that border radius.
127
00:07:44,100 --> 00:07:47,570
And here, remember how we can not use 50%
128
00:07:47,570 --> 00:07:50,750
because that will make it look like this.
129
00:07:50,750 --> 00:07:54,090
But instead we just use some very large value.
130
00:07:54,090 --> 00:07:55,500
It doesn't matter.
131
00:07:55,500 --> 00:07:59,053
We can even use pixels because this value is just arbitrary.
132
00:08:00,360 --> 00:08:02,783
So now it has the shape that we want.
133
00:08:05,580 --> 00:08:08,790
Okay, let's just wrap it into a div now
134
00:08:10,600 --> 00:08:14,823
with the class of meal tags.
135
00:08:17,900 --> 00:08:20,623
And so this meal tags will then have some margin,
136
00:08:28,860 --> 00:08:30,373
maybe 12 pixels.
137
00:08:32,950 --> 00:08:37,540
And yeah, that looks nice, except that now, of course,
138
00:08:37,540 --> 00:08:40,050
we also need some spacing inside.
139
00:08:40,050 --> 00:08:43,710
But so first let's now style the cards itself
140
00:08:43,710 --> 00:08:46,313
like to make it actually look like a card.
141
00:08:47,240 --> 00:08:49,960
Now there are multiple ways in which we can do that.
142
00:08:49,960 --> 00:08:52,760
For example, giving it some background color.
143
00:08:52,760 --> 00:08:56,450
But usually I like to keep the cards white.
144
00:08:56,450 --> 00:08:59,290
Now, since we're also on a white background here,
145
00:08:59,290 --> 00:09:01,210
a nice effect that we can use
146
00:09:01,210 --> 00:09:04,040
is to give it a very subtle shadow.
147
00:09:04,040 --> 00:09:06,950
And so that shadow will then distinguish the card element
148
00:09:06,950 --> 00:09:09,030
from the rest of the page.
149
00:09:09,030 --> 00:09:11,843
So from outside of the section, okay?
150
00:09:14,300 --> 00:09:17,040
So let me demonstrate that to you.
151
00:09:17,040 --> 00:09:19,593
And so now I actually need to select the meal,
152
00:09:20,480 --> 00:09:21,893
which we hadn't done yet.
153
00:09:25,530 --> 00:09:28,293
So remember, that this box shadow.
154
00:09:29,300 --> 00:09:31,980
Then here horizontally, as always,
155
00:09:31,980 --> 00:09:35,383
we want no shadow, but only vertically.
156
00:09:36,250 --> 00:09:38,500
So let's use one of our values,
157
00:09:38,500 --> 00:09:42,480
which is 24 pixels, and then as for the blur,
158
00:09:42,480 --> 00:09:47,360
I like to use double so we're 48 pixels.
159
00:09:47,360 --> 00:09:50,003
Or actually REM, and here the same.
160
00:09:51,560 --> 00:09:54,193
All right, and then as always,
161
00:09:55,330 --> 00:09:58,883
we use the RGBA when we want some transparency.
162
00:09:59,750 --> 00:10:02,350
So make it black by giving it zero
163
00:10:02,350 --> 00:10:07,350
and then here, some other value, like 0.1 for 10%.
164
00:10:07,750 --> 00:10:09,043
So let's check it out.
165
00:10:10,470 --> 00:10:13,100
And looking nice!
166
00:10:13,100 --> 00:10:16,320
Maybe a little bit too dark,
167
00:10:16,320 --> 00:10:18,933
so we can make it a little bit less visible.
168
00:10:20,630 --> 00:10:25,070
Let's put it at .075,
169
00:10:25,070 --> 00:10:28,423
so that's 7.5%, basically,
170
00:10:29,790 --> 00:10:33,800
And yeah, that looks a bit more subtle and I like that,
171
00:10:33,800 --> 00:10:37,170
but the corners here are of course a little bit harsh,
172
00:10:37,170 --> 00:10:39,603
so let's also round them.
173
00:10:41,860 --> 00:10:46,860
So let's again use for our border radius of nine pixel
174
00:10:46,950 --> 00:10:48,150
that we have been using.
175
00:10:51,150 --> 00:10:55,780
Right, but we could actually use a little bit more,
176
00:10:55,780 --> 00:10:59,990
so let's try like 12 pixel here
177
00:11:01,410 --> 00:11:03,600
because this component is a lot bigger
178
00:11:03,600 --> 00:11:08,523
and so then we also need more border radius, all right?
179
00:11:09,680 --> 00:11:11,640
Now here, actually I like odd numbers,
180
00:11:11,640 --> 00:11:13,900
that's why I chose nine as well.
181
00:11:13,900 --> 00:11:17,430
And so here let's use 11 and I will put that here also
182
00:11:18,920 --> 00:11:23,613
in our design decisions, okay?
183
00:11:24,560 --> 00:11:28,490
And so, yeah, there's just one thing to fix,
184
00:11:28,490 --> 00:11:30,900
which you maybe have noticed.
185
00:11:30,900 --> 00:11:33,820
And well, if you didn't, let me show you.
186
00:11:33,820 --> 00:11:37,420
So you see that here we have the rounded corners
187
00:11:37,420 --> 00:11:39,500
and here where we don't have the image,
188
00:11:39,500 --> 00:11:42,590
we can also slightly see them here on the top.
189
00:11:42,590 --> 00:11:44,670
But then here we have that image.
190
00:11:44,670 --> 00:11:48,330
And so that image is basically lying now on top
191
00:11:48,330 --> 00:11:50,240
of the rounded corners.
192
00:11:50,240 --> 00:11:52,840
So the roundness is here in the background,
193
00:11:52,840 --> 00:11:54,240
but we cannot see it
194
00:11:54,240 --> 00:11:57,590
because the image is laying on top of that.
195
00:11:57,590 --> 00:12:01,790
So it's basically overflowing this element now,
196
00:12:01,790 --> 00:12:03,920
but we can easily fix that
197
00:12:03,920 --> 00:12:07,500
by saying that we want that overflow.
198
00:12:07,500 --> 00:12:11,050
So basically whatever overflows this container
199
00:12:11,050 --> 00:12:12,193
should be hidden.
200
00:12:13,360 --> 00:12:16,020
So I think this one we hadn't used before.
201
00:12:16,020 --> 00:12:19,143
And so this is another very, very important property.
202
00:12:20,070 --> 00:12:23,400
Maybe we have used it actually in the previous project
203
00:12:24,530 --> 00:12:26,363
where we did that chair website.
204
00:12:27,560 --> 00:12:30,280
But, well, if I hadn't talked about it,
205
00:12:30,280 --> 00:12:32,440
then, yeah, this is an important one
206
00:12:32,440 --> 00:12:35,850
and that fixes it, right?
207
00:12:35,850 --> 00:12:39,660
And you see that also here, the M is kind of cutoff
208
00:12:39,660 --> 00:12:44,660
because it was actually also going out here of this corner.
209
00:12:45,250 --> 00:12:49,270
Okay, next up, let's add some padding here.
210
00:12:49,270 --> 00:12:52,240
So of course this cannot be glued to the sides
211
00:12:52,240 --> 00:12:54,150
like it is right now.
212
00:12:54,150 --> 00:12:56,050
So let's add some padding.
213
00:12:56,050 --> 00:13:00,040
And now where should we actually add that padding?
214
00:13:00,040 --> 00:13:02,473
So should we do it right here in the meal?
215
00:13:03,800 --> 00:13:08,760
So padding, let's say 4.8 REM,
216
00:13:08,760 --> 00:13:12,080
that's not really what we're going to want, right?
217
00:13:12,080 --> 00:13:13,620
Because then that padding
218
00:13:13,620 --> 00:13:17,560
also wraps outside of the image, right?
219
00:13:17,560 --> 00:13:22,200
So it's now outside this entire meal element.
220
00:13:22,200 --> 00:13:25,310
And so that's of course not what we want.
221
00:13:25,310 --> 00:13:27,880
So whenever we are designing a card like this,
222
00:13:27,880 --> 00:13:31,610
where we have an image at the top, we then need another box,
223
00:13:31,610 --> 00:13:35,863
which contains basically the rest of the written content.
224
00:13:36,730 --> 00:13:39,210
And so let's do that here.
225
00:13:39,210 --> 00:13:42,490
So basically placing all the other content
226
00:13:42,490 --> 00:13:46,660
inside of another box,
227
00:13:46,660 --> 00:13:50,283
which let's simply call it the meal content.
228
00:13:52,470 --> 00:13:56,960
Okay, let's cut this here and paste it here,
229
00:13:56,960 --> 00:13:58,083
at the very end.
230
00:13:59,880 --> 00:14:00,713
Give it a save.
231
00:14:01,590 --> 00:14:04,290
And now, of course, we want that padding
232
00:14:04,290 --> 00:14:06,823
inside of that meal content alone.
233
00:14:09,460 --> 00:14:14,460
So let's move it down there, and beautiful!
234
00:14:15,130 --> 00:14:17,403
That looks just a lot better.
235
00:14:18,760 --> 00:14:22,150
So the spacing here looks actually right, I think,
236
00:14:22,150 --> 00:14:24,300
except maybe here for the top.
237
00:14:24,300 --> 00:14:27,270
So here, I think we have a bit too much,
238
00:14:27,270 --> 00:14:29,893
so let's reduce that.
239
00:14:30,770 --> 00:14:35,770
So we can say 3.2 REM at the top
240
00:14:36,110 --> 00:14:39,703
and then 4.8 at the right, and all the other sides.
241
00:14:42,500 --> 00:14:46,110
Or alternatively, we could also have left it the way it was
242
00:14:46,110 --> 00:14:48,760
and then adding a padding top property
243
00:14:48,760 --> 00:14:50,860
and set that one to 3.2.
244
00:14:51,870 --> 00:14:53,820
So that's exactly the same thing.
245
00:14:53,820 --> 00:14:56,680
And now it looks a lot better.
246
00:14:56,680 --> 00:14:58,833
Let's actually just make this here bold.
247
00:15:00,320 --> 00:15:02,703
I'm noticing that we were kind of missing that.
248
00:15:04,910 --> 00:15:08,030
So font weight, let's say 600,
249
00:15:08,030 --> 00:15:10,330
in order not to make it too bold.
250
00:15:10,330 --> 00:15:12,260
And yeah, I think with this,
251
00:15:12,260 --> 00:15:15,470
we designed a really, really nice looking card,
252
00:15:15,470 --> 00:15:17,570
which has all the data that we want.
253
00:15:17,570 --> 00:15:21,500
And it also has some nice visual hierarchy.
254
00:15:21,500 --> 00:15:23,330
So these two pieces of content,
255
00:15:23,330 --> 00:15:25,800
I think they're more related to one another
256
00:15:25,800 --> 00:15:28,330
and so they have a bit less spacing.
257
00:15:28,330 --> 00:15:30,990
Then, here we have a lot more spacing
258
00:15:30,990 --> 00:15:34,920
between kind of this introduction and the data part.
259
00:15:34,920 --> 00:15:37,830
And then of course, between each of the data points,
260
00:15:37,830 --> 00:15:40,530
we of course also have a little bit of spacing,
261
00:15:40,530 --> 00:15:44,670
but not as much spacing as here, right?
262
00:15:44,670 --> 00:15:46,860
Then we also increased the visual hierarchy
263
00:15:46,860 --> 00:15:48,980
by making these values bold.
264
00:15:48,980 --> 00:15:52,203
And so the attention immediately jumps to those now.
265
00:15:53,050 --> 00:15:57,570
And yeah, again, I think this looks quite nice.
266
00:15:57,570 --> 00:15:59,060
And so what we can do now
267
00:15:59,060 --> 00:16:02,670
is to simply copy all of this HTML here
268
00:16:02,670 --> 00:16:05,453
and create our second card based on that.
269
00:16:07,070 --> 00:16:08,383
So let's do that.
270
00:16:09,900 --> 00:16:14,840
So grabbing this meal, all of this,
271
00:16:14,840 --> 00:16:16,783
and replace what we already had.
272
00:16:18,790 --> 00:16:23,330
And just to make sure we copied that correctly, let's see.
273
00:16:23,330 --> 00:16:27,390
And indeed there it is, great!
274
00:16:27,390 --> 00:16:30,613
So let's start replacing the content.
275
00:16:31,770 --> 00:16:34,630
So here it is now, meal number two,
276
00:16:34,630 --> 00:16:37,040
and we need to make sure that these images
277
00:16:37,040 --> 00:16:39,540
have the exact same dimensions,
278
00:16:39,540 --> 00:16:42,520
or at least the exact same aspect ratio,
279
00:16:42,520 --> 00:16:46,040
because otherwise then these two images here
280
00:16:46,040 --> 00:16:47,600
will look very awkward,
281
00:16:47,600 --> 00:16:49,890
so if they didn't have the same height.
282
00:16:49,890 --> 00:16:53,200
So if this one, for example, started only here,
283
00:16:53,200 --> 00:16:56,800
then all of the content here would also be shifted up
284
00:16:56,800 --> 00:16:59,390
and that would then look very bad.
285
00:16:59,390 --> 00:17:03,790
So if you have two cards or more with images in the top,
286
00:17:03,790 --> 00:17:07,460
make sure that they do have the exact same aspect ratio
287
00:17:07,460 --> 00:17:10,253
or the same dimensions, okay?
288
00:17:11,600 --> 00:17:14,723
But anyway, let's grab now the data for this one.
289
00:17:16,670 --> 00:17:18,763
And now this should be very, very simple.
290
00:17:19,870 --> 00:17:21,403
Just pasting it down here.
291
00:17:22,820 --> 00:17:25,113
So calories, we have now 400.
292
00:17:27,170 --> 00:17:29,923
We have a NutriScore of 92.
293
00:17:30,970 --> 00:17:33,170
So this one is probably healthier,
294
00:17:33,170 --> 00:17:35,793
which is because it is a salad, I guess.
295
00:17:37,730 --> 00:17:42,230
So actually I forgot to copy the name of it.
296
00:17:42,230 --> 00:17:44,563
So it's the avocado salad.
297
00:17:47,480 --> 00:17:48,970
So we need to replace that here
298
00:17:48,970 --> 00:17:51,763
and also in the alt text of the image.
299
00:17:53,530 --> 00:17:56,073
All right, and now finally the categories.
300
00:17:57,000 --> 00:18:00,580
So this one is vegan
301
00:18:02,520 --> 00:18:05,060
and let's just duplicate this line here
302
00:18:05,060 --> 00:18:10,060
and also Paleo, or Paleo, or whatever.
303
00:18:13,360 --> 00:18:16,587
Okay, and let's see.
304
00:18:20,890 --> 00:18:23,210
Yeah, beautiful!
305
00:18:23,210 --> 00:18:25,760
Now we should probably just change the background color
306
00:18:25,760 --> 00:18:29,070
of these two so that basically each of the categories
307
00:18:29,070 --> 00:18:31,053
has a different background color.
308
00:18:32,090 --> 00:18:34,580
All right, so in our code
309
00:18:34,580 --> 00:18:37,300
we should not have the background color
310
00:18:37,300 --> 00:18:38,680
right here in the tag,
311
00:18:38,680 --> 00:18:42,980
but instead create just like many times before,
312
00:18:42,980 --> 00:18:44,700
like a variation.
313
00:18:44,700 --> 00:18:47,880
So I'm writing tag, then dash dash,
314
00:18:47,880 --> 00:18:50,040
or basically a modification,
315
00:18:50,040 --> 00:18:53,510
which is, again, a standard that I like to use.
316
00:18:53,510 --> 00:18:56,903
And then first one is for vegetarian,
317
00:18:58,450 --> 00:19:00,650
which has this background color.
318
00:19:00,650 --> 00:19:05,623
So alt, or option down key, to move it here.
319
00:19:06,460 --> 00:19:10,560
And then let's simply duplicate this two times,
320
00:19:10,560 --> 00:19:14,963
one for vegan, and one for Paleo.
321
00:19:17,937 --> 00:19:21,733
Then let's add those here.
322
00:19:22,810 --> 00:19:26,643
So this is the tag vegetarian.
323
00:19:29,280 --> 00:19:30,680
And where are the other?
324
00:19:30,680 --> 00:19:35,680
Yeah, so tag vegan and tag Paleo.
325
00:19:39,690 --> 00:19:42,763
And now let's find two other colors for these.
326
00:19:43,700 --> 00:19:46,340
So vegan should also be green.
327
00:19:46,340 --> 00:19:49,693
So let's maybe go with this one.
328
00:19:52,110 --> 00:19:57,110
Okay, and then let's just use yellow for the other one.
329
00:20:00,230 --> 00:20:03,940
So maybe this one, or this one.
330
00:20:03,940 --> 00:20:06,483
That other one looks a bit too orange,
331
00:20:08,420 --> 00:20:11,030
but of course you can experiment around
332
00:20:11,030 --> 00:20:13,330
with that as you'd like.
333
00:20:13,330 --> 00:20:15,910
And beautiful, very nice!
334
00:20:15,910 --> 00:20:18,000
Let's just quickly add some spacing here
335
00:20:19,700 --> 00:20:23,670
and that's very simple as well, right?
336
00:20:23,670 --> 00:20:27,273
So meal tags, let's make it a flex container.
337
00:20:28,880 --> 00:20:33,750
And then simply add a gap of like just four pixels,
338
00:20:33,750 --> 00:20:36,750
like 0.4 REM.
339
00:20:36,750 --> 00:20:40,903
So a small detail, but that does look better than before.
340
00:20:42,190 --> 00:20:44,810
Nice, so that's very beautiful,
341
00:20:44,810 --> 00:20:48,650
very, really nice looking cards here, side by side.
342
00:20:48,650 --> 00:20:50,810
And so all that's left to do now
343
00:20:50,810 --> 00:20:53,730
is to create this list of diets
344
00:20:53,730 --> 00:20:55,930
and I'm leaving that for the next lecture
345
00:20:55,930 --> 00:20:59,083
so that we can now take just another quick break here.
25182
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.