Now let's change the text color of the H-1 and the age 3 right now is that dark default bootstrap color
will go in here and we could do H-1 color white and H-3 color white and refresh.
And we get white text just like that.
But we can also do though is combine these two because they're identical and do H-1 comma H-3 and that
will make both of those white.
Whenever we have a comma it just selects different groups.
So all the twins all age threes and it looks exactly the same.
But we can even simplify this more and just assign everything in the body to be color white.
And you might think there would be a problem might change or button might change or nav bar but remember
that those are more specific.
We have classes from Bootstrap that are doing that versus these are just plain H-1 and H-3 they don't
have any classes or IDs and they're easier to override with their own styles by setting the body color
to white the H1 and the age three inherited that color and everything else did as well.
It was just overridden.
So if we inspected let's say this button and we take a look.
When we select it and you see that color is set to this color is 3 3 3 by the class Button default.
But if we keep scrolling down you'll see that the body right here set color to white and it just happens
to be crossed off.
All right.
So again that said both of them to be white.
Now let's work on the font size.
So are H-1.
We want it to be folded which it's currently not.
So that needs to be bold and I want it to be 5 cms which is five times bigger remember than the parent
element so we'll select each one and we'll give it a font weight
of 700 which is how we use the bold refresh.
You can see it bold.
Now let's also make it much larger so font size 5 E-M.
Now go back and there we go.
So that's looking closer.
Now this ratio between the H1 and the H-3 looks exactly the same.
We don't need to do anything to the H-3 must now get the image to behave the way that we want it to
.
And to do that I'm going to show you something that we haven't seen before.
I'm going to move the dark to the right side and if I inspect the aged him out element or the body they'll
see that both of them stop before the end of the page.
So about right here.
That's the end of the age to my document.
So when I tell my image to cover the body and I said it's background size to cover and background position
to be center it takes into account the size of the body and when the body ends right here it behaves
differently.
What we'll do to fix this is give the HTL element a height of 100 percent which means take up 100 percent
of the container which is just the entire document window.
Male height 100 percent and we'll go back.
Let's make it full screen now and refresh.
And our image works the way that we expect it to and I shrink down.
And that looks good to me too.
Now we have two main things left to focus on.
The first one is the H.R..
It's way too wide for us supposed to be a lot smaller.
And then I also want to focus on the font here.
Well start picking the artwork and all we want to do is give it a with of 400 pixels.
So in our C Ss We'll select h do it at the bottom with is 400 pixels.
There we go.
Another thing that I'll do that's a little bit sneaky that you may not have noticed as I'm going to
go in here and give it a Forder on top.
One pixel solid.
Then they have a color here which is f 8 8 8.
And then a border bottom as well which is one pixel solid and this will be a transparent color.
Zero zero zero zero point two.
So this won't give it the effect of a shadow.
So pay attention.
It's really hard to see.
I don't even know if I will pick up on the screen cast but what we have is a border and then right below
the border a light gray line that makes it look like there's a slight shadow it shows up a little bit
better over the lighter colors.
OK.
So you can't see that enough if trust me or you can get rid of the background image and it'll be easier
to see there as well.
Next let's focus on the icons which I used fun awesome for.
So I have it open.
Fun.
Awesome.
I know.
And we'll just get the CD in here as well.
If you click on get started there's a CDN that you could just copy there.
Put that in our application and also just do that up top save and then we'll take a look at the actual
icons.
And the first one that we know that we used is a PA.
And to do it all we need is high class ECOs F A F A dash PA.
So I put that inside the button.
So if we go to the button right before I get started I added that in.
Now if we go back and refresh you can see if we have a little button there and we have a palm print
next we have two icons here for sign up and log in.
And those two I remember what they are.
I'm just going to do that here next to sign up after we write up know you want to add in another icon
.
Except this time class is not F-8 PA but F.A. dash user dash Plus which gives us that icon with the
plus sign and log in is the same thing without the plus.
So a dash user and we have those two icons.
There's one other thing that I did that you may not have noticed which is the text shadow.
So there's a shadow around all the text here and see it there can see it over here.
It's around the H-1 and the H-3 and tech shadow is something we can set with the SS text dash shadow
.
And there's kind of a lot of pieces to it.
So you can see here we're sitting the offset X the offset y.
So how far away from the words should the shadow go.
Then we're also setting the radius of that blurs So basically how thick should it be.
And then the color and the shadow that I'm using is a little bit complicated.
There's a lot of pieces so I'm going to go and type it one piece at a time in the CSSA file.
So inside of the content div will add text dash shadow and then the first one will do.
Zero pixels 4 pixels 3 pixels and I'll make it really obvious to start by making it red and if I refresh
there's the shadow that we're adding first.
Now go and add the second one with a comma and indent a little bit and then we want 0 pixels 8 pixels
13 pixels and then onto orange here and take a look at that one.
You can see we have this more blurred one underneath it's bright orange and then there's a third shadow
which is 0 pixels which remember this first number is the X offset and then the y offset 18 pixels and
then 23 pixels is the radius and we'll make this one yellow
and we can see we have the bright red titre shadow.
And then the orange one that's a little bit further away.
And then the yellow one that is a lot more blurred and a lot wider.
So we want to change those colors.
We don't want to be working with that.
So the colors are a little bit less exciting.
The first one.
Zero zero zero zero 0.4.
Next one very similar instead of 0.4 0.1.
And then one more that's also 0.1.
So using R.G. B-A we're just setting different shades of gray.
And there we go.
So much less exciting but hopefully you can still see it here.
It's a lot more subtle but it just adds a little bit of depth to the page.
Great.
So that's all we need to do.
Let me go back and just wrap a few things up.
The big point I want to make here is that we can use bootstrap and rely on it but we're not relying
on all of its styles.
So yes we kept the nav bar the same although in the last video I showed you how you could change the
nav bar color but we changed the fonts we added background images.
So we really just use bootstrap as the underlying foundation and then we add in all the styles on top
and it didn't take much.
But I think we made something that looks relatively respectable with just a few lines of code.
And let's be honest half of all fat this one text Shadowline right there.
Awesome.
So we made the site looks relatively good.
We're done with bootstrap for now.
We're then moving on to Javascript in the next unit which is really exciting.
We will be moving away from creating sites and things that look nice for a little bit just so that we
can focus purely on Javascript.
But then we'll bring everything back together and make some beautiful sites that actually do things
that don't just look nice.
So that's coming up soon hopefully enjoyed bootstrap enjoyed this unit.
And as always I recommend that you download the code if you have any questions.
It's in the description of this video.
All right I'll see the next unit