Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,263 --> 00:00:02,550
welcome back
2
00:00:02,550 --> 00:00:07,550
and let's keep working on our beautiful Omni-food project.
3
00:00:07,730 --> 00:00:10,000
And if you will remember correctly,
4
00:00:10,000 --> 00:00:12,680
we actually did skip one section,
5
00:00:12,680 --> 00:00:15,200
which is the featured in section.
6
00:00:15,200 --> 00:00:17,540
So I first wanted to show you some stuff in the
7
00:00:17,540 --> 00:00:19,230
how it works section.
8
00:00:19,230 --> 00:00:22,570
And so that's why we skipped the featured in one,
9
00:00:22,570 --> 00:00:26,760
but now let's go back a step and work on that one.
10
00:00:26,760 --> 00:00:27,593
And so here,
11
00:00:27,593 --> 00:00:28,530
what I want to do,
12
00:00:28,530 --> 00:00:30,970
is basically exactly what is here
13
00:00:30,970 --> 00:00:32,890
in this design example.
14
00:00:32,890 --> 00:00:36,180
So just without the text that is there in the bottom,
15
00:00:36,180 --> 00:00:38,350
because we don't have that,
16
00:00:38,350 --> 00:00:40,660
but still what I want to do,
17
00:00:40,660 --> 00:00:42,690
is to have these logos there.
18
00:00:42,690 --> 00:00:45,610
All basically with the same height
19
00:00:45,610 --> 00:00:50,270
and then some featured in text on top of all that.
20
00:00:50,270 --> 00:00:53,940
So that shouldn't be all too hard. Right?
21
00:00:53,940 --> 00:00:55,863
And so let's get started.
22
00:00:57,480 --> 00:01:02,480
So let's add that right here before.
23
00:01:02,720 --> 00:01:04,653
Well, actually after the section hero.
24
00:01:05,850 --> 00:01:09,823
So here between the hero and how it works section,
25
00:01:10,750 --> 00:01:13,540
we will add the section that I'm going to call
26
00:01:15,590 --> 00:01:17,403
section featured.
27
00:01:19,270 --> 00:01:21,130
Okay. And once again,
28
00:01:21,130 --> 00:01:23,850
we're going to want this content to be centered in the
29
00:01:23,850 --> 00:01:25,060
Viewport.
30
00:01:25,060 --> 00:01:26,600
And so for that we have,
31
00:01:26,600 --> 00:01:29,813
or a nice container already created.
32
00:01:33,360 --> 00:01:37,930
So remember that this container gives our element basically
33
00:01:37,930 --> 00:01:41,030
a fixed width of 1200 pixels.
34
00:01:41,030 --> 00:01:44,830
It also gives it that nice padding at both sides
35
00:01:44,830 --> 00:01:47,903
and makes it also centered in the Viewport.
36
00:01:49,129 --> 00:01:49,962
Okay.
37
00:01:49,962 --> 00:01:53,650
And so now let's fill it in with first, the heading,
38
00:01:53,650 --> 00:01:55,840
and then also the five logos there.
39
00:01:55,840 --> 00:01:56,903
Side-by-side.
40
00:01:57,860 --> 00:01:59,370
Now for the heading here,
41
00:01:59,370 --> 00:02:02,633
I will actually use again an H2 element.
42
00:02:03,570 --> 00:02:05,090
So H2,
43
00:02:05,090 --> 00:02:07,430
and you might be surprised by that,
44
00:02:07,430 --> 00:02:09,320
because this H2 element
45
00:02:09,320 --> 00:02:11,630
will look completely different than all the
46
00:02:11,630 --> 00:02:15,340
secondary headings that we have on the rest of the page,
47
00:02:15,340 --> 00:02:19,260
because here we don't want a huge title, but instead,
48
00:02:19,260 --> 00:02:22,050
just like in that example that I just showed you,
49
00:02:22,050 --> 00:02:25,330
we just want like this very small, gray text,
50
00:02:25,330 --> 00:02:30,050
just basically introducing the section and saying that,
51
00:02:30,050 --> 00:02:30,890
well basically,
52
00:02:30,890 --> 00:02:34,503
Omni-food has been featured in these five publications.
53
00:02:35,640 --> 00:02:36,640
Right?
54
00:02:36,640 --> 00:02:40,500
So again, you might be surprised why I'm using the H2 here,
55
00:02:40,500 --> 00:02:42,900
but the reason is very simple.
56
00:02:42,900 --> 00:02:45,640
Because this is yet another section.
57
00:02:45,640 --> 00:02:49,050
And this heading is the main heading of that section.
58
00:02:49,050 --> 00:02:52,100
And so it should be a secondary heading.
59
00:02:52,100 --> 00:02:55,440
So we have an H1 in the very beginning.
60
00:02:55,440 --> 00:02:58,890
And then in each section we want an H2.
61
00:02:58,890 --> 00:03:01,730
So even if it looks very different from the secondary
62
00:03:01,730 --> 00:03:02,563
heading,
63
00:03:02,563 --> 00:03:05,570
the meaning should still be the same.
64
00:03:05,570 --> 00:03:06,720
Okay.
65
00:03:06,720 --> 00:03:09,480
So of course I will not call it here,
66
00:03:09,480 --> 00:03:11,310
a heading secondary.
67
00:03:11,310 --> 00:03:13,313
So I'm not going to reuse that style.
68
00:03:15,150 --> 00:03:18,393
So instead I'm going to call it heading featured in.
69
00:03:19,940 --> 00:03:20,773
Okay.
70
00:03:22,767 --> 00:03:25,203
So S featured in.
71
00:03:28,500 --> 00:03:29,333
Okay.
72
00:03:29,333 --> 00:03:30,166
Then hero.
73
00:03:30,166 --> 00:03:31,650
I'm adding like a...
74
00:03:31,650 --> 00:03:34,170
container element for the five logos
75
00:03:35,750 --> 00:03:37,703
and I'm gonna call it logos.
76
00:03:39,570 --> 00:03:40,650
And then here, finally,
77
00:03:40,650 --> 00:03:44,870
we have the five logo images.
78
00:03:44,870 --> 00:03:47,703
So that's again in IMG.
79
00:03:48,960 --> 00:03:51,540
And then here is in logos.
80
00:03:51,540 --> 00:03:55,603
And then let me start with Tech Crunch here.
81
00:04:01,400 --> 00:04:04,943
So Tech Crunch logo for the, all the text.
82
00:04:06,200 --> 00:04:07,033
Okay.
83
00:04:07,033 --> 00:04:10,300
And now I will again use that shortcut of option
84
00:04:10,300 --> 00:04:12,820
or alt shift down
85
00:04:12,820 --> 00:04:13,953
just to copy it,
86
00:04:15,540 --> 00:04:16,373
five times.
87
00:04:19,050 --> 00:04:23,023
So next, let's use Business Insider,
88
00:04:29,970 --> 00:04:31,353
then the New York Times.
89
00:04:34,770 --> 00:04:38,320
So I actually experimented here around a little bit before
90
00:04:39,680 --> 00:04:42,020
to find what looks best here.
91
00:04:42,020 --> 00:04:44,683
So the best combination or the best order,
92
00:04:46,320 --> 00:04:47,740
of these icons
93
00:04:47,740 --> 00:04:48,903
or these logos.
94
00:04:50,862 --> 00:04:54,070
And it doesn't really matter here, but, well,
95
00:04:54,070 --> 00:04:55,773
I'm a bit of a perfectionist.
96
00:04:58,090 --> 00:05:00,103
And finally the USA Today.
97
00:05:05,854 --> 00:05:06,770
Okay.
98
00:05:06,770 --> 00:05:08,120
And if we take a look now,
99
00:05:08,120 --> 00:05:09,785
then that will look pretty terrible.
100
00:05:09,785 --> 00:05:11,000
(Laughs softly).
101
00:05:11,000 --> 00:05:11,833
Yup.
102
00:05:11,833 --> 00:05:15,630
Just like expected because these logos are all huge
103
00:05:15,630 --> 00:05:18,160
and they have all these different colors,
104
00:05:18,160 --> 00:05:20,160
but nevermind.
105
00:05:20,160 --> 00:05:23,780
We can style all of that easily as always.
106
00:05:23,780 --> 00:05:26,390
And let's start at the top.
107
00:05:26,390 --> 00:05:28,693
So with the featured in heading.
108
00:05:31,750 --> 00:05:34,710
And doing that, of course,
109
00:05:34,710 --> 00:05:38,903
before the how it works section here.
110
00:05:40,380 --> 00:05:42,050
let me copy this one here,
111
00:05:42,050 --> 00:05:43,350
again to also create
112
00:05:43,350 --> 00:05:46,903
a nice visual section here in our CSS file.
113
00:05:54,270 --> 00:05:55,660
Okay the font size.
114
00:05:55,660 --> 00:05:57,703
let's make it quite small really.
115
00:05:58,790 --> 00:06:01,283
Because we will actually make it uppercase.
116
00:06:03,340 --> 00:06:05,630
So just like the subheadings,
117
00:06:05,630 --> 00:06:07,610
like we had in the previous section,
118
00:06:07,610 --> 00:06:10,470
I also want to make this one uppercase.
119
00:06:10,470 --> 00:06:12,473
Just to make it consistent with that.
120
00:06:14,330 --> 00:06:16,300
And also for consistency,
121
00:06:16,300 --> 00:06:21,300
I will add the same letter spacing of 0 75 pixel.
122
00:06:21,610 --> 00:06:22,503
Remember that.
123
00:06:23,430 --> 00:06:25,640
And also the font weight
124
00:06:27,220 --> 00:06:28,410
of 500.
125
00:06:28,410 --> 00:06:31,283
So I think that's also what we have in the subheading.
126
00:06:32,960 --> 00:06:34,960
Let's just check that out.
127
00:06:34,960 --> 00:06:37,210
And indeed here it is.
128
00:06:37,210 --> 00:06:40,303
We're just making this one even a bit smaller.
129
00:06:42,180 --> 00:06:43,640
Okay.
130
00:06:43,640 --> 00:06:44,473
Let's see.
131
00:06:45,700 --> 00:06:46,533
Okay.
132
00:06:46,533 --> 00:06:48,360
That's already looking good.
133
00:06:48,360 --> 00:06:49,320
Let's just center it.
134
00:06:49,320 --> 00:06:52,670
And then we will also adjust the color a little bit,
135
00:06:52,670 --> 00:06:55,740
but let's do that actually after fixing the logos
136
00:06:55,740 --> 00:06:58,000
so that we can find a nice gray color
137
00:06:58,000 --> 00:07:00,053
that combines well with the logos.
138
00:07:01,440 --> 00:07:04,440
So text align center,
139
00:07:04,440 --> 00:07:06,690
and since we're here,
140
00:07:06,690 --> 00:07:11,143
let's give it some margin to the bottom of 24 pixels.
141
00:07:12,580 --> 00:07:13,600
Okay.
142
00:07:13,600 --> 00:07:16,270
And we should also
143
00:07:16,270 --> 00:07:18,823
add some padding to the entire section actually.
144
00:07:23,910 --> 00:07:26,740
So padding and top and bottom,
145
00:07:26,740 --> 00:07:29,410
and I will go a lot less than
146
00:07:29,410 --> 00:07:31,540
4.8 REM
147
00:07:31,540 --> 00:07:32,970
or 4.6,
148
00:07:32,970 --> 00:07:34,610
which is what we usually had.
149
00:07:34,610 --> 00:07:37,750
So I will just use half here for now.
150
00:07:37,750 --> 00:07:39,570
So this is a very small section.
151
00:07:39,570 --> 00:07:41,973
And so we don't need all of that padding.
152
00:07:43,060 --> 00:07:43,893
Okay.
153
00:07:44,860 --> 00:07:46,960
So this looks quite okay,
154
00:07:46,960 --> 00:07:50,540
but of course now let's make the icon smaller
155
00:07:50,540 --> 00:07:54,163
or the logo smaller and also put them side by side.
156
00:07:59,580 --> 00:08:03,610
So logos is the class name of the container.
157
00:08:03,610 --> 00:08:06,200
And once again, to put them side by side,
158
00:08:06,200 --> 00:08:08,563
I will make this a flex container.
159
00:08:09,410 --> 00:08:11,020
Okay.
160
00:08:11,020 --> 00:08:12,510
Now you might say here,
161
00:08:12,510 --> 00:08:16,600
these images are already in line or in line block elements.
162
00:08:16,600 --> 00:08:19,490
So they will automatically be side by side.
163
00:08:19,490 --> 00:08:20,870
Won't they?
164
00:08:20,870 --> 00:08:23,690
And, there you actually have a point,
165
00:08:23,690 --> 00:08:25,600
but if I don't use Flexbox,
166
00:08:25,600 --> 00:08:29,170
then it will be a little bit harder to space them.
167
00:08:29,170 --> 00:08:30,003
All right.
168
00:08:30,003 --> 00:08:31,410
And so even with images,
169
00:08:31,410 --> 00:08:33,653
I always like to use a Flexbox.
170
00:08:34,510 --> 00:08:35,840
Okay.
171
00:08:35,840 --> 00:08:37,961
Now here, I'm going to use justify content,
172
00:08:37,961 --> 00:08:40,490
but let's actually do that later,
173
00:08:40,490 --> 00:08:41,740
because for now I want to
174
00:08:41,740 --> 00:08:44,253
make the lowest themselves smaller.
175
00:08:45,880 --> 00:08:50,233
So notice how I didn't add a class to each of them.
176
00:08:52,090 --> 00:08:53,720
So I'm just selecting them here
177
00:08:53,720 --> 00:08:56,223
with the descendant selector.
178
00:08:58,080 --> 00:09:01,990
So let's give them a height of 32 pixels,
179
00:09:01,990 --> 00:09:04,160
which is one of our values.
180
00:09:04,160 --> 00:09:04,993
Or let's,
181
00:09:04,993 --> 00:09:07,853
let's try 40 pixels for REM.
182
00:09:09,000 --> 00:09:09,930
And yeah,
183
00:09:09,930 --> 00:09:12,280
for now that should be enough,
184
00:09:12,280 --> 00:09:13,673
just to see what happens.
185
00:09:14,700 --> 00:09:16,763
And that's way too big, actually.
186
00:09:17,650 --> 00:09:21,483
Let's go one step down actually to 3.2.
187
00:09:22,940 --> 00:09:23,773
Okay.
188
00:09:23,773 --> 00:09:26,230
And I'm using the height here to style them and not the
189
00:09:26,230 --> 00:09:29,623
width, because that looks a lot more natural.
190
00:09:31,620 --> 00:09:34,133
Well, there is still something wrong here.
191
00:09:36,650 --> 00:09:37,603
Let's see.
192
00:09:39,180 --> 00:09:41,283
So this is not even applying.
193
00:09:42,280 --> 00:09:44,233
Oh, it's called logos.
194
00:09:45,150 --> 00:09:46,470
So that is why.
195
00:09:46,470 --> 00:09:47,923
Ah, and that's better.
196
00:09:48,960 --> 00:09:52,890
So let's again try with 4, which is what I had before,
197
00:09:52,890 --> 00:09:54,833
but still, this is a bit too big.
198
00:09:56,010 --> 00:09:59,080
So let's leave it at 3.2
199
00:09:59,080 --> 00:10:00,593
actually.
200
00:10:00,593 --> 00:10:01,640
Okay.
201
00:10:01,640 --> 00:10:03,793
And now here as for the spacing,
202
00:10:04,660 --> 00:10:06,810
let's simply use Flexbox
203
00:10:06,810 --> 00:10:09,803
to automatically figure out the spacing for us.
204
00:10:12,910 --> 00:10:14,020
So...
205
00:10:14,980 --> 00:10:17,120
justify content,
206
00:10:17,120 --> 00:10:19,330
space between.
207
00:10:19,330 --> 00:10:21,470
let's start with that one.
208
00:10:21,470 --> 00:10:22,303
And...
209
00:10:23,870 --> 00:10:24,703
yeah.
210
00:10:24,703 --> 00:10:25,536
So here we go.
211
00:10:26,850 --> 00:10:30,970
So this looks already quite nice. Doesn't it?
212
00:10:30,970 --> 00:10:33,310
However, actually I...
213
00:10:33,310 --> 00:10:35,130
visually I think that
214
00:10:35,130 --> 00:10:37,210
this content here,
215
00:10:37,210 --> 00:10:38,660
so these five logos,
216
00:10:38,660 --> 00:10:41,963
they should not be as wide as the rest of the content.
217
00:10:43,170 --> 00:10:45,280
So here they are perfectly aligned,
218
00:10:45,280 --> 00:10:47,440
and that is of course okay.
219
00:10:47,440 --> 00:10:50,200
But I want to show you another way.
220
00:10:50,200 --> 00:10:54,230
So here, instead of using a space between,
221
00:10:54,230 --> 00:10:56,393
we can also use space around.
222
00:10:57,360 --> 00:10:59,510
So let me show you the difference.
223
00:10:59,510 --> 00:11:02,160
And so, basically what it will do,
224
00:11:02,160 --> 00:11:04,810
is that now half the space
225
00:11:04,810 --> 00:11:06,720
that is here between these two,
226
00:11:06,720 --> 00:11:08,593
is now also here on the right side.
227
00:11:09,560 --> 00:11:12,773
And that becomes nicely visible like this.
228
00:11:13,770 --> 00:11:14,730
All right.
229
00:11:14,730 --> 00:11:18,730
So basically this space here is now both on the left
230
00:11:18,730 --> 00:11:20,040
and the right side.
231
00:11:20,040 --> 00:11:22,860
So it's here and then imagine it's here.
232
00:11:22,860 --> 00:11:26,530
So it ends here and then here starts another of those blogs.
233
00:11:26,530 --> 00:11:27,620
And yeah.
234
00:11:27,620 --> 00:11:29,670
All the way here to the end, where then again,
235
00:11:29,670 --> 00:11:31,350
we have the small one.
236
00:11:31,350 --> 00:11:33,310
And I think that in this example,
237
00:11:33,310 --> 00:11:36,060
it actually looks a little bit nicer.
238
00:11:36,060 --> 00:11:37,963
So having it a bit more narrow.
239
00:11:39,170 --> 00:11:44,170
Then, I think that the spacing here is a little bit too big.
240
00:11:44,260 --> 00:11:47,530
So let's fix that before we can then finally
241
00:11:47,530 --> 00:11:51,530
make these images here, all like gray.
242
00:11:51,530 --> 00:11:52,363
Okay.
243
00:11:52,363 --> 00:11:54,910
So we don't want them colored like this
244
00:11:54,910 --> 00:11:57,090
because this way they do take away
245
00:11:57,090 --> 00:11:58,823
a lot of the attention.
246
00:12:00,150 --> 00:12:01,470
And yeah.
247
00:12:01,470 --> 00:12:02,770
So we don't want that.
248
00:12:02,770 --> 00:12:05,770
So they should just take like a supporting role
249
00:12:05,770 --> 00:12:09,390
here on our page, but shouldn't be so attention grabbing.
250
00:12:09,390 --> 00:12:12,470
And also it just makes the design look messy
251
00:12:12,470 --> 00:12:15,270
if there are so many colors around.
252
00:12:15,270 --> 00:12:19,020
So instead we just want our designed to be orange
253
00:12:19,020 --> 00:12:22,450
then with all the variations, often orange, of course.
254
00:12:22,450 --> 00:12:26,390
But not with green and blue and another shade of blue
255
00:12:26,390 --> 00:12:28,000
and so on.
256
00:12:28,000 --> 00:12:29,360
Right.
257
00:12:29,360 --> 00:12:32,020
So of course we could go into some
258
00:12:32,020 --> 00:12:35,770
image manipulation program and make them all
259
00:12:35,770 --> 00:12:36,950
like gray.
260
00:12:36,950 --> 00:12:39,330
But that is not the point of this lecture
261
00:12:39,330 --> 00:12:44,080
because we can actually do this in CSS with some tricks.
262
00:12:44,080 --> 00:12:45,900
So let me show you how,
263
00:12:45,900 --> 00:12:49,423
but first we're going to reduce that spacing there.
264
00:12:50,300 --> 00:12:52,080
So...
265
00:12:52,080 --> 00:12:53,320
we have 4.8,
266
00:12:53,320 --> 00:12:55,180
which looks okay at the top,
267
00:12:55,180 --> 00:12:56,013
but at the bottom,
268
00:12:56,013 --> 00:12:57,933
let's take it down a notch.
269
00:12:58,950 --> 00:13:01,083
And then zero at the other side.
270
00:13:02,490 --> 00:13:03,323
And now here,
271
00:13:03,323 --> 00:13:06,690
let's talk about making these images gray.
272
00:13:06,690 --> 00:13:08,280
So on images,
273
00:13:08,280 --> 00:13:11,800
we have a new property that we have never seen before,
274
00:13:11,800 --> 00:13:14,500
which is called filter.
275
00:13:14,500 --> 00:13:15,420
And with filter,
276
00:13:15,420 --> 00:13:18,230
you can do all kinds of stuff.
277
00:13:18,230 --> 00:13:20,630
So if you take a look at the list
278
00:13:20,630 --> 00:13:23,340
that VS Codes suggest to you here.
279
00:13:23,340 --> 00:13:24,173
Then the main one
280
00:13:24,173 --> 00:13:27,910
that might come here to your attention is gray scale.
281
00:13:27,910 --> 00:13:29,550
So let's try that.
282
00:13:29,550 --> 00:13:31,510
And then here we need to define a value
283
00:13:31,510 --> 00:13:36,510
between zero and one or between 0% and 100%.
284
00:13:36,740 --> 00:13:39,103
And I prefer somehow to use percentages.
285
00:13:40,030 --> 00:13:43,993
And so let's do this and let's see the result.
286
00:13:45,170 --> 00:13:46,400
Okay.
287
00:13:46,400 --> 00:13:49,820
So that is indeed a lot better already.
288
00:13:49,820 --> 00:13:50,700
Right?
289
00:13:50,700 --> 00:13:54,610
But still the images are not like completely gray.
290
00:13:54,610 --> 00:13:56,092
So here for example,
291
00:13:56,092 --> 00:13:59,150
this part here is a lot lighter than this one,
292
00:13:59,150 --> 00:14:00,830
which is like almost black.
293
00:14:00,830 --> 00:14:03,020
Then here this is also quite black
294
00:14:03,020 --> 00:14:04,680
and the text here as well.
295
00:14:04,680 --> 00:14:06,610
But again, we don't want that.
296
00:14:06,610 --> 00:14:09,770
We just want everything to be gray.
297
00:14:09,770 --> 00:14:12,990
So just exactly like in the example that I showed you
298
00:14:12,990 --> 00:14:14,673
in the beginning of this lecture.
299
00:14:15,650 --> 00:14:17,040
Right?
300
00:14:17,040 --> 00:14:19,780
So I will show you how in a second,
301
00:14:19,780 --> 00:14:23,220
but let's also play around a little bit with these.
302
00:14:23,220 --> 00:14:24,370
So with these filters,
303
00:14:24,370 --> 00:14:25,973
because they are quite fun.
304
00:14:26,840 --> 00:14:29,920
So for example, we can blur images
305
00:14:29,920 --> 00:14:31,870
with different pixel values.
306
00:14:31,870 --> 00:14:33,310
And as we increase them,
307
00:14:33,310 --> 00:14:35,160
the images get more and more blurred.
308
00:14:36,400 --> 00:14:38,150
So that can be fun.
309
00:14:38,150 --> 00:14:40,803
Then we also have things like U-rotate.
310
00:14:42,370 --> 00:14:43,390
So...
311
00:14:44,710 --> 00:14:47,160
That will then like completely change the colors,
312
00:14:48,360 --> 00:14:50,200
but maybe more useful,
313
00:14:50,200 --> 00:14:54,123
we can have like change the saturation.
314
00:14:56,540 --> 00:15:00,103
So we can hyper saturate images like this if we want.
315
00:15:01,380 --> 00:15:02,890
Right?
316
00:15:02,890 --> 00:15:05,790
But the real one that we're looking for is actually
317
00:15:07,370 --> 00:15:09,933
in this example, it's brightness.
318
00:15:11,310 --> 00:15:14,890
So the brightness, here it's now like at 50%,
319
00:15:14,890 --> 00:15:17,523
but if we change it all the way to zero,
320
00:15:18,430 --> 00:15:22,170
then you see the images turn completely black.
321
00:15:22,170 --> 00:15:23,793
So now it is not like before
322
00:15:23,793 --> 00:15:27,080
where one half of the logo has one color
323
00:15:27,080 --> 00:15:29,550
and the other one has another color.
324
00:15:29,550 --> 00:15:30,670
and the same here.
325
00:15:30,670 --> 00:15:32,500
So now everything is black.
326
00:15:32,500 --> 00:15:36,010
And so this for now is perfect.
327
00:15:36,010 --> 00:15:37,610
So let's actually use that here.
328
00:15:40,060 --> 00:15:42,710
So brightness, zero.
329
00:15:42,710 --> 00:15:46,000
So this will make the image black, right.
330
00:15:46,000 --> 00:15:47,860
But we want it gray.
331
00:15:47,860 --> 00:15:51,350
So we can use the opacity property.
332
00:15:51,350 --> 00:15:55,250
And I'm not sure if we talked about this one before,
333
00:15:55,250 --> 00:15:58,630
but basically it does exactly what the name says.
334
00:15:58,630 --> 00:16:01,120
So like 100%
335
00:16:01,120 --> 00:16:03,430
is no opacity at all.
336
00:16:03,430 --> 00:16:06,263
Which makes the image just completely visible.
337
00:16:08,010 --> 00:16:12,230
So again, nothing changes now because it is at 100,
338
00:16:12,230 --> 00:16:13,460
but if we take it down
339
00:16:14,970 --> 00:16:18,840
and I will use now shift down to go in bigger steps,
340
00:16:18,840 --> 00:16:21,830
then you see it becomes all the way,
341
00:16:21,830 --> 00:16:23,913
to completely invisible.
342
00:16:25,180 --> 00:16:26,013
Right?
343
00:16:26,013 --> 00:16:29,460
And so this is now the trick to make it basically gray
344
00:16:29,460 --> 00:16:31,053
instead of black.
345
00:16:31,920 --> 00:16:34,910
So if we use like an opacity of 50%,
346
00:16:34,910 --> 00:16:37,963
I think this is a very nice gray color for us.
347
00:16:39,620 --> 00:16:40,453
Right?
348
00:16:41,660 --> 00:16:45,670
So of course we could have used, I mean, not we could have,
349
00:16:45,670 --> 00:16:48,393
but we could use this on any other element.
350
00:16:50,970 --> 00:16:53,883
So not just on images, but here it's just another image.
351
00:16:55,620 --> 00:16:59,290
So making it also 50%, well I don't know,
352
00:16:59,290 --> 00:17:01,260
opaque maybe,
353
00:17:01,260 --> 00:17:02,160
but yeah.
354
00:17:02,160 --> 00:17:04,550
Giving it an opacity of 50%
355
00:17:04,550 --> 00:17:07,450
makes it basically look fade out,
356
00:17:07,450 --> 00:17:08,283
a little bit.
357
00:17:09,580 --> 00:17:11,930
So that's 50% here.
358
00:17:11,930 --> 00:17:16,930
And again, here we could also use a 0.5 instead of 50%.
359
00:17:17,360 --> 00:17:19,473
That works exactly the same way.
360
00:17:21,680 --> 00:17:22,680
Okay.
361
00:17:22,680 --> 00:17:24,360
So that's beautiful.
362
00:17:24,360 --> 00:17:28,050
And now just this text, which is a bit too dark,
363
00:17:28,050 --> 00:17:29,143
so let's fix that.
364
00:17:30,540 --> 00:17:31,793
So right here,
365
00:17:33,390 --> 00:17:37,473
and again I'm going to go with one of these,
366
00:17:38,750 --> 00:17:40,810
where all the three numbers are the same,
367
00:17:40,810 --> 00:17:43,270
and in this case 9, 9, 9.
368
00:17:43,270 --> 00:17:45,750
And we could experiment with different ones.
369
00:17:45,750 --> 00:17:48,403
But I think that this one is the best.
370
00:17:49,580 --> 00:17:50,930
Right?
371
00:17:50,930 --> 00:17:51,763
Yeah.
372
00:17:51,763 --> 00:17:54,810
So this color is now quite similar to these ones.
373
00:17:54,810 --> 00:17:58,453
Well, maybe a bit darker would be better like 8, 8, 8.
374
00:17:59,300 --> 00:18:01,020
So again, going down
375
00:18:01,020 --> 00:18:03,140
is going into direction of black
376
00:18:03,140 --> 00:18:05,400
because black is 0, 0, 0.
377
00:18:05,400 --> 00:18:07,360
And so if we increase the values,
378
00:18:07,360 --> 00:18:08,793
the color becomes darker.
379
00:18:10,520 --> 00:18:11,780
And yeah.
380
00:18:11,780 --> 00:18:13,543
That looks perfect to me.
381
00:18:14,410 --> 00:18:19,410
And again, the color contrast here is probably not perfect.
382
00:18:19,490 --> 00:18:22,210
So I don't think that this will pass,
383
00:18:22,210 --> 00:18:25,494
but this is another one of those cases
384
00:18:25,494 --> 00:18:28,393
where it is not 100% important.
385
00:18:29,530 --> 00:18:33,090
Okay. It is actually quite close.
386
00:18:33,090 --> 00:18:35,680
So if the text was large or bold,
387
00:18:35,680 --> 00:18:37,320
then it would be okay.
388
00:18:37,320 --> 00:18:39,040
And yeah,
389
00:18:39,040 --> 00:18:41,860
well we can actually say that the text is bold,
390
00:18:41,860 --> 00:18:43,600
but it is very small.
391
00:18:43,600 --> 00:18:46,420
So we can say that it doesn't really pass.
392
00:18:46,420 --> 00:18:47,830
And so this is one more time
393
00:18:47,830 --> 00:18:50,740
where I'm actively breaking the rule here.
394
00:18:50,740 --> 00:18:52,170
But as I mentioned before,
395
00:18:52,170 --> 00:18:54,490
I don't think it's a big deal here
396
00:18:54,490 --> 00:18:57,660
because what matters are really the logos.
397
00:18:57,660 --> 00:18:58,493
Right?
398
00:18:58,493 --> 00:18:59,970
And so now they are here,
399
00:18:59,970 --> 00:19:01,270
look very nicely
400
00:19:01,270 --> 00:19:04,290
and still play just a supporting role.
401
00:19:04,290 --> 00:19:06,720
So without being too attention grabbing,
402
00:19:06,720 --> 00:19:08,410
but still showing the user
403
00:19:08,410 --> 00:19:10,690
that Omni-food has been featured
404
00:19:10,690 --> 00:19:12,420
in this big publications,
405
00:19:12,420 --> 00:19:15,170
like Tech Crunch or the New York Times.
406
00:19:15,170 --> 00:19:19,330
And so immediately this company seems a lot more legit.
407
00:19:19,330 --> 00:19:20,480
Right?
408
00:19:20,480 --> 00:19:21,350
Okay.
409
00:19:21,350 --> 00:19:22,450
But anyway,
410
00:19:22,450 --> 00:19:25,570
that's actually it for this small section.
411
00:19:25,570 --> 00:19:28,230
And so now let's move on to the next one,
412
00:19:28,230 --> 00:19:30,480
which is going to be after this one.
413
00:19:30,480 --> 00:19:33,340
So that will be or meal section.
414
00:19:33,340 --> 00:19:36,100
And that's yet another really exciting one
415
00:19:36,100 --> 00:19:37,290
because we will design
416
00:19:37,290 --> 00:19:40,120
some very, very nice looking cards there.
417
00:19:40,120 --> 00:19:43,323
And so hopefully I see you there as soon as possible.
27753
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.