Original subtitles

In this video, what we're gonna do is build out our landing page.

So let's remember exactly how our landing page looked like.

So we had the nav bar.

Then we had this H1 header that's just says, Welcome to restaurant Li, which is our application.

And then we had a button or a link that will allow us to navigate to the list of top 50 restaurants.

So very, very simple landing page.

So let's actually go ahead and begin with the nav bar.

Now, the that bar would be a relatively complex and cumbersome thing to build ourself.

But we are actually going to utilize bootstrap for this, and you're going to see how much easier it

is going to be.

So let's actually go ahead and like usual, what we're going to do is we're going to create a component

folder for this.

So let's go over here.

We're going to say components.

And then over here we're going to say nav dot view.

And let me go ahead and rename that to nav dot view.

So over here, we're going to house our component.

We're going to have our template tags like.

So now what we're going to do is we're going to go to bootstrap right over here, and then we're going

to go to the components section inside of the component section, and we're going to click on NAV Bar.

Once we click on NAV Bar, you're going to see this nav bar right over here.

And this is actually the one that we are going to be utilizing for our North Bar.

So I'm going to go here.

I'm going to click copied to Clipboard to just get all of this code, and I'm going to go ahead and

just paste it right over here.

Now, what I'm going to do is I'm going to get rid of this container.

And over here, I'm just going to say hello, get rid of that as well.

And then I'm going to render that nav bar.

So I'm going to go ahead and render that nav.

So let's go over here.

And as you can see, we have our wonderful nav bar.

Now, of course, there's quite a bit of things that we need to change.

So the first thing that I want to do is I want to change the color of this.

I don't want it to be light.

I would rather it be dark.

So to do that, what we're going to do here is we're in the NAV Tigre over here.

You can see there's a bunch of classes.

We're going to specifically focus on these classes right over here.

We're going to change this from nav bar light to nav bar dark and from big light to big dark.

That's pretty much all we need to do to get it nice and dark.

Now, over here, there's a bunch of different elements that we don't need.

For example, this button here, we can completely get rid of it over here.

Let's go ahead and use this anchor tag and we're going to keep this as home, but we're going to this

should redirect us to slash right over here.

This should redirect us to restaurant.

So we're going to say slash.

So restaurants here.

So over here it's going to be slash restaurants like so.

And then over here I think we can remove this whole l i let's get rid of that.

Let's get rid of this ally and let's get rid of this form entirely as well.

So now you should have enough bar that looks a little something like this.

So the last thing that I want to do is I want to add one more style in order to move this bar right

over here all the way to the left.

So in order to do this, what we're going to do is I am going to go right over here to this ul this

housing these allies, and I am going to call this margin l auto.

So margin left auto.

No, I don't believe that's an actual tag inside of bootstrap.

So what we're going to do here is we're going to manually say margin left and then auto.

So what this is going to do is it's going to move it to the right as much as possible so we can go ahead

and save that.

And there we go.

So you can see now we have our nav bar and when we click on these specific links, you can see it actually

redirects us to slash restaurant.

So if I go here might be a little bit too small for you guys to see, but I just copy the to the clipboard.

This is what it redirected me to.

And then when I click on like nav bar or home, then it's going to redirect to me.

Will actually over here with the nav bar.

We got to change that to slash and honestly this go ahead and change this to restaurant.

Lee Keep in mind, restaurant is kind of a tough word to spell, so make sure that you're spelling it

correctly, especially on these right over here.

So make sure that you spell that correctly.

So let's go over here.

And now if I click on this, you can see maybe very faintly that it's going to redirect us to the home

page.

So that's pretty much it.

So now we've got our nav bar.

Now what I'm going to do actually is I'm going to create a div and inside of this div I'm going to create

a container.

I'm going to style this container manually as well.

So I'm going to say container.

And then over here I'm going to say this is going to have a text, a line of center, and I believe

that should be really it.

Now, right over here, we're going to say H1.

We're just going to simply say welcome to press to Toronto the like.

So so there we go we have our nice header.

Obviously not the prettiest application in the world, but whatever we're here to learn not to build

beautiful applications.

So let's give it a margin top of around five rims.

I like that a lot.

And then right over here, let's also add another anchor tag that's going to take us to restaurants.

Keep in mind, again, try your best to spell this correctly.

This is a difficult word to spell.

Restaurants.

So restaurants with an S.

Then over here, go to restaurants or whatever.

Like so.

Okay.

So that's pretty much it for the landing page.

Now, over here, we can we can click on it.

We get redirected to slash restaurants.

However, of course, the page is staying exactly the same.

So now what I want to do is I want to have the ability to have multiple pages in my Nux application.

We're going to explore exactly how we can do that in the next video.