Kissing this video, we're going to take care of our logo up here and this little button, actually
the entire navigation, so logo and navigation.
But first you probably see that we have something missing and there is a box shadow, which you can
see here at our borders or our well, our borders.
Yes, they are extremely dark.
And this effect is actually achieved by going to Maine and then we're going to create a boccaro.
But this dark shadow will not be towards the outside, but it would be towards the inside of the box.
So when to use the incept this time and we do it by zero zero pixels and then 500 pixels spread and
won her pixel intensity and also use a really dark colored hash one one.
And as soon as we do this and go actually to our website, they go we have this dark border all around.
OK, now let's take care of a navigation, and I'm also going to tell me your coming comment of just
that.
So let's go up here and start, first of all, taking the idea of now.
And we're going to position it relative.
Now, this is very important, if you position something relative, then you can position within this
relative item items absolute and we are going to position also absolute, but let's give our navigation
a width of 80 percent so we don't want our navigation to have the the entire with as you can see here
in our finished project, it goes it still has here and here on the left and right side bit of space
and is why we only displayed it as 80 percent knows it has this effect that the pages on it this large
and are navigations here left and right for the social media and contact will separate from the page
somehow.
So on this, go back to our page.
And now let's give it a height of 80 pixels.
A margins of top and bottom zero and left and right auto now still want to have a bit of a padding from
the top of the rim and I'm going to display it as flex and is because I want to align my two items,
which if we take a look and our index thought e-mail.
Do we have within our nerve we have actually free items, we have an image, we have a label and a button,
and we want to be displayed and we want them to have a flex direction.
But we still have a problem with this bubble and the way we're going to take care of this, actually
taking care of this right now.
So underneath of are never going to target on Navidea again within this the idea idea of logo.
And I want to give this a height of 70 pixels and also a width of only 60 pixels.
So as soon as I do this, then a bubble is small again.
So we have here a button, here's a bubble and here's a label.
And let's position this label at the finish with navigation.
I'm going to line items to the center and justify the content to space between and this is because I
said we have actually free items here because this is one item is the image, the label.
And here's our button.
Now, they have space between them and zero space on the left and right.
So I still want to move that label over our bubble, as you remember and as you can remember, our navigation
is positioned relative, and this means I can position now our label tag.
Also, I could have chosen the lead by debunking to go with the tag and position.
Absolutely not.
Does not suffice to just position something absolute, and we still need to tell it where it should
be.
So I'm going to push it from the left, 25 pixels.
And also from the top 25 pixels.
OK, as soon as we do this, then it's up here, but I want to do a couple of things to this text.
So first of all, I'm going to change its font size.
To one point eight gram.
Not going to change the cursor to pointer and are also going to give it a touch shadow.
There it is, texture of one pixel, one pixel and two pixels and a like dark color.
I guess that's a bit better.
But I still want to change its font family, because if you take a look in our finished project, it
looks a bit different.
So this is the font that we need.
Now we need to go back to to Google fonts and let's go back in here and search for the font family that
I used.
And I think I think it was I telic my term.
I think it was this on.
So they found imported.
I have both of them now, and it doesn't matter.
You can go up here, either you can replace this because now they're both settled, you can just paste
space in the next one because see, we have space plus, uh, godsake plus display case.
The both farm families now mixed in with this.
And the second font family that we just selected is this one item.
For ETM.
OK, so let's go to try to do downtown logo and then to use this font family.
OK, let's say when I see how this looks.
Hey, there we go.
I said that, for example, we could use a.
Ta ta ta ta on the nerve.
That logo class, so let's go back.
And to our e-mail and written here, going to also give you the class of Hober as soon as I do this,
if he hung over our navigation, I can't see it right that my.
I should actually.
Increase.
Yeah, I know what I'm going to do.
What's going on here?
And if we label and hover over it, I'm just going to change the color color and I'm going to go with
something completely whatsoever.
FFA, OK?
And now with Hollywood, they tend to be white.
So the last thing actually, are we finished or we finished with this nasty need to start our button.
So let's grab on to our PTM, because the button has this class of PETN.
And we can go now to success and stardom.
So class of PETN, I want to do a couple of things to this.
So first of all, border, as you can see, our button in this particular moment doesn't have any border.
So let's give it one.
Let's use a border of two pixel solid.
And I'm going to use AGP.
A just a moment, I could use the variable.
Yep, I could use a secondary color, so I'm not going to do this and to delete this and going to say
var and within parentheses.
Going to the secondary color, it's safe and we should have now a border, yay, there you go.
Now for the color of the techs within it and also going to use the VA and secondary color.
OK.
This is going to give this a fact that is not selected, so we need to go over it in order to be selected
and because we had a hover effect to.
Set as a class, or at least I think we did set it as a class class, however, yep, we have it in
here, I now want to change something.
So.
We did have it as a transition when we hover over it, but also when it comes back, so when it's no
longer hovered, it needs to have this transition of ease and the time we and if we hit, save and go
over it, it has the same effect as if we hover and hover up.
Now, listen, I want to do through this button is take care of the border area, so this is a bit too
small for me.
So it's just going here to select a border radius and go with twenty five pixels.
OK, as soon as we do this, we have this nice rounded up border.
Now, I also want not only the text to have this hover effect, but also the border.
For this, we need to take care of our bit and and in the hover state, going to the border and give
it the same color as as if we would hover over it.
Says we have here to the job.
There's a horrified with this, so actually you just need to copy this.
Let's go completely down to a hover and a sea borders, but it should increase is with.
And solid and the color.
Now, if you hover with the border, also has that hover effect.
OK, next, I want to say something to the button beside of the holler state, we could also have an
active state.
Now this state is when we click on the button that does go to the button.
So I click on the button.
Something something should happen because I'm clicking, but I'm not seeing anything happening.
Normally, you would then get a login form and sign up form.
But I also wanted to have just a tinge of an effect.
Now we can achieve this by going and creating that active shooter selector.
And first of all, let's we're going to a transform skil point.
Ninety five percent actually is just going to scale to 95, not 95 percent, but to 95 percent of five
percent off.
And I also want this to have a transition of point three seconds as we head on the hover effect.
So if I click now on the button, you see it shrinks down five percent.
All right, so that's basically it for the navigation and the logo.