Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,280 --> 00:00:04,850
Let's continue building our Testimonial Section
2
00:00:04,850 --> 00:00:06,853
by now adding the gallery.
3
00:00:09,150 --> 00:00:11,460
So here we already have
4
00:00:11,460 --> 00:00:14,620
the element with the class of gallery.
5
00:00:14,620 --> 00:00:17,040
And so this is where now we are going to add
6
00:00:17,040 --> 00:00:19,130
our 12 images.
7
00:00:19,130 --> 00:00:22,010
And so also the gallery will then, of course,
8
00:00:22,010 --> 00:00:24,210
be our grid container.
9
00:00:24,210 --> 00:00:25,540
Right?
10
00:00:25,540 --> 00:00:28,190
Now, here I could, of course, now simply put
11
00:00:28,190 --> 00:00:31,120
all these 12 images one after another,
12
00:00:31,120 --> 00:00:34,570
but I actually will want to build a very nice
13
00:00:34,570 --> 00:00:37,180
hover effect on these images.
14
00:00:37,180 --> 00:00:40,960
And so for that, we'll need each of them to be inside
15
00:00:40,960 --> 00:00:42,453
of a container element.
16
00:00:43,760 --> 00:00:46,080
And for that, I will use again, the figure
17
00:00:48,630 --> 00:00:49,840
with the class of
18
00:00:51,160 --> 00:00:51,993
gallery
19
00:00:53,960 --> 00:00:55,410
item
20
00:00:55,410 --> 00:00:57,563
So, not "galltey"
21
00:00:59,670 --> 00:01:00,853
but more like this.
22
00:01:03,200 --> 00:01:07,150
And now let's add the image here.
23
00:01:07,150 --> 00:01:07,983
So img
24
00:01:09,010 --> 00:01:09,940
and then
25
00:01:11,170 --> 00:01:12,970
reach into the gallery folder
26
00:01:12,970 --> 00:01:15,113
and then here "gallery 1"
27
00:01:17,490 --> 00:01:19,900
and the alt text is,
28
00:01:19,900 --> 00:01:23,330
and here I'm actually just going to write a generic alt text
29
00:01:23,330 --> 00:01:27,030
and instead of describing each of the images perfectly,
30
00:01:27,030 --> 00:01:31,120
so I will just write "photo of...
31
00:01:31,120 --> 00:01:32,330
beautifully...
32
00:01:34,380 --> 00:01:35,593
...arranged food"
33
00:01:37,560 --> 00:01:42,560
because this is what all these images here are all about
34
00:01:42,830 --> 00:01:46,200
Here forgetting to close the element.
35
00:01:46,200 --> 00:01:47,263
Yeah, that's it.
36
00:01:48,220 --> 00:01:50,280
So the figure element is really
37
00:01:50,280 --> 00:01:53,860
the perfect container element for images.
38
00:01:53,860 --> 00:01:57,030
So many times when you see, for example,
39
00:01:57,030 --> 00:01:58,920
in a blog post images,
40
00:01:58,920 --> 00:02:02,220
then usually they also have some kind of caption.
41
00:02:02,220 --> 00:02:06,380
And for that we can use the fig caption element
42
00:02:06,380 --> 00:02:08,873
and then write something basically below it,
43
00:02:12,000 --> 00:02:13,720
something like this.
44
00:02:13,720 --> 00:02:15,580
All right. Now, in this case,
45
00:02:15,580 --> 00:02:17,870
we actually don't want any caption.
46
00:02:17,870 --> 00:02:19,900
We simply want to display the image
47
00:02:19,900 --> 00:02:22,150
inside of this container.
48
00:02:22,150 --> 00:02:23,700
And again, the reason for that
49
00:02:23,700 --> 00:02:26,020
is a really cool hover effect
50
00:02:26,020 --> 00:02:28,470
as I'm going to show you in a minute.
51
00:02:28,470 --> 00:02:30,623
So I will turn this off here, just so you know,
52
00:02:30,623 --> 00:02:33,660
that we can also use the fig caption element
53
00:02:33,660 --> 00:02:36,430
inside of the figure element.
54
00:02:36,430 --> 00:02:38,640
So we can not use this one outside.
55
00:02:38,640 --> 00:02:41,923
It is only allowed to be used inside of figure.
56
00:02:44,110 --> 00:02:45,550
Okay.
57
00:02:45,550 --> 00:02:48,023
But anyway, let's copy that here.
58
00:02:49,330 --> 00:02:52,347
Let's remove this and now just "gallery 2",
59
00:02:53,350 --> 00:02:56,280
and you'll see here it is now a different image
60
00:02:57,670 --> 00:02:59,330
and
61
00:02:59,330 --> 00:03:02,620
Yeah, so just an image inside of a figure.
62
00:03:02,620 --> 00:03:05,823
And so now let's just copy this a couple of times,
63
00:03:09,099 --> 00:03:10,449
I'm not even counting here.
64
00:03:11,340 --> 00:03:14,293
If it's too much, we just delete the remaining ones.
65
00:03:15,600 --> 00:03:16,657
So "3",
66
00:03:17,777 --> 00:03:18,797
"4",
67
00:03:23,397 --> 00:03:24,860
"6",
68
00:03:24,860 --> 00:03:26,210
So we're halfway through
69
00:03:28,470 --> 00:03:30,607
Because it's 12 images
70
00:03:30,607 --> 00:03:32,037
"8",
71
00:03:32,037 --> 00:03:32,967
"9",
72
00:03:35,307 --> 00:03:36,140
"10",
73
00:03:37,640 --> 00:03:38,970
and we're just missing one
74
00:03:40,070 --> 00:03:41,860
pasting that here again.
75
00:03:41,860 --> 00:03:43,013
And number 12.
76
00:03:44,200 --> 00:03:45,333
And there we go.
77
00:03:46,450 --> 00:03:50,950
So that's the HTML or our gallery, very simple.
78
00:03:50,950 --> 00:03:53,433
But here, of course, it is going to look crazy.
79
00:03:54,570 --> 00:03:55,773
And it does.
80
00:03:57,330 --> 00:03:59,900
So of course we need to make them a lot smaller
81
00:03:59,900 --> 00:04:03,750
and notice these... a small space here between the images
82
00:04:03,750 --> 00:04:05,600
That is actually because the images
83
00:04:05,600 --> 00:04:08,380
are inline elements by default.
84
00:04:08,380 --> 00:04:10,570
And so if we made them a block element,
85
00:04:10,570 --> 00:04:11,870
then this would disappear.
86
00:04:13,520 --> 00:04:16,000
And this is something important that you need to know,
87
00:04:16,000 --> 00:04:19,380
because sometimes we get these annoying white spaces
88
00:04:19,380 --> 00:04:23,390
around images, and then this is how you fix that.
89
00:04:23,390 --> 00:04:24,930
So
90
00:04:24,930 --> 00:04:26,500
gallery-
91
00:04:26,500 --> 00:04:27,333
item,
92
00:04:28,260 --> 00:04:32,490
and then I didn't add a class here to these images.
93
00:04:32,490 --> 00:04:35,880
So I'm simply using the descendant selector here.
94
00:04:35,880 --> 00:04:37,270
And so
95
00:04:37,270 --> 00:04:38,870
to fix that space,
96
00:04:38,870 --> 00:04:43,200
all we have to do is to set them to a block level element.
97
00:04:43,200 --> 00:04:45,933
And so now you see that the spacing is gone.
98
00:04:47,801 --> 00:04:48,634
Okay.
99
00:04:50,170 --> 00:04:52,560
But now of course, what we will want to do
100
00:04:52,560 --> 00:04:54,413
is to actually create our grid.
101
00:04:55,520 --> 00:04:59,713
So that's right here on the gallery element.
102
00:05:01,720 --> 00:05:03,640
So gallery, and once again,
103
00:05:03,640 --> 00:05:06,720
here we are creating like our own new grid
104
00:05:06,720 --> 00:05:08,753
instead of using the predefined one.
105
00:05:10,070 --> 00:05:12,520
So display: grid,
106
00:05:12,520 --> 00:05:13,353
and then
107
00:05:14,850 --> 00:05:16,713
grid-template-columns.
108
00:05:18,810 --> 00:05:21,650
And we want three equal sized columns.
109
00:05:21,650 --> 00:05:23,250
So three times, 1fr.
110
00:05:25,260 --> 00:05:26,500
All right,
111
00:05:26,500 --> 00:05:29,180
but still that will not fix the problem
112
00:05:29,180 --> 00:05:32,160
because now the images are still huge
113
00:05:32,160 --> 00:05:35,193
and they no longer even fit our page.
114
00:05:36,520 --> 00:05:37,690
All right.
115
00:05:37,690 --> 00:05:39,420
And so of course the solution here
116
00:05:39,420 --> 00:05:41,983
is to make these images here flexible.
117
00:05:43,160 --> 00:05:47,610
So simply giving them a width of 100%.
118
00:05:47,610 --> 00:05:50,730
And so that should fix it.
119
00:05:50,730 --> 00:05:51,793
And it did.
120
00:05:53,110 --> 00:05:54,060
Nice.
121
00:05:54,060 --> 00:05:57,300
That's starting to look like something already.
122
00:05:57,300 --> 00:06:01,003
Let's just add some small spacing between the images.
123
00:06:02,270 --> 00:06:05,233
So not to have them glued together like that.
124
00:06:07,070 --> 00:06:10,160
And a very small gap here should be enough,
125
00:06:10,160 --> 00:06:11,963
Like just 16 pixels.
126
00:06:14,180 --> 00:06:15,930
Something like this.
127
00:06:15,930 --> 00:06:17,560
Then let's go back.
128
00:06:17,560 --> 00:06:19,453
And that looks beautiful.
129
00:06:20,950 --> 00:06:25,330
Okay. So the gallery itself is actually already done.
130
00:06:25,330 --> 00:06:26,260
Right?
131
00:06:26,260 --> 00:06:29,680
And so let's think now about this entire section,
132
00:06:29,680 --> 00:06:31,600
because there is still a lot of stuff
133
00:06:31,600 --> 00:06:32,883
that we need to fix here.
134
00:06:33,970 --> 00:06:35,490
So first of all,
135
00:06:35,490 --> 00:06:38,770
to make this section here stand out a little bit more,
136
00:06:38,770 --> 00:06:40,480
especially because we have these
137
00:06:40,480 --> 00:06:43,540
two content blocks here, side by side,
138
00:06:43,540 --> 00:06:45,440
we should now give this section here
139
00:06:45,440 --> 00:06:47,063
a different background color.
140
00:06:48,920 --> 00:06:52,580
So you see that we have these three sections,
141
00:06:52,580 --> 00:06:55,670
which all have to white background color,
142
00:06:55,670 --> 00:06:57,330
and the first one here.
143
00:06:57,330 --> 00:07:01,250
So the one here has this very light orange tone.
144
00:07:01,250 --> 00:07:02,980
And so I think we should now
145
00:07:02,980 --> 00:07:05,320
finally go back to having a section
146
00:07:05,320 --> 00:07:07,600
with that orange tone as well
147
00:07:07,600 --> 00:07:10,720
to make it stand out a little bit more from the rest
148
00:07:10,720 --> 00:07:14,000
and to create some nice visual contrast here
149
00:07:14,000 --> 00:07:15,333
between the sections.
150
00:07:17,330 --> 00:07:18,453
So let's do that.
151
00:07:22,000 --> 00:07:25,433
And I think it is this one here.
152
00:07:27,270 --> 00:07:28,103
Right.
153
00:07:29,080 --> 00:07:32,460
So that looks already a lot nicer.
154
00:07:32,460 --> 00:07:34,360
I think at least,
155
00:07:34,360 --> 00:07:38,010
but now there's still something strange going on
156
00:07:38,010 --> 00:07:40,360
because it would be a lot nicer,
157
00:07:40,360 --> 00:07:43,010
if the spacing, for example, here at the top
158
00:07:43,010 --> 00:07:46,770
would be exactly the same as it is here between these images
159
00:07:48,260 --> 00:07:50,330
and also here at the right side.
160
00:07:50,330 --> 00:07:52,270
So the gallery is glued right now,
161
00:07:52,270 --> 00:07:55,040
here to the side of the browser.
162
00:07:55,040 --> 00:07:57,700
And it would be nice to basically also have
163
00:07:57,700 --> 00:07:59,900
the exact same spacing that is here
164
00:07:59,900 --> 00:08:02,990
inside of the gallery around it.
165
00:08:02,990 --> 00:08:06,220
So that would make it look a bit more natural.
166
00:08:06,220 --> 00:08:09,920
And so what we need to do is to basically remove
167
00:08:09,920 --> 00:08:12,740
this huge padding from the section,
168
00:08:12,740 --> 00:08:17,220
and instead put it inside of this container right here.
169
00:08:17,220 --> 00:08:21,943
So having this big padding only inside of this left side.
170
00:08:23,030 --> 00:08:23,863
Okay.
171
00:08:25,080 --> 00:08:29,300
So I'm going to remove that from here
172
00:08:29,300 --> 00:08:31,780
and put it in the testimonials
173
00:08:31,780 --> 00:08:34,520
and actually we will want it basically around
174
00:08:34,520 --> 00:08:37,610
the entire thing, so not just top and bottom,
175
00:08:37,610 --> 00:08:39,860
because with this we would then finally
176
00:08:39,860 --> 00:08:42,453
also create some space around it.
177
00:08:44,130 --> 00:08:48,573
And actually that was the wrong element.
178
00:08:50,020 --> 00:08:52,133
So let's go back.
179
00:08:54,700 --> 00:08:55,890
Oh yeah.
180
00:08:55,890 --> 00:08:57,890
So it should, of course, be here
181
00:08:57,890 --> 00:09:00,033
in the testimonials container.
182
00:09:02,980 --> 00:09:06,290
So not just around the grid container,
183
00:09:06,290 --> 00:09:09,840
but really inside this entire thing.
184
00:09:09,840 --> 00:09:11,823
So including the headings.
185
00:09:13,130 --> 00:09:14,430
Right.
186
00:09:14,430 --> 00:09:17,443
And yeah, so that is what I was going for.
187
00:09:19,140 --> 00:09:22,120
So at this, we have the exact same spacing here
188
00:09:22,120 --> 00:09:24,323
as we had in the other sections.
189
00:09:25,170 --> 00:09:27,023
And also below it.
190
00:09:28,140 --> 00:09:31,163
And also we have the same spacing here on the left side.
191
00:09:32,260 --> 00:09:34,680
So that looks perfect like this.
192
00:09:34,680 --> 00:09:36,710
But now let's think about the spacing
193
00:09:36,710 --> 00:09:38,960
that I was talking about earlier.
194
00:09:38,960 --> 00:09:42,780
So basically adding this spacing around the gallery,
195
00:09:42,780 --> 00:09:44,403
that is also inside of it.
196
00:09:45,580 --> 00:09:47,723
So that shouldn't be too hard.
197
00:09:49,150 --> 00:09:54,103
We can simply add some padding, also inside the gallery.
198
00:09:55,580 --> 00:09:57,643
So padding 1.6rem.
199
00:09:59,110 --> 00:10:03,823
And so again, the exact same spacing as we have here, right?
200
00:10:06,040 --> 00:10:09,400
And that is exactly what I was talking about.
201
00:10:09,400 --> 00:10:11,900
So that looks really cool, I think.
202
00:10:11,900 --> 00:10:16,233
And it's nicely integrated now, basically into this section.
203
00:10:17,750 --> 00:10:19,863
Now we just have some problems here.
204
00:10:20,740 --> 00:10:22,770
I would say, for example, that here,
205
00:10:22,770 --> 00:10:24,850
the text is quite narrow
206
00:10:24,850 --> 00:10:29,180
and it is breaking here into these five lines in this one.
207
00:10:29,180 --> 00:10:31,810
And in this one while here at the top,
208
00:10:31,810 --> 00:10:33,623
we only have four lines.
209
00:10:34,470 --> 00:10:37,090
So all in all, it is looking a bit narrow.
210
00:10:37,090 --> 00:10:39,740
And I think even the spacing between these two
211
00:10:39,740 --> 00:10:41,073
is not enough.
212
00:10:42,190 --> 00:10:46,550
So the spacing here, I think between the rows is good,
213
00:10:46,550 --> 00:10:49,530
but it's many times to case that for the columns,
214
00:10:49,530 --> 00:10:51,053
we need some more spacing.
215
00:10:52,320 --> 00:10:53,940
So let's actually increase that
216
00:10:56,090 --> 00:10:59,853
before we do the other thing that I was talking about.
217
00:11:00,900 --> 00:11:01,830
So...
218
00:11:02,830 --> 00:11:04,210
The row gap is,
219
00:11:04,210 --> 00:11:05,503
is good already,
220
00:11:07,800 --> 00:11:10,143
but now let's add a lot more column gap.
221
00:11:12,240 --> 00:11:14,520
So many times it doesn't look so natural
222
00:11:14,520 --> 00:11:17,500
to have the same gap in the row and in the column.
223
00:11:17,500 --> 00:11:20,453
And so the column many times needs a lot more.
224
00:11:21,440 --> 00:11:24,240
So that looks a lot better in terms of spacing,
225
00:11:24,240 --> 00:11:26,230
but then we made the problem even worse
226
00:11:26,230 --> 00:11:28,693
of the content here being too narrow.
227
00:11:29,960 --> 00:11:32,800
So there are two things that we need to fix here.
228
00:11:32,800 --> 00:11:34,880
First of all, there is too much space
229
00:11:34,880 --> 00:11:38,800
between the gallery and the testimonials here.
230
00:11:38,800 --> 00:11:41,233
And let me show you that in the inspector.
231
00:11:42,530 --> 00:11:44,470
So the inspector, once again,
232
00:11:44,470 --> 00:11:46,763
it's really an invaluable tool here.
233
00:11:48,120 --> 00:11:51,090
So what I mean here is that, of course,
234
00:11:51,090 --> 00:11:53,160
around the testimonials container,
235
00:11:53,160 --> 00:11:56,860
we have our padding of 9.6, right?
236
00:11:56,860 --> 00:11:59,680
And so that's basically the space that we would want
237
00:11:59,680 --> 00:12:03,980
between these testimonials and the gallery.
238
00:12:03,980 --> 00:12:08,283
However, here, inside this grid, we also have this spacing,
239
00:12:09,260 --> 00:12:13,870
Right? And so this space we actually do not want here.
240
00:12:13,870 --> 00:12:17,700
So instead of using this predefined grid here,
241
00:12:17,700 --> 00:12:19,570
So our big layout grid,
242
00:12:19,570 --> 00:12:23,300
we will actually once again, create our own grid.
243
00:12:23,300 --> 00:12:26,990
So for this reason that we can remove then the gap here,
244
00:12:26,990 --> 00:12:28,750
but there's also a second reason
245
00:12:28,750 --> 00:12:30,860
which I will talk about next.
246
00:12:30,860 --> 00:12:34,290
So that is the second thing that I mentioned earlier.
247
00:12:34,290 --> 00:12:36,037
So I said, the first thing is that
248
00:12:36,037 --> 00:12:38,290
the spacing here is too much,
249
00:12:38,290 --> 00:12:41,120
which is because we're adding the padding
250
00:12:41,120 --> 00:12:42,900
plus the column gap.
251
00:12:42,900 --> 00:12:45,570
But then the second problem is that
252
00:12:45,570 --> 00:12:49,590
I think that actually this gallery here is a bit too wide.
253
00:12:49,590 --> 00:12:53,000
So right now, of course, these columns have the same size,
254
00:12:53,000 --> 00:12:54,173
but we should fix that.
255
00:12:55,790 --> 00:12:58,773
Okay. But first let's do that first thing.
256
00:12:59,790 --> 00:13:03,700
So removing this predefined grid from here
257
00:13:03,700 --> 00:13:07,393
and creating our own grid for the section testimonials.
258
00:13:08,630 --> 00:13:09,673
So that's here.
259
00:13:10,630 --> 00:13:12,420
And so display: grid
260
00:13:16,750 --> 00:13:18,480
and then grid-template-columns,
261
00:13:18,480 --> 00:13:22,050
and for now, I will again make them equally sized
262
00:13:22,050 --> 00:13:25,053
just so we can see that first problem being fixed.
263
00:13:27,140 --> 00:13:28,420
Okay.
264
00:13:28,420 --> 00:13:32,950
And so now you see that the only spacing that we have here
265
00:13:32,950 --> 00:13:35,640
is basically coming from this padding
266
00:13:35,640 --> 00:13:38,840
and then also that 1.6rem of padding
267
00:13:38,840 --> 00:13:40,800
that is coming here from the gallery.
268
00:13:40,800 --> 00:13:44,943
But I would say that we can neglect that one, right?
269
00:13:46,030 --> 00:13:48,300
So this is a bit better now,
270
00:13:48,300 --> 00:13:50,960
but still we have these two here
271
00:13:50,960 --> 00:13:54,200
in five lines of text and not just four,
272
00:13:54,200 --> 00:13:57,223
which would make them look a lot better, like here.
273
00:13:58,480 --> 00:14:01,500
Also this content here is very dense.
274
00:14:01,500 --> 00:14:06,500
It's like a big wall of a lot of colorful and big content.
275
00:14:07,070 --> 00:14:09,350
And so if you take a look at this,
276
00:14:09,350 --> 00:14:12,850
it kind of looks as though this right side here
277
00:14:12,850 --> 00:14:16,990
would be a lot bigger than the left side, right?
278
00:14:16,990 --> 00:14:19,560
It has a huge visual impact.
279
00:14:19,560 --> 00:14:22,640
And so I think we can fix that a little bit
280
00:14:22,640 --> 00:14:26,930
simply by making this gallery a little bit more narrow.
281
00:14:26,930 --> 00:14:28,180
And so that will then of course
282
00:14:28,180 --> 00:14:31,410
free up some space here for this left side.
283
00:14:31,410 --> 00:14:35,343
And we'll also visually make it look a lot more balanced.
284
00:14:36,650 --> 00:14:37,483
Okay.
285
00:14:38,470 --> 00:14:42,720
Now here, of course we don't want to make huge changes.
286
00:14:42,720 --> 00:14:45,480
So for example, we don't want this column
287
00:14:45,480 --> 00:14:48,100
to be twice as wide as the other one
288
00:14:48,970 --> 00:14:51,810
That would be way too much.
Right?
289
00:14:51,810 --> 00:14:54,453
So like this, it also doesn't look good.
290
00:14:56,670 --> 00:15:00,430
So one trick that I like to use when I'm using frs here
291
00:15:00,430 --> 00:15:03,730
is to use them as though they were percentages.
292
00:15:03,730 --> 00:15:06,680
So remember that these two values here,
293
00:15:06,680 --> 00:15:08,600
they actually don't need to be one
294
00:15:08,600 --> 00:15:11,393
in order for the columns to have the same size.
295
00:15:13,829 --> 00:15:14,662
They simply need to be the same number.
296
00:15:14,662 --> 00:15:16,860
So we could also say 50,
297
00:15:16,860 --> 00:15:18,510
and 50.
298
00:15:18,510 --> 00:15:19,410
Right?
299
00:15:19,410 --> 00:15:22,970
So that would then look exactly the same as before.
300
00:15:22,970 --> 00:15:25,910
And so now this looks a little bit like percentages
301
00:15:25,910 --> 00:15:30,910
where this one is like 50% and this one is another 50%.
302
00:15:31,230 --> 00:15:34,160
Just remember that we do not use percentages here
303
00:15:34,160 --> 00:15:37,553
because then we wouldn't take care of the gap.
304
00:15:38,410 --> 00:15:41,170
Now, here, we don't have a gap, but anyway,
305
00:15:41,170 --> 00:15:43,043
we always should use fr.
306
00:15:43,950 --> 00:15:46,600
Now the point of this is that now we can say
307
00:15:46,600 --> 00:15:51,273
that this one should be like 55% and this one, just 45.
308
00:15:52,810 --> 00:15:56,000
And so with this, we still have 100.
309
00:15:56,000 --> 00:15:58,640
And so the width is the same as before,
310
00:15:58,640 --> 00:16:01,443
but it is now going to be a bit more balanced.
311
00:16:02,490 --> 00:16:03,603
So you see that?
312
00:16:05,170 --> 00:16:07,113
So this is I think a lot better.
313
00:16:08,420 --> 00:16:09,770
And again, of course,
314
00:16:09,770 --> 00:16:13,220
these two together do not need to be 100.
315
00:16:13,220 --> 00:16:14,820
We just do it like this,
316
00:16:14,820 --> 00:16:18,490
so we can think of this in terms of percentages.
317
00:16:18,490 --> 00:16:22,813
So that's just a nice trick that I like to use myself. Okay?
318
00:16:24,870 --> 00:16:29,720
Now, if we check this out, this will create a problem.
319
00:16:29,720 --> 00:16:32,400
Well, actually not right now,
320
00:16:32,400 --> 00:16:36,893
but let's see that we make this a bit smaller.
321
00:16:37,760 --> 00:16:40,660
Then we would get all this weird spacing here
322
00:16:40,660 --> 00:16:43,673
between these rows.
Right?
323
00:16:45,420 --> 00:16:47,600
And we do not want that, of course.
324
00:16:47,600 --> 00:16:50,940
And so here in our grid, let's define
325
00:16:50,940 --> 00:16:54,310
align-items: set to center.
326
00:16:54,310 --> 00:16:58,400
And so that will, or at least it should fix that problem
327
00:16:59,750 --> 00:17:00,660
Right?
328
00:17:00,660 --> 00:17:03,020
Now, of course, the spacing here is gone
329
00:17:03,020 --> 00:17:04,620
like that uniform spacing
330
00:17:04,620 --> 00:17:09,033
that we had with this 1.6rem at the top as well.
331
00:17:10,030 --> 00:17:12,230
And so this is not ideal,
332
00:17:12,230 --> 00:17:16,223
but we will fix this a little bit later with media queries.
333
00:17:18,150 --> 00:17:18,983
Okay.
334
00:17:18,983 --> 00:17:22,310
For now on this screen size here, at least, I think
335
00:17:22,310 --> 00:17:25,040
it looks really, really nice.
336
00:17:25,040 --> 00:17:28,330
Now just a small detail that I mentioned before
337
00:17:28,330 --> 00:17:30,253
is the color of this text here.
338
00:17:31,250 --> 00:17:36,250
So remember that it is 777 on now this background color.
339
00:17:37,850 --> 00:17:42,250
And so the contrast ratio might not be great at this point.
340
00:17:42,250 --> 00:17:43,800
So let's actually check that
341
00:17:45,080 --> 00:17:46,803
here in contrast checker.
342
00:17:48,630 --> 00:17:50,450
And so, yeah.
343
00:17:50,450 --> 00:17:52,823
Well we're actually using this one.
344
00:17:54,270 --> 00:17:57,853
But still it is poor.
So it should be above 4.5.
345
00:17:59,869 --> 00:18:01,630
And so what I'm going to do now
346
00:18:01,630 --> 00:18:06,090
is to basically direct this here as low as it can
347
00:18:06,090 --> 00:18:09,513
before it becomes a yellow, basically.
348
00:18:10,440 --> 00:18:11,273
Right?
349
00:18:11,273 --> 00:18:14,100
So yellow means that it is at least 4.5,
350
00:18:14,100 --> 00:18:16,670
which means it is acceptable.
351
00:18:16,670 --> 00:18:19,593
So this gray color here is basically the last one
352
00:18:19,593 --> 00:18:23,033
that we can use safely on this background color.
353
00:18:24,140 --> 00:18:27,103
So let me copy it and use this one instead.
354
00:18:29,950 --> 00:18:30,783
Okay.
355
00:18:32,510 --> 00:18:37,510
So we, as code, converted it to the lowercase F's
356
00:18:38,070 --> 00:18:41,490
and let me actually paste then this color here
357
00:18:41,490 --> 00:18:43,193
in our design decisions.
358
00:18:48,500 --> 00:18:49,570
And I'm going to say
359
00:18:51,760 --> 00:18:55,920
lightest gray allowed on...
360
00:19:00,590 --> 00:19:01,423
this one.
361
00:19:03,423 --> 00:19:04,273
All right.
362
00:19:05,840 --> 00:19:07,093
So let's go back.
363
00:19:09,640 --> 00:19:11,090
And...
364
00:19:11,090 --> 00:19:12,940
Yeah, nice.
365
00:19:12,940 --> 00:19:15,170
So it looks almost the same as before,
366
00:19:15,170 --> 00:19:18,610
but it is still a significantly lighter than this one
367
00:19:18,610 --> 00:19:20,860
creating this nice visual hierarchy
368
00:19:20,860 --> 00:19:24,313
between this more important content and then this one.
369
00:19:26,010 --> 00:19:27,680
All right. And with this,
370
00:19:27,680 --> 00:19:30,680
we are almost finished with the section.
371
00:19:30,680 --> 00:19:33,200
So we could actually say we are finished,
372
00:19:33,200 --> 00:19:35,990
but remember how I said that I wanted to show you
373
00:19:35,990 --> 00:19:39,100
a nice hover effect here on this images?
374
00:19:39,100 --> 00:19:42,730
And so let me now show you what I'm talking about.
375
00:19:42,730 --> 00:19:44,540
So basically what I want to do
376
00:19:44,540 --> 00:19:47,930
is that whenever we hover over one of these images
377
00:19:47,930 --> 00:19:49,670
that they'll scale up
378
00:19:49,670 --> 00:19:51,743
so that they become a little bit larger.
379
00:19:57,450 --> 00:19:59,433
So that's quite simple.
380
00:20:00,420 --> 00:20:02,680
So we will again, select these images
381
00:20:03,820 --> 00:20:08,340
and then we will define the hover state on the images.
382
00:20:08,340 --> 00:20:12,760
So basically what happens as we hover over the images.
383
00:20:12,760 --> 00:20:16,490
So here again, we use the transform property,
384
00:20:16,490 --> 00:20:19,990
which remember has all kinds of different options.
385
00:20:19,990 --> 00:20:24,990
So we have used all the time the translates functions here,
386
00:20:25,530 --> 00:20:28,010
but there are other things that we can do.
387
00:20:28,010 --> 00:20:30,933
For example, we could rotate them.
388
00:20:31,890 --> 00:20:34,460
So let's try that like
389
00:20:34,460 --> 00:20:35,773
45 degrees.
390
00:20:36,840 --> 00:20:39,820
So "deg" stands for degrees.
391
00:20:39,820 --> 00:20:43,593
And so that's yet another unit that we can use in CSS.
392
00:20:45,200 --> 00:20:47,550
So of course this is not what we're going for,
393
00:20:47,550 --> 00:20:49,950
but we could do this.
394
00:20:49,950 --> 00:20:52,710
So now the images rotate.
395
00:20:52,710 --> 00:20:54,480
And sometimes if you're building
396
00:20:55,330 --> 00:20:57,540
something like a more creative layout,
397
00:20:57,540 --> 00:21:01,160
then this might actually be a nice effect to go for.
398
00:21:01,160 --> 00:21:04,960
But in this case, what I want to do is really to scale.
399
00:21:04,960 --> 00:21:08,113
And I think we already did this before at some point.
400
00:21:09,090 --> 00:21:10,823
Let's try 1.1.
401
00:21:13,340 --> 00:21:14,620
Okay.
402
00:21:14,620 --> 00:21:15,583
Like this.
403
00:21:16,970 --> 00:21:19,640
But now of course let's make it smooth.
404
00:21:19,640 --> 00:21:23,810
And so remember that all we have to do in order to do that
405
00:21:23,810 --> 00:21:27,733
is to add the transition property on the original element.
406
00:21:29,540 --> 00:21:32,610
So transition: all.
407
00:21:32,610 --> 00:21:35,540
So which I'm always using, because then if later
408
00:21:35,540 --> 00:21:38,610
I add some other things here to the hover effect,
409
00:21:38,610 --> 00:21:41,080
then I can be sure that it is covered here
410
00:21:41,080 --> 00:21:43,143
i the transitioned property already.
411
00:21:44,450 --> 00:21:47,360
And let's again use our longer animation time.
412
00:21:47,360 --> 00:21:50,630
So the same time that we used also in the cards,
413
00:21:50,630 --> 00:21:52,920
and this could actually be another design decision
414
00:21:52,920 --> 00:21:55,630
that we could put here in general.
415
00:21:55,630 --> 00:21:57,900
So animation times,
416
00:21:57,900 --> 00:22:01,303
but well, let's not over-complicate things.
417
00:22:02,880 --> 00:22:06,680
And so, now the animation is nice and smooth,
418
00:22:06,680 --> 00:22:08,800
but still there is something missing
419
00:22:08,800 --> 00:22:12,500
because well, it works perfectly,
420
00:22:12,500 --> 00:22:16,130
but it doesn't look really, really nice like this.
421
00:22:16,130 --> 00:22:19,920
So I think it does look a bit weird and a bit off,
422
00:22:19,920 --> 00:22:22,043
and so now that's where
423
00:22:22,043 --> 00:22:25,330
this container element comes into place.
424
00:22:25,330 --> 00:22:29,300
So the element into which we wrapped each of the images
425
00:22:30,690 --> 00:22:32,900
still remember that down here,
426
00:22:32,900 --> 00:22:37,900
each of the images is inside of a figure, right?
427
00:22:38,060 --> 00:22:40,600
And so now as we scale up the images,
428
00:22:40,600 --> 00:22:44,210
they will basically overflow their parent element.
429
00:22:44,210 --> 00:22:45,490
Right?
430
00:22:45,490 --> 00:22:48,037
And we can see that here in the inspector.
431
00:22:50,640 --> 00:22:53,223
So if we keep this one selected,
432
00:22:54,530 --> 00:22:56,170
Well...
433
00:22:56,170 --> 00:22:59,003
Cannot really see that. But if we turn on the grid,
434
00:22:59,920 --> 00:23:03,320
then it should become visible, and yeah.
435
00:23:03,320 --> 00:23:06,377
So basically each of these squares here
436
00:23:06,377 --> 00:23:08,480
is one of the figure elements.
437
00:23:08,480 --> 00:23:10,000
And so now as we hover,
438
00:23:10,000 --> 00:23:14,130
the image actually overflows dead figure, right?
439
00:23:14,130 --> 00:23:17,960
And so what we can do to prevent that, remember
440
00:23:17,960 --> 00:23:21,110
is to simply set overflow to hidden.
441
00:23:21,110 --> 00:23:23,740
And so that is the missing part of this trick
442
00:23:23,740 --> 00:23:25,900
and of this cool effect.
443
00:23:25,900 --> 00:23:27,100
So...
444
00:23:27,100 --> 00:23:28,220
gallery-item
445
00:23:31,130 --> 00:23:32,103
overflow:
446
00:23:33,200 --> 00:23:34,033
hidden.
447
00:23:36,800 --> 00:23:38,950
And let's remove this,
448
00:23:38,950 --> 00:23:40,990
or actually don't yet.
449
00:23:40,990 --> 00:23:43,010
And so you see that now
450
00:23:43,010 --> 00:23:46,090
it does no longer overflow the figure
451
00:23:46,090 --> 00:23:50,920
because we fixed that with, once again, overflow: hidden,
452
00:23:50,920 --> 00:23:53,070
which is a really important property
453
00:23:53,070 --> 00:23:54,553
that we need all the time.
454
00:23:56,320 --> 00:23:57,180
All right.
455
00:23:57,180 --> 00:23:59,610
And so now the images look as though they were
456
00:23:59,610 --> 00:24:01,720
the exact same size as before,
457
00:24:01,720 --> 00:24:03,700
but they scale in a little bit.
458
00:24:03,700 --> 00:24:07,460
So they kind of look as though they move towards the user
459
00:24:07,460 --> 00:24:08,960
as we hovered them.
460
00:24:08,960 --> 00:24:11,580
And so this is something that I really like,
461
00:24:11,580 --> 00:24:13,910
and it is just another cool trick
462
00:24:13,910 --> 00:24:16,973
that we can do using the power of CSS.
463
00:24:18,700 --> 00:24:19,770
Nice.
464
00:24:19,770 --> 00:24:23,510
So very, very beautiful section here, I think.
465
00:24:23,510 --> 00:24:27,610
And I'm pretty sure that you also really like it.
466
00:24:27,610 --> 00:24:30,470
So that's just putting all the design guidelines
467
00:24:30,470 --> 00:24:32,940
that we used before into practice
468
00:24:32,940 --> 00:24:36,233
together with the power of CSS to achieve it.
32952
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.