1 00:00:00,210 --> 00:00:09,310 OK, guys, what we will add here and the Mashaba, we can just hear first to go to this part and Natalie 2 00:00:09,600 --> 00:00:19,250 and for the NAV, we can give it a class of nav and nav top and inside the nav and we can get in touch 3 00:00:19,410 --> 00:00:24,060 with the class of Faroud and this to be having the display of flix. 4 00:00:24,480 --> 00:00:32,700 And the first thing we will do is to make P and give it a class F as a four or three. 5 00:00:32,850 --> 00:00:39,330 Let's make it four, for example, and then we can type your name. 6 00:00:40,110 --> 00:00:42,250 Let's see what we have here right now. 7 00:00:43,790 --> 00:00:45,390 So here we got your name. 8 00:00:46,050 --> 00:00:47,220 OK, it's OK. 9 00:00:47,240 --> 00:00:55,230 So we can just take this one and make it outside the section of home because we don't need this padding. 10 00:00:55,500 --> 00:00:59,610 And here we have your name after this part. 11 00:00:59,820 --> 00:01:11,670 What we can do is to add you l we can just go here after this paragraph and add, you know, and then 12 00:01:11,670 --> 00:01:17,190 we can make the first one to be a with and start from nothing. 13 00:01:17,730 --> 00:01:35,690 And inside we can make home and then we can create another one or add pout and then features like OK 14 00:01:35,730 --> 00:01:42,840 and the last one can be for contact us which will be the future. 15 00:01:43,800 --> 00:01:47,060 OK, let's see what we have here right now. 16 00:01:48,030 --> 00:01:49,620 So here we got this link. 17 00:01:49,770 --> 00:01:51,270 It's OK until now. 18 00:01:52,050 --> 00:01:57,790 OK, after this part we can add poutine which will be for the chocolate. 19 00:01:57,800 --> 00:02:00,480 OK, we can go after this. 20 00:02:01,790 --> 00:02:14,270 Yes, after this marathon, we can add put in for the chuckled at Putin with a glass of chuckled and 21 00:02:14,270 --> 00:02:21,920 then side we can get the icon from the font bounce so we can get to the font balsom and search for meaning 22 00:02:21,970 --> 00:02:24,020 you OK? 23 00:02:24,830 --> 00:02:28,430 If it's not there, we can search for the nav bar. 24 00:02:29,330 --> 00:02:33,310 OK, we can just take this one right here. 25 00:02:34,680 --> 00:02:35,580 Just waiting. 26 00:02:37,630 --> 00:02:45,420 And then we can copy this one, we can now go to the esteemed Ellen Page and start here lately what 27 00:02:45,430 --> 00:02:46,220 we have here. 28 00:02:48,370 --> 00:02:49,770 So here we have this icon. 29 00:02:49,780 --> 00:02:50,470 It's OK. 30 00:02:50,800 --> 00:02:51,750 We can just get it. 31 00:02:51,760 --> 00:02:55,570 Some font, F F one. 32 00:02:58,360 --> 00:03:05,800 We have nothing here, so we can just give it style of font size of 25 pixels. 33 00:03:07,750 --> 00:03:15,220 OK, we can see the spark leader so we can just delete the styling from here because we will add some 34 00:03:15,220 --> 00:03:16,930 now to this. 35 00:03:17,020 --> 00:03:19,550 He says we can now move to this. 36 00:03:19,570 --> 00:03:23,530 He says, OK, we can't scroll down. 37 00:03:24,100 --> 00:03:25,570 We typed all of that. 38 00:03:28,710 --> 00:03:37,170 And then here inside that, he says the first thing we will do is the class of mavor and inside and 39 00:03:37,890 --> 00:03:47,100 out, because we want you to be having the lifestyle of none less tired of none. 40 00:03:49,270 --> 00:03:57,250 And then here we can give Martin left over to let's see what we have here inside the Web page. 41 00:03:57,640 --> 00:04:03,090 So here we got this at the right because we added margin left over. 42 00:04:03,100 --> 00:04:10,240 So it will be having margin left from here automatically and move to the next point. 43 00:04:11,080 --> 00:04:19,830 OK, this school activist part, we can get a quarter of zero and parent of zero. 44 00:04:20,620 --> 00:04:23,980 So we will be having Newport there overpack. 45 00:04:24,490 --> 00:04:25,780 OK, that's good. 46 00:04:26,350 --> 00:04:32,220 After this part, we can add for the never to be having this kind of plug. 47 00:04:32,650 --> 00:04:39,700 So everything I have to read will be broken, but we don't have anything inside it just in case. 48 00:04:40,740 --> 00:04:51,910 OK, at this part we can add some for the putting of the Tuggle we have here that class of Tuggle we 49 00:04:51,910 --> 00:05:03,040 can make here, so-called Japie have in the order of zero and also portrayed as we can. 50 00:05:03,580 --> 00:05:13,620 But we can make this to people order three pixels of black and then we can decrease the degree of the 51 00:05:13,640 --> 00:05:15,550 black to be thirty. 52 00:05:16,180 --> 00:05:21,190 And then we can make ladies, ladies five pixels. 53 00:05:21,880 --> 00:05:23,830 We can see what we have right now. 54 00:05:24,430 --> 00:05:25,600 It's very small. 55 00:05:25,930 --> 00:05:31,000 So we can Jeff can create the font size to be four pixels. 56 00:05:32,650 --> 00:05:33,940 No, that's very big. 57 00:05:34,390 --> 00:05:43,570 What we can do for this part, let's make this to be just 30 pixels and add some padding left for twenty 58 00:05:43,570 --> 00:05:45,050 pixels adding. 59 00:05:45,130 --> 00:05:45,610 Right. 60 00:05:46,480 --> 00:05:48,910 So let's do what we have here right now. 61 00:05:49,390 --> 00:05:50,410 OK, that's good. 62 00:05:50,680 --> 00:05:59,080 We can just add some padding to chop of seven point five pixels padding right up and quote, I'm sorry 63 00:06:00,550 --> 00:06:04,060 for ten seven point five pixels. 64 00:06:04,540 --> 00:06:06,400 We can see what we have right now. 65 00:06:06,880 --> 00:06:11,350 OK, we can make it smaller, like five right here and here. 66 00:06:11,920 --> 00:06:15,160 And this one to be for 15 and 15. 67 00:06:17,260 --> 00:06:18,820 We can reload right now. 68 00:06:20,050 --> 00:06:22,810 There is some language that I can it's OK. 69 00:06:22,810 --> 00:06:23,890 We can make it later. 70 00:06:24,640 --> 00:06:26,620 Let's move on here. 71 00:06:26,800 --> 00:06:37,690 We can make for the Navot the class of never to be having this play off non, which we talked about 72 00:06:37,780 --> 00:06:38,260 before. 73 00:06:39,280 --> 00:06:42,370 So here we have a display of non for the NAV. 74 00:06:43,390 --> 00:06:55,220 And this part we can add the media, we can change the media from the minimum width of nine nine to 75 00:06:55,220 --> 00:07:05,410 a big thumbs up the private right here and McNevin to be having the display of clock and now we will 76 00:07:05,410 --> 00:07:10,300 be having the display of block for the NAV when we go to the nine nine two pixels. 77 00:07:10,900 --> 00:07:14,230 So here we can make it larger. 78 00:07:16,270 --> 00:07:17,060 Yeah, nothing. 79 00:07:17,080 --> 00:07:21,820 So what's the problem we can make here only screen 80 00:07:27,160 --> 00:07:33,640 and OK, we can just delete this one right here. 81 00:07:35,500 --> 00:07:38,080 Yeah, we can just set everything back. 82 00:07:38,860 --> 00:07:41,050 So here we got this for this screen. 83 00:07:41,470 --> 00:07:42,160 My pad. 84 00:07:42,160 --> 00:07:48,690 Sorry I just needed to scroll up and here we got this mag. 85 00:07:49,180 --> 00:07:59,770 I took this part we can meet for the match we can make here, never shop and here we can open the bracket 86 00:08:00,130 --> 00:08:06,130 and we can give it a padding of one and let's see if it's enough. 87 00:08:06,130 --> 00:08:10,960 But this to be like that, I think this is enough. 88 00:08:11,530 --> 00:08:17,910 And after this part right here, we can just meet for the NAVCENT. 89 00:08:21,590 --> 00:08:34,070 Chopan, a GP, having the color of let's make it for the same as let's make it plain black and then 90 00:08:34,070 --> 00:08:38,580 we can make tactical racing into nothing and just people like that. 91 00:08:38,600 --> 00:08:40,010 Let's see what we have here. 92 00:08:40,640 --> 00:08:42,170 OK, so here we got this. 93 00:08:42,500 --> 00:08:51,140 We can just edit the font size by going to here, give it a class of F three for an example. 94 00:08:52,280 --> 00:08:54,310 We can just go and reload. 95 00:08:54,890 --> 00:08:56,210 No, that's very big. 96 00:08:56,450 --> 00:08:58,550 Like dry for the five. 97 00:09:00,390 --> 00:09:00,940 OK. 98 00:09:00,980 --> 00:09:02,650 OK, right now we will take it later. 99 00:09:03,080 --> 00:09:12,290 Like just and from the style of the natural after this part we can make for the nav for the eye to be 100 00:09:12,290 --> 00:09:17,900 having some martiens we can move here, never 101 00:09:21,680 --> 00:09:29,390 top that inside it to be having margin for all of the direction of one. 102 00:09:29,780 --> 00:09:31,920 Um, let's see what we have here. 103 00:09:32,540 --> 00:09:34,070 OK, I think that's good. 104 00:09:34,880 --> 00:09:35,990 After this part. 105 00:09:36,200 --> 00:09:47,810 What we can do is to make sure the media and here we can get this part or we can just make it here and 106 00:09:47,810 --> 00:09:48,230 here. 107 00:09:48,530 --> 00:10:01,100 I want for the naff chop chop and inside it I should be having the display of in line and then we can 108 00:10:01,100 --> 00:10:04,240 add margin left to want. 109 00:10:05,270 --> 00:10:07,370 We can just go and reload. 110 00:10:08,120 --> 00:10:15,260 OK, so here we got this martien right now and for the display of a line. 111 00:10:16,340 --> 00:10:17,660 OK, that's good. 112 00:10:17,780 --> 00:10:26,150 After this one we can give but it's a K which on each end because it's already good. 113 00:10:26,540 --> 00:10:33,290 And then when we move to the small we are having this plate of non bonnabel display of not only applied 114 00:10:33,290 --> 00:10:34,960 to this. 115 00:10:36,380 --> 00:10:46,190 Part, which is very well, so we can just go here and played a nun to be inside the hotel and they 116 00:10:46,190 --> 00:10:47,250 have to be for that. 117 00:10:49,370 --> 00:10:59,090 OK, so now we've had this and when we make this cream smaller and then we are having a display of none 118 00:10:59,090 --> 00:11:01,360 for just the last. 119 00:11:02,540 --> 00:11:03,910 OK, that's good. 120 00:11:04,470 --> 00:11:08,830 After this part, what we can edit is that sugar coating. 121 00:11:09,140 --> 00:11:11,750 We can just go here and add for the chocolate. 122 00:11:12,530 --> 00:11:13,700 I think we added already. 123 00:11:13,710 --> 00:11:18,350 So we don't need we will edit and for the font size. 124 00:11:18,830 --> 00:11:28,040 And after this part we can give a class of active, which we will use inside that JavaScript display 125 00:11:28,040 --> 00:11:28,730 of plug. 126 00:11:28,970 --> 00:11:32,390 But because it's having a display of none for the small screen. 127 00:11:33,290 --> 00:11:46,850 OK, and after this part, we can make trouble to be having position of absolute for. 128 00:11:47,060 --> 00:11:47,670 Right. 129 00:11:48,150 --> 00:11:53,990 Uh, let's make it pixels and top off fills that. 130 00:11:54,080 --> 00:11:55,220 Check it right now. 131 00:11:56,000 --> 00:11:57,000 No, no, no. 132 00:11:57,020 --> 00:11:57,920 It's very near. 133 00:11:58,310 --> 00:12:01,880 So let's make the job to be like that. 134 00:12:03,590 --> 00:12:04,520 No, no, no. 135 00:12:05,300 --> 00:12:07,850 OK, let's make it to be your relative. 136 00:12:08,220 --> 00:12:09,400 OK, absolute. 137 00:12:09,680 --> 00:12:15,190 Let's try the marginal left of our top marginal left of our two. 138 00:12:16,840 --> 00:12:17,920 No, no, no. 139 00:12:18,200 --> 00:12:24,350 We can make position of absolute to be having the right of. 140 00:12:25,410 --> 00:12:30,480 30 pixels or 20 pixels and top 10 pixels. 141 00:12:32,870 --> 00:12:40,820 OK, we just want this to be over loaded, OK, we can just decrease the font size or we can just make 142 00:12:40,820 --> 00:12:44,680 this to be five and not OK. 143 00:12:44,840 --> 00:12:45,770 I think that's good. 144 00:12:46,460 --> 00:12:48,680 Or we can just make it really good. 145 00:12:48,710 --> 00:12:50,540 So this is good. 146 00:12:51,230 --> 00:12:59,580 OK, at the start, we can do for the we can add more for this part, OK? 147 00:12:59,990 --> 00:13:05,180 We want this button to be having the display of none from the nine nine two pixels. 148 00:13:05,600 --> 00:13:15,350 So what people do right now is to get the nav or just go outside and never to be having the display 149 00:13:15,350 --> 00:13:16,260 off and on. 150 00:13:17,360 --> 00:13:21,130 So here we got a display of non when we go to the small screen. 151 00:13:23,380 --> 00:13:25,540 We have this, OK? 152 00:13:25,630 --> 00:13:36,130 They escaped after this, but what we can do is to scroll down again and here we can add for the I think 153 00:13:36,130 --> 00:13:36,760 that's OK. 154 00:13:37,270 --> 00:13:39,700 We can just edit the styling of this put in. 155 00:13:40,180 --> 00:13:42,250 We can go to the trouble. 156 00:13:42,250 --> 00:13:43,300 We're in trouble. 157 00:13:43,690 --> 00:13:45,220 We already had the chuckle here. 158 00:13:45,250 --> 00:13:45,910 But it's OK. 159 00:13:45,910 --> 00:13:53,290 We can keep both of them or you can just take this one and paint it for the first trouble. 160 00:13:54,850 --> 00:13:59,860 OK, and this one to be having fun size of 25 pixels. 161 00:14:00,250 --> 00:14:01,570 I think this will be fine. 162 00:14:01,780 --> 00:14:03,010 Yes, this is fine. 163 00:14:03,370 --> 00:14:08,250 Let's give it a big round of nonono. 164 00:14:08,590 --> 00:14:11,530 So here we got no background and this is good. 165 00:14:12,040 --> 00:14:15,220 We can make this smaller, bigger now do test. 166 00:14:15,490 --> 00:14:19,060 Yes, the font size is OK and that's good. 167 00:14:19,540 --> 00:14:25,540 In the next video we can add that JavaScript for this next part. 168 00:14:25,560 --> 00:14:27,490 So good luck and have fun.