All right, let's get going here now, the first thing we want to do is change this.
Hello to.
Well, the biggest startup event of the year.
Very dramatic, I know.
So let's do that.
I'm just going to say the biggest startup event of the year.
That's right.
OK, let's save so I'm doing commands or if you're on Windows controls and then refresh commander or
if you're on Windows control, are.
All right, there we go.
That's great, we also seem to have a button that says find out more.
So let's do that as well.
We'll say button, find out more.
There we go.
If I refresh here, there you go are startup landing page is, well, frankly, still looking fairly
ugly.
Now, the next thing we want to do is we want to have this background image.
But before we get to that, I want to talk a little bit about how we can set up our HTML page so that
we have a good, responsive design.
So right now, nothing much is going on.
You can see here that I can adjust the screen size, but we don't have much happening on our page.
So if we go back to the bootstrap documentation in the QuickStart guide, if I scroll all the way to
the bottom, you see that I get a starter template here.
And you might notice here something that we haven't seen before, which is this part over here called
a required Medhat tag.
And you can see here that this is actually something that we can copy and paste and place right below
our title here, just like that.
Now, let's make this a little bit bigger so we can see.
And I'll make the writing smaller, just so you can see over here exactly what's happening.
So this meta tag allows us to.
Add new information to our e-mail page, and there's different things that we can provide now in most
websites, you'll actually see these two lines very often.
As a matter of fact, it's recommended that you always add them.
Now, what exactly do they do?
Well, if we scroll down here, you'll see that we have the responsive MEDITECH.
Essentially, this line here, which says viewport allows us to create web pages that are developed
mobile first.
That is, we let the page know or the browser know that this page should work on mobile devices and
things like scrolling or touching or zooming on a mobile device is going to work with this debt.
Now, this is something I'm going to leave for you to learn more about, and it's something we'll talk
about later in the course.
But these attacks are just useful things to add to our projects any time we create a new page.
And then finally, this top meta tag uses UTF eight encoding.
Essentially, it's saying, hey, we're going to use this form of encoding to write text on our pages.
Again, something that, if you're curious, you can read up on your own.
But now that we've set this up.
So that it's good for mobile as well, let's try to include this background image into our page.
Now, when it comes to background images on a website, that's a very common thing, you'll see a lot
of people adding background images to a website or maybe patterns or some sort of.
And when a common problem happens, I always like, well, Googling, and one of the first things that
you'll encounter is this perfect full page background image by Strix, which we've seen before.
Now, if you scroll all the way down.
It tells us a way for us to make sure that we use the image in a full page background so that it stretches,
it flexes as the view port changes.
Now, over here, it actually gives us a copy and paste way that we can use it ourselves.
So I'm going to just copy this.
Go to my style page.
And just add this.
Now, you'll see over here that we're using background over here with the euro, so we want to adjust
it to heter jpeg because that's the part of the header.
And the key here is these lines, it's saying, hey, we don't want to repeat the image, we want you
to keep it centered and we want you to keep it fixed.
And by using this line, it stretches or at least it fills the entire page with our image.
And as long as we have background size as cover, well, let's see what happens.
I'm going to refresh.
Hey, and look at that now I have this image.
Adapts to our page.
But the cool part is if I open the developer tools here, let's say view developer tools.
You'll notice that the image actually bumps up so that the center of the image wall is always centered.
How cool is that?
So this is a very useful trick to have your background very flexible.
All right, so we have our background.
Unfortunately, our writing right now is hard to see the button still kind of ugly.
So let's fix a few things in our e-mail page.
Now, remember, we have bootstrapped so we can start using some bootstrap classes.
Now, one thing that I want to do is with this one that I want to maybe use a strong element to emphasize.
The header, so make sure we close this and I'm going to make this bigger, just so you can see and
if I refresh.
All right, that's emphasized a little bit more.
We also want to make sure that this H1 tag we can actually see so we can go into our Stolle.
And just create a new each one style that will have, let's say, a font size.
Of, let's say, three RTM, and then we'll give it a color of what should we do here?
Well, one thing that I always like to do when I'm trying to figure out what color I want is to.
Go to a page, let's say, like the start up over here, open up the developer tools.
Make sure this is a little bit bigger so we can see and then find some more on the page where you have
this color palette, if I actually click on this and among Chrome.
Look at that, it opens up a little color palette for us so I can actually move around things and grab
the hacks of the color that I want.
In our case, I want the color to be well, let's find out how can I copy the color of this page?
I can just click on select an element, this little icon here.
And then if I hover over this, look at that.
It shows me exactly what color this element has.
You can see over here that this is the hex color.
So I'm just going to copy that, come back and paste it in.
Now, if I save both of these files and refresh.
That's much better.
I like that a lot.
All right, we're making progress with our page.
It's getting closer, but we still have a lot to do.
So let's take a break and I'll see you in the next video.