Welcome back in this lesson we're going to use bootstrap to create a landing page for a fictitious startup
.
Our startup is called Perfect match.
Very funny.
I know it's a human feline dating app and I'll leave it up to you to interpret what human feline dating
is it might be relatively innocuous it could just be matching Sheldrick cats with lonely humans could
be something else.
I don't know.
Let's get started by doing a quick tour of the site and write to her.
I really just mean pointing out a few features.
There's not much here.
We don't actually have this hooked up it doesn't do anything yet.
So it's really just HD mounseers s but that's all that we've covered so far.
So we have enough our perfect match home about incontact lengths.
They don't actually go anywhere sign up and log in on the right side two little icons there we get her
hamburger.
I can click on it.
All of those links are now inside that hamburger.
Then we have a big background image that stays centered and it covers the entire background.
So in the middle we have the name of our start up perfect match with to ours and then we have our caption
The only human feed on dating app.
And then we have a little H R here horizontal rule and then a button to get started with an icon.
And as I shrink this it all stays in the middle and it also moves up a little bit so that we don't have
some sort of awkward layout on your mobile device where the text starts halfway down the page.
So we move it up a bit and it stays centered.
This layouts really easy to do and bootstrap but it's relatively effective for landing page.
All that we have is a single column that takes up the entire width.
So this column goes 12 units across.
We're not dividing it up into any sections just to one column 12 units across and then we center everything
inside of that column.
So let's get started.
First thing we need to do is make a file.
I have one called index at DML.
I'll add this in my regular boilerplate perfect match
and then start by adding in Bootstrap and I'll use a CDN
Bitstrips CDN.
Let's do the SS and Javascript out here.
We will need that javascript for the taskbar.
So we need to link tag.
Then we get the javascript.
Copy that.
Put this down at the bottom which is a script tag and then we set source equal to that you are.
Now if we open this up OK open up the console we have a small problem which is that we need Jay query
as well in order for the bootstrap javascript.
Remember back from the nav bar lesson we need to require J.
Querrey.
So we'll get a CDN for that.
We'll do the modified version.
Copy that URL.
And finally we go back here and we have to do it before the linked to bootstrap to the javascript.
Otherwise it will still not know about your query so it needs to load the query first.
Now let's try again.
Fire refresh.
OK we don't see anything that's a good sign because we don't see any errors.
Let's begin with the text in the middle.
All this content here.
So we need to create a container and then inside the container we need a row to div class ECOs container
and then inside of there we have another div we always need that row.
Anytime we're using the grid system and then our div that's going to be class equal to column dash large
12.
And that will span all the way across that container.
And then inside if they're going to have an H1 that will just say perfect match and save.
And let's leave it at that refresh.
And it's not really what we want yet and that's because there's a few things we need to do.
The first is that we need to center everything in that column.
So if we inspect what we're dealing with here you could see that the H1 goes all the way across and
we just need to center it inside of that.
And the second is that we need to push it down a bit.
We need to add some padding or margin so that doesn't go right to the top of our page.
Let's start by adding in the rest of the content.
So we also have the only human feline dating app and that will just be an H 3 and we could really play
with that could be any element that we want but I'll make it an H-3 the only human dash feline dating
app.
And then we can add in that horizontal rule which won't look like much but we'll style it after the
fact and then we'll also add in a button in the class on that button.
We take a look.
This is a bootstrap button default and it's a button large.
Let's go back.
So we need PTEN and then the color default and then the size between LG for large and in here we'll
just add the text which is get started
and save let's see what we end up with.
All right.
So we have our content now next but Center inside of the grid.
And then we'll focus on the padding and moving it down.
But to start with the center inside this grid and to make that easier I'm going to group it all inside
of a div so that we don't have to center each thing individually.
We have to center the H-1 and then the three and then the button rather we can group in a div and just
Center that div with one line.
Let's make a div and I'll give it an ID of Cantet and then we'll put everything inside of there.
So the H-1 the age 3 the H.R. and the button will properly indent and save.
So nothing should look different if I refresh the page before we do that let's add in our style sheet
.
So I added a link tag and I'll call my style sheet app.
SS It doesn't exist yet.
So I need to make it save it.
I see SS in the same directory.
And let's start with something simple like all h ones are purple.
Just to make sure it works OK.
Let's go back refresh.
Andrew get a purple H-1.
Great.
So now let's select that Dave we added with idea of content and center it.
So get rid of that and we need an ID content and omitting to do is text align Center.
Let's go back.
There we go.
So things are Center aligned to now.
Next we'll push this down a bit 25 percent down the page to be exact with padding equal to 25 percent
.
So in here we'll do padding top 25 percent.
And rather than giving it a hard number of pixels if we keep it as a percentage it's a little bit more
responsive.
So that's right in the center.
And then 25 percent changes as we resize the screen.
Great.
Now let's add in the background image.
So the image that I'm using is adorable cat and human interaction going on here is from this on Splash
Web site which I introduced in the last video where we created the bootstrap image grid.
And they have all sorts of really great high quality images that you can use without any issue.
And the one that I use is right here I search for cat links in that description as well.
Here's the you Aro of this image just right click copy the image you are l.
Now let's go back and I'm going to add it to the body as a background image.
So background and then give it a URL which is that giant You are right there.
And if we leave it at that it's form at this level or refresh we get a gigantic background image and
all we can tell is that this is some sort of startup for fingernails.
So we need to resize it and to do that we use background size and change that to be covered afresh.
Again we're getting closer.
This will make the image as small as possible while still covering the entire width and height of the
screen.
So it won't change the aspect ratio it won't skew the image in any way but it will stretch in both directions
as much as it needs to.
But the minimum amount that it needs to to fit on our screen and it's still not perfect.
And what we want to do is not change the size of it but change the position.
We're going to center it background position center but save that we're closer.
But it's still not a perfect match as far as the image goes.
And those changes will come later.
For now I want to focus on adding in the nav bar and to do that when you go to the Boucek docs and go
to components and I've mentioned this before.
I always do this if I'm adding in a bootstrap nav bar.
It's just too much stuff to remember otherwise.
And I just copy this right here.
Will take the entire nav to start go back to our app here and just put it right at the top.
This is definitely not the NAF that we want but it contains the pieces that we want to refresh.
It's close enough.
So there's a few changes we want to make.
The first and easiest one is that our content on the solution is in a container so it doesn't go all
the way to the edges like it does here.
So we can go back and inset or are we just change this to be div class container and if we go back now
you can see that because we added in that container we now have some spacing just like we do over here
on the solution.
Now let's get to work on the actual content of the Nev..
So the easiest thing is to change the brand which right now just says Brand back in here this line class
equals neth bar brand and we'll change it to per fixed match and save.
Try it out.
OK good.
Now let's get rid of this form.
We don't need this at all.
So our form all starts right here.
Get rid of that entire thing refresh.
Let's also get rid of the dropdown.
You don't need that.
So that starts right here.
This lie that ends there
are fresh again.
Now we have a single link.
So we'll start with these two links which are supposed to be sign up and log it.
That's this link right here so we can change that one to be sign up and then duplicate it.
Just an ally with an anchor tag inside of it.
And this one will be logged in.
Let's check it out.
Great.
So the icons will come at the end.
We have the two links.
Now we need three links here.
We already have two of them and we'll get rid of that dropdown.
So we need home about in contact.
So a locate that dropdown which is right here.
Class equals dropdown.
Let's get rid of it and are now Akbar's simplified a lot.
Now we have two different lengths.
We'll actually get rid of both of them and do it from scratch.
So we'll add in one ally with an anchor tag and then we'll do that three times.
This first one should say home.
The next one is about.
And the last one is contact.
Let's check it out.
There we go are three lengths.
One minor thing.
Home is supposed to be active and a bootstrap that's really easy.
All that we have to do is add class equals active to the ally not the anchor tag but the parent ally
and now we end up with home being the active link.
Great.
OK so that's our nav bar and if we resize you'll see that we already have this hamburger working just
fine.
We do have a problem which is that our background image is messed up.
We'll cover that in just a little bit but we have the hamberger working fine.
Everything looks good.
Now let's address the font so the font that I used over here is Ledo L.A..
It's from Google fonts so I'll go to Google fonts and look for Ledo.
LA T-O every go to collection.
Let's use it if it will get normal and bold.
Also we want our H-1 to be bold.
Okay.
And then we'll add this link right into her application.
Up top here save now enter apps The assess we're going to apply that font to everything.
So I'm going to select inside the body font family is Ledo and let's make sure that it's loading correctly
.
See what we have refresh.
And our front changes it's hard to see because the text is dark but changed you can also see it on the
NFR here.
It's changed.
It matches what we have in this solution.