I guess starting on Heather, where we actually also will have our logo and our navigation, so let
me get started with Heather.
Take this typing, Heather.
And within our heart attack, our personal goal is to create a class A not a class, but a divide with
the idea of logo with the logo.
Dave, I will have an anchor tag with an issue that will go basically nowhere.
So just hash and then I will have an each one with a span tag within it and within the spending, I'm
going to type in the initialism and not be thought and typing.
Whatever you want, obviously.
OK, so we have this set up.
That's it for logo underneath your logo.
Going to create a NAFDAC now.
Is just the generic tag for the navigation.
Within on NAFDAC, I'm going to create the USA in on at least with an idea of NAFS or hash and you'll
hash.
Now this will give you a little idea of NAV.
And within here we're going to create a ally and after that by using the plus sign.
Going to include actually not the plus side, but.
The crater then went to include the anchor desk and I'll get to multiply this by four, so let's see
what we get.
Now I'm going to multiply everything, so I need to have it in parentheses by four, so four, I need
to get four allies with integrated anchor text, not the first one, actually.
All of them will go nowhere.
So just hash.
But the first anchor tag is the first, and I tag that, I just jumped on the first flight, I will
also have a class.
Let's give it a class of selected or select.
And I walked in here with our anchor tags.
I'm going to type in your news then.
Artists, let's say.
Then production
and the last one will be information.
OK, so well, that's basically it for the e-mails before for the mock up.
Now let's go in Tostadas SS.
But first, let's take a look at what we just created.
There we go.
So we have our logo up here and we have our navigation down here.
Now, another thing that I want to do is take out in the general setting.
So in the start up here, I'm going to take out all of the tax decorations and all the lipstein.
So tax decoration went to sell it to none and also less time to close it up, Liz style.
You're also going to sell it to not.
And before I hit Save, let me show you something.
So you see this on the lines and the dots, there is what we are going to take out.
So after we hit Save, you see there are no more underlines and no more dots.
OK, first things first.
This is a perfect example where Fleck's differs from GRET.
I would never use a grid system on a navigation, basically, because sending it as flex is much easier
then set it as grid.
You have a basically doubled my work force, triple the amount of work I have to do on a grid navigation,
on a grid based layout, navigation, then on a flex based navigation.
So let me show you how simple this is going to grab onto the header, going to display it, first of
all, as flex, then I'm going to justify the content center and align all the items to the center.
And as soon as I do this, I see what we have here, a nicely laid out flex.
So the two items are flexing in a row because flex, flex in a row automatically and then we have a
finger centered.
Now, we're not done yet.
So let's go back.
And also need a bit of additional styling, so let's give it a padding of top and bottom one ram and
left and right zero and also a border to the bottom of one pixel solid and a hash of one on one the
dog collar.
OK, we have the save and there we go, there's a ball to the bottom.
Now let's take a nap on hashtag.
Let's see, never.
And we're going to get this a width of 100 percent, that this would just take out 100 percent of the
container it is contained in the NAV was actually contained.
We go back to our estimate in our head attack.
And I was going to take up the entire width, but I still have this slow going thing here.
So let's go back to our success.
And let's start actually want to go back to the USS.
OK, and let's start targeting Arnav, I'd never discount the idea of now, OK, you're going to display
this also as Fleck's.
And we justified the content to the Fleck's end and what this will do is this is going to push.
Arnav, to the end of the Fleck's, OK?
Now, another thing they want to do is take my H1 and this is just basic styling and give it a tax chateau.
Of one pixel, one pixel, one pixel and hash, free, free, free, CAYLUS, it's safe.
And there we go.
Now we have a bit of a dark shadow to the total logo right here.
Next up, let's take let's take within our nav ID or items on Ellyse, so nav ally.
And now we're going to position them relative.
They want to add margin to the left of one.
And what this will do?
This will add to the left of each ally a one room margin, so they will be pushed further to the left.
OK, now let's go back in here and let's also give it a padding to the bottom of point, free gram and
then let's change the color, the hash seven seven seven.
This is just a great color.
OK.
So we have this one done, I actually wouldn't take effect because what we need to do is I'm going to
copy this.
We need to give the anchor tags the color.
Of one.
Of this great color, so I could actually delete it from here and let's also give them a letter spacing.
Of one picks up, so I'm going to increase the letter spacing between our navigation items right here.
Nonetheless, we all want to do is when I hover over an item to have a bit of change in the collar.
So let's go back to styling and let's select this again.
And I'm going to say that when I'm hovering over a anchor tag, they're going to change the color to
hash one, one one.
And I can just delete this letter spacing.
So let's try this out.
When we hover over items, see the color changing.
Okay, that's basically it for this part.
Now, the last thing I want to do is we had that select class and what that did is created a on the
line before underneath our first all selected item.
So let's take the select class.
So select and step in before.
Now, as content, we're going to leave it open, there's no money except a string within it could type
in something in here, but we're not going to do this.
We're going to first all give it back background, color.
Of a 777.
That's enough, just a great color that I'm going to give it a width of 100 percent of its container,
so it's going to take up the entire width of the element that it's before a height of two pixels.
I think it could overset.
We can see it just now because we still need to position itself, position it because we have the,
um, to this we had our allies positioned relative.
Now we can position this absolute.
And we're going to position it absolute to the bottom of the element zero, OK, so soon that hit save.
We'll see.
We have this nice on the line here as if this would be the page that is selected.
So that's pretty much it for the.