1 00:00:01,511 --> 00:00:03,810 Welcome back to building the header. 2 00:00:03,810 --> 00:00:06,727 This is part three, let's continue. 3 00:00:08,477 --> 00:00:11,194 So this already looks very good. 4 00:00:11,194 --> 00:00:14,190 Now what's missing here is the logo image here, 5 00:00:14,190 --> 00:00:16,326 we want the logo image here and we want 6 00:00:16,326 --> 00:00:19,826 some simple navigation to show right here. 7 00:00:21,690 --> 00:00:25,033 But first of that, we see that our code has grown 8 00:00:25,033 --> 00:00:29,853 a little bit and if we keep adding more and more code, 9 00:00:29,853 --> 00:00:34,089 we will at some point get completely lost in here. 10 00:00:34,089 --> 00:00:38,089 So let's make a nice code structure here so that 11 00:00:39,546 --> 00:00:43,713 we organize everything into logical pieces of code. 12 00:00:45,328 --> 00:00:48,726 And for that we will use CSS comments, and comments 13 00:00:48,726 --> 00:00:52,893 are like code that will not be seen by the browser. 14 00:00:54,685 --> 00:00:57,657 It's like invisible code it's just for us to write something 15 00:00:57,657 --> 00:01:01,574 here which will not affect any of our web page. 16 00:01:05,552 --> 00:01:08,710 So I will just show you how. 17 00:01:08,710 --> 00:01:12,460 Comments in CSS are using / and *. 18 00:01:14,422 --> 00:01:16,094 And you see everything down here got gray 19 00:01:16,094 --> 00:01:18,532 now because I opened a comment. 20 00:01:18,532 --> 00:01:23,176 Now I can write something here but then close it again. 21 00:01:23,176 --> 00:01:27,936 And now the rest of the CSS code is back to normal. 22 00:01:27,936 --> 00:01:30,490 So I usually like to do it like this, 23 00:01:30,490 --> 00:01:34,240 I put some lines here to separate some stuff. 24 00:01:35,390 --> 00:01:38,942 Then I write what this code section is all about. 25 00:01:38,942 --> 00:01:41,275 Here I will say basic setup. 26 00:01:44,144 --> 00:01:48,311 Then I close this, but then another line like this here. 27 00:01:51,435 --> 00:01:52,268 Alright. 28 00:01:54,337 --> 00:01:56,334 I will copy this so that we can put 29 00:01:56,334 --> 00:01:58,417 it in our styles as well. 30 00:02:01,373 --> 00:02:03,623 So down here I can say like 31 00:02:08,919 --> 00:02:12,086 these are reusable components and this 32 00:02:14,562 --> 00:02:18,729 is because we will use those all over the website. 33 00:02:20,947 --> 00:02:23,896 But then we have things like this one 34 00:02:23,896 --> 00:02:27,146 which should go into a different place. 35 00:02:28,749 --> 00:02:32,416 Let me just cut them and put them down here. 36 00:02:38,223 --> 00:02:41,451 So I will put one of the sections for each of 37 00:02:41,451 --> 00:02:44,957 the sections that we will build on our website. 38 00:02:44,957 --> 00:02:47,116 So when we later browse our code, 39 00:02:47,116 --> 00:02:51,203 we know exactly where to look like for different stuff. 40 00:02:51,203 --> 00:02:52,120 So, header. 41 00:02:55,963 --> 00:02:59,237 So all the code for our header goes here. 42 00:02:59,237 --> 00:03:01,954 Now the buttons that we are going to reuse may be in 43 00:03:01,954 --> 00:03:05,390 different places can stay right here. 44 00:03:05,390 --> 00:03:08,890 Now we'll just say that these are buttons. 45 00:03:17,209 --> 00:03:20,306 Those are buttons and these are headings. 46 00:03:20,306 --> 00:03:22,477 Because you know we will maybe 47 00:03:22,477 --> 00:03:24,894 use some of them again later. 48 00:03:27,728 --> 00:03:28,561 Headings. 49 00:03:29,771 --> 00:03:33,440 And we can keep adding more comments 50 00:03:33,440 --> 00:03:35,940 like that later down the road. 51 00:03:37,921 --> 00:03:42,008 So everything is nicely separated and then we know exactly 52 00:03:42,008 --> 00:03:44,591 where to look for our CSS code. 53 00:03:46,792 --> 00:03:49,903 So we already learned a lot of stuff in this lecture 54 00:03:49,903 --> 00:03:53,618 but we will go even further because we will now 55 00:03:53,618 --> 00:03:57,785 put a logo and a navigation bar on top of this page. 56 00:04:01,490 --> 00:04:05,135 So we formatted this, everything inside of this content, 57 00:04:05,135 --> 00:04:07,802 and now let's add a nav element, 58 00:04:11,103 --> 00:04:14,770 where the navigation and the button will go. 59 00:04:16,745 --> 00:04:19,532 And now to center everything inside of that 60 00:04:19,532 --> 00:04:21,865 navigation I will use a row. 61 00:04:24,036 --> 00:04:28,203 Do you remember we said that row will always be centered. 62 00:04:30,375 --> 00:04:32,208 So this will be a row. 63 00:04:33,608 --> 00:04:34,691 Yes, alright. 64 00:04:36,242 --> 00:04:40,409 Now we want the logo to be here and for that let me just 65 00:04:42,321 --> 00:04:45,404 first put the logo inside our folder. 66 00:04:47,012 --> 00:04:50,429 So I will go back to our contents folder, 67 00:04:51,331 --> 00:04:54,233 and this is the content Omni Foot provided us. 68 00:04:54,233 --> 00:04:58,088 And actually most of these are images, 69 00:04:58,088 --> 00:05:02,088 so I will just put all of them, we'll copy them, 70 00:05:04,775 --> 00:05:07,942 and put all of them inside our images. 71 00:05:09,721 --> 00:05:12,304 Now I'll paste them here, okay. 72 00:05:13,947 --> 00:05:18,114 Except for maybe the text, I will delete the text here. 73 00:05:23,305 --> 00:05:24,888 And alright, great. 74 00:05:27,159 --> 00:05:28,599 So we want the white logo. 75 00:05:28,599 --> 00:05:33,521 They actually gave us two logos a black one and a white one. 76 00:05:33,521 --> 00:05:36,726 And we want the white logo here because the background 77 00:05:36,726 --> 00:05:39,966 is so dark that the best thing to do 78 00:05:39,966 --> 00:05:42,466 is to use the white logo here. 79 00:05:43,518 --> 00:05:45,678 Now the best way to put an image, 80 00:05:45,678 --> 00:05:48,046 you probably remember how to do that. 81 00:05:48,046 --> 00:05:51,296 It's image, then source, and we already 82 00:05:52,156 --> 00:05:55,198 know how it is, where it is right? 83 00:05:55,198 --> 00:05:58,281 So we go to resources, image, and now 84 00:05:59,401 --> 00:06:02,151 it should be down here somewhere. 85 00:06:03,023 --> 00:06:04,440 It is logo white. 86 00:06:05,693 --> 00:06:09,176 Alright, and now the alternative text, 87 00:06:09,176 --> 00:06:12,593 which we will say is just Omni Foot logo. 88 00:06:15,608 --> 00:06:17,419 And of course we have to give it a class 89 00:06:17,419 --> 00:06:19,811 so that we can format it. 90 00:06:19,811 --> 00:06:23,619 The logo should be just right for this. 91 00:06:23,619 --> 00:06:24,452 Alright. 92 00:06:25,291 --> 00:06:28,310 And now for the navigation. 93 00:06:28,310 --> 00:06:31,491 Now the navigation is usually done 94 00:06:31,491 --> 00:06:34,241 using a so called unordered list. 95 00:06:35,183 --> 00:06:39,246 Unordered lists is just like some bullet points 96 00:06:39,246 --> 00:06:41,475 where each bullet point will be 97 00:06:41,475 --> 00:06:44,680 an element of the navigation. 98 00:06:44,680 --> 00:06:46,955 So how do we do that? 99 00:06:46,955 --> 00:06:49,455 Ul stands for an ordered list, 100 00:06:51,855 --> 00:06:54,522 and let's just call it main nav. 101 00:06:58,635 --> 00:07:00,887 And now for each of the elements inside 102 00:07:00,887 --> 00:07:03,387 of an ordered list, we say le. 103 00:07:06,855 --> 00:07:09,355 Which means like list element. 104 00:07:11,475 --> 00:07:15,678 And now each of the list elements will be a link 105 00:07:15,678 --> 00:07:18,302 because that's what a navigation is all about, right? 106 00:07:18,302 --> 00:07:22,133 Navigation is like a collection of links. 107 00:07:22,133 --> 00:07:25,431 So let's see what Omni Foot had in mind 108 00:07:25,431 --> 00:07:28,496 for this navigation, what they want there. 109 00:07:28,496 --> 00:07:32,663 So they want, let me just copy this so it's easier. 110 00:07:35,671 --> 00:07:39,338 Just down here, I will delete it after this. 111 00:07:42,520 --> 00:07:44,590 So these will be links. 112 00:07:44,590 --> 00:07:46,257 So, a element, hrev, 113 00:07:50,335 --> 00:07:54,418 hrev will be again it will point nowhere for now. 114 00:07:55,699 --> 00:07:57,975 So it will be like an empty link 115 00:07:57,975 --> 00:08:00,854 so I'll use the hash sign again. 116 00:08:00,854 --> 00:08:03,521 And this is here, food delivery. 117 00:08:06,195 --> 00:08:07,028 Alright? 118 00:08:08,006 --> 00:08:12,279 And as before I will just duplicate this with command d. 119 00:08:12,279 --> 00:08:16,458 We have four, so duplicate it three times. 120 00:08:16,458 --> 00:08:18,791 The next one is how it works 121 00:08:21,804 --> 00:08:24,137 and our cities, and sign up. 122 00:08:32,652 --> 00:08:33,485 Alright. 123 00:08:36,623 --> 00:08:37,456 Let's see. 124 00:08:38,875 --> 00:08:43,148 Now the image is huge, it's way too big so 125 00:08:43,148 --> 00:08:45,261 let's start by formatting the image. 126 00:08:45,261 --> 00:08:48,953 I don't know why the unordered list isn't showing up here 127 00:08:48,953 --> 00:08:52,120 but we'll, ah okay it's actually here. 128 00:08:54,317 --> 00:08:58,566 So you see these bullet points and you see those blue links. 129 00:08:58,566 --> 00:09:00,191 We will just format this in a minute, 130 00:09:00,191 --> 00:09:02,358 let's start with the logo. 131 00:09:04,162 --> 00:09:06,995 So the class is called logo. 132 00:09:06,995 --> 00:09:11,615 So it's in the header so I will put it right here. 133 00:09:11,615 --> 00:09:14,615 So logo, so logo I think the height, 134 00:09:18,372 --> 00:09:21,437 the optimal height will be 100 pixels 135 00:09:21,437 --> 00:09:25,571 and then the width should be determined automatically 136 00:09:25,571 --> 00:09:28,321 so as before we'll say auto here. 137 00:09:31,051 --> 00:09:35,218 Okay now we want this to be floated all to the left side. 138 00:09:37,854 --> 00:09:40,664 So we can use the float property here 139 00:09:40,664 --> 00:09:43,831 and say it should be on the left side. 140 00:09:45,842 --> 00:09:49,209 Alright then we can actually already do some things 141 00:09:49,209 --> 00:09:51,292 for the main navigation . 142 00:09:52,134 --> 00:09:53,467 Main navigation. 143 00:09:58,961 --> 00:10:02,961 Just say that it should float to the right side. 144 00:10:05,416 --> 00:10:07,529 So this is what it looks like. 145 00:10:07,529 --> 00:10:11,696 So the food delivery logo is right here on this side 146 00:10:13,357 --> 00:10:15,517 and the navigation is on the right side, 147 00:10:15,517 --> 00:10:18,100 just as we specified it before. 148 00:10:19,371 --> 00:10:22,552 Now we have to format this navigation, 149 00:10:22,552 --> 00:10:24,899 and I will show you how and this is actually 150 00:10:24,899 --> 00:10:28,482 the way everyone formats their navigations. 151 00:10:29,681 --> 00:10:33,848 So the first thing here is in this unordered list, 152 00:10:34,882 --> 00:10:38,063 because main nav is an unordered list, right, 153 00:10:38,063 --> 00:10:42,661 is to say that we want to get rid of those bullet points. 154 00:10:42,661 --> 00:10:44,828 So we say list style none. 155 00:10:48,930 --> 00:10:52,413 Okay and that should do it for now. 156 00:10:52,413 --> 00:10:56,580 Now we want to select the li elements inside of this. 157 00:10:58,102 --> 00:11:02,269 Let me show you it to you, so we want to select this. 158 00:11:03,119 --> 00:11:07,286 And we already learned how to do that before, right? 159 00:11:08,249 --> 00:11:11,582 So we say main navigation and we want to 160 00:11:12,569 --> 00:11:16,353 select all li elements inside of them. 161 00:11:16,353 --> 00:11:17,560 So this is how we do it: 162 00:11:17,560 --> 00:11:21,227 main nav and then all li elements inside it. 163 00:11:25,014 --> 00:11:29,181 And again we want to change the way they are displayed. 164 00:11:31,655 --> 00:11:35,572 So they are now block elements and we want them 165 00:11:38,157 --> 00:11:42,324 to be inline blocks so that they can be side by side 166 00:11:44,705 --> 00:11:47,259 and we want some margin between them. 167 00:11:47,259 --> 00:11:51,009 Let's say we want a left margin of 40 pixels. 168 00:11:55,009 --> 00:11:57,433 So each of those blocks will have 169 00:11:57,433 --> 00:12:00,683 a margin on the left side of 40 pixels. 170 00:12:02,638 --> 00:12:05,221 And this is what it looks like. 171 00:12:07,232 --> 00:12:10,649 So the li elements are now nicely aligned 172 00:12:11,527 --> 00:12:13,524 such as we want them. 173 00:12:13,524 --> 00:12:15,962 And now it's just time to format 174 00:12:15,962 --> 00:12:18,795 how the links inside of them look. 175 00:12:20,513 --> 00:12:24,680 And in order to do that, we can even go further down 176 00:12:26,690 --> 00:12:30,857 and say main nav then we want to select the li elements 177 00:12:31,891 --> 00:12:34,974 inside of them and then the a element 178 00:12:35,885 --> 00:12:37,968 inside of each of the li. 179 00:12:39,368 --> 00:12:40,451 Easy as that. 180 00:12:42,271 --> 00:12:46,104 Now we want them to be wide and such as before 181 00:12:49,608 --> 00:12:53,811 we want to get rid of that text underline, 182 00:12:53,811 --> 00:12:56,394 so we say text decoration none. 183 00:13:00,498 --> 00:13:05,305 And I think it will look great if we make them upper case. 184 00:13:05,305 --> 00:13:08,972 So text transform again, upper case and then 185 00:13:14,732 --> 00:13:18,261 let's specify the font size as well. 186 00:13:18,261 --> 00:13:22,011 This shouldn't be too big because as you know 187 00:13:24,856 --> 00:13:28,273 our base font size is 20 pixels and let's 188 00:13:31,191 --> 00:13:34,024 say you want it to be 18 pixels. 189 00:13:34,024 --> 00:13:38,191 But as I said before, we will never use the unit in pixels. 190 00:13:41,269 --> 00:13:45,355 We want it to be 18 pixels, but expressed in percentage. 191 00:13:45,355 --> 00:13:46,952 So what do we do? 192 00:13:46,952 --> 00:13:50,785 We divide that 18 pixels we want by this base, 193 00:13:54,819 --> 00:13:56,635 base text size. 194 00:13:56,635 --> 00:14:00,802 So 18 divided by 20 which is 0,9 which is 90 percent. 195 00:14:02,510 --> 00:14:06,677 So we will just say we want the font size to 90 percent 196 00:14:08,338 --> 00:14:11,255 and then it will give us 18 pixels. 197 00:14:13,632 --> 00:14:15,536 And that's how it looks like. 198 00:14:15,536 --> 00:14:16,786 Not bad, right? 199 00:14:19,995 --> 00:14:23,230 Now we probably want some distance between the logo 200 00:14:23,230 --> 00:14:25,848 at the top and then center 201 00:14:25,848 --> 00:14:28,265 this navigation so that here, 202 00:14:30,167 --> 00:14:33,250 like here on the middle of this logo. 203 00:14:34,672 --> 00:14:38,410 And in order to do that, we will specify 204 00:14:38,410 --> 00:14:41,077 a margin on the top of the logo. 205 00:14:42,450 --> 00:14:46,283 So margin top, let's say 20 pixels and margin, 206 00:14:50,995 --> 00:14:52,528 no it's right here. 207 00:14:52,528 --> 00:14:56,195 So the main nav should have a margin top of, 208 00:14:58,588 --> 00:15:01,338 I don't know, 60 pixels probably. 209 00:15:06,030 --> 00:15:09,749 And yeah this looks pretty great, right? 210 00:15:09,749 --> 00:15:12,025 This may be a little bit too much, 211 00:15:12,025 --> 00:15:16,192 I will say 55 pixels but it doesn't really matter. 212 00:15:20,222 --> 00:15:21,889 Okay, now very good. 213 00:15:23,101 --> 00:15:27,268 One thing is we want some hover effect right here. 214 00:15:29,602 --> 00:15:31,135 And one beautiful thing that we can 215 00:15:31,135 --> 00:15:35,135 do that you probably saw on many websites is to, 216 00:15:37,520 --> 00:15:41,687 once we hover an element, give it some border, okay? 217 00:15:43,697 --> 00:15:47,364 A two pixel border I think would look great. 218 00:15:49,200 --> 00:15:52,172 So one thing that we did not yet do here 219 00:15:52,172 --> 00:15:54,672 is to say that this is a link. 220 00:15:57,528 --> 00:16:00,695 And after that say that a visited link 221 00:16:02,180 --> 00:16:04,597 should look exactly the same. 222 00:16:05,477 --> 00:16:09,644 So this is exactly what we did with the buttons here before. 223 00:16:12,884 --> 00:16:16,321 So this is the link at the visited state 224 00:16:16,321 --> 00:16:20,071 and now we want some hover and active states. 225 00:16:23,357 --> 00:16:25,357 Hover and active states. 226 00:16:32,134 --> 00:16:36,301 And what we want here is a nice border at the bottom. 227 00:16:44,998 --> 00:16:48,831 With let's say two pixels, again a solid line, 228 00:16:49,692 --> 00:16:53,859 and the color can be our orange color that would look great. 229 00:16:55,552 --> 00:16:59,219 So our orange color is this one here, right? 230 00:17:00,173 --> 00:17:03,377 And we will probably use this a lot of time, 231 00:17:03,377 --> 00:17:07,377 so I will just make a comment here and paste it. 232 00:17:13,571 --> 00:17:15,196 Orange color. 233 00:17:15,196 --> 00:17:19,363 So each time we want it we know where to find it, okay? 234 00:17:22,952 --> 00:17:25,369 So we want this to be orange. 235 00:17:26,388 --> 00:17:30,568 Now in order for this to happen we need this border 236 00:17:30,568 --> 00:17:33,651 to exist before we actually hover it, 237 00:17:35,514 --> 00:17:39,681 but since we don't want to see it we make it transparent. 238 00:17:40,599 --> 00:17:43,084 So now I think we can do in CSS 239 00:17:43,084 --> 00:17:46,334 is we can say transparent, transparent. 240 00:17:48,912 --> 00:17:53,079 So it will not be visible until we actually hover it. 241 00:17:55,715 --> 00:17:58,548 And such as with the buttons, 242 00:17:58,548 --> 00:18:01,131 we want a nice transition here. 243 00:18:02,263 --> 00:18:06,211 And you know already how to do this so we say transition 244 00:18:06,211 --> 00:18:10,181 and then the property we want to emanate. 245 00:18:10,181 --> 00:18:13,200 So it's border bottom in this case, 246 00:18:13,200 --> 00:18:17,117 and again 0.2 second interval in between those. 247 00:18:19,237 --> 00:18:21,320 So how does it look like? 248 00:18:22,906 --> 00:18:24,656 Okay it works, right? 249 00:18:25,785 --> 00:18:28,711 Now let's, it doesn't look so good because we want 250 00:18:28,711 --> 00:18:32,878 some more space between the line and the text, right? 251 00:18:34,932 --> 00:18:37,764 And there's an easy way to do this and maybe 252 00:18:37,764 --> 00:18:40,969 you can guess already how we will do this. 253 00:18:40,969 --> 00:18:44,302 It is to specify a padding for the link. 254 00:18:45,427 --> 00:18:49,462 And padding is an inside space, so a space inside 255 00:18:49,462 --> 00:18:54,219 of the box which goes between the content and the border. 256 00:18:54,219 --> 00:18:58,386 So we'll add some padding to the bottom and also to the top. 257 00:19:02,197 --> 00:19:05,530 And we can make it for example 8 pixels. 258 00:19:07,703 --> 00:19:08,953 We put it here. 259 00:19:09,793 --> 00:19:14,135 So want a padding top and bottom of 8 pixels, 260 00:19:14,135 --> 00:19:17,968 so we put it here and left and right 0 pixels. 261 00:19:20,195 --> 00:19:23,678 And I think now everything is perfect. 262 00:19:23,678 --> 00:19:24,845 Just check it. 263 00:19:28,438 --> 00:19:31,830 Alright, this looks absolutely fantastic, 264 00:19:31,830 --> 00:19:33,413 don't you think so? 265 00:19:34,754 --> 00:19:38,421 So the first section is completely designed. 266 00:19:39,514 --> 00:19:42,649 We have learned a lot of stuff in this section. 267 00:19:42,649 --> 00:19:45,296 Congratulations, you just built the first 268 00:19:45,296 --> 00:19:48,942 section of your real world website! 269 00:19:48,942 --> 00:19:50,497 Isn't that great? 270 00:19:50,497 --> 00:19:55,188 This was a lot of stuff to absorb and if you didn't 271 00:19:55,188 --> 00:19:57,372 understand everything right away, 272 00:19:57,372 --> 00:20:01,480 don't worry you can always go back if you want. 273 00:20:01,480 --> 00:20:04,813 So now come with me to the next section.