Voiceover: Welcome back to Part 2 of Building the Header. 2 2
In this video, we'll format the content 3 3
of the hero text blocks, 4 4
so this heading and those buttons. 5 5
Let's start by looking at the main heading. 6 6
We should probably make it wide, right? 7 7
So let's go back to the h1 style here, 8 8
and continue to define how it should look like. 9 9
So color, I will make it right, 10 10
and I will specify its font size, as well. 11 11
Now, the basic font size 12 12
of our html document is 20 pixels. 13 13
Now, in responsive web design, 14 14
we want everything to be relative. 15 15
So we can say that our font size should be 200%, 16 16
and then, this means 17 17
that our heading element 18 18
will be 40 pixels, 19 19
which is exactly 200% of 20 pixels, right? 20 20
So, if we later want to change this size, 21 21
we can just change the 22 22
html global font size, 23 23
let's say to 18, 24 24
and then this size will automatically decrease as well. 25 25
And we will use this method 26 26
for all other elements on the webpage, 27 27
so it will all be defined relatively to this 28 28
base size of 20 pixels. 29 29
Then, by adjusting this, all other elements 30 30
will automatically adjust their size. 31 31
And 200% looks good to start with. 32 32
Or maybe 240% 33 33
because we really want this to be big. 34 34
So let's check how it looks like. 35 35
Okay, much better. 36 36
Now, you probably remember that I said 37 37
in the design section, 38 38
that when we use very big headlines, 39 39
we should decrease the font weight. 40 40
And we will do that right now. 41 41
And we should also 42 42
maybe set this to upper case 43 43
because I think it looks much better. 44 44
So let's go back here and do that. 45 45
And with this, I can show you many ways to format text. 46 46
So let's decrease the font weight 47 47
to 300, 48 48
'cause usually the h1 elements come with bold formatting, 49 49
and that's not what we want. 50 50
And we will make it an upper case. 51 51
For that, we use the text transform property. 52 52
So, let's say upper case. 53 53
And another thing we can do is the letter spacing, 54 54
so it's not so compressed. 55 55
And also, a word spacing, 56 56
so some space between different words. 57 57
All of this makes a big headline like this 58 58
look much better. 59 59
I can go with three pixels here, for example, or maybe four. 60 60
Let's see how it looks like. 61 61
Okay, much better now. 62 62
But now we have this ugly line break here, healthy meals, 63 63
and we don't want that. 64 64
So let's just break it here, 65 65
so that we have goodbye junk food, 66 66
and then on the next line, hello super healthy meals. 67 67
Right, this will be much better. 68 68
So you remember how we do that? 69 69
Easy as this. 70 70
Just a br element. 71 71
Much better now, right? 72 72
So now let's format these buttons here. 73 73
First, we should 74 74
attribute some class to this one. 75 75
And I usually call them button, 76 76
and now we will have two kinds of buttons. 77 77
The first one will be a orange button 78 78
with a full orange color, 79 79
and the other one will be a so-called ghost button, 80 80
which will have just an outline, 81 81
an orange outline, 82 82
and then be transparent in the inside. 83 83
And what I'll do now is to 84 84
create a class for each of those buttons. 85 85
Let me just show you. 86 86
Button one will be called full 87 87
and button ghost. 88 88
So I will put the common styles, 89 89
like the font size and the font color and the button size, 90 90
I will put these inside this button class, 91 91
and then I will create a button full class, 92 92
which is specifically designed for the full button, 93 93
and a button ghost class, 94 94
which will be specifically designed for the ghost button. 95 95
All right. 96 96
So let's go back to the style file down here. 97 97
So button. 98 98
Now, in the lecture about the box model, 99 99
I told you that there were 100 100
block elements and inline elements, right? 101 101
Now there is also a mix between those two elements, 102 102
which is called the inline block, 103 103
and the inline block is just like an inline element, 104 104
but that can have heading and margin. 105 105
So the difference is that 106 106
it doesn't force a line break, 107 107
but you can attribute it some heading and some margin 108 108
unlike a normal inline element. 109 109
And so, a normal a 110 110
element like this 111 111
is an inline element, 112 112
but we want it be an inline block. 113 113
So we can change that by using display, 114 114
and then say inline block. 115 115
And now, we can 116 116
give it some heading. 117 117
And, let's say we want the top 118 118
to have 10 pixels, 119 119
and on the right and the left sides, 30 pixels. 120 120
Now, do you remember if we just put 30 and 10, 121 121
then this will mean that we have 122 122
10 pixels of heading 123 123
on top and bottom 124 124
and 30 pixels left and right, okay? 125 125
Now another thing is we also want 126 126
the font weight 127 127
to be 300 here. 128 128
So let me check. 129 129
All right, so you see, we have some heading here now, 130 130
and it looks good. 131 131
We also have this text underline here 132 132
that we need to get rid of because 133 133
it's kind of ugly, you know. 134 134
So we use text decoration, 135 135
and we want none of it. 136 136
Very well, so this is the common button style. 137 137
So both buttons have this in common. 138 138
And now let's start with the, 139 139
sorry, now let's start 140 140
with the full button. 141 141
And now let's choose a color. 142 142
As I told you before we will use the Flat UI tool. 143 143
Right here. 144 144
Flat UI colors. 145 145
Okay, that's the one we want. 146 146
So we have some oranges down here, 147 147
and to me, it looks like 148 148
this one is the best to use in this case. 149 149
So I'll just click here. 150 150
And now the color is selected. 151 151
So I will say that we want 152 152
the background color of this button to be this color. 153 153
Here we see, it's a nice orange, 154 154
and 155 155
let me go back here. 156 156
And here it is. 157 157
Now it's a nice orange button. 158 158
Very well, now, we maybe want some 159 159
border-radius here, right? 160 160
So we want this to be round 161 161
on both sides. 162 162
So we can just put a ridiculously high 163 163
border-radius here. 164 164
Like, I don't know, 200 pixels. 165 165
Very well, now, the text should probably be white 166 166
for this button, right? 167 167
Actually, for both of the buttons, 168 168
so put it right here, 169 169
color FFF is white. 170 170
So very well. 171 171
Now, the style for the ghost button. 172 172
We want the border to be orange, 173 173
so we did this before, at this border, 174 174
we want it to be one pixel, solid line, and then the color. 175 175
And we will use this color here. 176 176
Now you see this button is slightly 177 177
bigger than this one. 178 178
And there's a reason for that. 179 179
If you remember from the box model, 180 180
the height and the width of an element 181 181
is the content plus the heading plus the border. 182 182
So this element is higher 183 183
because it has that one pixel border. 184 184
So in order to make these two the same height and width, 185 185
we just add that border to this button as well. 186 186
And we also want some distance between this, right? 187 187
And probably the best way of doing this 188 188
is to add some 189 189
button margin to this h1 element. 190 190
Let's go back, and as I said, 191 191
we will add this border here 192 192
so that they look the same 193 193
and then some margin bottom. 194 194
So this one is the margin top, right? 195 195
And here we want margin bottom, like 20 pixels maybe. 196 196
Now, I actually don't like this white color here so much 197 197
because of the color of the line. 198 198
So let's make this text here orange 199 199
because it looks kind of weird, 200 200
the orange line and the white text. 201 201
So this here 202 202
will go to the full button 203 203
so that the full button is actually white, 204 204
and this button down here will be orange, 205 205
like the line color. 206 206
All right. 207 207
So we defined how the buttons look like. 208 208
Now, buttons or links in general in CSS 209 209
can have different states, 210 210
link, visited, active, and hover. 211 211
Now link is just how the element looks in the normal state. 212 212
And how do we specify this? 213 213
We just put it here. 214 214
This is called pseudo-classes. 215 215
So I just write link here, 216 216
so this means the, 217 217
the a element in its normal state. 218 218
Then, we have the visited state, 219 219
which is how the element will look like 220 220
after it has been visited. 221 221
And maybe sometimes you notice that some links 222 222
in some internet websites 223 223
look different after you have clicked them. 224 224
Now, we don't want this to happen, 225 225
so we say that the visited links should look 226 226
just like the normal links in their normal state. 227 227
So, we do this here. 228 228
So we say button visited. 229 229
So button link and button visited 230 230
have both the same style, 231 231
which means they will both look the same. 232 232
And we have to do the same thing down here. 233 233
Button link 234 234
and button full visited. 235 235
And the same thing down here. 236 236
Button ghost link. 237 237
All right. 238 238
Now there are two different states, which is hover, 239 239
when we put our mouse over a button 240 240
and the active state, 241 241
which is when we click on a button. 242 242
And we can specify that in CSS here. 243 243
So we can say what will happen 244 244
when we put the mouse on the button. 245 245
And in order to do so, we say button and then hover, 246 246
and we want the button to look exactly the same 247 247
when we hover it or when we click on it, 248 248
so when it's active. 249 249
So we say button hover and button 250 250
active. 251 251
And what we want our buttons to do 252 252
is to have a darker orange tone, 253 253
so that we can see some change there, right? 254 254
Do you remember the tool that we use 255 255
to get darker shades of a color? 256 256
It is the 0to255 tool. 257 257
Let me just copy this. 258 258
And we'll use this tool, 0to255. 259 259
So this is how it looks like. 260 260
And I will paste our orange tone here. 261 261
And this. 262 262
Alright, this is our original orange tone 263 263
that we're using on our website. 264 264
And now we want a darker shade. 265 265
And this is very similar, so let's use this. 266 266
I'll just click here, and now it's copied. 267 267
So what I do now is 268 268
that I say that 269 269
when I put I put my mouse on the button, 270 270
I want it background color to be 271 271
this one. 272 272
All right. 273 273
Let's just put this code 274 274
down here. 275 275
So that we have the normal declarations 276 276
like link and visited before 277 277
and then the hover and active states. 278 278
Here, it's actually visited. 279 279
And now, let's check this out. 280 280
Okay, so now our buttons change their color. 281 281
Now we have some problems here, as you see. 282 282
First is the text color here, 283 283
and second is the border color. 284 284
You see in both, 285 285
that there is still the lighter orange color 286 286
still showing here. 287 287
So we have to change that as well. 288 288
And in order to do so, 289 289
we will have to change these classes. 290 290
We'll just copy these and change the things that I want, 291 291
so that I don't have to write everything again. 292 292
So it's hover here and active... 293 293
and hover and 294 294
active. 295 295
So I don't need this and this. 296 296
So the button full should not only 297 297
have this background color here, 298 298
but also its border should have that color. 299 299
All right, and same thing here for the ghost button. 300 300
Difference with the ghost button 301 301
is that we also want the 302 302
font color to be white, 303 303
so FFF here. 304 304
And now it should work as we want. 305 305
Great, now this looks great, right? 306 306
Now, one thing, and this is a little more advanced, 307 307
is we want to have a little transition 308 308
from one color to the other. 309 309
So this gets just orange instantaneously, 310 310
but we want to see a nice transition. 311 311
And we can actually do this using just CSS, 312 312
and I will just show you how. 313 313
So all we need to do here is, 314 314
in the button class, 315 315
just add the transition property. 316 316
And this is actually CSF three already, 317 317
so what we want to say here is 318 318
that the background color 319 319
should change 320 320
with a transition. 321 321
We just write it, background-color. 322 322
Now we'll say, 323 323
0.2 seconds. 324 324
So what happens now is that when we hover over a link, 325 325
over one of these buttons, 326 326
the background color will not change instantaneously, 327 327
but over a period of 0.2 seconds. 328 328
And we want not only the background color to change, 329 329
but also the border 330 330
and also the font color. 331 331
So that is all a nice, smooth transition 332 332
from one state to the other. 333 333
So we can specify more than one property here. 334 334
So we want background color to change. 335 335
We want border to change. 336 336
0.2 seconds as well, 337 337
and we want color to change over a period of 0.2 seconds. 338 338
Right, let's see how this works. 339 339
But last thing, we also want 340 340
some margins between the buttons 341 341
'cause they are glued together right now. 342 342
So let me just change here the full button. 343 343
I will add a margin to the right. 344 344
So when I say, for example, 15 pixels to the right 345 345
then 346 346
the button will show this nice distance. 347 347
And as you see, the transition works 348 348
exactly as we planned it, right? 349 349
In both buttons. 350 350
So this looks much better than it did before, 351 351
and yeah, you just learned how to do this. 352 352
Great, right? 353 353
And this closes part two of Building the Header. 354 354
In the next and last part of building the header, 355 355
we'll just add a simple navigation and the Omnifood logo. 356 356
See you there.