Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,500 --> 00:00:02,480
All right.
2
00:00:02,480 --> 00:00:04,960
So let's now style all the content
3
00:00:04,960 --> 00:00:06,903
that we have in our footer.
4
00:00:08,370 --> 00:00:11,560
And I'm gonna start with these headings here
5
00:00:11,560 --> 00:00:14,743
and then also with these entire navigation blocks.
6
00:00:17,230 --> 00:00:19,323
So that's footer-heading.
7
00:00:25,520 --> 00:00:29,403
And of course let's make it a bit bigger and also bolder,
8
00:00:31,780 --> 00:00:33,330
but maybe not too bold.
9
00:00:33,330 --> 00:00:37,823
So just 500 and then some margin to the bottom.
10
00:00:38,730 --> 00:00:41,583
Let's say 32 pixels here for now.
11
00:00:43,162 --> 00:00:46,900
And then let's also style the navigations here.
12
00:00:48,000 --> 00:00:49,423
So footer-nav.
13
00:00:54,340 --> 00:00:59,073
So of course getting rid of those bullet points first and...
14
00:01:00,660 --> 00:01:04,003
Yeah, then let's first actually style the links themselves.
15
00:01:05,090 --> 00:01:08,200
So we didn't give them any class name,
16
00:01:08,200 --> 00:01:09,513
but let's do that here.
17
00:01:10,790 --> 00:01:15,290
So I will select, or I will add multiple cursors here,
18
00:01:15,290 --> 00:01:19,040
again, using that trick of hitting alt or option
19
00:01:19,040 --> 00:01:21,223
at the same time as clicking.
20
00:01:22,090 --> 00:01:24,233
And then we can simply say "class"...
21
00:01:27,327 --> 00:01:29,300
"Footer-link".
22
00:01:29,300 --> 00:01:30,240
Right?
23
00:01:30,240 --> 00:01:33,400
But of course you can also just write it in one of them
24
00:01:33,400 --> 00:01:36,453
and then copy this class to all the other links.
25
00:01:38,570 --> 00:01:43,570
So footer-link, add link and also as "visited".
26
00:01:50,170 --> 00:01:54,203
And as always getting rid of the text decoration first,
27
00:01:55,270 --> 00:01:57,223
making it also a little bit bigger.
28
00:01:58,950 --> 00:02:02,780
So maybe one step smaller than the heading.
29
00:02:02,780 --> 00:02:06,863
So 1.6, let's also make it really, well,
30
00:02:07,890 --> 00:02:10,500
not really light, but quite light.
31
00:02:10,500 --> 00:02:14,183
And I'm not sure what colors we have been using here.
32
00:02:16,220 --> 00:02:19,300
I will just write this one here, this gray color,
33
00:02:19,300 --> 00:02:22,340
temporarily, and then let's see what we have
34
00:02:22,340 --> 00:02:24,123
in our general color file.
35
00:02:25,690 --> 00:02:29,840
So here we have this 6f6f gray,
36
00:02:29,840 --> 00:02:31,823
but that's a bit too dark maybe yet.
37
00:02:32,960 --> 00:02:35,640
So I know that here in the visited section,
38
00:02:35,640 --> 00:02:38,540
I think we used 777...
39
00:02:40,450 --> 00:02:44,010
Or actually here, yeah, in the "Featured in" section.
40
00:02:44,010 --> 00:02:45,830
Oh, and actually, I just remember
41
00:02:45,830 --> 00:02:47,850
that we used 888 there,
42
00:02:47,850 --> 00:02:51,690
which was probably not really accessible.
43
00:02:51,690 --> 00:02:56,690
So let's just copy that here just so we know that also...
44
00:02:57,030 --> 00:03:00,100
And I'm just gonna test if that works,
45
00:03:00,100 --> 00:03:03,437
so if that is accessible, so 888888.
46
00:03:05,200 --> 00:03:06,233
And, not really.
47
00:03:07,070 --> 00:03:09,950
So let's try 777, maybe.
48
00:03:09,950 --> 00:03:13,503
And that's also not good, but almost at 4.5.
49
00:03:15,600 --> 00:03:17,760
So let's make it a bit lighter.
50
00:03:17,760 --> 00:03:22,060
Oh, so 767676 is enough.
51
00:03:22,060 --> 00:03:23,753
And so let's use that one.
52
00:03:26,580 --> 00:03:28,170
So putting that right here,
53
00:03:28,170 --> 00:03:31,763
basically from darkest to brightest.
54
00:03:32,970 --> 00:03:37,970
So this is the lightest grid allowed on white.
55
00:03:43,760 --> 00:03:45,733
So, like this.
56
00:03:46,990 --> 00:03:48,240
So let's copy that.
57
00:03:48,240 --> 00:03:51,253
And let's use that one here because these links,
58
00:03:52,980 --> 00:03:55,793
they should not really have a big impact.
59
00:03:57,820 --> 00:04:00,670
So they should be as light as possible,
60
00:04:00,670 --> 00:04:03,713
which, as you will see now, is still not really light.
61
00:04:04,960 --> 00:04:07,710
So you'll see that is perfectly visible,
62
00:04:07,710 --> 00:04:09,333
but it is still (indistinct) lighter
63
00:04:09,333 --> 00:04:11,260
than the rest of the content.
64
00:04:11,260 --> 00:04:13,430
And that will be especially visible
65
00:04:13,430 --> 00:04:16,030
once we actually style this one here.
66
00:04:16,030 --> 00:04:17,470
And even now you see
67
00:04:17,470 --> 00:04:20,430
that this here is the normal 555 color.
68
00:04:20,430 --> 00:04:23,130
And so this creates now a visual hierarchy,
69
00:04:23,130 --> 00:04:24,403
just as we wanted.
70
00:04:25,520 --> 00:04:26,710
Right.
71
00:04:26,710 --> 00:04:30,200
So here we don't want to draw a lot of attention.
72
00:04:30,200 --> 00:04:33,480
And so therefore we didn't use the 333 color
73
00:04:33,480 --> 00:04:34,820
on dose one.
74
00:04:34,820 --> 00:04:39,820
And so if we just left this one here at 555 as well,
75
00:04:39,970 --> 00:04:42,410
then we wouldn't have any visual hierarchy
76
00:04:42,410 --> 00:04:44,110
in terms of colors.
77
00:04:44,110 --> 00:04:46,680
But anyway, let's go back
78
00:04:46,680 --> 00:04:51,680
and let's style the hover and active states.
79
00:04:57,460 --> 00:05:00,700
And so here I will now make them darker,
80
00:05:00,700 --> 00:05:01,933
going back to normal.
81
00:05:05,570 --> 00:05:10,570
Let's also add or usual transition of all, let's say.
82
00:05:10,960 --> 00:05:14,850
And then 0.3 seconds, which is,
83
00:05:14,850 --> 00:05:18,310
I think is what we have used all the time here.
84
00:05:18,310 --> 00:05:20,460
Now, finally, let's also take care
85
00:05:20,460 --> 00:05:22,810
of the spacing between the links.
86
00:05:22,810 --> 00:05:25,960
And so once again, there are two possibilities here
87
00:05:25,960 --> 00:05:29,180
and the first one would be to add some margin bottom
88
00:05:29,180 --> 00:05:31,020
to these links here,
89
00:05:31,020 --> 00:05:33,350
or maybe even to these list items here.
90
00:05:33,350 --> 00:05:34,580
And then on the last one,
91
00:05:34,580 --> 00:05:38,510
we would take away that space and set it back to zero.
92
00:05:38,510 --> 00:05:40,330
So that's the first option.
93
00:05:40,330 --> 00:05:44,170
And the second option is to do what we also did before,
94
00:05:44,170 --> 00:05:48,100
which is to make this footer-nav here a flex container
95
00:05:48,100 --> 00:05:50,750
and change the flex direction to column.
96
00:05:50,750 --> 00:05:53,560
And so then we can apply the gap property,
97
00:05:53,560 --> 00:05:55,183
which makes us a lot easier.
98
00:05:56,910 --> 00:05:59,470
So display, flex.
99
00:05:59,470 --> 00:06:03,050
And so just to show you once again that like this,
100
00:06:03,050 --> 00:06:06,193
all the elements would try to appear side by side,
101
00:06:07,350 --> 00:06:11,003
and then we change it back to a column.
102
00:06:13,960 --> 00:06:17,907
And so now we can add a nice gap, for example, of 2.4 rem.
103
00:06:21,110 --> 00:06:22,500
So let's see.
104
00:06:22,500 --> 00:06:24,560
And that looks really nice.
105
00:06:24,560 --> 00:06:26,650
The animation also works
106
00:06:26,650 --> 00:06:30,330
and here we could maybe even use some more spacing.
107
00:06:30,330 --> 00:06:35,330
So after these headings, let's set that to four rem, even.
108
00:06:38,100 --> 00:06:41,040
So here we can use a lot of spacing that looks quite nice
109
00:06:41,040 --> 00:06:44,790
and professional in a footer like this.
110
00:06:44,790 --> 00:06:49,030
Okay, next up, let's move here to this first column.
111
00:06:49,030 --> 00:06:53,233
And so I'm gonna start by styling this navigation here.
112
00:06:54,760 --> 00:06:56,550
So the first thing that we can do
113
00:06:56,550 --> 00:07:00,230
is to actually also add this footer-link class,
114
00:07:00,230 --> 00:07:05,230
because these are, in fact, also just links, right?
115
00:07:05,510 --> 00:07:06,653
So these three.
116
00:07:07,890 --> 00:07:10,270
And so that should then already change some
117
00:07:10,270 --> 00:07:11,270
of the things there.
118
00:07:12,640 --> 00:07:13,473
Yeah.
119
00:07:13,473 --> 00:07:16,460
So they got bigger and the color has changed
120
00:07:16,460 --> 00:07:18,970
and even the color animation
121
00:07:18,970 --> 00:07:21,600
so that transition is already there.
122
00:07:21,600 --> 00:07:24,450
But of course we want them to be a little bit bigger
123
00:07:24,450 --> 00:07:26,123
and also side by side.
124
00:07:27,480 --> 00:07:31,700
So let's grab the social links class
125
00:07:31,700 --> 00:07:33,410
and let's put that first,
126
00:07:33,410 --> 00:07:37,143
just as it appears also in the HTML.
127
00:07:38,030 --> 00:07:39,180
So actually right here.
128
00:07:40,950 --> 00:07:45,950
So of course, no list style and to make them side by side,
129
00:07:47,330 --> 00:07:50,240
as you could have guessed, we use flexbox
130
00:07:50,240 --> 00:07:54,423
and then let's add a gap of, again, 2.4 rem.
131
00:07:56,990 --> 00:07:58,040
Okay.
132
00:07:58,040 --> 00:07:59,520
And now I think we just need
133
00:07:59,520 --> 00:08:01,300
to make them a little bit bigger
134
00:08:01,300 --> 00:08:02,660
and also add some space here,
135
00:08:02,660 --> 00:08:04,543
of course, after this logo.
136
00:08:06,090 --> 00:08:10,593
So that's actually this link here, so this footer logo,
137
00:08:12,590 --> 00:08:14,470
so that's here.
138
00:08:14,470 --> 00:08:17,900
And first of all, if we want to add some vertical spacing,
139
00:08:17,900 --> 00:08:21,260
we need to make this a block level element
140
00:08:21,260 --> 00:08:24,920
because a link, remember, is just an inline element,
141
00:08:24,920 --> 00:08:26,260
but it needs to be block
142
00:08:26,260 --> 00:08:29,650
if we want to use the complete box model on it.
143
00:08:29,650 --> 00:08:31,930
And so the box model includes, of course,
144
00:08:31,930 --> 00:08:33,313
the margin property.
145
00:08:35,190 --> 00:08:38,230
Let's say 3.2 rem here.
146
00:08:38,230 --> 00:08:41,733
And now, just to make these bigger, let's select them,
147
00:08:42,610 --> 00:08:45,473
giving them a new class name, "social icon".
148
00:08:53,740 --> 00:08:57,300
And here we could also have used the descendant selector,
149
00:08:57,300 --> 00:09:00,470
basically selecting the ion icon element
150
00:09:00,470 --> 00:09:02,710
inside of the footer-link.
151
00:09:02,710 --> 00:09:06,170
So that would have worked just the same, but, well,
152
00:09:06,170 --> 00:09:07,970
there are always many different ways
153
00:09:07,970 --> 00:09:09,823
of achieving the exact same thing.
154
00:09:11,210 --> 00:09:13,470
So here let's go with the standard size
155
00:09:13,470 --> 00:09:16,113
of many icons of 24 pixels.
156
00:09:17,150 --> 00:09:21,563
So height and width of 2.4 rem.
157
00:09:23,170 --> 00:09:24,120
Nice.
158
00:09:24,120 --> 00:09:26,980
That looks very beautiful, very nice.
159
00:09:26,980 --> 00:09:30,323
And so next, let's take care of this copyright text.
160
00:09:39,110 --> 00:09:40,970
And this one, let's make it even smaller
161
00:09:40,970 --> 00:09:42,483
than the links.
162
00:09:44,690 --> 00:09:48,053
So, the headings were 1.8, the links 1.6,
163
00:09:49,560 --> 00:09:51,103
let's go one step down here.
164
00:09:52,074 --> 00:09:56,503
1.4 rem and also the color here should be quite light again.
165
00:09:57,990 --> 00:09:59,680
So I'm consistently gonna use
166
00:09:59,680 --> 00:10:02,860
that lightest gray color here.
167
00:10:02,860 --> 00:10:04,570
So this one.
168
00:10:04,570 --> 00:10:08,100
So just the one that we used also here for the links,
169
00:10:08,100 --> 00:10:11,910
just to keep the colors consistent here in the footer.
170
00:10:11,910 --> 00:10:16,910
Let's also add some line height, 1.6, maybe.
171
00:10:17,900 --> 00:10:19,623
And so let's check that out.
172
00:10:20,590 --> 00:10:21,640
Okay.
173
00:10:21,640 --> 00:10:24,840
So we have this content here now in three lines
174
00:10:24,840 --> 00:10:26,350
and that's a bit too much.
175
00:10:26,350 --> 00:10:28,190
It should just be two lines,
176
00:10:28,190 --> 00:10:30,100
but let's fix that in a minute.
177
00:10:30,100 --> 00:10:32,623
For now, I also want to change the spacing here.
178
00:10:33,520 --> 00:10:35,720
Now, how could we do that spacing?
179
00:10:35,720 --> 00:10:38,980
Of course, there are, as always, many different ways.
180
00:10:38,980 --> 00:10:42,100
So we could manually try to add the right spacing here
181
00:10:42,100 --> 00:10:47,100
to the top of the copyright or to the bottom of these icons.
182
00:10:47,290 --> 00:10:51,310
So trying to maybe align this line here
183
00:10:51,310 --> 00:10:53,190
with the rest of this footer.
184
00:10:53,190 --> 00:10:55,573
So making it appear like down here.
185
00:10:57,100 --> 00:11:00,190
So if we inspect this footer here really quick...
186
00:11:03,000 --> 00:11:03,833
Yeah.
187
00:11:03,833 --> 00:11:05,200
So basically trying...
188
00:11:06,770 --> 00:11:08,350
Can't even turn this on.
189
00:11:08,350 --> 00:11:10,800
So basically trying to push this content here
190
00:11:10,800 --> 00:11:14,470
all the way to the bottom, right?
191
00:11:14,470 --> 00:11:17,600
So basically what we could and should try here
192
00:11:17,600 --> 00:11:20,120
is to maybe push this element here
193
00:11:20,120 --> 00:11:22,320
all the way to the bottom.
194
00:11:22,320 --> 00:11:24,840
So how are we going to do that?
195
00:11:24,840 --> 00:11:27,290
Well, we're gonna use again that trick
196
00:11:27,290 --> 00:11:30,910
that we used before in the app layout.
197
00:11:30,910 --> 00:11:34,090
So that's way back in the last section
198
00:11:34,090 --> 00:11:36,430
where we created one element
199
00:11:36,430 --> 00:11:38,620
that was basically pushed all the way
200
00:11:38,620 --> 00:11:42,040
to the right site in that example.
201
00:11:42,040 --> 00:11:46,260
And for that we used flexbox together with margin auto.
202
00:11:46,260 --> 00:11:47,790
Remember that?
203
00:11:47,790 --> 00:11:48,623
So...
204
00:11:48,623 --> 00:11:50,010
If not, that's not a problem
205
00:11:50,010 --> 00:11:51,973
because now we will do it again.
206
00:11:53,370 --> 00:11:58,270
So first of all, let's then make this logo-col here
207
00:11:58,270 --> 00:11:59,653
a flex container.
208
00:12:01,610 --> 00:12:05,523
So logo-col, actually, we haven't selected that yet.
209
00:12:09,200 --> 00:12:13,270
So display, flex, and then of course,
210
00:12:13,270 --> 00:12:16,713
we also need to change the flex direction to column.
211
00:12:17,830 --> 00:12:19,020
So for now, of course,
212
00:12:19,020 --> 00:12:23,550
everything still looks exactly the same, right?
213
00:12:23,550 --> 00:12:27,640
So here you have the flex container with the three elements.
214
00:12:27,640 --> 00:12:31,140
But now if we add a margin top of auto
215
00:12:31,140 --> 00:12:32,720
to this paragraph here,
216
00:12:32,720 --> 00:12:35,500
it will be all the way to the bottom.
217
00:12:35,500 --> 00:12:37,730
So it will be pushed right here
218
00:12:37,730 --> 00:12:39,970
because it will create, automatically,
219
00:12:39,970 --> 00:12:42,243
the right margin to the top.
220
00:12:43,700 --> 00:12:45,050
So let me show that to you.
221
00:12:47,470 --> 00:12:51,003
So here in the copyright, we can now say,
222
00:12:52,340 --> 00:12:55,850
margin top of auto.
223
00:12:55,850 --> 00:12:57,713
And so, there it is.
224
00:12:59,460 --> 00:13:01,403
So let's see.
225
00:13:03,420 --> 00:13:08,420
And so you'll see that the margin here is exactly 45 pixels.
226
00:13:08,790 --> 00:13:11,230
And so that is just what is necessary
227
00:13:11,230 --> 00:13:15,410
to basically push this here, all the way to the corner.
228
00:13:15,410 --> 00:13:18,570
So all the way to the end of the element.
229
00:13:18,570 --> 00:13:21,900
And if this element here, so the entire footer,
230
00:13:21,900 --> 00:13:23,120
if it was higher,
231
00:13:23,120 --> 00:13:26,620
then of course the margin here would not be 45,
232
00:13:26,620 --> 00:13:28,980
but it would automatically be figured out
233
00:13:28,980 --> 00:13:31,363
to make this content appear at the bottom.
234
00:13:32,780 --> 00:13:33,613
Okay?
235
00:13:33,613 --> 00:13:36,750
So this is really an amazing flexbox trick
236
00:13:36,750 --> 00:13:39,010
that many people actually don't know,
237
00:13:39,010 --> 00:13:42,610
and it works both horizontally and vertically.
238
00:13:42,610 --> 00:13:46,480
So we used it horizontally in that app layout.
239
00:13:46,480 --> 00:13:50,280
And so you can go back there and see how it worked there.
240
00:13:50,280 --> 00:13:53,063
And here we did it, now of course, vertically.
241
00:13:54,670 --> 00:13:55,503
Okay.
242
00:13:56,720 --> 00:14:00,850
But anyway, let's now work here on that second column.
243
00:14:00,850 --> 00:14:02,107
So on that "address".
244
00:14:04,180 --> 00:14:08,330
And so here, we actually have some more links.
245
00:14:08,330 --> 00:14:12,180
And so we can, again, use that class that we already created
246
00:14:13,040 --> 00:14:14,280
so that all the links
247
00:14:14,280 --> 00:14:16,493
that we have in the footer look the same.
248
00:14:17,380 --> 00:14:19,433
So that's important for consistency.
249
00:14:20,500 --> 00:14:24,043
So if we check that out now, then,
250
00:14:25,070 --> 00:14:27,503
well, that didn't actually change.
251
00:14:29,280 --> 00:14:30,113
Oh.
252
00:14:30,113 --> 00:14:33,913
And of course, that's just because I copied the wrong thing.
253
00:14:36,270 --> 00:14:38,383
So I was distracted, apparently.
254
00:14:39,820 --> 00:14:42,260
So of course I don't want social icon,
255
00:14:42,260 --> 00:14:43,973
but I want footer-link.
256
00:14:45,160 --> 00:14:48,163
And so now that starts to look good already.
257
00:14:49,320 --> 00:14:51,800
Now all of this here is currently italic
258
00:14:51,800 --> 00:14:54,400
because that is simply the default formatting
259
00:14:54,400 --> 00:14:56,670
of the address element.
260
00:14:56,670 --> 00:14:59,903
And so we need to, first of all, fix that.
261
00:15:01,050 --> 00:15:03,513
So that's here, this "contacts" element.
262
00:15:04,870 --> 00:15:08,850
So let's add that right here after the...
263
00:15:10,960 --> 00:15:12,173
Yep, right here, maybe.
264
00:15:16,110 --> 00:15:21,063
And so we need to set the font style back to normal,
265
00:15:22,980 --> 00:15:25,230
and then let's also set the font size to 1.6,
266
00:15:26,160 --> 00:15:30,533
just like the links and give it a line height also of 1.6.
267
00:15:33,250 --> 00:15:36,020
So that should look good already.
268
00:15:36,020 --> 00:15:38,750
And now all we need to do is to add some spacing here
269
00:15:38,750 --> 00:15:41,203
to the bottom of this first paragraph.
270
00:15:43,630 --> 00:15:44,750
Okay.
271
00:15:44,750 --> 00:15:49,750
So that's this one here, let's call it "the address".
272
00:15:50,060 --> 00:15:52,160
Or we could also have simply selected
273
00:15:52,160 --> 00:15:55,513
the first paragraph child of contacts,
274
00:15:56,400 --> 00:15:59,683
but, well, that's not a big difference.
275
00:16:02,100 --> 00:16:04,393
Or also we could have added a helper class.
276
00:16:09,710 --> 00:16:11,720
So once again, many different ways
277
00:16:11,720 --> 00:16:13,213
of solving the same thing.
278
00:16:14,300 --> 00:16:16,850
Now, okay, nice.
279
00:16:16,850 --> 00:16:18,710
However, what we notice here
280
00:16:18,710 --> 00:16:21,960
is that we have some content overload basically here
281
00:16:21,960 --> 00:16:24,253
on these first two columns.
282
00:16:25,150 --> 00:16:28,800
So this content here has been wrapped into three lines
283
00:16:28,800 --> 00:16:31,970
and the same here, and it would be a lot nicer
284
00:16:31,970 --> 00:16:34,330
if we just had this in two lines.
285
00:16:34,330 --> 00:16:38,023
And so then the content would look a lot less dense here.
286
00:16:38,970 --> 00:16:41,950
At the same time, here, we actually have a lot
287
00:16:41,950 --> 00:16:43,380
of empty space.
288
00:16:43,380 --> 00:16:46,097
So here, between this column and this one.
289
00:16:46,097 --> 00:16:49,630
And so these columns, they are actually a bit too big
290
00:16:49,630 --> 00:16:53,420
for this content here, and they are a bit too small
291
00:16:53,420 --> 00:16:56,970
for these two columns right here.
292
00:16:56,970 --> 00:16:59,280
Now, of course, we could leave it like this,
293
00:16:59,280 --> 00:17:00,840
it would not be a problem.
294
00:17:00,840 --> 00:17:04,313
But let's make this a bit nicer and fix this problem.
295
00:17:05,230 --> 00:17:08,790
So these equally-sized columns have served us well
296
00:17:08,790 --> 00:17:12,410
up until this point, but now let's actually create,
297
00:17:12,410 --> 00:17:14,220
basically another grid here.
298
00:17:14,220 --> 00:17:16,860
So replace our existing grid and make it so
299
00:17:16,860 --> 00:17:20,200
that the first two columns are a bit bigger
300
00:17:20,200 --> 00:17:21,883
than the three other ones.
301
00:17:23,610 --> 00:17:28,610
So, let's come up here where the grid is placed in the HTML.
302
00:17:30,840 --> 00:17:33,270
So that's the "grid-5-cols".
303
00:17:33,270 --> 00:17:36,720
Now I will, of course not change this here.
304
00:17:36,720 --> 00:17:38,520
So this class will be the same
305
00:17:38,520 --> 00:17:40,770
because the rule is basically
306
00:17:40,770 --> 00:17:45,770
that in these types of classes, so grid 2, 3, 4,
307
00:17:46,680 --> 00:17:49,430
and 5 cols, so this here,
308
00:17:49,430 --> 00:17:52,740
that the columns are always equal-sized.
309
00:17:52,740 --> 00:17:54,690
So that's just basically our rule
310
00:17:54,690 --> 00:17:57,490
that we create for ourselves, but here again,
311
00:17:57,490 --> 00:17:59,323
what we want is different.
312
00:18:00,920 --> 00:18:04,823
So let's create, basically a grid just for the footer.
313
00:18:07,110 --> 00:18:10,997
Let's call it "grid-footer",
314
00:18:12,200 --> 00:18:15,243
with to "oo's" of course, or "o's".
315
00:18:17,720 --> 00:18:19,730
So grid, template, columns.
316
00:18:19,730 --> 00:18:23,110
And so now we need to experiment around a little bit here.
317
00:18:23,110 --> 00:18:26,600
So let's start by making them double, maybe.
318
00:18:26,600 --> 00:18:29,940
So 2fr, 2fr, the first two ones,
319
00:18:29,940 --> 00:18:32,613
and then the other ones, each of them, 1fr.
320
00:18:34,633 --> 00:18:37,293
And so now here we replaced that.
321
00:18:38,880 --> 00:18:39,893
And so let's see.
322
00:18:41,670 --> 00:18:44,780
All right, now, these columns here,
323
00:18:44,780 --> 00:18:47,890
they are a bit too small, I would say.
324
00:18:47,890 --> 00:18:51,310
So here, there is now a lot of empty space created here.
325
00:18:51,310 --> 00:18:53,223
And so that's also not necessary.
326
00:18:54,440 --> 00:18:58,970
So like this, the columns are too wide, so let's fix that.
327
00:18:58,970 --> 00:19:03,243
So instead of being 2, let's make them 1.5, maybe.
328
00:19:04,900 --> 00:19:07,110
So basically just a small difference.
329
00:19:07,110 --> 00:19:08,900
And what this will do actually
330
00:19:08,900 --> 00:19:12,733
is that these two here will be 1.5 plus 1.5.
331
00:19:13,900 --> 00:19:16,680
So they will be 3fr's overall.
332
00:19:16,680 --> 00:19:19,820
And then the other three will also be 3fr.
333
00:19:19,820 --> 00:19:22,890
And so that makes it so that these two columns here,
334
00:19:22,890 --> 00:19:26,040
which are different, are going to take half the width
335
00:19:26,040 --> 00:19:28,940
of this footer and then the other three
336
00:19:28,940 --> 00:19:31,140
are going to take the other half.
337
00:19:31,140 --> 00:19:34,180
And so I think that's a nice idea here.
338
00:19:34,180 --> 00:19:36,770
So 3fr for the first two
339
00:19:36,770 --> 00:19:40,363
and 3fr for the three last columns.
340
00:19:41,270 --> 00:19:43,300
And, beautiful.
341
00:19:43,300 --> 00:19:45,990
So like this, I think it looks really nice
342
00:19:45,990 --> 00:19:50,090
and really balanced here in terms of spacing.
343
00:19:50,090 --> 00:19:51,520
All right.
344
00:19:51,520 --> 00:19:54,890
So with this, I'm quite happy and all I want to do now
345
00:19:54,890 --> 00:19:58,130
is to add a little bit more spacing here, maybe.
346
00:19:58,130 --> 00:20:01,450
So the footer should be quite a distinct part
347
00:20:01,450 --> 00:20:03,140
of the webpage.
348
00:20:03,140 --> 00:20:06,460
And so let's add even more spacing here on top
349
00:20:06,460 --> 00:20:07,713
and on the bottom.
350
00:20:09,830 --> 00:20:13,973
So let's see what we have after 96.
351
00:20:16,620 --> 00:20:17,913
That's 128.
352
00:20:18,750 --> 00:20:22,703
So let's go with that here, actually, for our padding.
353
00:20:25,810 --> 00:20:28,123
So 12.8 rem.
354
00:20:29,260 --> 00:20:30,840
Okay.
355
00:20:30,840 --> 00:20:32,980
And, very nice.
356
00:20:32,980 --> 00:20:34,860
And now I think we just need
357
00:20:34,860 --> 00:20:37,280
to create a small visual distinction
358
00:20:37,280 --> 00:20:39,293
between these two sections here.
359
00:20:40,270 --> 00:20:42,060
So we have, of course, this one here,
360
00:20:42,060 --> 00:20:44,020
which makes a huge impact,
361
00:20:44,020 --> 00:20:46,480
but then we have the footer afterwards
362
00:20:46,480 --> 00:20:49,000
and is not really a transition.
363
00:20:49,000 --> 00:20:50,210
So that's partly
364
00:20:50,210 --> 00:20:53,830
because they have the exact same background color.
365
00:20:53,830 --> 00:20:56,620
And maybe also, because there is not enough spacing
366
00:20:56,620 --> 00:20:58,020
between them.
367
00:20:58,020 --> 00:21:01,000
So one thing that we can do to fix that
368
00:21:01,000 --> 00:21:04,450
is to add a very small and subtle line here,
369
00:21:04,450 --> 00:21:07,360
basically separating these two sections.
370
00:21:07,360 --> 00:21:10,430
So like a very, very light gray line going
371
00:21:10,430 --> 00:21:12,320
from one side to the other.
372
00:21:12,320 --> 00:21:15,650
But even that subtle line will then create some kind
373
00:21:15,650 --> 00:21:16,683
of distinction here.
374
00:21:18,040 --> 00:21:20,273
So let's try to add that on the footer.
375
00:21:21,770 --> 00:21:24,830
So really on the footer so that it really goes
376
00:21:24,830 --> 00:21:27,770
from all the way to the left, to the right side.
377
00:21:27,770 --> 00:21:29,593
So just like the background color.
378
00:21:35,120 --> 00:21:40,020
So border top, one pixel, solid,
379
00:21:40,020 --> 00:21:42,570
and let's try something very light.
380
00:21:42,570 --> 00:21:46,170
And again, fff is the lightest.
381
00:21:46,170 --> 00:21:49,720
And so to make it a bit darker, we can try, for example,
382
00:21:49,720 --> 00:21:53,423
ddd, which is like two letters above that.
383
00:21:54,890 --> 00:21:56,400
So let's see.
384
00:21:56,400 --> 00:21:59,173
And that is a bit too dark actually.
385
00:22:00,180 --> 00:22:04,070
So that's not the subtlety that I was looking for.
386
00:22:04,070 --> 00:22:07,040
So let's try the intermediate one.
387
00:22:07,040 --> 00:22:07,973
So eee.
388
00:22:10,260 --> 00:22:11,410
Okay.
389
00:22:11,410 --> 00:22:15,100
And this one, I think, looks great, actually.
390
00:22:15,100 --> 00:22:18,120
So that's really subtle and still,
391
00:22:18,120 --> 00:22:20,550
it creates some distinction here.
392
00:22:20,550 --> 00:22:22,560
Now we just need to make the spacing
393
00:22:22,560 --> 00:22:25,830
between this one here and this one, the same,
394
00:22:25,830 --> 00:22:29,960
because like this, it looks a bit off, right?
395
00:22:29,960 --> 00:22:32,500
So I'm sure you can see that as well.
396
00:22:32,500 --> 00:22:36,260
So what I'm gonna do is to add this 12.8 padding
397
00:22:36,260 --> 00:22:41,033
of rem to the bottom of this section right here.
398
00:22:41,870 --> 00:22:46,870
So now, top 9.6, then zero, then 12.8 rem
399
00:22:48,010 --> 00:22:50,490
and then zero on the other side.
400
00:22:50,490 --> 00:22:53,900
And actually, we can omit this last value.
401
00:22:53,900 --> 00:22:57,100
So I'm not sure if I mentioned that before,
402
00:22:57,100 --> 00:23:01,820
but usually the order, as we already know, goes like this.
403
00:23:01,820 --> 00:23:06,820
So top, then right, then bottom and then left.
404
00:23:09,040 --> 00:23:09,950
Right.
405
00:23:09,950 --> 00:23:14,570
However, we can also just write three values.
406
00:23:14,570 --> 00:23:17,310
So then it goes top, then the one
407
00:23:17,310 --> 00:23:19,583
in the middle is the horizontal spacing.
408
00:23:20,710 --> 00:23:23,723
And then the last one is the left value.
409
00:23:25,830 --> 00:23:27,690
And so what this means is
410
00:23:27,690 --> 00:23:31,400
that we can basically just omit this last value here.
411
00:23:31,400 --> 00:23:34,263
If it is the same, of course, as this one.
412
00:23:36,280 --> 00:23:37,860
Right?
413
00:23:37,860 --> 00:23:38,870
So let's see.
414
00:23:38,870 --> 00:23:41,490
And now, because we changed that spacing,
415
00:23:41,490 --> 00:23:44,760
the line is exactly between these two sections.
416
00:23:44,760 --> 00:23:46,803
And so that looks great now.
417
00:23:47,980 --> 00:23:50,720
Now, since we were changing here the spacing,
418
00:23:50,720 --> 00:23:54,300
I think that here we do have way too much spacing,
419
00:23:54,300 --> 00:23:55,560
actually.
420
00:23:55,560 --> 00:23:58,230
So this section here, I wanted to be closer
421
00:23:58,230 --> 00:24:00,740
to this previous one to, basically,
422
00:24:00,740 --> 00:24:04,223
continuing the flow off the user, trying to sign up here.
423
00:24:05,350 --> 00:24:07,157
So let's reduce that to (indistinct).
424
00:24:08,040 --> 00:24:11,833
So 4.8 rem.
425
00:24:14,920 --> 00:24:16,750
All right.
426
00:24:16,750 --> 00:24:20,270
And so, I think we fixed that as well.
427
00:24:20,270 --> 00:24:23,750
And so now if we come here and keep scrolling down,
428
00:24:23,750 --> 00:24:26,250
then I think the flow here is a little bit better.
429
00:24:27,520 --> 00:24:28,400
All right.
430
00:24:28,400 --> 00:24:30,260
But going back to our footer,
431
00:24:30,260 --> 00:24:32,110
I think that we actually finished it.
432
00:24:32,110 --> 00:24:33,960
And so with this,
433
00:24:33,960 --> 00:24:36,950
we actually now finished the desktop version.
434
00:24:36,950 --> 00:24:41,380
So basically the big version of our Omnifood website.
435
00:24:41,380 --> 00:24:45,100
So congratulations, really, really well done.
436
00:24:45,100 --> 00:24:48,620
And it's really nice to see that you're still with me here
437
00:24:48,620 --> 00:24:52,830
and that you made it all the way to the end of this project.
438
00:24:52,830 --> 00:24:55,343
So this was a huge project.
439
00:24:56,830 --> 00:25:01,667
So in fact, we did write, like, 600 lines of CSS here,
440
00:25:01,667 --> 00:25:04,583
you see, and here in this one, even more.
441
00:25:05,480 --> 00:25:09,600
Or actually a bit less, but almost 300 as well.
442
00:25:09,600 --> 00:25:13,990
So together, that's almost like 1000 lines of CSS.
443
00:25:13,990 --> 00:25:17,530
So really great job and that's a huge achievement
444
00:25:17,530 --> 00:25:20,600
for your very first big project.
445
00:25:20,600 --> 00:25:24,970
However, of course, the project is not yet done here.
446
00:25:24,970 --> 00:25:28,090
So that's because, as I mentioned right at the beginning
447
00:25:28,090 --> 00:25:32,680
of the project, the next step is to now make it responsive.
448
00:25:32,680 --> 00:25:35,630
So make it adapt also to smaller screens
449
00:25:35,630 --> 00:25:38,053
that are smaller than simply this.
450
00:25:39,120 --> 00:25:42,210
So right now, if we scaled down here our page,
451
00:25:42,210 --> 00:25:44,780
then you will see that it will immediately start
452
00:25:44,780 --> 00:25:48,940
to break and look really bad in many places.
453
00:25:48,940 --> 00:25:50,100
Right?
454
00:25:50,100 --> 00:25:51,890
So here, for example,
455
00:25:51,890 --> 00:25:56,470
this is, of course, completely unacceptable, right?
456
00:25:56,470 --> 00:26:00,350
And also here, things are really starting to break down
457
00:26:00,350 --> 00:26:05,350
and even worse if we make it even smaller, right?
458
00:26:05,490 --> 00:26:07,130
Oh, actually I'm noticing here
459
00:26:07,130 --> 00:26:09,623
that we didn't finish the navigation yet.
460
00:26:11,370 --> 00:26:13,160
So let's quickly do that.
461
00:26:13,160 --> 00:26:17,223
So I said we were already done, but in fact we are not.
462
00:26:18,290 --> 00:26:20,700
So let's see what sections we want here.
463
00:26:20,700 --> 00:26:23,730
And there's not a lot to choose from.
464
00:26:23,730 --> 00:26:26,707
So let's make the first one, the "How it works".
465
00:26:27,740 --> 00:26:32,440
Then the "meals" section should be the next navigation item,
466
00:26:32,440 --> 00:26:36,530
then the testimonials and then the pricing section.
467
00:26:36,530 --> 00:26:37,943
And that's actually it.
468
00:26:39,380 --> 00:26:41,280
So that's all that we have to do here.
469
00:26:42,390 --> 00:26:44,223
So let's quickly finish that,
470
00:26:45,090 --> 00:26:46,823
going back all the way to the top.
471
00:26:52,980 --> 00:26:54,397
So "How it works",
472
00:26:56,847 --> 00:26:57,680
"meals",
473
00:27:01,615 --> 00:27:03,448
then the testimonials,
474
00:27:05,700 --> 00:27:07,340
pricing, and then here,
475
00:27:07,340 --> 00:27:10,380
of course, finally, our call to action.
476
00:27:10,380 --> 00:27:12,560
Now, I'm not gonna use the same text here,
477
00:27:12,560 --> 00:27:14,830
which was "Start eating well"
478
00:27:14,830 --> 00:27:19,070
because that's too repetitive and also the text is too long.
479
00:27:19,070 --> 00:27:22,210
So here let's try something simpler.
480
00:27:22,210 --> 00:27:25,537
So just "Try for free".
481
00:27:26,570 --> 00:27:27,610
Okay.
482
00:27:27,610 --> 00:27:30,000
And so that looks a lot more natural now
483
00:27:30,000 --> 00:27:32,020
with the real content.
484
00:27:32,020 --> 00:27:35,470
And so now, in fact, we are done here.
485
00:27:35,470 --> 00:27:38,170
So, great job and make sure
486
00:27:38,170 --> 00:27:40,160
that you really study this project,
487
00:27:40,160 --> 00:27:41,850
that you understand all the code
488
00:27:41,850 --> 00:27:44,840
and only then move on to our next section
489
00:27:44,840 --> 00:27:48,100
where we will then make this project responsive.
490
00:27:48,100 --> 00:27:51,680
So take a break here because you really deserve it.
491
00:27:51,680 --> 00:27:55,813
And then afterwards, let's go together to the next section.
35594
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.