So now it's time to work on the user interface and I'm going to start off by working on the navigation
bar, so what I'm going to do is that I'm going to get the navigation bar here with the help of Bootstrap
that's going to display the icon of the website, the icon.
And if three buttons or three, three, three taps and also here, phone number and stuff like that,
let's get started.
So I'm going to hand over to my project and then in my project, I'm going to remove this one.
And instead of this, each one, I'm going to keep it here.
I'm going to create your header.
And this here is going to represent the navigation bar.
And inside this inside this.
Hey, there.
What I'm going to do is that I'm going to create here now.
Now and I'm going to give this nav, first of all, I'm going to give me idea this just Gloster this
one, so that there is no space.
Now, I'm going to give this NAV a class called now, which is a now, which is about strophic plus
and also another bootstrap class called NAV Bar.
Now for expand.
Eley and Navar Dark, which is going to make the navigation bar have a black color and be the dark.
So this is going to make the navigation bar, uh, uh, uh, have a black background, a black background
color.
So let me add this side by side and let me refresh, and as you can see, it's still in the the process
of development.
So let's continue here.
I'm going to here in this Navar.
What I'm going to do is that I'm going to add a link.
I'm going to say A and then I'm going to give this a HSF.
And the riff is going to be index, that female, which is going to which is going to point to this
page to the same page.
So whenever the user clicks on it, it's going to go to the same page, to the home page.
And I'm going to give this a class also.
I'm going to take class.
I'm going to give this a class pool left to pull this to the left side.
And I'm going to also say visible.
In the and visible elision.
Ali, and these are bookstop classes, these are the visible it's going to make the attack visible in
on large, larger screens and also also medium sized screens, the pool if is just going to pull it
to the left side.
And then inside that nav bar I'm going to hear come over here and then inside it, I'm going to get
it if I'm going to say there and then this is going to have an ad called Logo Image.
Which is going to display the image they log off their website, I'm going to say logo image and here
in case the image is gone, for some reason I'm going to say alternative alt logo name.
And this is for the attack below this attack, I'm going to give you another attack, I'm going to say
attack it and then glass.
Now.
Barr runs.
Now, Barbara, and again, the the trip is going to be is going to point to the same pitch is going
to point to the speech index that Archdale.
And inside it, it's going to display the name of the website, so inside this, I'm going to say each
one.
And then I'm going to say.
My race over Hristo.
Ron, my awesome.
Here you should display your restaurant name, and this is foreign aid.
Let me save if refresh now.
And as you can see here, it says, my restaurant.
Of course we need we still need to work on this.
We need to work a lot less to make this look amazing.
Finally here, before we get the the DAPs or the buttons, I'm going to get a button that's going to
that is going to whenever this whenever the screen is small, it's going to hide the buttons.
So I'm going to say here.
Button.
And then class.
Now.
Ba.
Tongala.
Type.
At the time is going to be button is just going to be about and it's going to look it's going to do
something about it and also the data be s don't go.
Tongo is going to be equal to collapse because we want to collapse, we want the media to collapse.
The only way this is going to be very clear shortly when I, uh, tested with you.
Data, again, database.
Target, so the target is going to be.
The database target is going to be bar, this is very important, it must be here, it must be exactly
the same.
If you have a mistake here, it's not going to work.
So be careful.
Data B.S..
And then target and then the target is going to be, uh, hashtag thing now bar.
Now, again, make sure that the syntax is correct.
Make sure that this building is correct.
And this is for this part, for this button.
Let me close this button.
And then inside it, I'm going to say here, inside this, I'm going to say spane and then I'm going
to give this I'm going to give this man a glass.
Glass.
NAV bar.
Now, watercooler icon.
Eikon lamanno, save and refresh, and as you can see, this is going to display all of this, God is
going to display this button and this button is going to toggle is going to show and hide the buttons
that I'm going to create later.