1 00:00:00,790 --> 00:00:05,530 Next up, we're going to start our navigation and our header section on both of them would be in a so-called 2 00:00:05,530 --> 00:00:06,490 main section. 3 00:00:10,410 --> 00:00:16,620 Now, I'm going to type in here, comment, actually, free comments first would be that I need my main 4 00:00:16,620 --> 00:00:17,220 section 5 00:00:20,700 --> 00:00:21,830 in my main section. 6 00:00:21,840 --> 00:00:24,330 I will have actually in the copied this. 7 00:00:27,320 --> 00:00:32,870 This is the end of the main section, and within here, we're going to have our. 8 00:00:37,220 --> 00:00:38,060 Navigation. 9 00:00:42,650 --> 00:00:45,090 Carpet, and this will also end somewhere. 10 00:00:48,530 --> 00:00:57,650 And if that will have a header section and just ahead, you'll need to type in sections, not entire 11 00:00:57,650 --> 00:00:59,660 section and end of the header. 12 00:01:03,180 --> 00:01:08,850 Now, I always like to comment on things as best as I can, because, for example, I'm going to take 13 00:01:08,850 --> 00:01:09,300 this. 14 00:01:10,770 --> 00:01:18,870 Now and go back to my H.T., into my success and pace it in, and of course, the comments are not as 15 00:01:18,870 --> 00:01:19,680 they should be. 16 00:01:20,900 --> 00:01:26,060 Because these are serious comments, so let me select one of them so hard audience. 17 00:01:26,090 --> 00:01:27,290 Bom, bom, bom, bom, bom. 18 00:01:29,170 --> 00:01:34,600 And they let them know, select the next one, control the. 19 00:01:35,780 --> 00:01:36,740 And let them. 20 00:01:40,110 --> 00:01:42,190 OK, now I can comment them, although. 21 00:01:45,940 --> 00:01:55,780 There go and head to the main section of each section, so I also want to be able to know exactly where 22 00:01:55,780 --> 00:02:01,150 I am in my e-mail and my access and comments really help me out. 23 00:02:01,180 --> 00:02:07,000 I definitely encourage to use comments as much as you can always to explain to yourself and to the coders 24 00:02:07,000 --> 00:02:11,380 when they look at your code or when a designer looks at what you've done. 25 00:02:11,650 --> 00:02:16,590 Hey, there's a there is that thing and it starts there and ends there. 26 00:02:16,600 --> 00:02:18,750 And this is what he thought when he was doing that. 27 00:02:19,420 --> 00:02:26,800 So let's get started with our main section, as I said, but in here will have a tag of mean. 28 00:02:28,390 --> 00:02:38,620 And this will have a idee of mean, I love to give I.D. so we can already take this entire thing and 29 00:02:39,010 --> 00:02:41,200 paste it in here on our comments. 30 00:02:44,410 --> 00:02:52,950 Now we're going to go into our navigation and create a NAFDAC, and this will have an idea of Knap with 31 00:02:53,200 --> 00:03:02,500 on NAFDAC, we're going to have a anchor tag which will have a Iot of KNAB logo, nav dash logo. 32 00:03:04,980 --> 00:03:12,450 We're all logo live and a shirt that was just refreshed the page and going to tap me here, I'm for 33 00:03:12,450 --> 00:03:15,250 Manhart Media, not for anchor tag. 34 00:03:15,270 --> 00:03:16,950 I'm going to create you all. 35 00:03:17,790 --> 00:03:24,330 After I have the anchor tag, I'm going to create a unordered list where our navigation items will live. 36 00:03:24,340 --> 00:03:27,660 So within here, I'm going to create the el-hai. 37 00:03:28,530 --> 00:03:36,900 Then this will contain the anchor tag and this anchor tag would then have. 38 00:03:38,860 --> 00:03:40,300 A text of about. 39 00:03:43,480 --> 00:03:54,410 And I'm going to multiply all of this, they let you go so close this one up here, so let's multiply 40 00:03:54,530 --> 00:03:59,660 this with three times and you can always say, oh, that's not what I want. 41 00:03:59,670 --> 00:04:01,220 I need to open and close parenthesis. 42 00:04:01,220 --> 00:04:05,620 So close it up here and open it up at the beginning. 43 00:04:06,800 --> 00:04:12,620 And now it's free again, and yeah, I got three and tax, what the hell is AP? 44 00:04:14,180 --> 00:04:15,350 We don't need this. 45 00:04:17,120 --> 00:04:23,450 Oh, man, that's much better now, don't need to get to go into my anchor tag. 46 00:04:24,510 --> 00:04:31,680 And create an issue, so let's select all of the anchor tags or at least to start the opening anchor 47 00:04:31,680 --> 00:04:32,100 tags. 48 00:04:37,880 --> 00:04:45,950 Control D or Kamandi on the Mac and go in here and create each ref, and for the H.F., you're going 49 00:04:45,950 --> 00:04:48,720 to basically create exactly what is in here. 50 00:04:49,190 --> 00:04:58,520 So if it's about, then it's going to call give it a a direction for about the next or the next one 51 00:04:58,520 --> 00:05:00,770 will be a direction for services. 52 00:05:03,280 --> 00:05:05,560 And the lesson would be for contact. 53 00:05:05,590 --> 00:05:08,980 So let's look both of them and contact. 54 00:05:12,870 --> 00:05:19,730 Now, if you didn't know this, if you create a anchor tag with this H.F., this just means that with 55 00:05:19,740 --> 00:05:26,610 a hash and a name, when I get something, decide the exact idea and I click on the anchor tag, this 56 00:05:26,610 --> 00:05:27,820 will bring me to the side. 57 00:05:27,840 --> 00:05:31,620 So that's how I managed to show you in our example. 58 00:05:31,650 --> 00:05:34,950 In our example here is the Finnish Web page. 59 00:05:34,950 --> 00:05:37,680 If I click on services, it will bring to services. 60 00:05:37,680 --> 00:05:40,640 And this is just basically a tag with an idea of services. 61 00:05:40,650 --> 00:05:42,740 But I will show you this later on. 62 00:05:43,320 --> 00:05:46,800 OK, so we have our navigation done a lot and actually check it out. 63 00:05:46,830 --> 00:05:47,820 How does this look? 64 00:05:47,970 --> 00:05:51,180 We have a Web site opened here and hey, there we go. 65 00:05:53,740 --> 00:05:56,810 So let's go down here after navigation. 66 00:05:56,830 --> 00:06:00,940 Now we need to create our header for a header. 67 00:06:00,940 --> 00:06:02,290 I'm going through the header tag. 68 00:06:05,420 --> 00:06:13,400 I just misspelled Heather, so there they go, so let's create the Heather tag. 69 00:06:15,650 --> 00:06:18,380 And I'd also give it the idea of Heather. 70 00:06:21,890 --> 00:06:24,080 Within our headhunt integrity, each one. 71 00:06:28,750 --> 00:06:33,580 And within here, we're going to give it the name of Aflex Park's website. 72 00:06:35,820 --> 00:06:41,520 OK, after H1 going to create an H3 element now and with that being here responsive. 73 00:06:46,750 --> 00:06:47,320 Design. 74 00:06:55,330 --> 00:06:58,840 And after each week, we're going to create now a button tag. 75 00:07:02,560 --> 00:07:10,420 And this is where we are and this is where Abu Subclauses come in, so I'm going to create a PETN class 76 00:07:10,450 --> 00:07:15,970 so that PETN and not again, BITA and success. 77 00:07:21,870 --> 00:07:30,750 And then third party and for the size LG, I want to have a large button and within it I want to contain 78 00:07:30,750 --> 00:07:32,010 a anchor tag again. 79 00:07:35,740 --> 00:07:44,860 And this should have the issue of contact, because you in our example, when I pressed up here on Contact 80 00:07:44,860 --> 00:07:49,780 US, this brought me down to the contact part of the output of the Web page. 81 00:07:52,780 --> 00:07:57,340 And within our anchor tags, we're going to type in contact us. 82 00:07:58,030 --> 00:08:02,650 OK, so let's sit here and let's see if we managed to create this will. 83 00:08:04,770 --> 00:08:09,810 So, yeah, let's now style or Heather and our navigation. 84 00:08:11,790 --> 00:08:13,680 So let's go back into our success. 85 00:08:19,020 --> 00:08:21,780 Now, let's do some general styling for our main section. 86 00:08:22,910 --> 00:08:24,800 Going to target the idea of main. 87 00:08:30,130 --> 00:08:36,420 So, I mean, and I'm going to give it a height of 100 Vuko tights, and this just means it's going 88 00:08:36,420 --> 00:08:39,120 to take up the entire height of the viewport. 89 00:08:39,990 --> 00:08:42,570 Now, we need a background image. 90 00:08:43,020 --> 00:08:46,800 And for this, we're going to, first of all, type in background image. 91 00:08:51,160 --> 00:08:58,050 Nunga to select a new URL, and this is where our next technology or Mexican website comes into play 92 00:08:59,410 --> 00:09:04,780 and this website is source on splash, dot com source dot on splash, dot com. 93 00:09:05,590 --> 00:09:07,090 And you can see it right here. 94 00:09:14,890 --> 00:09:21,400 Now, from Thorson's place dot com, we have this specific photo, and for here I'm going to copy. 95 00:09:24,420 --> 00:09:27,180 Are your home right here? 96 00:09:28,080 --> 00:09:30,270 I'm going to explain this very quickly. 97 00:09:32,420 --> 00:09:40,640 So if I would copy only this hero in his save, let's go to our website, which is here. 98 00:09:41,780 --> 00:09:47,590 I can't see anything because I didn't size it, so first of all, it needs a background. 99 00:09:49,600 --> 00:09:54,850 Sighs And we're going to give it a size of cover, why image? 100 00:09:56,790 --> 00:10:04,980 Then it's going to then we want to position the image, so background position and we're going to choose 101 00:10:04,980 --> 00:10:05,660 center. 102 00:10:05,670 --> 00:10:10,950 So it'd be totally in the center and we don't want an image to repeat. 103 00:10:10,960 --> 00:10:12,390 So background. 104 00:10:16,280 --> 00:10:16,940 Repeat. 105 00:10:26,090 --> 00:10:27,170 With no repeat. 106 00:10:28,660 --> 00:10:31,800 Not this free already this week. 107 00:10:33,730 --> 00:10:39,090 These three options already give us our image, but I don't want this image, I want a specific image. 108 00:10:39,100 --> 00:10:49,000 So the way I did it is then I may you go to on Splash Dotcom and you search for image, for example, 109 00:10:49,000 --> 00:10:53,350 I used to allow you to do. 110 00:10:55,340 --> 00:10:56,430 And I can't my image. 111 00:10:57,170 --> 00:10:59,450 So let's start from the top again. 112 00:11:00,240 --> 00:11:00,830 Oh, there you go. 113 00:11:01,200 --> 00:11:08,540 There's so click on this image and you will see up here near you are this is the image I'd like. 114 00:11:08,540 --> 00:11:16,210 You just need to copy this I.D. in the cockpit, go back to my code editor and paste it in here. 115 00:11:16,220 --> 00:11:21,520 So it's between the dot com and the width and height of the image. 116 00:11:22,190 --> 00:11:24,740 So if I paste it in here. 117 00:11:29,600 --> 00:11:30,470 And it's safe. 118 00:11:30,500 --> 00:11:31,370 Let's go back here. 119 00:11:32,590 --> 00:11:36,290 Go back to the website to see where the image. 120 00:11:45,610 --> 00:11:46,240 Collodi. 121 00:11:47,420 --> 00:11:53,060 Now, there's an image, I guess as simple as that, you just copied and pasted in here. 122 00:11:53,960 --> 00:11:56,920 Now, the last two things here are the width and the height. 123 00:11:56,930 --> 00:12:01,400 You could obviously change them, but I would recommend to leave them as great as they are. 124 00:12:01,960 --> 00:12:02,210 Okay. 125 00:12:02,210 --> 00:12:06,650 Next, I want to give this the entire main section right here. 126 00:12:06,650 --> 00:12:12,620 If you if you saw this in our main section here, everything has a bit of a shadow. 127 00:12:13,250 --> 00:12:17,540 So I'm going to give the entire main section a tag shadow. 128 00:12:22,640 --> 00:12:31,230 Of one pixel, one pixel, one pixel and the color of hexadecimal, 350. 129 00:12:31,280 --> 00:12:33,330 So a bit of a dark color. 130 00:12:35,270 --> 00:12:37,520 Now, if you go back to our Web page. 131 00:12:38,440 --> 00:12:41,920 And it's actually this one because we already have a bit of a tech shadow. 132 00:12:43,220 --> 00:12:49,790 OK, then I still need to I want to do is to change the entire colors of our main to a light colored 133 00:12:49,790 --> 00:12:54,620 so that that hash this would give us this white color. 134 00:12:56,990 --> 00:12:58,640 OK, next up is the navigation. 135 00:12:59,330 --> 00:13:01,010 I was going through a navigation boot. 136 00:13:07,210 --> 00:13:14,230 And first, I'm going to split everything up, so we have this 100 percent height for me and I mean 137 00:13:14,230 --> 00:13:18,340 contains our navigation and our header, not for the navigation. 138 00:13:18,340 --> 00:13:20,680 So let's choose, first of all, the idea of NAV. 139 00:13:22,120 --> 00:13:26,100 We're going to give it a height of 10 viewport height. 140 00:13:26,120 --> 00:13:30,670 So it's going to take up it's like picking up 10 percent from the entire viewport. 141 00:13:31,450 --> 00:13:38,320 Now, also going to increase the font size to two ram for navigation only and now and then to display 142 00:13:38,320 --> 00:13:40,870 it as flex and display and flex. 143 00:13:41,530 --> 00:13:47,860 And as we learn, flex or flex, all automatically flexes into a row. 144 00:13:48,220 --> 00:13:53,890 So it flexes my m m m here, my logo and my you element all on that list. 145 00:13:57,540 --> 00:14:06,030 Now, let us let's give this also a bit of a padding of one room, and then we're going to give it a 146 00:14:06,030 --> 00:14:07,070 background color. 147 00:14:08,790 --> 00:14:11,740 Of zero action on G.P.A.. 148 00:14:12,440 --> 00:14:18,750 Also have a bit of a capacity of zero zero tab, zero tab point. 149 00:14:19,760 --> 00:14:27,470 One, and what this will do is give me a dark, but with a capacity of zero one color, so it will be 150 00:14:27,470 --> 00:14:29,060 a bit of a bit transparent. 151 00:14:33,950 --> 00:14:42,740 Let's continue on now, we're going to target the logo so harsh, the idea of never logo. 152 00:14:44,780 --> 00:14:49,430 Now, I'm going to give it a first of all, I need to size it, so let's give it a height. 153 00:14:51,030 --> 00:14:58,260 Of 60 pixels and a width of 60 pixels, I'm going to give you the square size. 154 00:15:01,540 --> 00:15:08,170 Now, I can give it also because it now has a size, I can give it a background color and because it's 155 00:15:08,170 --> 00:15:13,320 a square I can of rounded up by typing in border radius and 50 percent. 156 00:15:14,440 --> 00:15:16,090 So let's see what we just did. 157 00:15:16,940 --> 00:15:18,380 I didn't do anything. 158 00:15:18,430 --> 00:15:19,270 Why is that? 159 00:15:21,890 --> 00:15:22,710 To do. 160 00:15:26,670 --> 00:15:28,390 NAB Oh, Jesus. 161 00:15:31,380 --> 00:15:35,820 There we go, there's a round circle around the square circles. 162 00:15:35,850 --> 00:15:38,910 No, we don't have on her round circles. 163 00:15:40,080 --> 00:15:45,600 OK, next up on the displayed as Fleck's not direction. 164 00:15:51,080 --> 00:15:59,960 And I'm going to align it, so align itself to the center and now everything is aligned in the center 165 00:15:59,960 --> 00:16:00,350 right here. 166 00:16:01,160 --> 00:16:03,470 Now let's take care of our you l. 167 00:16:13,490 --> 00:16:19,970 So first of all, we're going to try it on navigation idea again, some now and within this, the honor 168 00:16:19,980 --> 00:16:28,730 that list, we're going to give it a width, not the window, with 100 percent of its container. 169 00:16:30,050 --> 00:16:33,350 And you will see this is now going to take up this entire container with. 170 00:16:36,440 --> 00:16:38,240 Then we're going to display this flex. 171 00:16:40,500 --> 00:16:48,480 And as soon as we display those facts, we also need to push should this should already be displayed 172 00:16:48,480 --> 00:16:54,170 in a row because it's safe, but we want to have this in our on our side. 173 00:16:54,210 --> 00:16:55,510 So what we need to do. 174 00:16:56,010 --> 00:16:58,530 We need to justify the content 175 00:17:01,650 --> 00:17:02,480 to the flags. 176 00:17:02,490 --> 00:17:05,760 And as soon as we do this and also safe. 177 00:17:06,420 --> 00:17:08,690 Now, this is pushed to the right side, OK? 178 00:17:08,790 --> 00:17:09,660 Simple as that. 179 00:17:13,860 --> 00:17:21,270 Now, let's target our allies or navigation items or list items we're going to do again, I didn't have 180 00:17:21,270 --> 00:17:25,530 witness to the list and within it all of the allies. 181 00:17:25,530 --> 00:17:31,350 And what I'm going to do is just give them a bit of a padding to the left side of one room. 182 00:17:32,520 --> 00:17:38,580 As soon as I do this now, we have to let each of the left sides a padding of one ran. 183 00:17:38,970 --> 00:17:42,490 We could do obviously more, but I'm going to leave it as one room. 184 00:17:47,300 --> 00:17:48,710 OK, next up, we're going to. 185 00:17:52,680 --> 00:17:56,460 Style, our anchor tags, so let's go in here, let's take it. 186 00:17:57,370 --> 00:17:58,770 I could just copy this. 187 00:18:02,300 --> 00:18:08,480 And with inheritance and tax and I'm going to change the color. 188 00:18:13,560 --> 00:18:16,970 To them, it should be F. 189 00:18:18,740 --> 00:18:20,750 They're going to increase the font size. 190 00:18:22,360 --> 00:18:26,910 They're going to increase their font weight to Boulder. 191 00:18:28,090 --> 00:18:35,050 Let me leave it at Bold, Bold is enough and I'm also going to increase the letter spacing to one pixel. 192 00:18:36,620 --> 00:18:39,250 OK, so let's say they look perfect. 193 00:18:40,600 --> 00:18:41,210 There we go. 194 00:18:41,560 --> 00:18:44,880 Another thing I want to start is the header, so this part right here. 195 00:18:44,890 --> 00:18:46,440 So let's go back into our code. 196 00:18:46,930 --> 00:18:48,520 There's the end of navigation now. 197 00:18:48,520 --> 00:18:52,930 We're going to go in here and see how perfectly commented out this now is. 198 00:18:55,900 --> 00:18:59,500 There's no way we could get lost now in our styling. 199 00:19:01,490 --> 00:19:07,370 OK, for Heather, I'm going to, first of all, target the Heather Idee. 200 00:19:10,770 --> 00:19:18,090 Then we're going to give it the rest of the viewport, which is 90 viewport hides from 100, we're going 201 00:19:18,090 --> 00:19:22,500 to display it as flags not in line Fleck's. 202 00:19:25,600 --> 00:19:31,250 We're going to choose the flex direction now, so let's take a look at first of all. 203 00:19:31,630 --> 00:19:38,620 Now, I want to have them in a column not in a row sort of typing column because normally they would 204 00:19:38,620 --> 00:19:40,600 Flexner or not this would happen. 205 00:19:40,600 --> 00:19:41,920 But no problem. 206 00:19:41,930 --> 00:19:44,820 I'm going to take care of this now. 207 00:19:44,830 --> 00:19:50,110 We can't justify the content to the center as soon as we do this. 208 00:19:50,120 --> 00:19:56,680 So he's not pushed down here to the center and to have it in the center of the entire page need to align 209 00:19:56,680 --> 00:19:57,610 the items. 210 00:20:01,380 --> 00:20:06,810 Also to the center, and as soon as we do this, we have every now in the center of the page. 211 00:20:08,410 --> 00:20:15,310 OK, now let's take care of our H1, so let's target to Heather idea again, and within this hour, 212 00:20:15,310 --> 00:20:19,750 each one year think is font size to 10 REM. 213 00:20:20,110 --> 00:20:22,080 This way, it depends on the resolution you have. 214 00:20:22,300 --> 00:20:24,190 So maybe 10 REM is sufficient. 215 00:20:24,460 --> 00:20:26,620 Too much or too little. 216 00:20:27,260 --> 00:20:31,440 Just play around with it and you will see the right one now for text. 217 00:20:31,450 --> 00:20:33,160 And I'm going to go with center. 218 00:20:36,490 --> 00:20:43,000 And we are also going to give it a margin for the bottom and what this will do, so just hit save and 219 00:20:43,000 --> 00:20:45,420 I want to push this a bit further down. 220 00:20:45,730 --> 00:20:51,040 So I'm going to give the H one imagine from the bottom to the bottom of four ram. 221 00:20:51,670 --> 00:20:53,940 And as you can see, it's safe. 222 00:20:54,970 --> 00:20:57,190 Yeah, this is a bit pushed down now. 223 00:20:59,410 --> 00:21:06,190 Became the last couple of things we need to take care of is the button and the H. 224 00:21:06,200 --> 00:21:09,010 We saw this first article, Heather Idee. 225 00:21:16,280 --> 00:21:21,350 And within this, we had to target the H3 and I'm just going to give this a color. 226 00:21:25,670 --> 00:21:27,680 Of a RGV eight. 227 00:21:40,570 --> 00:21:50,440 Of a complete dark color, so zero zero zero and point seven, I see how all this looks. 228 00:21:52,180 --> 00:21:53,500 Hmm, it's OK. 229 00:21:54,390 --> 00:22:05,820 Not a thing I want to start is our button sabatina idea of whether we have a class of Bitti and success. 230 00:22:09,950 --> 00:22:16,970 And I'm going to give it a margin from the top of the room, and they should push our button down a 231 00:22:16,970 --> 00:22:18,400 bit further from here. 232 00:22:19,190 --> 00:22:19,780 OK. 233 00:22:25,050 --> 00:22:25,590 And. 234 00:22:34,480 --> 00:22:38,830 And then I say, I want to do with this button, this changes Congress is blue and on the line. 235 00:22:38,830 --> 00:22:39,580 I don't like this. 236 00:22:40,100 --> 00:22:41,820 So let's go with the bottom. 237 00:22:41,870 --> 00:22:45,110 He had the anchor tag, so I'm just going to come up with this. 238 00:22:50,390 --> 00:22:54,920 Pasted down here again and within our button success, we're going to target the anchor tag. 239 00:22:57,830 --> 00:23:02,720 I'm going to change the color of the text to white, so hash that. 240 00:23:04,590 --> 00:23:06,330 And going to Texas form. 241 00:23:12,970 --> 00:23:18,490 Am I going to transform the text, the text transform to uppercase? 242 00:23:21,170 --> 00:23:30,020 Not decoration, text, transform uppercase, OK, so we have only capital letters that we go. 243 00:23:31,030 --> 00:23:33,150 OK, so that's pretty much it for this one. 244 00:23:33,250 --> 00:23:34,490 See you in the next one. 245 00:23:34,510 --> 00:23:34,960 Bye bye.