Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,310 --> 00:00:03,530
Hey there and welcome back
2
00:00:03,530 --> 00:00:06,960
to the last section before the footer.
3
00:00:06,960 --> 00:00:11,620
And so this is finally the Call to Action section.
4
00:00:11,620 --> 00:00:14,420
So here we will basically create a form
5
00:00:14,420 --> 00:00:18,780
where the user can then start signing up for Omnifood.
6
00:00:18,780 --> 00:00:22,150
So we will have a field for the name, the email,
7
00:00:22,150 --> 00:00:26,800
how they found Omnifood, and then also a submit button.
8
00:00:26,800 --> 00:00:30,210
Then, before that, we will also have, as always,
9
00:00:30,210 --> 00:00:32,330
some heading and some text.
10
00:00:32,330 --> 00:00:35,630
And on the right side here, I actually want to add
11
00:00:35,630 --> 00:00:37,840
like a supporting image.
12
00:00:37,840 --> 00:00:41,290
So to make this form look a little bit more catchy
13
00:00:41,290 --> 00:00:45,380
and, yeah, in general, supporting images are many times
14
00:00:45,380 --> 00:00:46,570
a good idea.
15
00:00:46,570 --> 00:00:49,970
And so we'll just do that here as well.
16
00:00:49,970 --> 00:00:50,950
All right.
17
00:00:50,950 --> 00:00:55,370
So, we're gonna base this example on the standout sections
18
00:00:55,370 --> 00:00:58,540
that I've been showing you in the Web design section.
19
00:00:58,540 --> 00:01:01,830
So just like that first example there,
20
00:01:01,830 --> 00:01:03,880
and then as for the form,
21
00:01:03,880 --> 00:01:07,100
basically I will make a form in a grid.
22
00:01:07,100 --> 00:01:12,100
So here a two by two grid, as you can see in my sketch here.
23
00:01:12,240 --> 00:01:13,370
Okay.
24
00:01:13,370 --> 00:01:16,313
So, let's start doing this now.
25
00:01:18,160 --> 00:01:19,710
So,
26
00:01:19,710 --> 00:01:22,023
adding yet another section here.
27
00:01:25,850 --> 00:01:30,763
So "section-cta", which stands for Call to Action.
28
00:01:31,740 --> 00:01:35,340
Then this one, we also, just like all the others,
29
00:01:35,340 --> 00:01:39,313
or at least most of the others, we want it to be centered.
30
00:01:40,890 --> 00:01:42,487
So "container",
31
00:01:44,060 --> 00:01:46,830
but of course it wouldn't have to be centered.
32
00:01:46,830 --> 00:01:49,220
So this is just the design decision
33
00:01:49,220 --> 00:01:50,670
that it took for this one.
34
00:01:50,670 --> 00:01:54,510
But if you wanted, you could also have a standout section
35
00:01:54,510 --> 00:01:58,400
that, for example, occupies like 80 or 90,
36
00:01:58,400 --> 00:02:01,880
or even a 100% of the Viewport width.
37
00:02:01,880 --> 00:02:04,430
But here, I just like to keep it centered,
38
00:02:04,430 --> 00:02:07,050
like the rest of the sections.
39
00:02:07,050 --> 00:02:08,030
Okay.
40
00:02:08,030 --> 00:02:10,730
Then here inside of that container,
41
00:02:10,730 --> 00:02:13,410
on the left side, we will basically have
42
00:02:13,410 --> 00:02:16,630
that form and also all that other content.
43
00:02:16,630 --> 00:02:18,770
So the heading and the paragraph text
44
00:02:18,770 --> 00:02:21,053
that I had drawn in the sketch.
45
00:02:21,960 --> 00:02:24,920
And so, let's call this one here,
46
00:02:24,920 --> 00:02:29,507
the "cta-text-box".
47
00:02:33,600 --> 00:02:36,570
And then the other one, for the right side,
48
00:02:36,570 --> 00:02:40,080
which is where the image will live.
49
00:02:40,080 --> 00:02:44,217
So "cta-img-box".
50
00:02:47,150 --> 00:02:48,940
All right.
51
00:02:48,940 --> 00:02:52,370
And here we will actually, again, create our own grid
52
00:02:52,370 --> 00:02:55,230
because we want these two columns here,
53
00:02:55,230 --> 00:02:59,000
so these two elements not to have the exact same width.
54
00:02:59,000 --> 00:03:02,980
But instead the image should take up like one third
55
00:03:02,980 --> 00:03:06,370
and then this other box here about two thirds
56
00:03:06,370 --> 00:03:07,493
of the container.
57
00:03:08,550 --> 00:03:10,380
So let's give this here another name,
58
00:03:10,380 --> 00:03:12,543
so we can style it individually.
59
00:03:14,230 --> 00:03:15,450
Okay.
60
00:03:15,450 --> 00:03:18,793
Let's grab all of this here, as always.
61
00:03:22,290 --> 00:03:24,053
So CTA Section.
62
00:03:26,070 --> 00:03:27,263
And so now,
63
00:03:28,387 --> 00:03:29,880
.cta,
64
00:03:29,880 --> 00:03:33,600
let's actually immediately work on what I just said.
65
00:03:33,600 --> 00:03:35,983
So making it a flex container,
66
00:03:37,720 --> 00:03:40,100
or actually a grid container.
67
00:03:40,100 --> 00:03:43,840
So of course we could also use flexbox, but while,
68
00:03:43,840 --> 00:03:45,460
as I said in the beginning,
69
00:03:45,460 --> 00:03:48,530
I'm simply choosing to use CSS Grid
70
00:03:48,530 --> 00:03:52,260
for all the big overall page layout elements.
71
00:03:52,260 --> 00:03:54,830
And so I would say that this is one of them.
72
00:03:54,830 --> 00:03:58,520
And so, yeah, using CSS grid for those
73
00:03:58,520 --> 00:04:01,203
and using flexbox for the small stuff.
74
00:04:03,240 --> 00:04:05,760
So grid-template-columns.
75
00:04:05,760 --> 00:04:08,880
Now, so as I said, I want this first box,
76
00:04:08,880 --> 00:04:11,060
so the first grid item here,
77
00:04:11,060 --> 00:04:14,020
to be two-thirds and this one, one-third.
78
00:04:14,020 --> 00:04:15,833
And so that's very simple.
79
00:04:16,690 --> 00:04:20,543
So the first one needs to be 2fr, and the second 1fr.
80
00:04:21,750 --> 00:04:24,380
And so together, they make up 3frs,
81
00:04:25,620 --> 00:04:29,360
and of those, 2 out of 3 are for the first one,
82
00:04:29,360 --> 00:04:32,450
and 1 out of 3 for the second one.
83
00:04:32,450 --> 00:04:36,020
And so that's then exactly one-third and two-thirds
84
00:04:36,020 --> 00:04:37,563
for the first one.
85
00:04:38,470 --> 00:04:41,940
Okay, so, I hope that made sense.
86
00:04:41,940 --> 00:04:44,853
So let's check it out here, in our page.
87
00:04:46,260 --> 00:04:51,260
And indeed, that does look as though this one here has
88
00:04:51,460 --> 00:04:53,893
two-thirds and this one here, one-third.
89
00:04:54,940 --> 00:04:58,030
Great, we're off to a good start,
90
00:04:58,030 --> 00:05:01,630
but, since this is one of those standout sections,
91
00:05:01,630 --> 00:05:03,543
let's give it a background color.
92
00:05:06,010 --> 00:05:08,720
And, I will actually use a gradient here,
93
00:05:08,720 --> 00:05:12,350
but for now let's just choose our regular brand color.
94
00:05:12,350 --> 00:05:15,550
And I will also add a box shadow to it.
95
00:05:15,550 --> 00:05:18,803
And here I will use the same one that we used for the meals.
96
00:05:19,770 --> 00:05:22,283
And again, that is just for consistency.
97
00:05:23,520 --> 00:05:25,175
So,
98
00:05:25,175 --> 00:05:26,840
this one here.
99
00:05:26,840 --> 00:05:29,053
So maybe we will make it a bit darker,
100
00:05:29,980 --> 00:05:32,083
but we will use these same values here.
101
00:05:33,860 --> 00:05:35,720
And actually let's copy that also here
102
00:05:35,720 --> 00:05:37,543
into our design decisions,
103
00:05:39,870 --> 00:05:42,300
which, of course you don't have to do it,
104
00:05:42,300 --> 00:05:44,763
but just so we keep it consistent,
105
00:05:45,660 --> 00:05:48,740
we can then come here and copy that.
106
00:05:48,740 --> 00:05:52,163
So that's especially useful if our project is really big.
107
00:05:53,730 --> 00:05:56,670
So let's try that here,
108
00:05:56,670 --> 00:05:59,573
but probably we will have to make it a bit darker.
109
00:06:01,135 --> 00:06:03,500
Oh, and of course we cannot see much
110
00:06:03,500 --> 00:06:06,730
because the element is really small still.
111
00:06:06,730 --> 00:06:10,610
So let's for now add some temporary height here.
112
00:06:10,610 --> 00:06:12,083
So this is temporary.
113
00:06:13,530 --> 00:06:16,193
So height, let's say 50rem.
114
00:06:17,540 --> 00:06:18,873
And so let's see now.
115
00:06:20,550 --> 00:06:25,340
And, well, you can very faintly see the shadow here.
116
00:06:25,340 --> 00:06:27,910
Maybe in the screen cast, you cannot see it,
117
00:06:27,910 --> 00:06:29,830
so we will have to make it darker.
118
00:06:29,830 --> 00:06:31,660
And the reason for that is that
119
00:06:31,660 --> 00:06:34,720
the darker the background basically is,
120
00:06:34,720 --> 00:06:37,930
then the more dark the shadow also needs to be.
121
00:06:37,930 --> 00:06:41,033
Because otherwise, it will not be visible at all.
122
00:06:41,900 --> 00:06:44,453
So let's make it .15, maybe.
123
00:06:45,660 --> 00:06:47,740
And since we're here, let's also make
124
00:06:50,148 --> 00:06:51,683
the borders round again.
125
00:06:52,760 --> 00:06:56,183
So again, using the same 11px as in the meal.
126
00:06:58,350 --> 00:07:01,330
And that already looks a lot better.
127
00:07:01,330 --> 00:07:03,990
So it's still quite subtle of course,
128
00:07:03,990 --> 00:07:06,050
because that will always be the goal.
129
00:07:06,050 --> 00:07:09,263
We never want a dark shadow, remember that?
130
00:07:10,100 --> 00:07:13,973
But, if we turn it off, then it looks quite different.
131
00:07:15,100 --> 00:07:17,750
Right, and so it is definitely there.
132
00:07:17,750 --> 00:07:20,700
And we could maybe make it even a bit darker,
133
00:07:20,700 --> 00:07:24,680
but, also I think it is okay like this.
134
00:07:24,680 --> 00:07:28,340
But, anyway, let's now take care of that gradient
135
00:07:28,340 --> 00:07:30,640
that I was talking about.
136
00:07:30,640 --> 00:07:32,680
So what I want to do is to
137
00:07:33,670 --> 00:07:36,660
create a gradient that is darker on one side
138
00:07:36,660 --> 00:07:39,700
and lighter on the other side.
139
00:07:39,700 --> 00:07:41,630
So, basically what I'm gonna do
140
00:07:41,630 --> 00:07:44,617
is to use a lighter version of orange here
141
00:07:45,470 --> 00:07:47,773
to use it on one side of the gradient.
142
00:07:48,830 --> 00:07:51,710
But first let's remember here again,
143
00:07:51,710 --> 00:07:53,690
how gradients actually work
144
00:07:53,690 --> 00:07:56,290
just in case you skipped the first lecture
145
00:07:56,290 --> 00:07:57,933
where I first introduced this.
146
00:07:59,850 --> 00:08:03,030
Let's turn this one off, and now we're here,
147
00:08:03,030 --> 00:08:04,970
in order to specify a gradient,
148
00:08:04,970 --> 00:08:08,853
we use the background image property actually.
149
00:08:10,890 --> 00:08:13,520
So a gradient is basically treated as though
150
00:08:13,520 --> 00:08:15,160
it was an image.
151
00:08:15,160 --> 00:08:16,430
Okay?
152
00:08:16,430 --> 00:08:20,440
And so here, we then write this function here.
153
00:08:20,440 --> 00:08:25,350
So linear-gradient, and then we can specify two colors.
154
00:08:25,350 --> 00:08:29,683
So let's specify our regular brand color here first.
155
00:08:32,670 --> 00:08:34,240
Just like this.
156
00:08:34,240 --> 00:08:36,920
And then we can specify a second one.
157
00:08:36,920 --> 00:08:39,503
Let's, actually do the second one first.
158
00:08:40,660 --> 00:08:43,453
And just for testing, I'm gonna go with red here.
159
00:08:45,270 --> 00:08:46,213
Okay.
160
00:08:47,140 --> 00:08:49,380
So that is definitely a background,
161
00:08:49,380 --> 00:08:52,350
even though not a very pretty one yet.
162
00:08:52,350 --> 00:08:53,690
And you see that by default,
163
00:08:53,690 --> 00:08:57,710
the gradient flows from the top to the bottom here.
164
00:08:57,710 --> 00:08:58,690
Okay.
165
00:08:58,690 --> 00:09:01,140
But we can also change that here,
166
00:09:01,140 --> 00:09:04,260
as the first value that we specify here,
167
00:09:04,260 --> 00:09:06,203
which is basically the degree.
168
00:09:07,440 --> 00:09:11,360
So we can say 90deg here, for example.
169
00:09:11,360 --> 00:09:14,923
And so then it will flow from the left to the right.
170
00:09:17,540 --> 00:09:20,873
Okay, and if we say 180deg,
171
00:09:22,020 --> 00:09:25,243
then it will be again from top to bottom,
172
00:09:26,130 --> 00:09:27,920
which is basically the default.
173
00:09:27,920 --> 00:09:32,920
And then with 360deg, then it should be the opposite.
174
00:09:33,550 --> 00:09:34,733
And indeed it is.
175
00:09:36,070 --> 00:09:38,610
Now this is one way of doing it,
176
00:09:38,610 --> 00:09:40,790
but there is actually another one.
177
00:09:40,790 --> 00:09:45,210
So, we can also basically do it using English language
178
00:09:45,210 --> 00:09:48,847
and writing something like "to right".
179
00:09:50,200 --> 00:09:52,490
And so now it flows to the right.
180
00:09:52,490 --> 00:09:54,210
So from the starting color here
181
00:09:54,210 --> 00:09:57,803
to the right, all the way to the second color.
182
00:09:58,640 --> 00:10:01,250
And we can also say to the left,
183
00:10:01,250 --> 00:10:03,200
then it will be the opposite direction.
184
00:10:04,110 --> 00:10:05,700
You see that?
185
00:10:05,700 --> 00:10:09,310
And, we can also basically use corners.
186
00:10:09,310 --> 00:10:11,833
So we can say, to right,
187
00:10:13,510 --> 00:10:14,490
bottom.
188
00:10:14,490 --> 00:10:18,273
And so then it should start at the left top corner,
189
00:10:19,560 --> 00:10:20,697
exactly here,
190
00:10:20,697 --> 00:10:23,830
and then flow to the right bottom corner
191
00:10:23,830 --> 00:10:26,040
as we just specified.
192
00:10:26,040 --> 00:10:29,470
And so let's actually leave it at this setting.
193
00:10:29,470 --> 00:10:30,460
All right.
194
00:10:30,460 --> 00:10:32,580
But here, of course, you could experiment
195
00:10:32,580 --> 00:10:35,040
with all the other values here as well.
196
00:10:35,040 --> 00:10:36,740
So here it could be also left,
197
00:10:36,740 --> 00:10:39,440
and here it could also be top.
198
00:10:39,440 --> 00:10:41,550
But now as for the second color here,
199
00:10:41,550 --> 00:10:45,093
let's get one of our tints.
200
00:10:46,970 --> 00:10:49,520
So, this is the original one.
201
00:10:49,520 --> 00:10:52,963
So let's grab another one, maybe, this one.
202
00:10:53,900 --> 00:10:57,020
So with this, I think we wouldn't have a big difference,
203
00:10:57,020 --> 00:10:59,653
but here, it should then be noticeable.
204
00:11:00,520 --> 00:11:01,733
So just copy that,
205
00:11:03,860 --> 00:11:07,233
replacing the red with that new one.
206
00:11:08,700 --> 00:11:09,533
And,
207
00:11:10,390 --> 00:11:14,210
yeah, I think that does look quite nice here.
208
00:11:14,210 --> 00:11:16,533
And so let's leave it at that.
209
00:11:18,600 --> 00:11:21,803
I will just copy this here into our designs.
210
00:11:25,360 --> 00:11:26,770
Okay.
211
00:11:26,770 --> 00:11:29,383
And so that's it for now for this part.
212
00:11:30,460 --> 00:11:33,040
So that's the entire cta here,
213
00:11:33,040 --> 00:11:36,520
and now let's take care of this image here.
214
00:11:36,520 --> 00:11:38,940
Now, what I'm gonna do is to actually now
215
00:11:38,940 --> 00:11:41,320
use a background image.
216
00:11:41,320 --> 00:11:44,260
So instead of specifying the image right here,
217
00:11:44,260 --> 00:11:46,260
I will use a background image
218
00:11:46,260 --> 00:11:48,080
because that will then make it easy
219
00:11:48,080 --> 00:11:51,640
for me to overlay a color on top of it.
220
00:11:51,640 --> 00:11:55,140
So, again we actually already did that before,
221
00:11:55,140 --> 00:11:59,490
but I thought it was important to do it here once more.
222
00:11:59,490 --> 00:12:00,340
So,
223
00:12:00,340 --> 00:12:04,283
let me copy these two actually,
224
00:12:06,630 --> 00:12:09,823
or at least I will also already write this one here.
225
00:12:13,900 --> 00:12:15,260
All right.
226
00:12:15,260 --> 00:12:16,900
And now, as I was saying,
227
00:12:16,900 --> 00:12:20,973
let's specify the background image right here.
228
00:12:22,280 --> 00:12:24,430
So, when we have an actual image,
229
00:12:24,430 --> 00:12:27,163
we need to use the url function here.
230
00:12:28,120 --> 00:12:32,133
As the image we are looking for here is this one.
231
00:12:32,990 --> 00:12:36,450
So this, I think is a very beautiful supporting image
232
00:12:36,450 --> 00:12:40,200
of a lady eating here, again, some nice food.
233
00:12:40,200 --> 00:12:44,310
And so this once again has the goal of making the user
234
00:12:44,310 --> 00:12:47,330
then really feel like they should be signing up
235
00:12:47,330 --> 00:12:48,693
for Omnifood,
236
00:12:49,670 --> 00:12:52,630
But here specifying the path will actually become
237
00:12:52,630 --> 00:12:54,410
a little bit trickier.
238
00:12:54,410 --> 00:12:56,560
So, let me show you why.
239
00:12:56,560 --> 00:12:59,723
So, if we just specify, let's say img
240
00:13:00,810 --> 00:13:04,260
and then /eating,
241
00:13:04,260 --> 00:13:06,133
like we have been doing before.
242
00:13:07,660 --> 00:13:11,243
So like this, well then it shouldn't really work.
243
00:13:12,480 --> 00:13:15,040
So let me show you that on the page,
244
00:13:15,040 --> 00:13:17,053
and indeed, it is not here.
245
00:13:18,320 --> 00:13:20,800
So let me inspect that right here.
246
00:13:20,800 --> 00:13:24,860
And you see, we have this red error.
247
00:13:24,860 --> 00:13:26,930
So if we click here to console,
248
00:13:26,930 --> 00:13:31,930
we will see that "Failed to load resource" on "eating.jpg."
249
00:13:33,620 --> 00:13:35,130
Okay.
250
00:13:35,130 --> 00:13:37,530
So let me show you why that is.
251
00:13:37,530 --> 00:13:41,060
Now VS Code somehow displays it here, but,
252
00:13:41,060 --> 00:13:43,660
well, it is actually not correct.
253
00:13:43,660 --> 00:13:45,900
So, the reason for this is that right now
254
00:13:45,900 --> 00:13:48,140
here in the CSS file,
255
00:13:48,140 --> 00:13:51,230
we are actually in this CSS folder.
256
00:13:51,230 --> 00:13:53,860
So in this one, right?
257
00:13:53,860 --> 00:13:57,140
However, writing it like this, basically means that
258
00:13:57,140 --> 00:13:59,950
in the same folder that we are currently in,
259
00:13:59,950 --> 00:14:01,720
go into the image folder
260
00:14:01,720 --> 00:14:05,430
and then choose the image eating, right?
261
00:14:05,430 --> 00:14:08,580
However, inside of this CSS folder,
262
00:14:08,580 --> 00:14:10,373
there is no image folder.
263
00:14:11,960 --> 00:14:16,080
So it works this way with this path in the HTML,
264
00:14:16,080 --> 00:14:18,010
because in this file,
265
00:14:18,010 --> 00:14:20,910
we are actually like in the root folder.
266
00:14:20,910 --> 00:14:24,290
And so in this folder, there is indeed an image folder
267
00:14:24,290 --> 00:14:28,270
where the browser can reach into, right.
268
00:14:28,270 --> 00:14:32,710
But here again, it is not, because we are in the CSS folder.
269
00:14:32,710 --> 00:14:35,720
And so first, we need to basically move out
270
00:14:35,720 --> 00:14:39,360
of the CSS folder, into the main root folder.
271
00:14:39,360 --> 00:14:42,473
And then from there we can reach into the image folder.
272
00:14:44,350 --> 00:14:45,210
Okay.
273
00:14:45,210 --> 00:14:50,210
So what we have to do is to write .. and then /.
274
00:14:52,250 --> 00:14:56,760
So the .. basically means to go to the parent folder.
275
00:14:56,760 --> 00:15:00,080
So moving one level up in the file tree.
276
00:15:00,080 --> 00:15:04,215
And so, then, once we are back in the parent folder,
277
00:15:04,215 --> 00:15:08,253
then of course we can go into image, and then this one here.
278
00:15:09,110 --> 00:15:11,593
So let's see, and here it is.
279
00:15:12,620 --> 00:15:13,453
All right.
280
00:15:15,410 --> 00:15:17,823
So hopefully that wasn't all too confusing.
281
00:15:18,670 --> 00:15:21,910
but just remember that whenever you need to go one level up,
282
00:15:21,910 --> 00:15:24,660
just use the two dots here before writing
283
00:15:24,660 --> 00:15:26,380
the rest of the path.
284
00:15:26,380 --> 00:15:28,960
And in case you need to go two levels up,
285
00:15:28,960 --> 00:15:31,500
you can just do this ../..,
286
00:15:32,816 --> 00:15:36,090
and then / whatever comes next.
287
00:15:36,090 --> 00:15:36,923
All right.
288
00:15:37,850 --> 00:15:41,503
But anyway, let's now size the background.
289
00:15:43,260 --> 00:15:47,420
So background size, and here we use cover again,
290
00:15:47,420 --> 00:15:50,870
which will basically ensure that whatever is the dimension
291
00:15:50,870 --> 00:15:52,460
of this element,
292
00:15:52,460 --> 00:15:55,633
the background image will always cover it entirely.
293
00:15:56,770 --> 00:15:59,423
And so now, that looks perfect.
294
00:16:02,970 --> 00:16:03,803
Right.
295
00:16:03,803 --> 00:16:06,110
So, this here is the element,
296
00:16:06,110 --> 00:16:08,680
and without background size cover,
297
00:16:08,680 --> 00:16:11,373
it just looks wrong, right?
298
00:16:12,230 --> 00:16:15,540
Now we can also position the background.
299
00:16:15,540 --> 00:16:18,610
So that's something that we haven't done before.
300
00:16:18,610 --> 00:16:21,770
So background position, and here, for example,
301
00:16:21,770 --> 00:16:26,593
we can try, top, which I think is the default,
302
00:16:27,970 --> 00:16:31,423
or we can try bottom as well.
303
00:16:31,423 --> 00:16:33,650
Well here nothing changes actually,
304
00:16:33,650 --> 00:16:37,740
because the image is already stretched as high as it can.
305
00:16:37,740 --> 00:16:39,713
But if we put it to the left,
306
00:16:42,300 --> 00:16:44,110
then apparently nothing changes.
307
00:16:44,110 --> 00:16:47,220
But in some situations, it can be helpful to play around
308
00:16:47,220 --> 00:16:48,373
with this property.
309
00:16:49,500 --> 00:16:52,930
So let's just set it to center here.
310
00:16:52,930 --> 00:16:54,470
All right.
311
00:16:54,470 --> 00:16:57,240
Now, we can try something else.
312
00:16:57,240 --> 00:17:00,513
So if this one here was really small, like just 10rem,
313
00:17:02,150 --> 00:17:05,380
then of course there is not a lot of space for the image.
314
00:17:05,380 --> 00:17:09,820
And so then, here, this property might become helpful.
315
00:17:09,820 --> 00:17:11,540
So without it being centered,
316
00:17:11,540 --> 00:17:14,050
it will automatically be aligned at the top,
317
00:17:14,050 --> 00:17:15,870
as I just said before.
318
00:17:15,870 --> 00:17:18,410
But, at the center it then moves here
319
00:17:18,410 --> 00:17:21,840
and we can even put it to the bottom as well.
320
00:17:21,840 --> 00:17:25,173
And so that then only shows this last part here.
321
00:17:27,830 --> 00:17:29,190
Okay.
322
00:17:29,190 --> 00:17:32,003
But anyway, I will just put it here to center.
323
00:17:37,060 --> 00:17:42,060
And so that is, how the image looks like in this situation.
324
00:17:43,200 --> 00:17:46,190
Now the image like this is way too bright
325
00:17:46,190 --> 00:17:48,410
and it takes up too much attention
326
00:17:48,410 --> 00:17:50,950
because it doesn't blend in very well
327
00:17:50,950 --> 00:17:53,990
with this side here of the container.
328
00:17:53,990 --> 00:17:58,130
So, there needs to be a little bit more harmony, let's say.
329
00:17:58,130 --> 00:18:00,840
And so, what I'm gonna do is to overlay
330
00:18:00,840 --> 00:18:03,570
this same gradient that we already have here
331
00:18:03,570 --> 00:18:06,320
also on top of the image.
332
00:18:06,320 --> 00:18:07,230
All right.
333
00:18:07,230 --> 00:18:10,470
And again, we did that before actually.
334
00:18:10,470 --> 00:18:14,350
And, so let me just explain it quickly again.
335
00:18:14,350 --> 00:18:16,500
So in the background image property,
336
00:18:16,500 --> 00:18:19,120
we can actually define multiple backgrounds,
337
00:18:19,120 --> 00:18:22,730
which will then be layered on top of each other.
338
00:18:22,730 --> 00:18:26,750
And so here, what I'm gonna do is to grab this one here,
339
00:18:26,750 --> 00:18:30,550
which, remember is also defined on background image.
340
00:18:30,550 --> 00:18:33,253
So it also counts as a background image.
341
00:18:34,250 --> 00:18:37,740
So I can put that here first, and then add a comma.
342
00:18:37,740 --> 00:18:41,760
And so now, we have this image and then below that
343
00:18:41,760 --> 00:18:42,813
we have this one.
344
00:18:44,350 --> 00:18:46,410
Now, if we check it out like this,
345
00:18:46,410 --> 00:18:50,100
then of course our original image is completely covered
346
00:18:50,100 --> 00:18:54,750
because the image that is on top is not transparent at all.
347
00:18:54,750 --> 00:18:56,713
And so let's change that here.
348
00:18:58,490 --> 00:18:59,993
So I just hover it here,
349
00:19:02,200 --> 00:19:03,060
and then,
350
00:19:04,250 --> 00:19:07,740
when I click here, it becomes this RGB value.
351
00:19:07,740 --> 00:19:11,143
And then I can simply move this one down.
352
00:19:12,450 --> 00:19:17,450
So for example, let's try, let's start with 50%,
353
00:19:17,670 --> 00:19:18,503
maybe even.
354
00:19:19,950 --> 00:19:21,850
So clicking the title bar here
355
00:19:23,240 --> 00:19:24,983
and then dragging this one down.
356
00:19:26,470 --> 00:19:29,430
So starting with .5.
357
00:19:29,430 --> 00:19:31,210
And so now this is transparent.
358
00:19:31,210 --> 00:19:34,600
And so now the second background image that is underneath
359
00:19:34,600 --> 00:19:36,400
should be visible.
360
00:19:36,400 --> 00:19:37,903
And indeed, it is.
361
00:19:38,780 --> 00:19:41,823
Now this, maybe is a bit too much color on top.
362
00:19:43,530 --> 00:19:44,923
Let's try .4.
363
00:19:47,850 --> 00:19:51,100
And maybe let's go even more down
364
00:19:51,100 --> 00:19:53,170
to 0.3
365
00:19:53,170 --> 00:19:54,163
or .35.
366
00:19:55,910 --> 00:19:56,743
Okay,
367
00:19:56,743 --> 00:20:00,690
so like this, I think we're good to go.
368
00:20:00,690 --> 00:20:02,720
So that is very beautiful.
369
00:20:02,720 --> 00:20:07,000
Now we just need to get rid of this text right there.
370
00:20:07,000 --> 00:20:09,190
So here we don't need any text.
371
00:20:09,190 --> 00:20:11,870
And so, basically here, we will end up with this
372
00:20:11,870 --> 00:20:15,690
empty div element, which has no content at all.
373
00:20:15,690 --> 00:20:19,370
However, the problem with this is, that visually, of course,
374
00:20:19,370 --> 00:20:22,140
this element still contains an image.
375
00:20:22,140 --> 00:20:26,030
But it is now completely inaccessible to screen readers.
376
00:20:26,030 --> 00:20:30,900
So, this image right now, is no content in our HTML,
377
00:20:30,900 --> 00:20:33,880
but instead only here in our style.
378
00:20:33,880 --> 00:20:37,490
Which means that the image is really just aesthetical
379
00:20:37,490 --> 00:20:40,730
and, really not a piece of content right now.
380
00:20:40,730 --> 00:20:42,700
And so that's why in screen readers,
381
00:20:42,700 --> 00:20:44,580
it will then not appear.
382
00:20:44,580 --> 00:20:47,673
We can, and should, however, fix that.
383
00:20:48,530 --> 00:20:50,460
So we can use a new attribute
384
00:20:50,460 --> 00:20:54,360
that we haven't talked about before, which is called role.
385
00:20:54,360 --> 00:20:57,710
And so here we can now say that this div element
386
00:20:57,710 --> 00:21:00,170
acts as if it was an image.
387
00:21:00,170 --> 00:21:04,960
So the role here of this element, is to be like an image.
388
00:21:04,960 --> 00:21:05,950
All right.
389
00:21:05,950 --> 00:21:08,240
And then, we can also describe it,
390
00:21:08,240 --> 00:21:10,620
but not with the alt text.
391
00:21:10,620 --> 00:21:13,580
So this one here Alt, is only for images,
392
00:21:13,580 --> 00:21:16,343
but instead we can use the aria-
393
00:21:17,820 --> 00:21:19,340
label.
394
00:21:19,340 --> 00:21:21,360
So this is like a newer attribute
395
00:21:21,360 --> 00:21:23,520
that is all about accessibility.
396
00:21:23,520 --> 00:21:25,383
And so here we can now describe that.
397
00:21:26,920 --> 00:21:30,057
So "Woman enjoying food".
398
00:21:31,140 --> 00:21:32,230
All right.
399
00:21:32,230 --> 00:21:34,980
And so now screen readers will be back
400
00:21:34,980 --> 00:21:36,950
to understanding this as an image.
401
00:21:36,950 --> 00:21:39,510
And then they will read this text here,
402
00:21:39,510 --> 00:21:44,220
to, for example, blind users or users with reduced sight.
403
00:21:44,220 --> 00:21:45,450
And,
404
00:21:45,450 --> 00:21:48,040
yeah, we should never forget these users
405
00:21:48,040 --> 00:21:50,240
when we are building our sites.
406
00:21:50,240 --> 00:21:51,073
All right.
407
00:21:51,073 --> 00:21:53,400
And so that's why I'm placing some focus here
408
00:21:53,400 --> 00:21:55,400
on accessibility.
409
00:21:55,400 --> 00:21:56,233
Now, okay.
410
00:21:56,233 --> 00:22:00,320
Now just one less thing here, which is,
411
00:22:00,320 --> 00:22:01,970
as you probably have noticed,
412
00:22:01,970 --> 00:22:04,960
these annoying bars on the side.
413
00:22:04,960 --> 00:22:06,690
Well, there's just one bar,
414
00:22:06,690 --> 00:22:09,033
but in reality you can also see it here.
415
00:22:10,640 --> 00:22:14,570
So let me inspect that to show you where it is coming from.
416
00:22:14,570 --> 00:22:17,800
And, indeed it is coming from the container,
417
00:22:17,800 --> 00:22:20,780
which, by default, has this padding applied
418
00:22:20,780 --> 00:22:23,960
to both of the sides, right.
419
00:22:23,960 --> 00:22:25,513
That's also the reason why,
420
00:22:26,460 --> 00:22:28,083
if we look here closely,
421
00:22:29,400 --> 00:22:31,653
and it's easier to see like this.
422
00:22:38,180 --> 00:22:41,040
So you see that now the image box actually touches
423
00:22:41,040 --> 00:22:45,210
the sides here, and that this content is kind of aligned
424
00:22:45,210 --> 00:22:47,040
with this content.
425
00:22:47,040 --> 00:22:50,830
However, what we really want is for this box
426
00:22:50,830 --> 00:22:53,250
to be aligned with this content here as well.
427
00:22:53,250 --> 00:22:56,940
So, that it appears to be in line with the other
428
00:22:56,940 --> 00:23:00,123
centered elements that we have on the rest of the page.
429
00:23:01,970 --> 00:23:05,040
So right now, it appears to be a little bit wider
430
00:23:05,040 --> 00:23:06,763
than this content and this.
431
00:23:07,770 --> 00:23:09,930
And, so, we want to fix that
432
00:23:09,930 --> 00:23:13,163
to make it look as though it was exactly as wide.
433
00:23:15,730 --> 00:23:18,870
So, that is actually not so hard to do.
434
00:23:18,870 --> 00:23:22,070
We will just have to create a small trick,
435
00:23:22,070 --> 00:23:26,303
which, yeah actually is just this section here yet.
436
00:23:27,290 --> 00:23:31,430
So, what we need to do here, is to create another element,
437
00:23:31,430 --> 00:23:34,110
which is inside of the container,
438
00:23:34,110 --> 00:23:38,033
and we will then have that element, be the cta.
439
00:23:39,080 --> 00:23:40,363
So let me show it to you.
440
00:23:42,930 --> 00:23:44,913
So this is now the cta,
441
00:23:48,360 --> 00:23:50,023
and no longer this,
442
00:23:50,980 --> 00:23:52,530
okay?
443
00:23:52,530 --> 00:23:56,933
And now, once we reload this, then that fixes the problem.
444
00:23:57,890 --> 00:23:59,170
So let me show you.
445
00:23:59,170 --> 00:24:01,640
Of course, the containers still has the same padding
446
00:24:01,640 --> 00:24:02,850
as before,
447
00:24:02,850 --> 00:24:04,950
but now the cta box,
448
00:24:04,950 --> 00:24:07,180
which is the box with the background color
449
00:24:07,180 --> 00:24:09,750
is inside of that container.
450
00:24:09,750 --> 00:24:11,680
And so the padding of the container
451
00:24:11,680 --> 00:24:14,860
is then no longer affecting this box right here.
452
00:24:14,860 --> 00:24:18,180
And so, right now it is actually aligned
453
00:24:18,180 --> 00:24:19,653
with the previous content.
454
00:24:21,880 --> 00:24:22,713
All right.
455
00:24:22,713 --> 00:24:24,630
So this is a lot better.
456
00:24:24,630 --> 00:24:26,983
It just creates this very small problem,
457
00:24:26,983 --> 00:24:30,100
that this image here is overflowing the container.
458
00:24:30,100 --> 00:24:34,003
But, once again, this is fortunately, easy to fix.
459
00:24:35,100 --> 00:24:37,040
So here in the cta element,
460
00:24:37,040 --> 00:24:39,890
which is now the new grid container.
461
00:24:39,890 --> 00:24:43,270
So, this is where the image is overlapping.
462
00:24:43,270 --> 00:24:46,370
Well, we can just get rid of that by saying
463
00:24:46,370 --> 00:24:47,323
overflow:
464
00:24:49,520 --> 00:24:50,353
hidden.
465
00:24:52,040 --> 00:24:55,083
Right, and so with this, it disappeared.
466
00:24:56,120 --> 00:25:00,940
Now for some reason we have this small gap here,
467
00:25:00,940 --> 00:25:04,350
like this, like a pixel or something there.
468
00:25:04,350 --> 00:25:06,323
And I'm not really sure why that is.
469
00:25:09,330 --> 00:25:12,100
So probably it has to do with some rounding issues here
470
00:25:12,100 --> 00:25:13,360
in Google Chrome.
471
00:25:13,360 --> 00:25:16,650
Because this one is .66 pixel,
472
00:25:16,650 --> 00:25:19,090
so 378.66.
473
00:25:19,090 --> 00:25:24,060
And this one, this first one is 757.33.
474
00:25:24,060 --> 00:25:27,173
And so this might just be an issue of, like alignment.
475
00:25:28,510 --> 00:25:30,720
So you see that, as I scale it here,
476
00:25:30,720 --> 00:25:33,800
there are some situations in which it doesn't happen
477
00:25:33,800 --> 00:25:35,540
and in others, it does.
478
00:25:35,540 --> 00:25:36,570
So you see that?
479
00:25:36,570 --> 00:25:38,550
It's kind of flickering.
480
00:25:38,550 --> 00:25:40,880
And so this is not a problem with our code,
481
00:25:40,880 --> 00:25:42,670
but with the browser.
482
00:25:42,670 --> 00:25:46,011
So, there's nothing we can do about that.
483
00:25:46,011 --> 00:25:49,750
(chuckling) And actually right now, it looks correct again.
484
00:25:49,750 --> 00:25:53,000
So, I'm not really sure, why that is happening.
485
00:25:53,000 --> 00:25:55,670
But anyway, we just need to ignore that.
486
00:25:55,670 --> 00:25:56,503
Great.
487
00:25:56,503 --> 00:25:59,840
So, now, we have this basic layout here finished.
488
00:25:59,840 --> 00:26:03,040
We have our background colors, and or image here
489
00:26:03,040 --> 00:26:04,380
nicely aligned.
490
00:26:04,380 --> 00:26:05,900
And so now in the next lecture,
491
00:26:05,900 --> 00:26:08,940
it is time to finally fill this box here
492
00:26:08,940 --> 00:26:10,573
with some real content.
35132
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.