Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,360 --> 00:00:02,540
Time to now use
2
00:00:02,540 --> 00:00:04,400
some of the guidelines we just learned
3
00:00:04,400 --> 00:00:06,940
about colors and practice.
4
00:00:06,940 --> 00:00:09,050
And this gonna be a lot of fun.
5
00:00:09,050 --> 00:00:11,083
So let's get started.
6
00:00:13,060 --> 00:00:16,120
And let's start by quickly choosing a base color
7
00:00:16,120 --> 00:00:18,050
for our design.
8
00:00:18,050 --> 00:00:19,740
Now of course, in the real world
9
00:00:19,740 --> 00:00:23,260
a lot of thought needs to go into this decision
10
00:00:23,260 --> 00:00:26,730
but we will just very quickly choose a color here
11
00:00:26,730 --> 00:00:29,000
just to see how it works.
12
00:00:29,000 --> 00:00:33,290
So there is a lot of like green colors here in the pictures.
13
00:00:33,290 --> 00:00:34,363
Like here,
14
00:00:35,750 --> 00:00:38,760
here are also this nice green in the plants
15
00:00:38,760 --> 00:00:39,860
as well as here.
16
00:00:39,860 --> 00:00:44,860
And this entire chair or couch is actually green as well.
17
00:00:45,100 --> 00:00:49,430
Also this small shop focuses a lot on health
18
00:00:49,430 --> 00:00:50,610
like here
19
00:00:50,610 --> 00:00:51,980
or here.
20
00:00:51,980 --> 00:00:54,890
And so if you remember, the color green
21
00:00:54,890 --> 00:00:58,420
stands for nature, growth and health.
22
00:00:58,420 --> 00:01:02,460
And so therefore let's go with a green color.
23
00:01:02,460 --> 00:01:03,983
So something like this.
24
00:01:05,030 --> 00:01:08,700
So I'll use one of the tools that I mentioned
25
00:01:08,700 --> 00:01:10,020
in the last lecture
26
00:01:10,020 --> 00:01:12,270
and that is Open Color.
27
00:01:12,270 --> 00:01:15,120
So the URL is this, which once again,
28
00:01:15,120 --> 00:01:19,090
you will be able to find at my resources page.
29
00:01:19,090 --> 00:01:22,500
So, here we have a lot of colors
30
00:01:22,500 --> 00:01:25,003
with the corresponding hex code.
31
00:01:25,970 --> 00:01:29,113
So gray, which we will come to a bit later.
32
00:01:30,120 --> 00:01:31,933
So we're looking for green.
33
00:01:33,250 --> 00:01:37,550
And so here we have like teal green and lime.
34
00:01:37,550 --> 00:01:39,680
So I'm not looking for this one.
35
00:01:39,680 --> 00:01:43,830
And actually I think the one that I like is this teal.
36
00:01:43,830 --> 00:01:44,663
So this is,
37
00:01:45,690 --> 00:01:48,470
if you look at this here, at these pictures,
38
00:01:48,470 --> 00:01:49,940
then you see that teal
39
00:01:49,940 --> 00:01:51,270
is the one that,
40
00:01:51,270 --> 00:01:54,653
that more closely resembles the color that we already have.
41
00:01:55,790 --> 00:01:58,450
So we could not choose any of these,
42
00:01:58,450 --> 00:02:02,010
but this dark one here looks pretty nice to me.
43
00:02:02,010 --> 00:02:05,910
So I would just color this hexadecimal code.
44
00:02:05,910 --> 00:02:07,720
And then here in the comments,
45
00:02:07,720 --> 00:02:09,336
let's just write
46
00:02:09,336 --> 00:02:11,243
our color system here.
47
00:02:12,100 --> 00:02:13,410
So main
48
00:02:13,410 --> 00:02:14,358
color
49
00:02:14,358 --> 00:02:17,440
(keyboard clicking)
50
00:02:17,440 --> 00:02:18,600
is this.
51
00:02:18,600 --> 00:02:20,700
And then it gets, even in the comments,
52
00:02:20,700 --> 00:02:22,330
nicely highlighted
53
00:02:22,330 --> 00:02:26,150
because of that VS code extension that we installed.
54
00:02:26,150 --> 00:02:29,720
And remember that for our real world color pallette,
55
00:02:29,720 --> 00:02:32,770
we would now go ahead and generate shades and tints
56
00:02:32,770 --> 00:02:34,440
for this color.
57
00:02:34,440 --> 00:02:38,110
Now in this case, actually the tints are already here.
58
00:02:38,110 --> 00:02:40,750
So like the lighter versions.
59
00:02:40,750 --> 00:02:41,940
So if we need one,
60
00:02:41,940 --> 00:02:44,393
we can simply go ahead and take one of these.
61
00:02:46,740 --> 00:02:48,150
All right.
62
00:02:48,150 --> 00:02:49,940
So let's just choose the gray now.
63
00:02:49,940 --> 00:02:54,600
And there's only one gray. So let's go with that.
64
00:02:54,600 --> 00:02:57,740
So this gray should be used for the text.
65
00:02:57,740 --> 00:03:00,300
And so I'm going to choose this one.
66
00:03:00,300 --> 00:03:02,370
I could also choose this one,
67
00:03:02,370 --> 00:03:03,203
but
68
00:03:04,044 --> 00:03:05,744
yeah, let's go with this one here.
69
00:03:06,670 --> 00:03:08,903
That one might be a little bit too light.
70
00:03:10,270 --> 00:03:13,270
(keyboard clicking)
71
00:03:14,400 --> 00:03:16,080
And that's it.
72
00:03:16,080 --> 00:03:17,280
And from the hex code,
73
00:03:17,280 --> 00:03:20,550
you can actually see that these are not real grays.
74
00:03:20,550 --> 00:03:24,780
Because if they were then the first pair would need to be
75
00:03:24,780 --> 00:03:26,980
the same as the second and the third pair.
76
00:03:26,980 --> 00:03:27,813
Remember that?
77
00:03:29,910 --> 00:03:31,000
All right.
78
00:03:31,000 --> 00:03:33,970
But anyway, let's now actually use these colors.
79
00:03:33,970 --> 00:03:36,350
And the first thing that I'm going to do
80
00:03:36,350 --> 00:03:39,530
is to make all the text on the page gray.
81
00:03:39,530 --> 00:03:41,620
So using this gray here,
82
00:03:41,620 --> 00:03:43,390
copying it again,
83
00:03:43,390 --> 00:03:45,760
and remember that the color property
84
00:03:45,760 --> 00:03:47,960
is one that gets inherited.
85
00:03:47,960 --> 00:03:50,823
And so we can simply put that here on the body.
86
00:03:51,950 --> 00:03:53,560
So color.
87
00:03:53,560 --> 00:03:56,940
Well, I had caps lock turned on,
88
00:03:56,940 --> 00:03:57,829
so color
89
00:03:57,829 --> 00:03:59,750
(keyboard clicking)
90
00:03:59,750 --> 00:04:01,160
giving it a save
91
00:04:01,160 --> 00:04:02,890
and there we go.
92
00:04:02,890 --> 00:04:07,150
So that looks a lot more like it was actually designed.
93
00:04:07,150 --> 00:04:08,360
Right?
94
00:04:08,360 --> 00:04:09,783
So that's really nice.
95
00:04:10,780 --> 00:04:15,070
So we are definitely going somewhere here with our design
96
00:04:15,070 --> 00:04:17,660
and now it's time to take
97
00:04:17,660 --> 00:04:21,223
this color here and actually use it here on this link.
98
00:04:23,830 --> 00:04:27,693
So this link, we actually want to style it as a button.
99
00:04:29,170 --> 00:04:30,003
So
100
00:04:31,310 --> 00:04:32,493
where is that?
101
00:04:34,720 --> 00:04:37,270
Yeah, so here it is in button
102
00:04:37,270 --> 00:04:39,610
and it also has this button,
103
00:04:39,610 --> 00:04:40,863
big class here.
104
00:04:41,920 --> 00:04:43,680
But let's just start with button
105
00:04:44,930 --> 00:04:47,580
and this should be reusable. So let's put it up here.
106
00:04:49,703 --> 00:04:52,703
(keyboard clicking)
107
00:04:53,820 --> 00:04:56,690
And now remember how we should always
108
00:04:56,690 --> 00:04:59,650
use the pseudo classes of link and visit it
109
00:05:01,270 --> 00:05:03,660
since this is actually a link
110
00:05:03,660 --> 00:05:05,490
and not a button element.
111
00:05:05,490 --> 00:05:07,580
And it is not a button element
112
00:05:07,580 --> 00:05:09,910
because this is supposed to be a link
113
00:05:09,910 --> 00:05:12,170
that actually leads somewhere.
114
00:05:12,170 --> 00:05:16,230
So shop chairs will probably lead us to another page,
115
00:05:16,230 --> 00:05:19,190
which is then their online shop.
116
00:05:19,190 --> 00:05:22,470
So it's not the button because it doesn't do anything
117
00:05:22,470 --> 00:05:25,610
like for example, opening a model window.
118
00:05:25,610 --> 00:05:28,650
And so if it leads somewhere, it should be a link.
119
00:05:28,650 --> 00:05:31,300
And if it does something, then it should be a button.
120
00:05:32,710 --> 00:05:37,193
But also more about that a bit later in our main project.
121
00:05:40,120 --> 00:05:42,510
Now let's use our background color here.
122
00:05:44,700 --> 00:05:46,453
Oh well, that's not it.
123
00:05:47,550 --> 00:05:49,583
Now we need to grab it again here.
124
00:05:52,790 --> 00:05:54,560
Okay.
125
00:05:54,560 --> 00:05:57,110
And now let's give it the actual styles.
126
00:05:57,110 --> 00:05:59,763
So first of all the color should now be white.
127
00:06:01,320 --> 00:06:02,232
So color
128
00:06:02,232 --> 00:06:03,190
(keyboard clicking)
129
00:06:03,190 --> 00:06:04,023
FFF.
130
00:06:04,950 --> 00:06:08,190
We don't want the text underline.
131
00:06:08,190 --> 00:06:11,290
So that is text decoration remember?
132
00:06:11,290 --> 00:06:13,510
And right now by default, it is underlined
133
00:06:13,510 --> 00:06:15,873
but we want it to be none.
134
00:06:16,990 --> 00:06:19,053
So that looks better already.
135
00:06:20,520 --> 00:06:24,350
And now let's actually also turn it uppercase.
136
00:06:24,350 --> 00:06:27,675
So that's something common in buttons.
137
00:06:27,675 --> 00:06:29,470
(keyboard clicking)
138
00:06:29,470 --> 00:06:32,833
And remember, that is text transform set to uppercase.
139
00:06:34,400 --> 00:06:35,800
Right?
140
00:06:35,800 --> 00:06:38,363
And now finally let's give it some padding.
141
00:06:40,060 --> 00:06:41,980
So on a top and bottom,
142
00:06:41,980 --> 00:06:46,410
let's give it 16 pixels and left and right, 32.
143
00:06:46,410 --> 00:06:50,460
And these values are coming from my spacing system up here,
144
00:06:50,460 --> 00:06:53,403
but I will not yet go into that system.
145
00:06:54,260 --> 00:06:55,870
Okay?
146
00:06:55,870 --> 00:06:59,140
So some space was actually created here,
147
00:06:59,140 --> 00:07:01,870
but this element didn't move down.
148
00:07:01,870 --> 00:07:04,610
So basically the distance here
149
00:07:04,610 --> 00:07:07,450
between this text and this one didn't change.
150
00:07:07,450 --> 00:07:10,230
And do you know why that is?
151
00:07:10,230 --> 00:07:14,750
Well, it is because this anchor element is an inline element
152
00:07:14,750 --> 00:07:16,290
and on inline elements
153
00:07:16,290 --> 00:07:19,900
the box model does not work as expected.
154
00:07:19,900 --> 00:07:21,490
Remember that?
155
00:07:21,490 --> 00:07:23,490
So basically vertical spacing
156
00:07:23,490 --> 00:07:26,480
does not actually create new space.
157
00:07:26,480 --> 00:07:28,670
But that is what we want
158
00:07:28,670 --> 00:07:30,170
and so we can set it to
159
00:07:31,340 --> 00:07:34,320
an inline block, right?
160
00:07:34,320 --> 00:07:35,810
It should not be block
161
00:07:35,810 --> 00:07:39,310
because then it would occupy all the space that it can
162
00:07:39,310 --> 00:07:41,720
like this, right?
163
00:07:41,720 --> 00:07:45,080
So this is not what we want, but we want inline block.
164
00:07:45,080 --> 00:07:49,360
And now there is some more space there. Right?
165
00:07:49,360 --> 00:07:51,710
Now finally, let's just make this bold.
166
00:07:51,710 --> 00:07:55,750
And for that we have our font weight of 500.
167
00:07:55,750 --> 00:07:57,170
I think.
168
00:07:57,170 --> 00:08:00,210
So here in the URL we can actually nicely see it.
169
00:08:00,210 --> 00:08:02,140
So we have a 400,
170
00:08:02,140 --> 00:08:02,973
500
171
00:08:02,973 --> 00:08:03,830
and 700
172
00:08:03,830 --> 00:08:05,180
selected.
173
00:08:05,180 --> 00:08:08,480
And actually, if we now decided we also want 600,
174
00:08:08,480 --> 00:08:11,550
we don't need to go back to Google fonts
175
00:08:11,550 --> 00:08:14,590
instead we could simply add a 600 here
176
00:08:14,590 --> 00:08:16,360
then a semi-colon
177
00:08:16,360 --> 00:08:18,210
and then it would also load that one.
178
00:08:19,130 --> 00:08:19,963
All right.
179
00:08:19,963 --> 00:08:22,350
But we just want the 500 to make this text here
180
00:08:22,350 --> 00:08:23,703
just a little bit bolder.
181
00:08:24,950 --> 00:08:26,600
So font weight
182
00:08:26,600 --> 00:08:27,433
of 500
183
00:08:29,030 --> 00:08:31,270
and yeah, that looks a bit nicer.
184
00:08:31,270 --> 00:08:33,580
And later we will also make this round
185
00:08:33,580 --> 00:08:36,800
but for now we don't yet know how that works.
186
00:08:36,800 --> 00:08:37,633
Nice.
187
00:08:37,633 --> 00:08:39,930
Now just above the
188
00:08:39,930 --> 00:08:40,910
font size.
189
00:08:40,910 --> 00:08:44,350
But then I also wanted to talk about the hover state.
190
00:08:44,350 --> 00:08:46,870
So usually when we hover a button like this,
191
00:08:46,870 --> 00:08:49,160
it might change its color.
192
00:08:49,160 --> 00:08:52,170
So it might turn lighter or darker.
193
00:08:52,170 --> 00:08:53,003
So in this case,
194
00:08:53,003 --> 00:08:54,730
let's just make it lighter
195
00:08:54,730 --> 00:08:57,120
because that's one of the colors that we actually
196
00:08:57,120 --> 00:08:59,773
can just take from Open Color here.
197
00:09:01,100 --> 00:09:03,653
But first let's make the text a bit bigger.
198
00:09:05,210 --> 00:09:08,513
Let's keep these properties a bit together with the font.
199
00:09:10,180 --> 00:09:11,240
So font
200
00:09:12,460 --> 00:09:13,480
size
201
00:09:13,480 --> 00:09:14,840
of 18
202
00:09:14,840 --> 00:09:16,220
pixel.
203
00:09:16,220 --> 00:09:17,550
Beautiful.
204
00:09:17,550 --> 00:09:20,440
And now let's get that lighter color here
205
00:09:20,440 --> 00:09:21,623
from Open Color.
206
00:09:23,101 --> 00:09:25,020
And so this is our usual color.
207
00:09:25,020 --> 00:09:26,750
And then as we hover the button,
208
00:09:26,750 --> 00:09:29,980
we might want to change the color to this one.
209
00:09:29,980 --> 00:09:33,063
So just a subtle effect, but let's copy it here.
210
00:09:35,495 --> 00:09:37,620
And then let's say button,
211
00:09:37,620 --> 00:09:39,000
(keyboard clicking)
212
00:09:39,000 --> 00:09:40,056
a hover
213
00:09:40,056 --> 00:09:42,030
(keyboard clicking)
214
00:09:42,030 --> 00:09:42,908
and button
215
00:09:42,908 --> 00:09:44,400
(keyboard clicking)
216
00:09:44,400 --> 00:09:45,233
active.
217
00:09:45,233 --> 00:09:47,420
So always in this order.
218
00:09:47,420 --> 00:09:48,720
Okay?
219
00:09:48,720 --> 00:09:50,150
So back
220
00:09:50,150 --> 00:09:51,790
ground
221
00:09:51,790 --> 00:09:53,330
color.
222
00:09:53,330 --> 00:09:54,710
And then,
223
00:09:54,710 --> 00:09:55,543
there we go.
224
00:09:56,410 --> 00:09:57,890
Let's check that out
225
00:09:57,890 --> 00:10:00,340
and that looks beautiful.
226
00:10:00,340 --> 00:10:01,593
Really, really nice.
227
00:10:02,560 --> 00:10:05,350
Now there is just one thing that we should do here,
228
00:10:05,350 --> 00:10:07,890
which is to check the contrast between
229
00:10:07,890 --> 00:10:10,500
the background color and the text color.
230
00:10:10,500 --> 00:10:12,980
So remember that this is extremely important
231
00:10:12,980 --> 00:10:16,340
to make text accessible for everyone.
232
00:10:16,340 --> 00:10:18,250
So I will copy this
233
00:10:18,250 --> 00:10:19,830
hex code here.
234
00:10:19,830 --> 00:10:22,540
And then I will come to this tool that I mentioned
235
00:10:22,540 --> 00:10:24,680
which is called Coolors.
236
00:10:24,680 --> 00:10:28,120
And one more time, by the time you're watching this,
237
00:10:28,120 --> 00:10:30,250
this tool might look different.
238
00:10:30,250 --> 00:10:34,820
But somewhere there must be this contrast checker here.
239
00:10:34,820 --> 00:10:35,653
Okay?
240
00:10:35,653 --> 00:10:38,310
And if for some reason that doesn't work,
241
00:10:38,310 --> 00:10:42,130
then just Google contrast checker and you will for sure
242
00:10:42,130 --> 00:10:45,053
find one of the countless tools that does this.
243
00:10:46,310 --> 00:10:48,620
So contrast checker.
244
00:10:48,620 --> 00:10:50,870
Let's make the text color white.
245
00:10:50,870 --> 00:10:52,780
So that's FFF.
246
00:10:52,780 --> 00:10:54,150
Then here let's paste that
247
00:10:54,990 --> 00:10:58,930
and you see that we have a contrast of five.
248
00:10:58,930 --> 00:11:00,650
Now that's not perfect
249
00:11:00,650 --> 00:11:03,120
but it is good enough for us.
250
00:11:03,120 --> 00:11:04,190
Now right?
251
00:11:04,190 --> 00:11:08,463
And we could try the same of course with our text color.
252
00:11:09,540 --> 00:11:11,670
So there we have a white background
253
00:11:12,930 --> 00:11:15,440
and by the way you see that white on white
254
00:11:15,440 --> 00:11:17,893
is what a contrast of one means.
255
00:11:18,990 --> 00:11:21,170
So the worst possible.
256
00:11:21,170 --> 00:11:22,180
And
257
00:11:22,180 --> 00:11:27,123
yeah, so our contrast here is actually quite good, 11.5.
258
00:11:28,670 --> 00:11:31,070
All right, but anyway this was just to show you
259
00:11:31,070 --> 00:11:33,120
how this tool works.
260
00:11:33,120 --> 00:11:34,330
All right.
261
00:11:34,330 --> 00:11:36,550
But let's go down because
262
00:11:36,550 --> 00:11:38,510
here we have some more buttons
263
00:11:38,510 --> 00:11:41,610
and these don't look all too well.
264
00:11:41,610 --> 00:11:42,973
And so let's change that.
265
00:11:44,480 --> 00:11:48,960
So maybe you'll remember that here we have the button class,
266
00:11:48,960 --> 00:11:51,230
but also the button big.
267
00:11:51,230 --> 00:11:54,880
And so this is basically like a variation of this button
268
00:11:54,880 --> 00:11:56,653
that we can now style differently.
269
00:11:57,670 --> 00:11:59,600
So we have button big. Let's see.
270
00:11:59,600 --> 00:12:00,853
And then down there,
271
00:12:02,190 --> 00:12:05,120
here we have the button small.
272
00:12:05,120 --> 00:12:05,953
Okay.
273
00:12:05,953 --> 00:12:07,760
So this is a very common technique
274
00:12:07,760 --> 00:12:10,250
that we use when we write CSS,
275
00:12:10,250 --> 00:12:12,960
which is basically put all the common styles
276
00:12:12,960 --> 00:12:14,770
into one element
277
00:12:14,770 --> 00:12:16,080
or into one class,
278
00:12:16,080 --> 00:12:17,880
which is button in this case.
279
00:12:17,880 --> 00:12:19,770
And then the styles that are different
280
00:12:19,770 --> 00:12:20,720
we put
281
00:12:20,720 --> 00:12:21,670
into
282
00:12:21,670 --> 00:12:24,033
one of these like variations.
283
00:12:25,490 --> 00:12:26,973
So let's create those.
284
00:12:29,670 --> 00:12:31,320
So that's button
285
00:12:31,320 --> 00:12:32,368
small
286
00:12:32,368 --> 00:12:33,980
(keyboard clicking)
287
00:12:33,980 --> 00:12:34,813
and
288
00:12:36,730 --> 00:12:38,300
button
289
00:12:38,300 --> 00:12:39,793
I think it was big.
290
00:12:40,750 --> 00:12:43,080
And I like to use two dashes here
291
00:12:43,080 --> 00:12:46,110
but of course that's not really a hard rule.
292
00:12:46,110 --> 00:12:48,720
So what's going to change here
293
00:12:48,720 --> 00:12:50,760
between the big and the small button
294
00:12:50,760 --> 00:12:52,460
is the font size
295
00:12:52,460 --> 00:12:54,340
and also the sizing.
296
00:12:54,340 --> 00:12:57,160
And the sizing is defined by the padding here.
297
00:12:57,160 --> 00:12:59,160
And so let's grab these two
298
00:12:59,160 --> 00:13:02,163
because these two are actually for the big button.
299
00:13:03,730 --> 00:13:07,510
And then for the small one, let's do something else.
300
00:13:07,510 --> 00:13:09,163
So let's save this for now.
301
00:13:10,040 --> 00:13:12,030
And so you'll see that our big button here
302
00:13:12,030 --> 00:13:13,770
still looks the same
303
00:13:13,770 --> 00:13:16,500
and our small now looks like this.
304
00:13:16,500 --> 00:13:18,973
And so let's also give it some other font size.
305
00:13:20,170 --> 00:13:23,230
And remember by default, it is 16
306
00:13:23,230 --> 00:13:25,250
but this actually looks too big.
307
00:13:25,250 --> 00:13:26,820
So let's
308
00:13:26,820 --> 00:13:29,560
put it down a bit to 14.
309
00:13:29,560 --> 00:13:30,570
Nice.
310
00:13:30,570 --> 00:13:33,730
And now give it some padding as well
311
00:13:33,730 --> 00:13:36,300
but a little bit less than the big one.
312
00:13:36,300 --> 00:13:37,950
So eight
313
00:13:37,950 --> 00:13:38,783
top and bottom
314
00:13:38,783 --> 00:13:40,383
and 12 left and right.
315
00:13:42,170 --> 00:13:43,003
Nice.
316
00:13:43,003 --> 00:13:45,193
That actually looks quite nice.
317
00:13:46,330 --> 00:13:48,507
So here we are done with the color
318
00:13:48,507 --> 00:13:50,070
but since we are here
319
00:13:50,070 --> 00:13:53,783
let's actually also change the color of this footer here.
320
00:13:54,680 --> 00:13:57,200
So remember how we made this text smaller
321
00:13:57,200 --> 00:13:59,300
because it is a lot less important
322
00:13:59,300 --> 00:14:01,110
than the rest of the text.
323
00:14:01,110 --> 00:14:03,730
And so let's continue that by also making the text
324
00:14:03,730 --> 00:14:05,223
lighter than the rest.
325
00:14:06,490 --> 00:14:09,290
So let's come again to Open Colors
326
00:14:10,460 --> 00:14:13,517
and remember how the one we chose was this one.
327
00:14:13,517 --> 00:14:15,330
So let's now try maybe
328
00:14:15,330 --> 00:14:16,163
this one.
329
00:14:17,000 --> 00:14:18,240
So I'm copying it.
330
00:14:18,240 --> 00:14:20,190
And now the first thing I will do
331
00:14:20,190 --> 00:14:22,513
is actually to check the color contrast.
332
00:14:23,790 --> 00:14:27,147
So this one, oh, and here we only have 3.3
333
00:14:28,306 --> 00:14:29,860
which is poor.
334
00:14:29,860 --> 00:14:31,363
So that we cannot use.
335
00:14:32,930 --> 00:14:34,850
Let's try to click here,
336
00:14:34,850 --> 00:14:36,610
adjust text color,
337
00:14:36,610 --> 00:14:37,913
but that's way too dark.
338
00:14:39,470 --> 00:14:41,590
So let's just then choose
339
00:14:41,590 --> 00:14:42,939
the next one.
340
00:14:42,939 --> 00:14:45,490
(keyboard clicking)
341
00:14:45,490 --> 00:14:48,273
So that's maybe not as light as we want it.
342
00:14:49,170 --> 00:14:52,110
And sometimes we might also be able break these rules
343
00:14:52,110 --> 00:14:53,570
just a little bit.
344
00:14:53,570 --> 00:14:57,240
But here let's just very strictly stick to the rules.
345
00:14:57,240 --> 00:14:58,990
And so there you go.
346
00:14:58,990 --> 00:15:01,093
It actually looks almost the same
347
00:15:01,093 --> 00:15:02,410
but
348
00:15:02,410 --> 00:15:03,890
well, anyway,
349
00:15:03,890 --> 00:15:05,420
let's just keep it like this
350
00:15:05,420 --> 00:15:08,500
so that we don't break the accessibility rules.
351
00:15:08,500 --> 00:15:09,880
Great.
352
00:15:09,880 --> 00:15:13,740
Now remember that another thing we could do with colors
353
00:15:13,740 --> 00:15:16,700
was to accent one entire section.
354
00:15:16,700 --> 00:15:17,830
All right.
355
00:15:17,830 --> 00:15:20,777
So that is something very common that we do with colors.
356
00:15:20,777 --> 00:15:23,020
And so that's what I'm gonna do now
357
00:15:23,020 --> 00:15:26,010
with this testimonial section here.
358
00:15:26,010 --> 00:15:30,010
So I'm pretty sure that's going to look amazing.
359
00:15:30,010 --> 00:15:31,903
So let's try that out.
360
00:15:33,030 --> 00:15:36,283
So first I want to know what this entire element is called.
361
00:15:37,470 --> 00:15:39,493
So it's the testimonial section.
362
00:15:40,900 --> 00:15:42,423
So,
363
00:15:43,520 --> 00:15:45,193
so it's this one.
364
00:15:46,337 --> 00:15:47,940
(keyboard clicking)
365
00:15:47,940 --> 00:15:50,350
So background color
366
00:15:50,350 --> 00:15:53,460
and now VS code is actually really nice to us
367
00:15:53,460 --> 00:15:55,310
because it already gives us here
368
00:15:55,310 --> 00:15:57,550
the most common used colors.
369
00:15:57,550 --> 00:15:59,380
So in this current CSS file,
370
00:15:59,380 --> 00:16:01,400
we have used these four colors.
371
00:16:01,400 --> 00:16:04,800
And so here it helps us choosing the same colors again.
372
00:16:04,800 --> 00:16:06,723
So this is our green color.
373
00:16:07,570 --> 00:16:08,650
All right.
374
00:16:08,650 --> 00:16:09,510
Nice.
375
00:16:09,510 --> 00:16:11,710
Well, at least it's a start.
376
00:16:11,710 --> 00:16:15,640
But now we need to make the text white.
377
00:16:15,640 --> 00:16:17,410
So how should we do that?
378
00:16:17,410 --> 00:16:20,033
Should we select all of these three?
379
00:16:20,940 --> 00:16:22,930
Well, I don't think so.
380
00:16:22,930 --> 00:16:26,280
And instead we should simply make the color
381
00:16:26,280 --> 00:16:28,500
on this parent element white
382
00:16:28,500 --> 00:16:29,990
and then all the other elements
383
00:16:29,990 --> 00:16:31,853
should be able to inherit it.
384
00:16:32,700 --> 00:16:34,136
So let's do that.
385
00:16:34,136 --> 00:16:35,370
(keyboard clicking)
386
00:16:35,370 --> 00:16:36,730
Color to white.
387
00:16:36,730 --> 00:16:37,803
So FFF.
388
00:16:39,030 --> 00:16:43,010
And so that is a lot more readable. Right?
389
00:16:43,010 --> 00:16:44,650
Now it looks a bit weird
390
00:16:44,650 --> 00:16:48,930
that the background color is not here around this image.
391
00:16:48,930 --> 00:16:52,240
And so let's just give it some padding here.
392
00:16:52,240 --> 00:16:54,610
So padding to the entire section
393
00:16:54,610 --> 00:16:57,623
which will move everything a bit inward basically.
394
00:16:58,530 --> 00:17:02,690
And so with that, it looks a lot nicer.
395
00:17:02,690 --> 00:17:05,520
And again we will add some roundness to it later
396
00:17:05,520 --> 00:17:07,773
once we learn how that actually works.
397
00:17:08,746 --> 00:17:10,120
Okay.
398
00:17:10,120 --> 00:17:11,560
And now finally,
399
00:17:11,560 --> 00:17:13,840
as yet another accent,
400
00:17:13,840 --> 00:17:16,330
what I can do now is to
401
00:17:16,330 --> 00:17:18,260
like add a final touch
402
00:17:18,260 --> 00:17:21,660
which will be to add a green line here
403
00:17:21,660 --> 00:17:23,880
to the end of the entire page.
404
00:17:23,880 --> 00:17:27,792
So going from left to right, all across the page.
405
00:17:27,792 --> 00:17:32,113
And so if I want that, I need to set it on the body.
406
00:17:33,350 --> 00:17:34,750
So right here.
407
00:17:34,750 --> 00:17:35,770
(keyboard clicking)
408
00:17:35,770 --> 00:17:37,630
So border bottom.
409
00:17:37,630 --> 00:17:41,250
I think we actually did this in our other project.
410
00:17:41,250 --> 00:17:42,780
So the web magazine
411
00:17:44,020 --> 00:17:47,140
solid and then again our main color
412
00:17:49,620 --> 00:17:50,800
and
413
00:17:50,800 --> 00:17:52,790
yeah, that looks nice.
414
00:17:52,790 --> 00:17:55,180
That's a nice final accent for the page
415
00:17:55,180 --> 00:17:58,880
and also a final accent for this lecture.
416
00:17:58,880 --> 00:18:00,150
Because with this
417
00:18:00,150 --> 00:18:01,866
we are actually done
418
00:18:01,866 --> 00:18:04,190
at least for now.
419
00:18:04,190 --> 00:18:06,670
And so therefore we can now move on
420
00:18:06,670 --> 00:18:08,300
to our next lecture
421
00:18:08,300 --> 00:18:10,203
which is gonna be on images.
27478
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.