So now what I'm going to do is that I'm going to work on the design of the navigation bar.
So for the navigation bar first I'm going to open up this style that's easiest.
And in the style of the case, I'm going to first start working on the knife bar.
So if you check the if you check here the index, you will find that we have here a class called Navarra,
which is a bootstrap class.
I'm going to be using it to edit the design further.
I'm going to say nav bar.
And then over here, I'm going to change the following.
First, I'm going to change the font size.
So the font size of the bar font size.
So the font size is going to be 16 pixels.
And the padding I'm going to add some planning to the planning is going to be, to our end, important.
And I'm going to change also the banning.
Banning, ma'am, day banning.
Think about it is going to be also to R.E.M..
Important.
And for the top and left will be zero.
The top is going to be zero.
On the left is also going to be zero.
Maybe now refresh.
And there will be more space.
Next, I'm going to walk.
Here on the the remember we have here in the index you'll find that we have the map light now more light
and we also have the nav link.
So I need to access the nav link because I want to edit this balance redesign of these lines.
So to access these buttons, we can see here that nav.
Bar lights and then.
Dot now.
Bar now.
And then.
Dot nav link.
So for the novel link, which is this now link for these buttons.
The design is going to be like this.
First, I'm going to change the pattern.
I'm going to say batting, batting.
The batting top and bottom is going to be zero, whereas the right and left is going to be 20.
And for the color change that I'm going to change the color to black color.
And the transition.
Transition point for is.
So what is the transition?
The transition is just a.
Point 4 seconds.
So the transition is just an amount of time where the the the element will pass through that time in
order to be displayed completely on the screen.
So it's going to take these balance point four of a second to be to be completely displayed on the screen.
It's not not really not noticeable, but the but it adds an effect that will make the website look amazing.
You will find out later.
You'll find that shortly.
Next, I'm going to work on the the hover effect of the of these planets.
So if I if I have our offer to these planets, I need to display another color.
Therefore, I'm going to say here that you need namely, copy this instead of repeating all of this,
I'm going to copy this.
I'm going I'm going to sit here and instead I'm going to say here, comma.
And then I'm going to say.
Not now.
Bar.
I.
However, and also for the balance.
I'm going to say comma.
And then I'm going to say hang your link and then not active.
And also here for the for the link itself, I'm going to say hover.
So for the hover and then comma and then for the I and also for the active and also for the dot nav
bar.
I hover.
So this for the half hour.
For the link for the links for these links for these links and also for the eyes or the eyes as well
as the active or the active.
And for the year here, the year, by the way, I have this twice.
I should I should say here we need to remove this column.
So here only now more active and then that number.
So the color is going to be.
The coral.
It's a orange color.
Let me now refresh and show you.
Now, if I hover over these buttons, recall color will be.
Will be.
Orange.
Which which looks amazing.
Next level, let's work on the AI, which is which is these when you add some space because as you can
see, they are very close to one another.
So we need to add some space to add some space to these.
I'm going to say now bar AI and then I'm going to add first I'm going to change the font size.
So the font size is going to be 1.2 our M.
And I'm going to also change the batting and the transition.
So the batting the batting is going to be top and top and bottom and point seven pixels, right or left
for the transition.
I'm going to have that transition.
So the transition is going to be point or seconds is.
And then finally I'm going to add a font weight and cursor.
So font.
Wait, wait, wait.
If one tweet is going to be 500 and the cursor cursor pointer, because I want to whenever I have,
I always wanted to be.
Sean.
So as you can see.
Here.
If I hover over it, it will be different in terms of the color.
And by the way, if you want to wait, if you remove the font weight and refresh from back, it will,
as you can see, it will be filled.
And if you add the font weight and refresh.
The they will be they they will be empty.
So you can add to the color.
You can add the color by just removing the font weight if you want.
Finally, I'm going to increase the space further.
So I'm going to add some space here.
I'm going to say margin margin left.
So the margin left is going to be five feet x.
And let me refresh.
And as you can see, there will be some space.