1 00:00:00,840 --> 00:00:07,620 I guess starting on Heather, where we actually also will have our logo and our navigation, so let 2 00:00:07,770 --> 00:00:09,090 me get started with Heather. 3 00:00:09,090 --> 00:00:11,340 Take this typing, Heather. 4 00:00:13,160 --> 00:00:19,260 And within our heart attack, our personal goal is to create a class A not a class, but a divide with 5 00:00:19,260 --> 00:00:23,480 the idea of logo with the logo. 6 00:00:23,510 --> 00:00:27,930 Dave, I will have an anchor tag with an issue that will go basically nowhere. 7 00:00:27,950 --> 00:00:35,000 So just hash and then I will have an each one with a span tag within it and within the spending, I'm 8 00:00:35,000 --> 00:00:39,560 going to type in the initialism and not be thought and typing. 9 00:00:39,560 --> 00:00:40,780 Whatever you want, obviously. 10 00:00:41,550 --> 00:00:43,520 OK, so we have this set up. 11 00:00:43,550 --> 00:00:45,950 That's it for logo underneath your logo. 12 00:00:46,400 --> 00:00:48,350 Going to create a NAFDAC now. 13 00:00:49,770 --> 00:00:52,080 Is just the generic tag for the navigation. 14 00:00:53,310 --> 00:00:59,630 Within on NAFDAC, I'm going to create the USA in on at least with an idea of NAFS or hash and you'll 15 00:00:59,670 --> 00:01:00,000 hash. 16 00:01:00,000 --> 00:01:03,510 Now this will give you a little idea of NAV. 17 00:01:03,960 --> 00:01:12,060 And within here we're going to create a ally and after that by using the plus sign. 18 00:01:13,080 --> 00:01:16,340 Going to include actually not the plus side, but. 19 00:01:17,090 --> 00:01:23,570 The crater then went to include the anchor desk and I'll get to multiply this by four, so let's see 20 00:01:23,570 --> 00:01:24,140 what we get. 21 00:01:27,260 --> 00:01:34,370 Now I'm going to multiply everything, so I need to have it in parentheses by four, so four, I need 22 00:01:34,370 --> 00:01:40,760 to get four allies with integrated anchor text, not the first one, actually. 23 00:01:40,760 --> 00:01:42,280 All of them will go nowhere. 24 00:01:44,570 --> 00:01:45,680 So just hash. 25 00:01:46,790 --> 00:01:53,270 But the first anchor tag is the first, and I tag that, I just jumped on the first flight, I will 26 00:01:53,270 --> 00:01:54,030 also have a class. 27 00:01:54,080 --> 00:01:58,540 Let's give it a class of selected or select. 28 00:01:59,180 --> 00:02:01,290 And I walked in here with our anchor tags. 29 00:02:01,310 --> 00:02:04,880 I'm going to type in your news then. 30 00:02:05,360 --> 00:02:07,220 Artists, let's say. 31 00:02:13,250 --> 00:02:14,780 Then production 32 00:02:18,470 --> 00:02:20,450 and the last one will be information. 33 00:02:24,500 --> 00:02:28,460 OK, so well, that's basically it for the e-mails before for the mock up. 34 00:02:28,760 --> 00:02:30,800 Now let's go in Tostadas SS. 35 00:02:31,920 --> 00:02:34,340 But first, let's take a look at what we just created. 36 00:02:35,270 --> 00:02:35,670 There we go. 37 00:02:36,020 --> 00:02:39,420 So we have our logo up here and we have our navigation down here. 38 00:02:39,920 --> 00:02:43,880 Now, another thing that I want to do is take out in the general setting. 39 00:02:43,880 --> 00:02:50,540 So in the start up here, I'm going to take out all of the tax decorations and all the lipstein. 40 00:02:50,540 --> 00:03:00,390 So tax decoration went to sell it to none and also less time to close it up, Liz style. 41 00:03:00,540 --> 00:03:01,850 You're also going to sell it to not. 42 00:03:02,770 --> 00:03:04,850 And before I hit Save, let me show you something. 43 00:03:04,870 --> 00:03:09,880 So you see this on the lines and the dots, there is what we are going to take out. 44 00:03:09,910 --> 00:03:13,360 So after we hit Save, you see there are no more underlines and no more dots. 45 00:03:14,290 --> 00:03:15,720 OK, first things first. 46 00:03:16,660 --> 00:03:20,020 This is a perfect example where Fleck's differs from GRET. 47 00:03:20,350 --> 00:03:29,080 I would never use a grid system on a navigation, basically, because sending it as flex is much easier 48 00:03:29,080 --> 00:03:31,090 then set it as grid. 49 00:03:31,750 --> 00:03:39,940 You have a basically doubled my work force, triple the amount of work I have to do on a grid navigation, 50 00:03:40,150 --> 00:03:43,680 on a grid based layout, navigation, then on a flex based navigation. 51 00:03:43,730 --> 00:03:49,150 So let me show you how simple this is going to grab onto the header, going to display it, first of 52 00:03:49,150 --> 00:03:57,540 all, as flex, then I'm going to justify the content center and align all the items to the center. 53 00:03:58,150 --> 00:04:03,160 And as soon as I do this, I see what we have here, a nicely laid out flex. 54 00:04:03,160 --> 00:04:09,590 So the two items are flexing in a row because flex, flex in a row automatically and then we have a 55 00:04:09,590 --> 00:04:10,370 finger centered. 56 00:04:11,050 --> 00:04:12,370 Now, we're not done yet. 57 00:04:12,680 --> 00:04:13,660 So let's go back. 58 00:04:15,840 --> 00:04:22,680 And also need a bit of additional styling, so let's give it a padding of top and bottom one ram and 59 00:04:22,680 --> 00:04:33,720 left and right zero and also a border to the bottom of one pixel solid and a hash of one on one the 60 00:04:33,760 --> 00:04:34,380 dog collar. 61 00:04:36,550 --> 00:04:39,850 OK, we have the save and there we go, there's a ball to the bottom. 62 00:04:40,330 --> 00:04:42,460 Now let's take a nap on hashtag. 63 00:04:43,930 --> 00:04:44,830 Let's see, never. 64 00:04:46,270 --> 00:04:52,210 And we're going to get this a width of 100 percent, that this would just take out 100 percent of the 65 00:04:52,210 --> 00:04:56,280 container it is contained in the NAV was actually contained. 66 00:04:56,680 --> 00:04:59,790 We go back to our estimate in our head attack. 67 00:05:00,040 --> 00:05:04,530 And I was going to take up the entire width, but I still have this slow going thing here. 68 00:05:04,540 --> 00:05:07,480 So let's go back to our success. 69 00:05:10,620 --> 00:05:14,760 And let's start actually want to go back to the USS. 70 00:05:18,890 --> 00:05:28,760 OK, and let's start targeting Arnav, I'd never discount the idea of now, OK, you're going to display 71 00:05:28,760 --> 00:05:30,260 this also as Fleck's. 72 00:05:32,230 --> 00:05:39,250 And we justified the content to the Fleck's end and what this will do is this is going to push. 73 00:05:40,490 --> 00:05:44,450 Arnav, to the end of the Fleck's, OK? 74 00:05:45,620 --> 00:05:53,030 Now, another thing they want to do is take my H1 and this is just basic styling and give it a tax chateau. 75 00:05:57,770 --> 00:06:05,640 Of one pixel, one pixel, one pixel and hash, free, free, free, CAYLUS, it's safe. 76 00:06:05,660 --> 00:06:06,410 And there we go. 77 00:06:06,440 --> 00:06:09,740 Now we have a bit of a dark shadow to the total logo right here. 78 00:06:10,870 --> 00:06:19,150 Next up, let's take let's take within our nav ID or items on Ellyse, so nav ally. 79 00:06:20,870 --> 00:06:22,980 And now we're going to position them relative. 80 00:06:24,260 --> 00:06:28,340 They want to add margin to the left of one. 81 00:06:28,700 --> 00:06:29,710 And what this will do? 82 00:06:30,770 --> 00:06:38,680 This will add to the left of each ally a one room margin, so they will be pushed further to the left. 83 00:06:41,080 --> 00:06:50,260 OK, now let's go back in here and let's also give it a padding to the bottom of point, free gram and 84 00:06:50,260 --> 00:06:54,440 then let's change the color, the hash seven seven seven. 85 00:06:54,610 --> 00:06:56,080 This is just a great color. 86 00:06:56,740 --> 00:06:57,210 OK. 87 00:06:58,630 --> 00:07:04,150 So we have this one done, I actually wouldn't take effect because what we need to do is I'm going to 88 00:07:04,150 --> 00:07:04,810 copy this. 89 00:07:05,560 --> 00:07:08,530 We need to give the anchor tags the color. 90 00:07:09,360 --> 00:07:11,480 Of one. 91 00:07:12,440 --> 00:07:20,150 Of this great color, so I could actually delete it from here and let's also give them a letter spacing. 92 00:07:21,210 --> 00:07:27,870 Of one picks up, so I'm going to increase the letter spacing between our navigation items right here. 93 00:07:28,910 --> 00:07:34,360 Nonetheless, we all want to do is when I hover over an item to have a bit of change in the collar. 94 00:07:34,940 --> 00:07:40,580 So let's go back to styling and let's select this again. 95 00:07:41,270 --> 00:07:48,170 And I'm going to say that when I'm hovering over a anchor tag, they're going to change the color to 96 00:07:48,240 --> 00:07:49,580 hash one, one one. 97 00:07:49,880 --> 00:07:51,800 And I can just delete this letter spacing. 98 00:07:52,520 --> 00:07:53,990 So let's try this out. 99 00:07:53,990 --> 00:07:57,220 When we hover over items, see the color changing. 100 00:07:57,620 --> 00:08:01,320 Okay, that's basically it for this part. 101 00:08:01,370 --> 00:08:09,950 Now, the last thing I want to do is we had that select class and what that did is created a on the 102 00:08:09,950 --> 00:08:13,630 line before underneath our first all selected item. 103 00:08:13,650 --> 00:08:15,230 So let's take the select class. 104 00:08:16,040 --> 00:08:19,670 So select and step in before. 105 00:08:21,810 --> 00:08:28,410 Now, as content, we're going to leave it open, there's no money except a string within it could type 106 00:08:28,410 --> 00:08:30,740 in something in here, but we're not going to do this. 107 00:08:30,750 --> 00:08:32,940 We're going to first all give it back background, color. 108 00:08:36,570 --> 00:08:38,580 Of a 777. 109 00:08:38,610 --> 00:08:44,250 That's enough, just a great color that I'm going to give it a width of 100 percent of its container, 110 00:08:44,250 --> 00:08:51,570 so it's going to take up the entire width of the element that it's before a height of two pixels. 111 00:08:52,490 --> 00:08:54,090 I think it could overset. 112 00:08:54,460 --> 00:09:01,150 We can see it just now because we still need to position itself, position it because we have the, 113 00:09:01,150 --> 00:09:05,650 um, to this we had our allies positioned relative. 114 00:09:05,670 --> 00:09:08,610 Now we can position this absolute. 115 00:09:09,710 --> 00:09:17,770 And we're going to position it absolute to the bottom of the element zero, OK, so soon that hit save. 116 00:09:17,780 --> 00:09:18,260 We'll see. 117 00:09:18,270 --> 00:09:24,560 We have this nice on the line here as if this would be the page that is selected. 118 00:09:25,370 --> 00:09:27,130 So that's pretty much it for the.