Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,330 --> 00:00:04,640
All right, let's now have some more fun
2
00:00:04,640 --> 00:00:06,860
by building another component.
3
00:00:06,860 --> 00:00:09,410
And so in this lecture and the next one,
4
00:00:09,410 --> 00:00:12,193
we're going to build a carousel component.
5
00:00:13,520 --> 00:00:16,030
And just like with the last one,
6
00:00:16,030 --> 00:00:18,240
I chose one of the components.
7
00:00:18,240 --> 00:00:20,140
So one of the carousels
8
00:00:20,140 --> 00:00:23,390
that we saw before in the component gallery.
9
00:00:23,390 --> 00:00:24,550
So in this case,
10
00:00:24,550 --> 00:00:26,530
this blue carousel here
11
00:00:26,530 --> 00:00:29,270
that I thought would be fun to recreate
12
00:00:29,270 --> 00:00:32,863
together with you now over these two lectures.
13
00:00:33,990 --> 00:00:36,930
So as I just showed you actually before,
14
00:00:36,930 --> 00:00:41,080
this is what our final carousel will look like.
15
00:00:41,080 --> 00:00:45,360
And if you ask me, this looks really, really cool.
16
00:00:45,360 --> 00:00:48,360
So we have this image here basically floating
17
00:00:48,360 --> 00:00:53,000
on top of, well, this background here.
18
00:00:53,000 --> 00:00:55,170
And then we have these two buttons here
19
00:00:55,170 --> 00:00:56,810
also with the shadow,
20
00:00:56,810 --> 00:00:59,040
which make them look as if they float
21
00:00:59,040 --> 00:01:02,007
a little bit also on top of this background.
22
00:01:02,007 --> 00:01:06,110
And then we even have these four dots here in the bottom.
23
00:01:06,110 --> 00:01:09,180
So this is gonna be a lot of fun to code.
24
00:01:09,180 --> 00:01:11,073
So let's get started.
25
00:01:12,080 --> 00:01:13,420
Now, here, we have this code
26
00:01:13,420 --> 00:01:15,570
from the previous lecture
27
00:01:15,570 --> 00:01:18,540
and actually I'm going to copy all of it.
28
00:01:18,540 --> 00:01:21,280
And then I will just delete what we don't need,
29
00:01:21,280 --> 00:01:25,193
because we will once again use the same colors.
30
00:01:25,193 --> 00:01:29,233
So basically a similar design style.
31
00:01:31,260 --> 00:01:33,580
So another HTML file,
32
00:01:33,580 --> 00:01:38,580
and this one is called zero two and then carousel.html.
33
00:01:41,790 --> 00:01:43,333
Close down this one.
34
00:01:45,176 --> 00:01:48,290
And so now let's start by removing all the HTML,
35
00:01:49,580 --> 00:01:54,273
except for the body, of course, so like this,
36
00:01:55,180 --> 00:01:57,580
and then also most of the styles,
37
00:01:57,580 --> 00:02:01,263
except for the global selector and the body.
38
00:02:02,610 --> 00:02:04,743
So just like this.
39
00:02:05,640 --> 00:02:08,250
So we also want to keep the font
40
00:02:08,250 --> 00:02:10,150
and so here is just the title
41
00:02:11,000 --> 00:02:13,663
and actually I will now copy everything again.
42
00:02:14,550 --> 00:02:17,010
So basically this empty state here
43
00:02:17,010 --> 00:02:19,300
and create yet another file.
44
00:02:19,300 --> 00:02:20,810
And so then based on that,
45
00:02:20,810 --> 00:02:24,230
we will be able to create our next components.
46
00:02:24,230 --> 00:02:27,713
So then we don't have to do this all the time.
47
00:02:28,770 --> 00:02:32,333
So just some name here, it doesn't really matter.
48
00:02:34,610 --> 00:02:39,610
And okay, so this one will be a carousel component
49
00:02:42,270 --> 00:02:45,860
and so now let's get started with writing some HTML
50
00:02:47,138 --> 00:02:48,050
and here we need some space
51
00:02:48,050 --> 00:02:52,120
because this one is actually a bit wider,
52
00:02:52,120 --> 00:02:53,610
but that's no problem.
53
00:02:53,610 --> 00:02:55,313
We do have enough space here.
54
00:02:57,925 --> 00:03:02,925
And okay, and again, I will use a non-semantic div element,
55
00:03:03,190 --> 00:03:06,740
which this time is simply called carousel.
56
00:03:06,740 --> 00:03:10,620
So just like before it was called the accordion
57
00:03:10,620 --> 00:03:12,990
and let's get straight into the content.
58
00:03:12,990 --> 00:03:15,853
And the first piece of content is the image.
59
00:03:16,890 --> 00:03:19,730
So we need to specify the source attribute
60
00:03:19,730 --> 00:03:23,433
and now this image here is this Maria.jpeg.
61
00:03:24,870 --> 00:03:27,830
So this was actually one of the starter files
62
00:03:27,830 --> 00:03:29,660
for the section.
63
00:03:29,660 --> 00:03:33,520
And now here as the alt text, I will actually use her name,
64
00:03:33,520 --> 00:03:37,063
which is in Portuguese, Maria de Almeida.
65
00:03:39,350 --> 00:03:42,590
Okay, we can close that here.
66
00:03:42,590 --> 00:03:45,670
And now here for this testimonial,
67
00:03:45,670 --> 00:03:49,603
we will use just like before the block quote element.
68
00:03:50,760 --> 00:03:54,423
So this is a common way of marking up a testimonial.
69
00:03:56,490 --> 00:03:57,730
So block quote
70
00:03:59,350 --> 00:04:01,140
and so that is going to be basically
71
00:04:01,140 --> 00:04:03,410
this entire block of text.
72
00:04:03,410 --> 00:04:06,983
And then in there we can put some paragraphs.
73
00:04:08,800 --> 00:04:10,423
So let's give this one here,
74
00:04:11,580 --> 00:04:13,523
let's say it's the testimonial text,
75
00:04:15,880 --> 00:04:19,060
testimonial text and actually,
76
00:04:19,060 --> 00:04:22,260
we didn't put any class on the block quote,
77
00:04:22,260 --> 00:04:26,800
let's just copy this one and get rid of the text.
78
00:04:26,800 --> 00:04:29,320
So this is called a testimonial and then in there,
79
00:04:29,320 --> 00:04:33,593
we will have like the text and the author, for example.
80
00:04:34,890 --> 00:04:39,200
So here again, we will use our blind text generator,
81
00:04:39,200 --> 00:04:41,250
which is just Lorem.
82
00:04:41,250 --> 00:04:44,543
This is maybe a bit too much, I don't know yet.
83
00:04:46,030 --> 00:04:46,863
Maybe like this.
84
00:04:46,863 --> 00:04:49,763
And here we want these quotes,
85
00:04:50,800 --> 00:04:53,350
which we could make a little bit more beautiful,
86
00:04:53,350 --> 00:04:55,310
but let's keep it simple at this point
87
00:04:57,960 --> 00:05:00,103
and here another one for the author.
88
00:05:01,816 --> 00:05:06,816
So testimonial author, and then again, her name,
89
00:05:10,190 --> 00:05:13,413
and finally, this can be the job.
90
00:05:19,440 --> 00:05:21,320
So we're using the job also here
91
00:05:21,320 --> 00:05:23,200
along with the person's name,
92
00:05:23,200 --> 00:05:26,000
simply because in that example, that I'm copying,
93
00:05:26,000 --> 00:05:27,023
they also had that.
94
00:05:28,670 --> 00:05:31,853
And if you take a look at some pages,
95
00:05:32,720 --> 00:05:35,440
then this will actually be pretty common,
96
00:05:35,440 --> 00:05:40,440
at EDP Comercial, which is something that you know,
97
00:05:41,260 --> 00:05:42,460
if you live in Portugal.
98
00:05:43,660 --> 00:05:46,340
Okay, and I think, well,
99
00:05:46,340 --> 00:05:48,970
let's actually also add the buttons for now.
100
00:05:48,970 --> 00:05:50,573
So these two here, at least.
101
00:05:51,920 --> 00:05:56,230
So let's put them outside of the block quote, obviously,
102
00:05:56,230 --> 00:05:58,220
and here at the bottom.
103
00:05:58,220 --> 00:05:59,810
And you will understand a bit later
104
00:05:59,810 --> 00:06:04,080
why I'm not putting like the first button here first
105
00:06:04,080 --> 00:06:07,970
because it appears first and then the second later,
106
00:06:07,970 --> 00:06:09,933
because it is the last element here.
107
00:06:10,950 --> 00:06:13,433
So I'm putting both here at the bottom.
108
00:06:15,947 --> 00:06:17,543
So button and well,
109
00:06:19,700 --> 00:06:23,120
let's simply call it button to keep it simple.
110
00:06:23,120 --> 00:06:27,000
And now in here we want another icon.
111
00:06:27,000 --> 00:06:29,523
So this time, this icon here.
112
00:06:30,420 --> 00:06:32,341
And so we can get that again,
113
00:06:32,341 --> 00:06:34,423
this time it's the Chevron left.
114
00:06:35,310 --> 00:06:40,310
So copy that and paste that here.
115
00:06:44,720 --> 00:06:47,053
So let's call that the button icon.
116
00:06:49,430 --> 00:06:53,573
All right, and then another one for the other direction.
117
00:06:55,960 --> 00:07:00,960
Well, actually we need then of course also this other icon.
118
00:07:01,090 --> 00:07:06,090
So copy SVG and replace this SVG with the new one.
119
00:07:08,780 --> 00:07:11,543
So here again, button icon.
120
00:07:13,230 --> 00:07:15,080
So I'll give it a save.
121
00:07:15,080 --> 00:07:18,710
And now when we go back here to our live connection,
122
00:07:18,710 --> 00:07:22,253
which is of course still live, there is no need to reset.
123
00:07:24,001 --> 00:07:28,370
So of course it is still alive because we never stopped it.
124
00:07:28,370 --> 00:07:31,560
And this is also still the same project folder.
125
00:07:31,560 --> 00:07:35,740
So what we can do here is to delete all of this here.
126
00:07:35,740 --> 00:07:39,300
And since we don't have any index.html file,
127
00:07:39,300 --> 00:07:43,580
it will not open that index.html file.
128
00:07:43,580 --> 00:07:47,340
So if we had an index.html is by default
129
00:07:47,340 --> 00:07:49,110
the page that will be opened.
130
00:07:49,110 --> 00:07:53,580
But if we don't, then it will show us this directory.
131
00:07:53,580 --> 00:07:56,730
And so here is basically all the files
132
00:07:56,730 --> 00:07:58,610
that we have in our folder.
133
00:07:58,610 --> 00:08:01,470
So before we add this one, so if we clicked,
134
00:08:01,470 --> 00:08:03,350
we would get back there.
135
00:08:03,350 --> 00:08:06,950
But of course, now we want to check out this one
136
00:08:06,950 --> 00:08:10,720
so we can click here and this is what we have.
137
00:08:10,720 --> 00:08:14,940
All right, now the image does, as always,
138
00:08:14,940 --> 00:08:18,160
by default take all the space that it can.
139
00:08:18,160 --> 00:08:21,620
And so many times that is the first thing that we fix,
140
00:08:21,620 --> 00:08:23,470
because like this,
141
00:08:23,470 --> 00:08:25,430
it is completely unusable
142
00:08:26,350 --> 00:08:28,650
and actually the image doesn't have any class,
143
00:08:29,940 --> 00:08:32,540
but while it is the only image that we have here,
144
00:08:32,540 --> 00:08:34,683
so let's just keep it like that.
145
00:08:35,700 --> 00:08:40,700
And the height that I have for this image is 200 pixels.
146
00:08:41,110 --> 00:08:43,370
And since we didn't specify the height,
147
00:08:43,370 --> 00:08:45,930
actually in our HTML,
148
00:08:45,930 --> 00:08:48,500
then the width with will be set automatically
149
00:08:48,500 --> 00:08:50,943
in order to keep the same proportion.
150
00:08:52,720 --> 00:08:55,430
So that is at least fixed now
151
00:08:55,430 --> 00:09:00,430
and so let's add some styles for the carousel itself.
152
00:09:00,550 --> 00:09:03,620
So remember that the background color of this element
153
00:09:03,620 --> 00:09:05,433
is that green color.
154
00:09:07,180 --> 00:09:11,840
So by now you know that is the background color property
155
00:09:11,840 --> 00:09:13,863
and we haven't used our green yet.
156
00:09:15,980 --> 00:09:17,253
So copying that here.
157
00:09:19,870 --> 00:09:24,870
Nice and what we also want to set first actually is a width.
158
00:09:25,980 --> 00:09:29,080
So this one has a width of 800 pixels,
159
00:09:29,080 --> 00:09:32,340
which is why it doesn't fit into that smaller window
160
00:09:32,340 --> 00:09:33,563
that we had before.
161
00:09:34,440 --> 00:09:36,240
And now let's center it again
162
00:09:36,240 --> 00:09:39,783
with the margin something and then auto trick.
163
00:09:40,750 --> 00:09:44,770
So let's again, specify 100 top bottom,
164
00:09:44,770 --> 00:09:48,103
and then as always left and right automatically set.
165
00:09:49,560 --> 00:09:52,550
And so now this has the exact same dimensions
166
00:09:52,550 --> 00:09:55,040
as our original,
167
00:09:55,040 --> 00:09:59,030
then let's give it also some border radius
168
00:10:00,970 --> 00:10:03,690
here I'm going with eight pixels,
169
00:10:03,690 --> 00:10:08,690
which again is one of the values in our spacing system.
170
00:10:08,870 --> 00:10:10,190
So could have gone with 12
171
00:10:10,190 --> 00:10:13,633
but the eight is more similar with the original one.
172
00:10:15,060 --> 00:10:19,960
All right, and let's also set the color here.
173
00:10:19,960 --> 00:10:22,880
So if we set it the text color here, then as always,
174
00:10:22,880 --> 00:10:26,950
it will get inherited to all the other text elements,
175
00:10:26,950 --> 00:10:28,143
just like this.
176
00:10:30,110 --> 00:10:32,050
Then since we have this border radius here,
177
00:10:32,050 --> 00:10:34,793
let's also set it on the image.
178
00:10:35,890 --> 00:10:39,800
Okay and I'm still missing here some padding
179
00:10:39,800 --> 00:10:42,720
inside of this container.
180
00:10:42,720 --> 00:10:46,130
So that's why it still looks pretty bad.
181
00:10:46,130 --> 00:10:51,130
So padding and we will start with 32
182
00:10:51,150 --> 00:10:53,523
but we will fix this later.
183
00:10:54,760 --> 00:10:58,626
All right, now let's actually style here the text
184
00:10:58,626 --> 00:11:00,850
and the author and the job.
185
00:11:00,850 --> 00:11:03,650
And again, I'm pressing Alt or Option
186
00:11:03,650 --> 00:11:05,783
to select all of them at the same time.
187
00:11:08,040 --> 00:11:11,763
So copying and pasting.
188
00:11:15,010 --> 00:11:18,313
So maybe you're noticing that just like before,
189
00:11:19,250 --> 00:11:22,640
I'm starting to basically create the visual styles
190
00:11:22,640 --> 00:11:24,033
on all of these elements.
191
00:11:25,582 --> 00:11:28,500
So I style them first visually and then after that,
192
00:11:28,500 --> 00:11:30,490
we take care of the layout.
193
00:11:30,490 --> 00:11:32,720
Now I don't always do it like that,
194
00:11:32,720 --> 00:11:35,920
but for a small component like this many times,
195
00:11:35,920 --> 00:11:37,550
that's a nice idea.
196
00:11:37,550 --> 00:11:40,090
Especially if layout is a bit more tricky,
197
00:11:40,090 --> 00:11:41,583
like in this example.
198
00:11:44,320 --> 00:11:48,633
So here let's use a font size of 18 pixels.
199
00:11:49,560 --> 00:11:53,370
All right and also let's make it a little bit bolder
200
00:11:53,370 --> 00:11:56,350
because this is the most important content.
201
00:11:56,350 --> 00:11:59,620
So we can give it some nice visual hierarchy here
202
00:12:00,570 --> 00:12:02,550
and the line height, of course,
203
00:12:02,550 --> 00:12:07,550
needs to be changed from one, which is the default to 1.5.
204
00:12:09,720 --> 00:12:14,720
Okay, nice, and here let's use 14 pixels
205
00:12:19,040 --> 00:12:20,873
and in this other one 12.
206
00:12:25,800 --> 00:12:29,143
All right, and now of course we need some spacing here.
207
00:12:32,400 --> 00:12:35,360
So four pixels and this one and here, of course,
208
00:12:35,360 --> 00:12:37,283
a lot more after the text,
209
00:12:41,150 --> 00:12:44,620
like this, and this will look better here in a minute
210
00:12:44,620 --> 00:12:47,290
once this is all side by side
211
00:12:47,290 --> 00:12:51,010
but now actually I want to do something which we did before,
212
00:12:51,010 --> 00:12:54,840
which is to improve the visual hierarchy between this text
213
00:12:54,840 --> 00:12:58,603
by using that green color here in this text.
214
00:12:59,870 --> 00:13:03,130
So let me get to those colors actually from here.
215
00:13:03,130 --> 00:13:06,730
So this style CSS remember is the one from the project,
216
00:13:06,730 --> 00:13:08,343
from the previous section.
217
00:13:09,720 --> 00:13:12,903
And so in the text, I want to use this color.
218
00:13:18,100 --> 00:13:21,083
All right, so that changed ever so slightly.
219
00:13:22,440 --> 00:13:25,923
And then here, let's just copy this entire line.
220
00:13:27,880 --> 00:13:32,880
Okay, beautiful and the same thing here
221
00:13:34,540 --> 00:13:35,670
and now, actually this one here
222
00:13:35,670 --> 00:13:37,250
doesn't make any sense anymore
223
00:13:39,170 --> 00:13:41,913
because we overrode it in all three places here.
224
00:13:43,140 --> 00:13:47,300
All right, now, actually let's put this here side by side
225
00:13:47,300 --> 00:13:50,893
because like this, it still looks very unfinished.
226
00:13:52,020 --> 00:13:54,183
So how can we do that?
227
00:13:55,230 --> 00:13:59,710
Well, that shouldn't be too hard because in this carousel,
228
00:13:59,710 --> 00:14:02,710
at least right now, there are only,
229
00:14:02,710 --> 00:14:05,870
well, actually right now, there are four children.
230
00:14:05,870 --> 00:14:10,170
So there's the image, the block quote and these two buttons,
231
00:14:10,170 --> 00:14:12,710
but let's actually still do that
232
00:14:12,710 --> 00:14:15,363
so that we can then a bit later fix it.
233
00:14:17,590 --> 00:14:19,893
So display flex.
234
00:14:21,440 --> 00:14:24,580
So they are side-by-side and then, of course,
235
00:14:24,580 --> 00:14:26,380
as we many times do,
236
00:14:26,380 --> 00:14:29,670
let's center all of these elements vertically,
237
00:14:29,670 --> 00:14:33,050
so align items center.
238
00:14:33,050 --> 00:14:34,280
So after all these times,
239
00:14:34,280 --> 00:14:36,850
you probably already know this one by heart,
240
00:14:36,850 --> 00:14:38,510
I'm pretty sure.
241
00:14:38,510 --> 00:14:43,230
And now let's add some gap, which we will change later,
242
00:14:43,230 --> 00:14:47,670
but for now I'm going to use the same 32 pixels.
243
00:14:47,670 --> 00:14:52,658
Okay, nice, so this already looks like something actually,
244
00:14:52,658 --> 00:14:57,313
but we are still some way away from this.
245
00:14:58,980 --> 00:15:00,970
And actually let's start here
246
00:15:00,970 --> 00:15:04,510
by making the image finally, this big.
247
00:15:04,510 --> 00:15:08,400
So basically growing out of this element.
248
00:15:08,400 --> 00:15:11,130
So it looks like it is floating above
249
00:15:11,130 --> 00:15:14,160
and that's even becoming more prominent
250
00:15:14,160 --> 00:15:16,593
with this shadow that we added to the image.
251
00:15:17,820 --> 00:15:20,650
So how do you think we can do that?
252
00:15:20,650 --> 00:15:24,110
Well, actually we never did anything like this
253
00:15:24,110 --> 00:15:26,410
so that would be a hard question
254
00:15:26,410 --> 00:15:28,863
and so instead, let me actually show you.
255
00:15:30,060 --> 00:15:33,120
so there is no absolute positioning in this case
256
00:15:33,120 --> 00:15:35,250
or nothing weird going on.
257
00:15:35,250 --> 00:15:39,483
Instead, what we do is that we can simply scale this image.
258
00:15:40,640 --> 00:15:45,470
So right now it is this small, but again, we can scale it.
259
00:15:45,470 --> 00:15:48,870
And so for that, we will learn about a brand new property,
260
00:15:48,870 --> 00:15:50,463
which is called transform.
261
00:15:51,770 --> 00:15:55,140
So transform is for many different things.
262
00:15:55,140 --> 00:16:00,140
And one of them is to scale elements, so we can use scale
263
00:16:00,800 --> 00:16:03,690
and so here we use something called a function.
264
00:16:03,690 --> 00:16:05,600
So it's a scale function.
265
00:16:05,600 --> 00:16:08,720
And so here, now we need to specify parenthesis
266
00:16:08,720 --> 00:16:11,493
and then the value by which we want to scale.
267
00:16:12,330 --> 00:16:14,090
So if we write one,
268
00:16:14,090 --> 00:16:17,900
then the element will stay the same size.
269
00:16:17,900 --> 00:16:21,470
If we use two, then it will double the size,
270
00:16:21,470 --> 00:16:23,133
so like this.
271
00:16:24,760 --> 00:16:26,310
But in this case, let's try 1.5
272
00:16:27,980 --> 00:16:31,400
and so that actually looks quite right,
273
00:16:31,400 --> 00:16:34,120
at least here vertically.
274
00:16:34,120 --> 00:16:36,350
So the space that it has right here now,
275
00:16:36,350 --> 00:16:38,003
it looks just right.
276
00:16:39,800 --> 00:16:41,120
Now of course we need to move it
277
00:16:41,120 --> 00:16:43,470
a little bit more to the right.
278
00:16:43,470 --> 00:16:45,969
And the position that the image has
279
00:16:45,969 --> 00:16:49,240
basically to the right is defined right now
280
00:16:49,240 --> 00:16:51,533
by the padding that is on the left.
281
00:16:53,100 --> 00:16:55,800
So let me show you that by inspecting
282
00:16:57,240 --> 00:17:00,830
and here, actually, it becomes nicely visible what happened.
283
00:17:00,830 --> 00:17:02,863
So you see there that original square,
284
00:17:03,820 --> 00:17:06,610
well, if we click here and then we can see it.
285
00:17:06,610 --> 00:17:09,570
So this is what the image was like in the beginning,
286
00:17:09,570 --> 00:17:11,340
just like this,
287
00:17:11,340 --> 00:17:13,230
but then by scaling it up,
288
00:17:13,230 --> 00:17:17,370
of course it then overflows basically the original image
289
00:17:17,370 --> 00:17:19,153
and grows this large.
290
00:17:20,800 --> 00:17:25,103
So if we take that off, we can see it very nicely.
291
00:17:26,060 --> 00:17:28,150
So this is what it was before.
292
00:17:28,150 --> 00:17:29,320
And again, the position here
293
00:17:29,320 --> 00:17:31,710
is kind of defined by the padding.
294
00:17:31,710 --> 00:17:35,380
And so we can increase that padding like a lot
295
00:17:35,380 --> 00:17:37,590
and so then once we scale the image,
296
00:17:37,590 --> 00:17:40,480
it will no longer be outside,
297
00:17:40,480 --> 00:17:42,550
basically here on the left side,
298
00:17:42,550 --> 00:17:45,500
because remember that we want it like this.
299
00:17:45,500 --> 00:17:48,223
So we still want the green part to be visible here.
300
00:17:49,780 --> 00:17:51,020
So what we can do
301
00:17:51,020 --> 00:17:54,060
is to give it some padding to the left here.
302
00:17:54,060 --> 00:17:58,640
So increase the padding, which is 32 on all sides.
303
00:17:58,640 --> 00:17:59,710
But again, on this side,
304
00:17:59,710 --> 00:18:04,240
we want it to be more so let's see what values we have here
305
00:18:05,330 --> 00:18:07,863
and let's go with 86.
306
00:18:09,400 --> 00:18:14,400
Okay, 86 pixels and there we go.
307
00:18:16,360 --> 00:18:19,760
So now if we take a look at that, like this,
308
00:18:19,760 --> 00:18:22,940
then the image used to be here, but then of course,
309
00:18:22,940 --> 00:18:25,570
with the scaling, it now looks different.
310
00:18:25,570 --> 00:18:27,683
So it ends right here now.
311
00:18:28,630 --> 00:18:31,410
So of course, we now also need to increase the gap
312
00:18:31,410 --> 00:18:35,610
because the image is also overlaying this text.
313
00:18:35,610 --> 00:18:39,473
So let's try to go also with 86 and see if that is enough.
314
00:18:40,830 --> 00:18:43,460
And, well, that looks kind of the same
315
00:18:43,460 --> 00:18:45,930
here and here, doesn't it?
316
00:18:45,930 --> 00:18:50,170
Maybe it's a bit more here from the eye,
317
00:18:50,170 --> 00:18:51,570
but I'm not really sure
318
00:18:51,570 --> 00:18:53,703
and so I will just keep it like this.
319
00:18:55,110 --> 00:18:57,970
All right, however, now we have a problem,
320
00:18:57,970 --> 00:19:01,560
which is the fact that there was a lot of space created here
321
00:19:01,560 --> 00:19:03,600
also in these other gaps,
322
00:19:03,600 --> 00:19:06,202
because we still have the buttons here
323
00:19:06,202 --> 00:19:11,202
basically also as flex items where we don't want them to be.
324
00:19:11,210 --> 00:19:13,700
So these should not be flex items,
325
00:19:13,700 --> 00:19:17,740
but instead they are going to be absolutely positioned.
326
00:19:17,740 --> 00:19:21,360
All right, but that we will do in the next lecture.
327
00:19:21,360 --> 00:19:24,020
And so to just very quickly finish this one,
328
00:19:24,020 --> 00:19:25,630
I will just add the shadow
329
00:19:25,630 --> 00:19:29,903
that is still missing here from the image, all right.
330
00:19:31,160 --> 00:19:32,973
So let's add that here.
331
00:19:34,550 --> 00:19:38,390
So box shadow and so again, horizontally,
332
00:19:38,390 --> 00:19:40,143
we don't want any offset.
333
00:19:41,020 --> 00:19:46,020
Then here, let's say vertically 12 pixels,
334
00:19:46,070 --> 00:19:48,550
then a blur of 24
335
00:19:48,550 --> 00:19:50,310
and of course you will have to experiment
336
00:19:50,310 --> 00:19:54,110
with these values here in order to gain some experience.
337
00:19:54,110 --> 00:19:56,800
So RGBA, remember?
338
00:19:56,800 --> 00:19:59,840
At then black, which is usually my go-to
339
00:20:00,890 --> 00:20:04,483
with some off value, let's try 0.1 as always.
340
00:20:05,840 --> 00:20:07,910
And, well, in order to really see it,
341
00:20:07,910 --> 00:20:10,833
we would need to remove these buttons.
342
00:20:12,030 --> 00:20:13,530
So let's do that.
343
00:20:13,530 --> 00:20:17,380
And again, many times I do these kinds of experimentations
344
00:20:17,380 --> 00:20:20,650
right in the browser using the dev tools.
345
00:20:20,650 --> 00:20:23,910
So I will just delete it here and delete it as well,
346
00:20:23,910 --> 00:20:27,110
simply by hitting the Backspace,
347
00:20:27,110 --> 00:20:30,260
so the delete button on the keyboard.
348
00:20:30,260 --> 00:20:32,600
And so now the shadow is nicely visible
349
00:20:33,600 --> 00:20:37,513
but it is not big enough or actually not dark enough.
350
00:20:39,580 --> 00:20:44,083
So we can keep going here again by using our keys,
351
00:20:45,500 --> 00:20:47,333
so that's maybe a bit too much.
352
00:20:49,430 --> 00:20:52,523
Well, let's leave it at 25%.
353
00:20:53,450 --> 00:20:57,290
Now the syntax here is actually a little bit different,
354
00:20:57,290 --> 00:20:59,630
so it's not like RGBA,
355
00:20:59,630 --> 00:21:02,383
but don't worry about that, all right?
356
00:21:03,810 --> 00:21:07,490
So let's just set it here to 0.25,
357
00:21:07,490 --> 00:21:10,390
which is essentially 25%.
358
00:21:10,390 --> 00:21:12,970
Okay, so that is fixed.
359
00:21:12,970 --> 00:21:14,970
Of course the buttons are back,
360
00:21:14,970 --> 00:21:16,720
but never mind about them
361
00:21:16,720 --> 00:21:20,260
because we will now fix that actually in the next lecture.
362
00:21:20,260 --> 00:21:22,943
So after a break, I see you back here.
26959
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.