Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,450 --> 00:00:03,500
Let's now continue building
2
00:00:03,500 --> 00:00:07,223
and actually finish building or hero section.
3
00:00:08,940 --> 00:00:12,120
And in this part three of building the hero,
4
00:00:12,120 --> 00:00:15,683
let's actually start by selecting a new typeface.
5
00:00:16,830 --> 00:00:20,423
So, for that we will again use Google fonts.
6
00:00:23,320 --> 00:00:25,680
And of course we need to keep in mind
7
00:00:25,680 --> 00:00:28,470
the website personality that we chose.
8
00:00:28,470 --> 00:00:31,430
And so that's why I will first show you
9
00:00:31,430 --> 00:00:35,300
the Inter typeface, which as I mentioned before
10
00:00:35,300 --> 00:00:37,993
is kind of my new favorite.
11
00:00:39,190 --> 00:00:42,790
So let's just select a couple here.
12
00:00:42,790 --> 00:00:47,473
Maybe four, five and 700 here.
13
00:00:49,797 --> 00:00:53,053
And then we just copy these two lines here.
14
00:00:55,570 --> 00:00:58,053
So we already did this a couple of times before.
15
00:00:59,180 --> 00:01:01,400
And then remember we need to paste it
16
00:01:01,400 --> 00:01:03,773
before our own style sheet.
17
00:01:05,650 --> 00:01:09,343
And now I will simply add, Inter here first.
18
00:01:12,710 --> 00:01:16,070
And then as a fallback, if Inter doesn't work somehow
19
00:01:16,070 --> 00:01:18,183
then sans-serif will be used.
20
00:01:19,260 --> 00:01:20,863
So let's check that out.
21
00:01:22,980 --> 00:01:26,150
And now indeed, if you ask me,
22
00:01:26,150 --> 00:01:29,240
it does look a lot better than before,
23
00:01:29,240 --> 00:01:32,040
however, I'm not sure if this really fits
24
00:01:32,040 --> 00:01:34,710
our personality type so well.
25
00:01:34,710 --> 00:01:38,010
I mean, if it was just the startup personality,
26
00:01:38,010 --> 00:01:41,970
then I think Inter is actually a perfect font.
27
00:01:41,970 --> 00:01:43,820
But remember that we're also trying
28
00:01:43,820 --> 00:01:46,600
to mix some of the personality traits
29
00:01:46,600 --> 00:01:50,160
of the calm personality into our design.
30
00:01:50,160 --> 00:01:51,850
And so I think that we should use
31
00:01:51,850 --> 00:01:54,870
a little bit of a rounder typeface here.
32
00:01:54,870 --> 00:01:57,640
So Inter is a little bit harsh.
33
00:01:57,640 --> 00:01:59,650
So look just at this L here.
34
00:01:59,650 --> 00:02:01,440
It's like a complete square,
35
00:02:01,440 --> 00:02:03,430
like a complete rectangle
36
00:02:03,430 --> 00:02:05,950
and there is nothing round about it.
37
00:02:05,950 --> 00:02:08,080
And so maybe this doesn't fit so nice
38
00:02:08,080 --> 00:02:10,870
with the overall message of the site,
39
00:02:10,870 --> 00:02:13,963
and of course with the website personality.
40
00:02:15,240 --> 00:02:18,563
So we will not choose Inter actually.
41
00:02:19,950 --> 00:02:24,950
So I will remove all here and instead let's go back.
42
00:02:29,020 --> 00:02:33,300
And now here of course, you could now spend a lot of time
43
00:02:33,300 --> 00:02:38,300
searching for the right typeface for this design, right.
44
00:02:38,470 --> 00:02:40,850
But I already did that work before
45
00:02:40,850 --> 00:02:44,110
because otherwise, we would lose a lot of time here
46
00:02:44,110 --> 00:02:47,270
and the perfect typeface that I think fits
47
00:02:47,270 --> 00:02:51,503
really nicely into our design, is called Rubik.
48
00:02:52,430 --> 00:02:54,333
So exactly this one here.
49
00:02:56,270 --> 00:02:57,103
Now, okay.
50
00:02:57,103 --> 00:02:59,653
And so let's now select a couple here.
51
00:03:00,630 --> 00:03:05,580
So 400 as always, then I'm actually going
52
00:03:05,580 --> 00:03:10,233
with four, five, six and 700, okay.
53
00:03:11,980 --> 00:03:14,470
And in case we wanted italic text,
54
00:03:14,470 --> 00:03:16,890
then we would actually also have to select
55
00:03:16,890 --> 00:03:21,690
these italic styles, but I think we will not need that.
56
00:03:21,690 --> 00:03:24,513
And so for now I will just leave it like this.
57
00:03:25,450 --> 00:03:28,660
And then up here we have our selected families.
58
00:03:28,660 --> 00:03:31,233
And then we can just copy this one again.
59
00:03:33,010 --> 00:03:34,550
Okay.
60
00:03:34,550 --> 00:03:39,550
Replace this one here, add in Rubik right here.
61
00:03:42,930 --> 00:03:45,330
And wait for it.
62
00:03:45,330 --> 00:03:47,090
And there we go.
63
00:03:47,090 --> 00:03:49,360
So this typeface I think is really,
64
00:03:49,360 --> 00:03:52,150
really beautiful and it's really a nice mix
65
00:03:52,150 --> 00:03:54,210
between the startup personality,
66
00:03:54,210 --> 00:03:56,760
but making it a little bit more approachable
67
00:03:56,760 --> 00:03:59,240
and looking a bit more caring
68
00:03:59,240 --> 00:04:02,000
by being basically a bit more round.
69
00:04:02,000 --> 00:04:05,070
So comparing this L here with the one we had before.
70
00:04:05,070 --> 00:04:07,880
Now it has these nicely rounded corners.
71
00:04:07,880 --> 00:04:09,830
And the same is of course true
72
00:04:09,830 --> 00:04:12,223
for all the other characters here as well.
73
00:04:13,290 --> 00:04:14,523
So really nice.
74
00:04:15,560 --> 00:04:20,380
Let's make this here actually the whole size and yeah.
75
00:04:20,380 --> 00:04:22,570
So I think this is the perfect typeface.
76
00:04:22,570 --> 00:04:26,490
But as I said, usually when I build a project like this,
77
00:04:26,490 --> 00:04:29,860
I keep experimenting throughout the entire project
78
00:04:29,860 --> 00:04:33,230
with different typefaces, even at the very end
79
00:04:33,230 --> 00:04:35,650
to see which one fits best.
80
00:04:35,650 --> 00:04:38,450
And so when we reach the end of this project,
81
00:04:38,450 --> 00:04:40,880
we might also do that again.
82
00:04:40,880 --> 00:04:43,250
Because then it's actually a perfect time
83
00:04:43,250 --> 00:04:47,060
to see the entire layout changing the way it looks
84
00:04:47,060 --> 00:04:50,200
simply by using some different typefaces.
85
00:04:50,200 --> 00:04:52,260
But for now as a work in progress,
86
00:04:52,260 --> 00:04:54,423
I think this one here is great.
87
00:04:55,260 --> 00:04:58,430
Let's just make these buttons here a little bit bolder
88
00:04:58,430 --> 00:05:02,163
now that we have that 600 font weight.
89
00:05:03,100 --> 00:05:05,913
So you see that by default we have 400.
90
00:05:06,990 --> 00:05:10,050
And then 700 is like really bold.
91
00:05:10,050 --> 00:05:14,820
But to make it just a little bit less bold, we can use 600.
92
00:05:14,820 --> 00:05:17,603
So that's what I want to use here on the button.
93
00:05:20,590 --> 00:05:25,590
So font weight now of 600 and that does look a lot nicer.
94
00:05:28,210 --> 00:05:31,320
Okay but finally, let's now build that component
95
00:05:31,320 --> 00:05:33,850
that I mentioned in the very first part
96
00:05:33,850 --> 00:05:36,810
of building this hero which is to have
97
00:05:37,760 --> 00:05:41,690
some customer photos here and then with some relevant data.
98
00:05:41,690 --> 00:05:45,190
And I thought of that because here in this description,
99
00:05:45,190 --> 00:05:47,750
we have this sentence here.
100
00:05:47,750 --> 00:05:49,720
So basically saying that Omnifood
101
00:05:49,720 --> 00:05:53,760
delivered 250 000 meals last year,
102
00:05:53,760 --> 00:05:57,550
which is kind of really impressive, right?
103
00:05:57,550 --> 00:06:01,680
And so I think this gets a bit lost here in this sentence.
104
00:06:01,680 --> 00:06:04,920
And so I thought that we could add a nice component here
105
00:06:04,920 --> 00:06:07,950
that I saw in that other inspiration.
106
00:06:07,950 --> 00:06:10,920
So in that other example, and yeah.
107
00:06:10,920 --> 00:06:12,730
I wanted to do the same thing here,
108
00:06:12,730 --> 00:06:15,103
basically based on that example.
109
00:06:16,110 --> 00:06:18,120
So let's do that.
110
00:06:18,120 --> 00:06:23,063
And if we take a look at our images, we actually do have.
111
00:06:25,829 --> 00:06:27,603
It should be here in the customers.
112
00:06:28,720 --> 00:06:30,470
So we have a lot of photos here
113
00:06:30,470 --> 00:06:33,190
of customers that we can use.
114
00:06:33,190 --> 00:06:34,403
So, six of them.
115
00:06:36,670 --> 00:06:41,670
So, let's come back here into our hero-text-box
116
00:06:42,090 --> 00:06:45,023
and basically add that here after these buttons.
117
00:06:47,010 --> 00:06:49,933
So again, using a very generic div element.
118
00:06:51,830 --> 00:06:55,683
And then I will call it delivered meals.
119
00:06:58,670 --> 00:07:00,970
Then here inside of these meals,
120
00:07:00,970 --> 00:07:04,207
we need one box for the face images
121
00:07:04,207 --> 00:07:07,150
and then another box for the text,
122
00:07:07,150 --> 00:07:11,003
or maybe just some paragraph for that text.
123
00:07:12,550 --> 00:07:16,653
But anyway let's call this one here, delivered faces.
124
00:07:21,020 --> 00:07:24,113
Okay, it could be delivered images as well.
125
00:07:25,584 --> 00:07:28,500
Let's actually call it imgs, for images
126
00:07:28,500 --> 00:07:30,520
to be a bit more consistent.
127
00:07:30,520 --> 00:07:34,770
And then of course, our image element source.
128
00:07:34,770 --> 00:07:39,413
So that's in img and here we have yet another folder.
129
00:07:39,413 --> 00:07:44,413
So img slash customers slash customer ones.
130
00:07:45,700 --> 00:07:49,623
Okay, and here, let's add some very simple alt text.
131
00:07:53,740 --> 00:07:56,463
So this is just some customer photo.
132
00:07:57,530 --> 00:07:58,363
Okay.
133
00:07:59,340 --> 00:08:02,920
Now I'm copying this and pasting it
134
00:08:02,920 --> 00:08:06,083
a couple of times because we have six of them.
135
00:08:08,220 --> 00:08:09,953
So this looks a bit strange.
136
00:08:12,230 --> 00:08:15,573
So here I don't really agree with the prettier formatting.
137
00:08:16,630 --> 00:08:17,930
Yeah. That's a lot better.
138
00:08:19,030 --> 00:08:20,300
So here you see they're called,
139
00:08:20,300 --> 00:08:22,440
one, two, three, four, five, six.
140
00:08:22,440 --> 00:08:24,630
So we just need to replace them here
141
00:08:24,630 --> 00:08:28,793
and I will leave the alt text without any change.
142
00:08:30,840 --> 00:08:35,253
Okay and then here, I want that paragraph with the text.
143
00:08:36,220 --> 00:08:38,253
So let's get that actually.
144
00:08:39,950 --> 00:08:43,293
So it's this one here, right.
145
00:08:45,440 --> 00:08:48,500
So of course actually it's also here.
146
00:08:48,500 --> 00:08:53,500
So let me just cut it from here and paste that here.
147
00:08:54,830 --> 00:08:57,883
And just to make it a little bit nicer and shorter.
148
00:08:58,970 --> 00:09:03,970
Let's just say 250 000 meals delivered last year.
149
00:09:07,800 --> 00:09:11,520
Okay. Let's check that out again.
150
00:09:11,520 --> 00:09:14,030
And indeed, that doesn't look so correct.
151
00:09:14,030 --> 00:09:15,910
And so we now need to build
152
00:09:15,910 --> 00:09:18,593
this small layout for this small component.
153
00:09:19,640 --> 00:09:21,963
So that's called delivered meals.
154
00:09:24,440 --> 00:09:29,440
And again, I will fix the CSS file here a little bit later
155
00:09:30,850 --> 00:09:33,720
because it's starting to get a bit confusing.
156
00:09:33,720 --> 00:09:36,240
But anyway, so we want the delivered meals
157
00:09:36,240 --> 00:09:39,223
to be side by side with that paragraph.
158
00:09:40,390 --> 00:09:43,453
So a good use case for using display flex.
159
00:09:44,350 --> 00:09:46,250
And this time I'm actually using flex
160
00:09:46,250 --> 00:09:49,260
and not grid because here I don't really care
161
00:09:49,260 --> 00:09:51,420
about the size of the columns.
162
00:09:51,420 --> 00:09:55,900
We will simply let the content determine the sizes.
163
00:09:55,900 --> 00:09:56,733
Okay.
164
00:09:57,970 --> 00:10:01,953
Then delivered, well, not meals but images.
165
00:10:03,920 --> 00:10:06,973
So here, we also want these images to be side by side.
166
00:10:08,100 --> 00:10:11,430
So all the child elements here of delivered images,
167
00:10:11,430 --> 00:10:15,423
which are these images should also become flex elements.
168
00:10:16,320 --> 00:10:19,220
And so now let's format these images.
169
00:10:19,220 --> 00:10:22,130
But here I didn't give them any class.
170
00:10:22,130 --> 00:10:24,720
And while I usually don't do that,
171
00:10:24,720 --> 00:10:27,160
when it goes so many levels deep.
172
00:10:27,160 --> 00:10:30,127
So here I would now have to call them delivered img.
173
00:10:31,080 --> 00:10:34,253
But that's a bit too much trouble, maybe.
174
00:10:35,410 --> 00:10:38,690
So I'm just going to select the img
175
00:10:38,690 --> 00:10:40,633
using this descendant selector.
176
00:10:45,050 --> 00:10:47,260
So let's give them some height.
177
00:10:47,260 --> 00:10:50,853
So based of course again here on our rules.
178
00:10:51,940 --> 00:10:56,610
So maybe 64 pixels and if that is too big,
179
00:10:56,610 --> 00:10:59,073
we go one step down to 48.
180
00:11:00,760 --> 00:11:05,083
So 64, which means 6.4rem.
181
00:11:07,320 --> 00:11:11,640
And well, usually we do not need to specify a width,
182
00:11:11,640 --> 00:11:14,140
because it will automatically get adjusted.
183
00:11:14,140 --> 00:11:16,760
But there is some bug in the Safari browser
184
00:11:16,760 --> 00:11:19,090
when the images are flex items.
185
00:11:19,090 --> 00:11:21,393
And so we need to do that here as well.
186
00:11:22,600 --> 00:11:24,030
So we simply set the width
187
00:11:24,030 --> 00:11:26,883
to the exact same thing to make them squared.
188
00:11:28,260 --> 00:11:31,280
Okay and then we also want to make them round.
189
00:11:31,280 --> 00:11:33,220
And since they are squared,
190
00:11:33,220 --> 00:11:36,200
we can set the border radius to 50%.
191
00:11:36,200 --> 00:11:37,680
Remember that?
192
00:11:37,680 --> 00:11:41,100
And so let's check it out maybe, or actually,
193
00:11:41,100 --> 00:11:44,853
let's first also style this paragraph here,
194
00:11:45,970 --> 00:11:48,293
which I didn't actually give a class yet.
195
00:11:49,450 --> 00:11:52,973
So that's delivered text, let's say.
196
00:11:58,060 --> 00:12:02,700
Okay, so to give it some visual hierarchy here,
197
00:12:02,700 --> 00:12:06,140
let's make it smaller than the paragraph texts
198
00:12:06,140 --> 00:12:08,303
that we had before that summary.
199
00:12:09,200 --> 00:12:11,720
So where is that? It's right here.
200
00:12:11,720 --> 00:12:13,120
So it's at 2rem.
201
00:12:13,120 --> 00:12:16,663
And so let's go one step down, which is 1.8rem.
202
00:12:17,510 --> 00:12:18,823
So 18 pixels.
203
00:12:20,970 --> 00:12:23,260
So here we are using all of these ideas
204
00:12:23,260 --> 00:12:25,900
about visual hierarchy with text
205
00:12:25,900 --> 00:12:29,303
and with the entire layout in general as well.
206
00:12:30,960 --> 00:12:32,430
And let's give it some font weight.
207
00:12:32,430 --> 00:12:35,760
Maybe of 600 to make it stand out
208
00:12:35,760 --> 00:12:37,260
than a bit more from the rest.
209
00:12:39,030 --> 00:12:43,390
Okay, so that's starting to look like something,
210
00:12:43,390 --> 00:12:47,400
but these images are way too big for now.
211
00:12:47,400 --> 00:12:50,660
So let's fix that and we also need some spacing here.
212
00:12:50,660 --> 00:12:52,540
So some vertical spacing between
213
00:12:52,540 --> 00:12:55,710
this component and this button.
214
00:12:55,710 --> 00:12:58,210
So let's start with that actually.
215
00:12:58,210 --> 00:13:02,120
And well, we can not really add any spacing,
216
00:13:02,120 --> 00:13:05,180
simply to the buttons here, right.
217
00:13:05,180 --> 00:13:08,210
So again, that would then be against the idea
218
00:13:08,210 --> 00:13:11,370
that these buttons should be stand-alone components.
219
00:13:11,370 --> 00:13:13,870
So, which is also the reason why here,
220
00:13:13,870 --> 00:13:18,240
I edit this margin using this helper class, right.
221
00:13:18,240 --> 00:13:20,670
So I could create a margin bottom
222
00:13:20,670 --> 00:13:23,050
or something class like that.
223
00:13:23,050 --> 00:13:26,890
But then I would have to add it to both these buttons.
224
00:13:26,890 --> 00:13:29,330
And I think that's not really worth it
225
00:13:29,330 --> 00:13:31,440
because what we can do instead
226
00:13:31,440 --> 00:13:32,810
is to simply add some margin
227
00:13:32,810 --> 00:13:36,140
to the top of this element here.
228
00:13:36,140 --> 00:13:37,503
So delivered meals.
229
00:13:39,350 --> 00:13:41,980
So margin-top in this case.
230
00:13:41,980 --> 00:13:44,093
And here let's use a lot.
231
00:13:45,020 --> 00:13:48,810
So maybe 80 pixels.
232
00:13:48,810 --> 00:13:51,950
So not quite the 96, that would be a bit too much.
233
00:13:51,950 --> 00:13:54,213
But let's try 8rem here.
234
00:13:56,200 --> 00:13:59,923
Okay and then yeah, make the images smaller.
235
00:14:01,060 --> 00:14:05,540
So stepping down from 64, the next one is 48 pixels.
236
00:14:05,540 --> 00:14:07,483
So 4.8rem.
237
00:14:10,660 --> 00:14:14,503
Okay and so that is a lot better already.
238
00:14:15,500 --> 00:14:16,770
Great.
239
00:14:16,770 --> 00:14:18,840
Now what we need to fix is,
240
00:14:18,840 --> 00:14:22,930
to add some spacing here and align these vertically.
241
00:14:22,930 --> 00:14:24,560
And then one very nice thing
242
00:14:24,560 --> 00:14:27,270
that we can do here is to kind of overlap
243
00:14:27,270 --> 00:14:30,090
these images here on top of each other.
244
00:14:30,090 --> 00:14:32,070
So that's something that we see quite often
245
00:14:32,070 --> 00:14:34,400
when we have a situation like this.
246
00:14:34,400 --> 00:14:38,200
Because, well, like this, it looks a bit strange.
247
00:14:38,200 --> 00:14:40,000
So we can just overlap them.
248
00:14:40,000 --> 00:14:44,173
And I'm sure you have seen this also in practice before.
249
00:14:45,210 --> 00:14:49,360
So starting with the spacing and vertical aligning.
250
00:14:49,360 --> 00:14:54,360
That is right here on this delivered meals, flex container.
251
00:14:55,570 --> 00:15:00,380
And so here we need to then add align-items.
252
00:15:00,380 --> 00:15:05,170
Remember to center everything vertically.
253
00:15:05,170 --> 00:15:07,270
And then to add some spacing.
254
00:15:07,270 --> 00:15:12,030
We use our gap property and let's use 16 pixels.
255
00:15:12,030 --> 00:15:14,970
So 1.6rem.
256
00:15:14,970 --> 00:15:18,170
Okay. So that fixes that first part.
257
00:15:18,170 --> 00:15:19,990
And now remember, the second thing
258
00:15:19,990 --> 00:15:22,560
that we wanted to do is to put these images
259
00:15:22,560 --> 00:15:24,173
on top of each other.
260
00:15:25,020 --> 00:15:28,570
So basically we want to decrease the spacing between them.
261
00:15:28,570 --> 00:15:30,180
And so we might think that
262
00:15:30,180 --> 00:15:33,260
since we are using a flex container here.
263
00:15:33,260 --> 00:15:36,580
So this delivered images, which contains the images
264
00:15:36,580 --> 00:15:38,780
is also a flex container.
265
00:15:38,780 --> 00:15:40,900
And so we might think that here we could set
266
00:15:40,900 --> 00:15:44,280
the gap property to a negative value.
267
00:15:44,280 --> 00:15:47,410
However, for some reason that doesn't really work.
268
00:15:47,410 --> 00:15:49,580
And so here we actually need to work
269
00:15:49,580 --> 00:15:52,650
on the individual images themselves.
270
00:15:52,650 --> 00:15:57,530
So here we can add a margin to the right,
271
00:15:57,530 --> 00:15:58,993
with a negative value.
272
00:16:00,670 --> 00:16:04,783
And so let's again, use for consistency, 1.6rem.
273
00:16:06,830 --> 00:16:09,160
But then, negatively.
274
00:16:09,160 --> 00:16:12,140
And so that will basically pull each of the images,
275
00:16:12,140 --> 00:16:15,290
16 pixels, more to the left.
276
00:16:15,290 --> 00:16:19,083
All right, yeah, so exactly like this.
277
00:16:20,040 --> 00:16:23,250
Now for some reason the margins,
278
00:16:23,250 --> 00:16:26,203
this gap here is not really being applied.
279
00:16:27,300 --> 00:16:28,950
Let's see what's happening there.
280
00:16:31,370 --> 00:16:33,510
And so this is where once again,
281
00:16:33,510 --> 00:16:35,263
the div tools come in very handy.
282
00:16:36,220 --> 00:16:40,083
Let me just make this a bit bigger so you can actually see.
283
00:16:41,040 --> 00:16:42,310
So the problem here is that
284
00:16:42,310 --> 00:16:45,750
the flex container basically ends right here.
285
00:16:45,750 --> 00:16:48,590
And the reason for that is that all the images
286
00:16:48,590 --> 00:16:50,313
have this negative margin.
287
00:16:52,010 --> 00:16:53,950
Well, it's not really visible here.
288
00:16:53,950 --> 00:16:55,950
But we need to basically remove
289
00:16:55,950 --> 00:16:58,513
the negative margin from this last one here.
290
00:16:59,930 --> 00:17:01,670
That should then fix it.
291
00:17:01,670 --> 00:17:05,200
So then this end of the flex container should be back here.
292
00:17:05,200 --> 00:17:07,830
And then we should be able to see that margin
293
00:17:07,830 --> 00:17:09,523
that is now on top of the image.
294
00:17:11,540 --> 00:17:13,693
So let's select the last one.
295
00:17:14,610 --> 00:17:16,417
And for that, fortunately we have
296
00:17:16,417 --> 00:17:20,937
our very handy last-child pseudo class.
297
00:17:23,260 --> 00:17:26,723
And so here we set the margin back to zero,
298
00:17:28,130 --> 00:17:30,460
So we could have written margin right as well.
299
00:17:30,460 --> 00:17:31,880
But here basically we're setting
300
00:17:31,880 --> 00:17:34,223
all the margins back to zero.
301
00:17:35,470 --> 00:17:36,750
Now, okay.
302
00:17:36,750 --> 00:17:38,413
And now that is fixed indeed.
303
00:17:40,060 --> 00:17:44,650
Right, now just one more thing
304
00:17:44,650 --> 00:17:46,290
or actually two more things.
305
00:17:46,290 --> 00:17:49,360
So first I want to make this one here a bit more visible.
306
00:17:49,360 --> 00:17:52,890
And so I'm also giving it this orange color here.
307
00:17:52,890 --> 00:17:55,670
And then another thing that we do many times
308
00:17:55,670 --> 00:17:58,600
when we overlap images like this is to then
309
00:17:58,600 --> 00:18:01,930
add a nice small border to each of them
310
00:18:01,930 --> 00:18:05,873
to create basically some visible space between them.
311
00:18:06,780 --> 00:18:08,240
And you will see what I mean
312
00:18:08,240 --> 00:18:10,770
in a second here once I do that.
313
00:18:10,770 --> 00:18:15,770
So basically what I just said is to add a border.
314
00:18:15,930 --> 00:18:19,850
Let's say three pixel solid
315
00:18:19,850 --> 00:18:22,190
with the exact same background color
316
00:18:22,190 --> 00:18:25,630
as the color that is around the images.
317
00:18:25,630 --> 00:18:28,230
So if that was white, we would use white.
318
00:18:28,230 --> 00:18:31,663
But in this case, that is this background color right here.
319
00:18:33,010 --> 00:18:35,860
Actually it is this color, but it's not coming from here.
320
00:18:36,860 --> 00:18:41,053
I mean, it is here from this section-hero, right.
321
00:18:42,640 --> 00:18:46,363
So that's right here.
322
00:18:50,660 --> 00:18:54,300
Right, so this looks a bit nicer.
323
00:18:54,300 --> 00:18:57,970
It's just a small detail you might think in the small touch.
324
00:18:57,970 --> 00:19:01,930
But it makes it immediately look a bit more designed.
325
00:19:01,930 --> 00:19:03,810
So, as if someone thought
326
00:19:03,810 --> 00:19:06,070
a little bit more about this component.
327
00:19:06,070 --> 00:19:08,700
And so that is always a good thing to do.
328
00:19:08,700 --> 00:19:09,920
Now, finally, as I said,
329
00:19:09,920 --> 00:19:12,620
I want to make this text here also orange
330
00:19:12,620 --> 00:19:15,253
in order to make it stand out a bit more.
331
00:19:16,130 --> 00:19:18,710
So let's wrap it in a span element,
332
00:19:18,710 --> 00:19:21,760
which is like a generic text element.
333
00:19:21,760 --> 00:19:25,343
So a bit like a div element, but for in line elements.
334
00:19:27,030 --> 00:19:32,030
So let's select that again with a descendant selector
335
00:19:32,100 --> 00:19:34,523
instead of adding just another class there.
336
00:19:36,750 --> 00:19:41,500
So our brand color is this one here I think.
337
00:19:41,500 --> 00:19:43,850
Let's just make sure.
338
00:19:43,850 --> 00:19:46,503
Yeah, it's always the one that ends in 22.
339
00:19:47,990 --> 00:19:50,230
And since we're already here,
340
00:19:50,230 --> 00:19:53,930
let's make it even a little bit bolder.
341
00:19:53,930 --> 00:19:56,133
So we going all the way to 700.
342
00:19:57,640 --> 00:20:01,730
Okay, nice, let's just make sure
343
00:20:01,730 --> 00:20:06,100
that the contrast ratio is actually good here.
344
00:20:06,100 --> 00:20:07,890
Because here we are actually using
345
00:20:07,890 --> 00:20:11,530
this orange color on top of another orange color.
346
00:20:11,530 --> 00:20:13,800
Even though this one here is very light.
347
00:20:13,800 --> 00:20:15,780
But I'm actually not sure
348
00:20:15,780 --> 00:20:19,603
if it has the correct color, contrast ratio.
349
00:20:21,560 --> 00:20:24,200
So to check this, we go to this coolors
350
00:20:24,200 --> 00:20:25,920
or something website,
351
00:20:25,920 --> 00:20:29,453
which one more time it is on my resources page.
352
00:20:32,490 --> 00:20:35,240
Then we click away all this stuff.
353
00:20:35,240 --> 00:20:38,313
Then here on more, we come to contrast checker.
354
00:20:40,680 --> 00:20:43,073
Then we paste our text color here.
355
00:20:44,650 --> 00:20:46,303
Well, I'm not sure what that is.
356
00:20:48,020 --> 00:20:51,653
It was this text that I copied before.
357
00:20:52,720 --> 00:20:54,830
So indeed I want this
358
00:20:54,830 --> 00:20:58,563
and the background color is this one here.
359
00:21:01,090 --> 00:21:04,550
And so you see it is very poor.
360
00:21:04,550 --> 00:21:08,113
So this red background here means that we are in trouble.
361
00:21:08,950 --> 00:21:13,950
So let's use the next dark that we have.
362
00:21:14,090 --> 00:21:14,973
So this one here.
363
00:21:16,139 --> 00:21:17,570
Let's copy this.
364
00:21:17,570 --> 00:21:19,940
Let's just make sure it's here already.
365
00:21:19,940 --> 00:21:20,903
Actually, it's not.
366
00:21:22,000 --> 00:21:24,290
So just again, to make sure we have everything
367
00:21:24,290 --> 00:21:28,723
in one place, let's put that here.
368
00:21:29,560 --> 00:21:33,500
And it is still poor here, but down here,
369
00:21:33,500 --> 00:21:36,660
it just became yellow, which is for our large text.
370
00:21:36,660 --> 00:21:39,220
But if we take a look here,
371
00:21:39,220 --> 00:21:44,220
then we see that level AA requires 3.1 for a large text.
372
00:21:45,670 --> 00:21:49,780
So at least 18 pixels or bold text.
373
00:21:49,780 --> 00:21:52,990
And in our case, the text is actually very bold.
374
00:21:52,990 --> 00:21:57,083
And so I think we're good to go with that color here.
375
00:21:58,640 --> 00:22:02,283
So let's replace that and there we go.
376
00:22:03,120 --> 00:22:04,380
So you think that this might be
377
00:22:04,380 --> 00:22:06,670
a very minor thing to worry about.
378
00:22:06,670 --> 00:22:08,680
But as I said, I believe
379
00:22:08,680 --> 00:22:10,840
and the whole web developer community
380
00:22:10,840 --> 00:22:13,690
believes as well, that we should really strive
381
00:22:13,690 --> 00:22:16,900
to make our websites as accessible as possible.
382
00:22:16,900 --> 00:22:19,160
And so I think it's not too much
383
00:22:19,160 --> 00:22:22,990
to worry about a small detail like this.
384
00:22:22,990 --> 00:22:25,780
Okay and with this, we actually finished
385
00:22:25,780 --> 00:22:28,420
building this hero section.
386
00:22:28,420 --> 00:22:30,800
So I hope that you like this result.
387
00:22:30,800 --> 00:22:33,980
I think it looks really, really beautiful.
388
00:22:33,980 --> 00:22:35,510
So great result here.
389
00:22:35,510 --> 00:22:37,930
We have some nice visual hierarchy
390
00:22:37,930 --> 00:22:40,300
where this text here is closer a little bit
391
00:22:40,300 --> 00:22:43,760
to this one because they belong kind of together.
392
00:22:43,760 --> 00:22:46,430
Then we have a bit more space between the buttons
393
00:22:46,430 --> 00:22:48,900
and then a lot more space.
394
00:22:48,900 --> 00:22:51,220
Well, actually not that much space.
395
00:22:51,220 --> 00:22:55,400
But still, there's a lot more space here than here.
396
00:22:55,400 --> 00:22:57,270
And so again, we create some,
397
00:22:57,270 --> 00:23:00,280
a nice visual hierarchy right there.
398
00:23:00,280 --> 00:23:02,593
Let me just remember how much we used here.
399
00:23:03,530 --> 00:23:06,143
Looks like it's not that much.
400
00:23:08,730 --> 00:23:12,280
It was 8rem, while here we have...
401
00:23:14,680 --> 00:23:16,950
Yeah, we have 4.8rem.
402
00:23:16,950 --> 00:23:18,580
But then because of the line height,
403
00:23:18,580 --> 00:23:20,030
it is actually a bit more
404
00:23:20,030 --> 00:23:23,570
as we can see here in this blue box that is around it.
405
00:23:23,570 --> 00:23:26,010
But still I think this looks good.
406
00:23:26,010 --> 00:23:28,450
Also the spacing between these columns
407
00:23:28,450 --> 00:23:32,160
and around everything here looks quite decent.
408
00:23:32,160 --> 00:23:35,510
And so, yeah, I think this is done for now.
409
00:23:35,510 --> 00:23:36,830
And so in the next lecture,
410
00:23:36,830 --> 00:23:39,920
we will then also build the header here.
411
00:23:39,920 --> 00:23:41,630
So putting the logo here
412
00:23:41,630 --> 00:23:45,360
and also start working a bit on the navigation.
413
00:23:45,360 --> 00:23:47,600
So that is yet another exciting step
414
00:23:47,600 --> 00:23:50,330
to really polish off and finish
415
00:23:50,330 --> 00:23:52,730
this whole introduction to our website.
416
00:23:52,730 --> 00:23:55,403
And so hopefully I see you there very soon.
30698
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.