Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:02,086 --> 00:00:05,890 Welcome back to Part 2 of Building the Header. 2 2 00:00:05,890 --> 00:00:08,325 In this video, we'll format the content 3 3 00:00:08,325 --> 00:00:10,256 of the hero text blocks, 4 4 00:00:10,256 --> 00:00:13,781 so this heading and those buttons. 5 5 00:00:13,781 --> 00:00:16,889 Let's start by looking at the main heading. 6 6 00:00:16,889 --> 00:00:20,887 We should probably make it wide, right? 7 7 00:00:20,887 --> 00:00:24,286 So let's go back to the h1 style here, 8 8 00:00:24,286 --> 00:00:28,714 and continue to define how it should look like. 9 9 00:00:28,714 --> 00:00:31,297 So color, I will make it right, 10 10 00:00:34,563 --> 00:00:38,063 and I will specify its font size, as well. 11 11 00:00:40,194 --> 00:00:42,194 Now, the basic font size 12 12 00:00:43,651 --> 00:00:46,484 of our html document is 20 pixels. 13 13 00:00:48,750 --> 00:00:50,879 Now, in responsive web design, 14 14 00:00:50,879 --> 00:00:53,712 we want everything to be relative. 15 15 00:00:55,162 --> 00:00:59,329 So we can say that our font size should be 200%, 16 16 00:01:00,557 --> 00:01:02,929 and then, this means 17 17 00:01:02,929 --> 00:01:04,929 that our heading element 18 18 00:01:06,513 --> 00:01:07,735 will be 40 pixels, 19 19 00:01:07,735 --> 00:01:11,652 which is exactly 200% of 20 pixels, right? 20 20 00:01:12,681 --> 00:01:16,098 So, if we later want to change this size, 21 21 00:01:19,316 --> 00:01:21,149 we can just change the 22 22 00:01:22,128 --> 00:01:23,961 html global font size, 23 23 00:01:25,300 --> 00:01:26,732 let's say to 18, 24 24 00:01:26,732 --> 00:01:30,899 and then this size will automatically decrease as well. 25 25 00:01:31,773 --> 00:01:33,612 And we will use this method 26 26 00:01:33,612 --> 00:01:37,464 for all other elements on the webpage, 27 27 00:01:37,464 --> 00:01:41,131 so it will all be defined relatively to this 28 28 00:01:42,277 --> 00:01:44,526 base size of 20 pixels. 29 29 00:01:44,526 --> 00:01:47,541 Then, by adjusting this, all other elements 30 30 00:01:47,541 --> 00:01:50,624 will automatically adjust their size. 31 31 00:01:53,425 --> 00:01:56,675 And 200% looks good to start with. 32 32 00:01:58,608 --> 00:02:00,108 Or maybe 240% 33 33 00:02:03,344 --> 00:02:06,450 because we really want this to be big. 34 34 00:02:06,450 --> 00:02:10,033 So let's check how it looks like. 35 35 00:02:10,033 --> 00:02:12,079 Okay, much better. 36 36 00:02:12,079 --> 00:02:15,020 Now, you probably remember that I said 37 37 00:02:15,020 --> 00:02:17,189 in the design section, 38 38 00:02:17,189 --> 00:02:19,974 that when we use very big headlines, 39 39 00:02:19,974 --> 00:02:22,891 we should decrease the font weight. 40 40 00:02:24,087 --> 00:02:27,275 And we will do that right now. 41 41 00:02:27,275 --> 00:02:28,775 And we should also 42 42 00:02:29,809 --> 00:02:32,142 maybe set this to upper case 43 43 00:02:33,452 --> 00:02:36,535 because I think it looks much better. 44 44 00:02:37,496 --> 00:02:41,129 So let's go back here and do that. 45 45 00:02:41,129 --> 00:02:45,296 And with this, I can show you many ways to format text. 46 46 00:02:47,757 --> 00:02:50,507 So let's decrease the font weight 47 47 00:02:52,869 --> 00:02:53,702 to 300, 48 48 00:02:58,017 --> 00:03:02,349 'cause usually the h1 elements come with bold formatting, 49 49 00:03:02,349 --> 00:03:04,332 and that's not what we want. 50 50 00:03:04,332 --> 00:03:07,165 And we will make it an upper case. 51 51 00:03:10,076 --> 00:03:14,586 For that, we use the text transform property. 52 52 00:03:14,586 --> 00:03:16,669 So, let's say upper case. 53 53 00:03:18,187 --> 00:03:23,182 And another thing we can do is the letter spacing, 54 54 00:03:23,182 --> 00:03:25,349 so it's not so compressed. 55 55 00:03:26,952 --> 00:03:28,309 And also, a word spacing, 56 56 00:03:28,309 --> 00:03:31,989 so some space between different words. 57 57 00:03:31,989 --> 00:03:35,489 All of this makes a big headline like this 58 58 00:03:36,984 --> 00:03:38,415 look much better. 59 59 00:03:38,415 --> 00:03:42,582 I can go with three pixels here, for example, or maybe four. 60 60 00:03:44,651 --> 00:03:46,984 Let's see how it looks like. 61 61 00:03:48,234 --> 00:03:50,157 Okay, much better now. 62 62 00:03:50,157 --> 00:03:54,286 But now we have this ugly line break here, healthy meals, 63 63 00:03:54,286 --> 00:03:55,532 and we don't want that. 64 64 00:03:55,532 --> 00:03:57,865 So let's just break it here, 65 65 00:03:58,876 --> 00:04:00,244 so that we have goodbye junk food, 66 66 00:04:00,244 --> 00:04:03,214 and then on the next line, hello super healthy meals. 67 67 00:04:03,214 --> 00:04:06,467 Right, this will be much better. 68 68 00:04:06,467 --> 00:04:09,127 So you remember how we do that? 69 69 00:04:09,127 --> 00:04:10,874 Easy as this. 70 70 00:04:10,874 --> 00:04:12,374 Just a br element. 71 71 00:04:18,200 --> 00:04:20,329 Much better now, right? 72 72 00:04:20,329 --> 00:04:23,579 So now let's format these buttons here. 73 73 00:04:27,939 --> 00:04:29,272 First, we should 74 74 00:04:31,247 --> 00:04:33,997 attribute some class to this one. 75 75 00:04:35,457 --> 00:04:38,040 And I usually call them button, 76 76 00:04:39,346 --> 00:04:41,925 and now we will have two kinds of buttons. 77 77 00:04:41,925 --> 00:04:44,833 The first one will be a orange button 78 78 00:04:44,833 --> 00:04:47,123 with a full orange color, 79 79 00:04:47,123 --> 00:04:51,088 and the other one will be a so-called ghost button, 80 80 00:04:51,088 --> 00:04:53,755 which will have just an outline, 81 81 00:04:56,041 --> 00:04:57,343 an orange outline, 82 82 00:04:57,343 --> 00:05:00,985 and then be transparent in the inside. 83 83 00:05:00,985 --> 00:05:03,152 And what I'll do now is to 84 84 00:05:05,604 --> 00:05:09,021 create a class for each of those buttons. 85 85 00:05:10,112 --> 00:05:11,148 Let me just show you. 86 86 00:05:11,148 --> 00:05:13,648 Button one will be called full 87 87 00:05:17,707 --> 00:05:19,124 and button ghost. 88 88 00:05:21,320 --> 00:05:23,987 So I will put the common styles, 89 89 00:05:24,966 --> 00:05:29,548 like the font size and the font color and the button size, 90 90 00:05:29,548 --> 00:05:33,213 I will put these inside this button class, 91 91 00:05:33,213 --> 00:05:36,327 and then I will create a button full class, 92 92 00:05:36,327 --> 00:05:40,014 which is specifically designed for the full button, 93 93 00:05:40,014 --> 00:05:42,347 and a button ghost class, 94 94 00:05:42,347 --> 00:05:46,514 which will be specifically designed for the ghost button. 95 95 00:05:48,251 --> 00:05:49,084 All right. 96 96 00:05:51,276 --> 00:05:55,026 So let's go back to the style file down here. 97 97 00:05:58,106 --> 00:05:58,939 So button. 98 98 00:06:02,943 --> 00:06:05,264 Now, in the lecture about the box model, 99 99 00:06:05,264 --> 00:06:07,024 I told you that there were 100 100 00:06:07,024 --> 00:06:10,524 block elements and inline elements, right? 101 101 00:06:11,563 --> 00:06:15,730 Now there is also a mix between those two elements, 102 102 00:06:16,676 --> 00:06:18,805 which is called the inline block, 103 103 00:06:18,805 --> 00:06:23,170 and the inline block is just like an inline element, 104 104 00:06:23,170 --> 00:06:26,253 but that can have heading and margin. 105 105 00:06:29,220 --> 00:06:31,303 So the difference is that 106 106 00:06:32,529 --> 00:06:35,556 it doesn't force a line break, 107 107 00:06:35,556 --> 00:06:40,427 but you can attribute it some heading and some margin 108 108 00:06:40,427 --> 00:06:43,010 unlike a normal inline element. 109 109 00:06:44,600 --> 00:06:46,100 And so, a normal a 110 110 00:06:48,973 --> 00:06:50,390 element like this 111 111 00:06:52,776 --> 00:06:54,533 is an inline element, 112 112 00:06:54,533 --> 00:06:57,561 but we want it be an inline block. 113 113 00:06:57,561 --> 00:07:00,674 So we can change that by using display, 114 114 00:07:00,674 --> 00:07:02,841 and then say inline block. 115 115 00:07:06,441 --> 00:07:07,691 And now, we can 116 116 00:07:10,407 --> 00:07:12,157 give it some heading. 117 117 00:07:15,113 --> 00:07:17,613 And, let's say we want the top 118 118 00:07:19,416 --> 00:07:20,916 to have 10 pixels, 119 119 00:07:22,528 --> 00:07:26,336 and on the right and the left sides, 30 pixels. 120 120 00:07:26,336 --> 00:07:30,169 Now, do you remember if we just put 30 and 10, 121 121 00:07:31,537 --> 00:07:33,153 then this will mean that we have 122 122 00:07:33,153 --> 00:07:34,820 10 pixels of heading 123 123 00:07:35,895 --> 00:07:37,804 on top and bottom 124 124 00:07:37,804 --> 00:07:40,721 and 30 pixels left and right, okay? 125 125 00:07:43,858 --> 00:07:46,715 Now another thing is we also want 126 126 00:07:46,715 --> 00:07:47,965 the font weight 127 127 00:07:49,111 --> 00:07:50,361 to be 300 here. 128 128 00:07:53,574 --> 00:07:54,907 So let me check. 129 129 00:07:57,087 --> 00:08:00,816 All right, so you see, we have some heading here now, 130 130 00:08:00,816 --> 00:08:02,316 and it looks good. 131 131 00:08:05,866 --> 00:08:09,377 We also have this text underline here 132 132 00:08:09,377 --> 00:08:12,210 that we need to get rid of because 133 133 00:08:13,685 --> 00:08:16,272 it's kind of ugly, you know. 134 134 00:08:16,272 --> 00:08:18,439 So we use text decoration, 135 135 00:08:19,961 --> 00:08:21,878 and we want none of it. 136 136 00:08:24,565 --> 00:08:28,398 Very well, so this is the common button style. 137 137 00:08:29,796 --> 00:08:32,497 So both buttons have this in common. 138 138 00:08:32,497 --> 00:08:34,914 And now let's start with the, 139 139 00:08:36,509 --> 00:08:38,342 sorry, now let's start 140 140 00:08:39,492 --> 00:08:41,242 with the full button. 141 141 00:08:43,985 --> 00:08:46,402 And now let's choose a color. 142 142 00:08:47,594 --> 00:08:51,761 As I told you before we will use the Flat UI tool. 143 143 00:08:52,914 --> 00:08:53,831 Right here. 144 144 00:08:55,041 --> 00:08:56,291 Flat UI colors. 145 145 00:09:00,342 --> 00:09:02,652 Okay, that's the one we want. 146 146 00:09:02,652 --> 00:09:05,485 So we have some oranges down here, 147 147 00:09:06,979 --> 00:09:08,979 and to me, it looks like 148 148 00:09:10,134 --> 00:09:13,277 this one is the best to use in this case. 149 149 00:09:13,277 --> 00:09:15,277 So I'll just click here. 150 150 00:09:19,659 --> 00:09:22,159 And now the color is selected. 151 151 00:09:24,323 --> 00:09:25,672 So I will say that we want 152 152 00:09:25,672 --> 00:09:29,839 the background color of this button to be this color. 153 153 00:09:32,353 --> 00:09:35,250 Here we see, it's a nice orange, 154 154 00:09:35,250 --> 00:09:36,083 and 155 155 00:09:37,411 --> 00:09:39,311 let me go back here. 156 156 00:09:39,311 --> 00:09:41,026 And here it is. 157 157 00:09:41,026 --> 00:09:43,526 Now it's a nice orange button. 158 158 00:09:44,621 --> 00:09:47,901 Very well, now, we maybe want some 159 159 00:09:47,901 --> 00:09:49,967 border-radius here, right? 160 160 00:09:49,967 --> 00:09:52,217 So we want this to be round 161 161 00:09:53,113 --> 00:09:54,918 on both sides. 162 162 00:09:54,918 --> 00:09:58,085 So we can just put a ridiculously high 163 163 00:10:00,767 --> 00:10:02,350 border-radius here. 164 164 00:10:06,210 --> 00:10:08,793 Like, I don't know, 200 pixels. 165 165 00:10:09,849 --> 00:10:13,574 Very well, now, the text should probably be white 166 166 00:10:13,574 --> 00:10:15,491 for this button, right? 167 167 00:10:18,282 --> 00:10:21,144 Actually, for both of the buttons, 168 168 00:10:21,144 --> 00:10:22,894 so put it right here, 169 169 00:10:24,235 --> 00:10:25,818 color FFF is white. 170 170 00:10:30,629 --> 00:10:31,712 So very well. 171 171 00:10:33,943 --> 00:10:36,943 Now, the style for the ghost button. 172 172 00:10:40,082 --> 00:10:42,749 We want the border to be orange, 173 173 00:10:43,933 --> 00:10:47,305 so we did this before, at this border, 174 174 00:10:47,305 --> 00:10:51,472 we want it to be one pixel, solid line, and then the color. 175 175 00:10:53,059 --> 00:10:55,726 And we will use this color here. 176 176 00:10:59,196 --> 00:11:02,113 Now you see this button is slightly 177 177 00:11:03,456 --> 00:11:05,330 bigger than this one. 178 178 00:11:05,330 --> 00:11:06,557 And there's a reason for that. 179 179 00:11:06,557 --> 00:11:08,686 If you remember from the box model, 180 180 00:11:08,686 --> 00:11:11,853 the height and the width of an element 181 181 00:11:12,893 --> 00:11:16,941 is the content plus the heading plus the border. 182 182 00:11:16,941 --> 00:11:18,165 So this element is higher 183 183 00:11:18,165 --> 00:11:21,248 because it has that one pixel border. 184 184 00:11:22,509 --> 00:11:26,959 So in order to make these two the same height and width, 185 185 00:11:26,959 --> 00:11:30,876 we just add that border to this button as well. 186 186 00:11:32,030 --> 00:11:35,991 And we also want some distance between this, right? 187 187 00:11:35,991 --> 00:11:38,405 And probably the best way of doing this 188 188 00:11:38,405 --> 00:11:39,572 is to add some 189 189 00:11:41,153 --> 00:11:43,903 button margin to this h1 element. 190 190 00:11:45,721 --> 00:11:48,006 Let's go back, and as I said, 191 191 00:11:48,006 --> 00:11:50,339 we will add this border here 192 192 00:11:51,815 --> 00:11:53,374 so that they look the same 193 193 00:11:53,374 --> 00:11:55,707 and then some margin bottom. 194 194 00:11:57,704 --> 00:12:00,787 So this one is the margin top, right? 195 195 00:12:01,696 --> 00:12:05,863 And here we want margin bottom, like 20 pixels maybe. 196 196 00:12:13,144 --> 00:12:15,484 Now, I actually don't like this white color here so much 197 197 00:12:15,484 --> 00:12:18,591 because of the color of the line. 198 198 00:12:18,591 --> 00:12:21,508 So let's make this text here orange 199 199 00:12:22,911 --> 00:12:24,644 because it looks kind of weird, 200 200 00:12:24,644 --> 00:12:27,561 the orange line and the white text. 201 201 00:12:29,962 --> 00:12:30,962 So this here 202 202 00:12:33,385 --> 00:12:34,710 will go to the full button 203 203 00:12:34,710 --> 00:12:38,210 so that the full button is actually white, 204 204 00:12:39,254 --> 00:12:42,671 and this button down here will be orange, 205 205 00:12:43,963 --> 00:12:45,630 like the line color. 206 206 00:12:47,770 --> 00:12:48,603 All right. 207 207 00:12:49,452 --> 00:12:52,785 So we defined how the buttons look like. 208 208 00:12:54,324 --> 00:12:57,574 Now, buttons or links in general in CSS 209 209 00:12:59,426 --> 00:13:01,884 can have different states, 210 210 00:13:01,884 --> 00:13:04,634 link, visited, active, and hover. 211 211 00:13:07,122 --> 00:13:11,861 Now link is just how the element looks in the normal state. 212 212 00:13:11,861 --> 00:13:13,416 And how do we specify this? 213 213 00:13:13,416 --> 00:13:15,083 We just put it here. 214 214 00:13:16,032 --> 00:13:19,185 This is called pseudo-classes. 215 215 00:13:19,185 --> 00:13:21,726 So I just write link here, 216 216 00:13:21,726 --> 00:13:23,226 so this means the, 217 217 00:13:25,037 --> 00:13:27,870 the a element in its normal state. 218 218 00:13:29,362 --> 00:13:32,029 Then, we have the visited state, 219 219 00:13:33,528 --> 00:13:35,855 which is how the element will look like 220 220 00:13:35,855 --> 00:13:38,022 after it has been visited. 221 221 00:13:39,457 --> 00:13:43,566 And maybe sometimes you notice that some links 222 222 00:13:43,566 --> 00:13:46,219 in some internet websites 223 223 00:13:46,219 --> 00:13:49,583 look different after you have clicked them. 224 224 00:13:49,583 --> 00:13:52,243 Now, we don't want this to happen, 225 225 00:13:52,243 --> 00:13:56,005 so we say that the visited links should look 226 226 00:13:56,005 --> 00:14:00,088 just like the normal links in their normal state. 227 227 00:14:01,504 --> 00:14:03,996 So, we do this here. 228 228 00:14:03,996 --> 00:14:06,079 So we say button visited. 229 229 00:14:10,506 --> 00:14:12,966 So button link and button visited 230 230 00:14:12,966 --> 00:14:14,943 have both the same style, 231 231 00:14:14,943 --> 00:14:18,221 which means they will both look the same. 232 232 00:14:18,221 --> 00:14:21,292 And we have to do the same thing down here. 233 233 00:14:21,292 --> 00:14:22,209 Button link 234 234 00:14:24,854 --> 00:14:26,854 and button full visited. 235 235 00:14:31,768 --> 00:14:34,801 And the same thing down here. 236 236 00:14:34,801 --> 00:14:36,301 Button ghost link. 237 237 00:14:41,546 --> 00:14:42,379 All right. 238 238 00:14:43,816 --> 00:14:47,756 Now there are two different states, which is hover, 239 239 00:14:47,756 --> 00:14:50,869 when we put our mouse over a button 240 240 00:14:50,869 --> 00:14:52,619 and the active state, 241 241 00:14:53,613 --> 00:14:56,530 which is when we click on a button. 242 242 00:14:57,400 --> 00:15:00,400 And we can specify that in CSS here. 243 243 00:15:02,180 --> 00:15:03,959 So we can say what will happen 244 244 00:15:03,959 --> 00:15:06,959 when we put the mouse on the button. 245 245 00:15:09,444 --> 00:15:13,611 And in order to do so, we say button and then hover, 246 246 00:15:14,557 --> 00:15:17,706 and we want the button to look exactly the same 247 247 00:15:17,706 --> 00:15:20,775 when we hover it or when we click on it, 248 248 00:15:20,775 --> 00:15:22,667 so when it's active. 249 249 00:15:22,667 --> 00:15:25,417 So we say button hover and button 250 250 00:15:27,825 --> 00:15:28,658 active. 251 251 00:15:31,220 --> 00:15:33,741 And what we want our buttons to do 252 252 00:15:33,741 --> 00:15:36,408 is to have a darker orange tone, 253 253 00:15:38,650 --> 00:15:42,081 so that we can see some change there, right? 254 254 00:15:42,081 --> 00:15:43,758 Do you remember the tool that we use 255 255 00:15:43,758 --> 00:15:46,425 to get darker shades of a color? 256 256 00:15:47,488 --> 00:15:49,321 It is the 0to255 tool. 257 257 00:15:52,550 --> 00:15:54,383 Let me just copy this. 258 258 00:16:01,093 --> 00:16:03,760 And we'll use this tool, 0to255. 259 259 00:16:10,394 --> 00:16:13,250 So this is how it looks like. 260 260 00:16:13,250 --> 00:16:17,177 And I will paste our orange tone here. 261 261 00:16:17,177 --> 00:16:18,010 And this. 262 262 00:16:20,038 --> 00:16:22,673 Alright, this is our original orange tone 263 263 00:16:22,673 --> 00:16:24,915 that we're using on our website. 264 264 00:16:24,915 --> 00:16:27,498 And now we want a darker shade. 265 265 00:16:29,116 --> 00:16:32,103 And this is very similar, so let's use this. 266 266 00:16:32,103 --> 00:16:35,603 I'll just click here, and now it's copied. 267 267 00:16:39,192 --> 00:16:40,775 So what I do now is 268 268 00:16:42,630 --> 00:16:43,527 that I say that 269 269 00:16:43,527 --> 00:16:46,839 when I put I put my mouse on the button, 270 270 00:16:46,839 --> 00:16:49,506 I want it background color to be 271 271 00:16:51,027 --> 00:16:51,860 this one. 272 272 00:16:53,479 --> 00:16:54,705 All right. 273 273 00:16:54,705 --> 00:16:57,284 Let's just put this code 274 274 00:16:57,284 --> 00:16:58,117 down here. 275 275 00:16:59,570 --> 00:17:02,820 So that we have the normal declarations 276 276 00:17:03,927 --> 00:17:06,993 like link and visited before 277 277 00:17:06,993 --> 00:17:10,596 and then the hover and active states. 278 278 00:17:10,596 --> 00:17:12,929 Here, it's actually visited. 279 279 00:17:13,828 --> 00:17:16,328 And now, let's check this out. 280 280 00:17:18,847 --> 00:17:22,514 Okay, so now our buttons change their color. 281 281 00:17:25,924 --> 00:17:27,985 Now we have some problems here, as you see. 282 282 00:17:27,985 --> 00:17:31,048 First is the text color here, 283 283 00:17:31,048 --> 00:17:33,132 and second is the border color. 284 284 00:17:33,132 --> 00:17:34,643 You see in both, 285 285 00:17:34,643 --> 00:17:37,580 that there is still the lighter orange color 286 286 00:17:37,580 --> 00:17:38,892 still showing here. 287 287 00:17:38,892 --> 00:17:42,187 So we have to change that as well. 288 288 00:17:42,187 --> 00:17:44,020 And in order to do so, 289 289 00:17:45,053 --> 00:17:48,116 we will have to change these classes. 290 290 00:17:48,116 --> 00:17:51,858 We'll just copy these and change the things that I want, 291 291 00:17:51,858 --> 00:17:55,005 so that I don't have to write everything again. 292 292 00:17:55,005 --> 00:17:57,672 So it's hover here and active... 293 293 00:17:59,955 --> 00:18:01,038 and hover and 294 294 00:18:03,144 --> 00:18:04,658 active. 295 295 00:18:04,658 --> 00:18:07,158 So I don't need this and this. 296 296 00:18:08,788 --> 00:18:11,814 So the button full should not only 297 297 00:18:11,814 --> 00:18:14,481 have this background color here, 298 298 00:18:15,403 --> 00:18:18,986 but also its border should have that color. 299 299 00:18:21,400 --> 00:18:25,567 All right, and same thing here for the ghost button. 300 300 00:18:26,779 --> 00:18:28,870 Difference with the ghost button 301 301 00:18:28,870 --> 00:18:31,198 is that we also want the 302 302 00:18:31,198 --> 00:18:33,447 font color to be white, 303 303 00:18:33,447 --> 00:18:34,447 so FFF here. 304 304 00:18:36,715 --> 00:18:39,548 And now it should work as we want. 305 305 00:18:44,534 --> 00:18:47,920 Great, now this looks great, right? 306 306 00:18:47,920 --> 00:18:51,807 Now, one thing, and this is a little more advanced, 307 307 00:18:51,807 --> 00:18:54,974 is we want to have a little transition 308 308 00:18:56,141 --> 00:18:58,474 from one color to the other. 309 309 00:18:59,787 --> 00:19:02,775 So this gets just orange instantaneously, 310 310 00:19:02,775 --> 00:19:05,805 but we want to see a nice transition. 311 311 00:19:05,805 --> 00:19:09,444 And we can actually do this using just CSS, 312 312 00:19:09,444 --> 00:19:11,861 and I will just show you how. 313 313 00:19:13,613 --> 00:19:16,846 So all we need to do here is, 314 314 00:19:16,846 --> 00:19:18,513 in the button class, 315 315 00:19:20,575 --> 00:19:23,325 just add the transition property. 316 316 00:19:24,584 --> 00:19:27,692 And this is actually CSF three already, 317 317 00:19:27,692 --> 00:19:30,192 so what we want to say here is 318 318 00:19:31,715 --> 00:19:33,725 that the background color 319 319 00:19:33,725 --> 00:19:34,808 should change 320 320 00:19:36,221 --> 00:19:38,509 with a transition. 321 321 00:19:38,509 --> 00:19:41,426 We just write it, background-color. 322 322 00:19:44,737 --> 00:19:46,464 Now we'll say, 323 323 00:19:46,464 --> 00:19:47,464 0.2 seconds. 324 324 00:19:50,921 --> 00:19:55,088 So what happens now is that when we hover over a link, 325 325 00:19:57,375 --> 00:19:59,976 over one of these buttons, 326 326 00:19:59,976 --> 00:20:03,745 the background color will not change instantaneously, 327 327 00:20:03,745 --> 00:20:06,495 but over a period of 0.2 seconds. 328 328 00:20:09,679 --> 00:20:12,584 And we want not only the background color to change, 329 329 00:20:12,584 --> 00:20:14,167 but also the border 330 330 00:20:16,792 --> 00:20:18,792 and also the font color. 331 331 00:20:21,697 --> 00:20:25,336 So that is all a nice, smooth transition 332 332 00:20:25,336 --> 00:20:28,228 from one state to the other. 333 333 00:20:28,228 --> 00:20:32,152 So we can specify more than one property here. 334 334 00:20:32,152 --> 00:20:34,731 So we want background color to change. 335 335 00:20:34,731 --> 00:20:36,814 We want border to change. 336 336 00:20:37,674 --> 00:20:39,822 0.2 seconds as well, 337 337 00:20:39,822 --> 00:20:43,989 and we want color to change over a period of 0.2 seconds. 338 338 00:20:47,689 --> 00:20:50,356 Right, let's see how this works. 339 339 00:20:51,551 --> 00:20:52,859 But last thing, we also want 340 340 00:20:52,859 --> 00:20:55,526 some margins between the buttons 341 341 00:20:56,992 --> 00:21:00,409 'cause they are glued together right now. 342 342 00:21:01,929 --> 00:21:05,617 So let me just change here the full button. 343 343 00:21:05,617 --> 00:21:08,367 I will add a margin to the right. 344 344 00:21:11,329 --> 00:21:15,496 So when I say, for example, 15 pixels to the right 345 345 00:21:17,915 --> 00:21:18,748 then 346 346 00:21:22,175 --> 00:21:25,085 the button will show this nice distance. 347 347 00:21:25,085 --> 00:21:26,802 And as you see, the transition works 348 348 00:21:26,802 --> 00:21:29,332 exactly as we planned it, right? 349 349 00:21:29,332 --> 00:21:31,169 In both buttons. 350 350 00:21:31,169 --> 00:21:34,402 So this looks much better than it did before, 351 351 00:21:34,402 --> 00:21:38,413 and yeah, you just learned how to do this. 352 352 00:21:38,413 --> 00:21:39,496 Great, right? 353 353 00:21:40,540 --> 00:21:44,387 And this closes part two of Building the Header. 354 354 00:21:44,387 --> 00:21:47,416 In the next and last part of building the header, 355 355 00:21:47,416 --> 00:21:51,583 we'll just add a simple navigation and the Omnifood logo. 356 356 00:21:52,447 --> 00:21:53,614 See you there. 28609