All language subtitles for 7. Styling The Hero Block Continued

Let's start getting some work done on our buttons because we've neglected those a little bit so far

and definitely doesn't look as good as our nice text over there.

So let's go ahead and start by on this container the wraps all of our buttons.

Let's go ahead and add a justify of center onto here and that will center up our items along the main

axis which for this container is on the default direction of row.

So that's the horizontal direction which is where we wanted to move our buttons over.

So let's go ahead and save that.

We'll see the page refresh.

And now we've got very nicely centered buttons.

Now let's go ahead and on our estimate button we'll say a class name of classes dot estimate button.

And so let's go up underneath our animation style and we'll add our estimate button style if you remember

in our theme.

We actually already have an estimate style right here that we used for the estimate button in the header.

So let's go over and here.

Let's extend that theme theme dot typography dot estimate style.

But then we're also going to want to add our background color of theme dot palettes dot common dot Orange

a border radius of 50 50.

You can just do the number there a height of 45 pixels a width of one hundred and forty five pixels

and a margin right of 40 pixels.

And that's going to put a little margin on the right side of that estimate button which is in between

both of the buttons to give us a little bit of space there.

So let's go ahead and save this to see our transformation and there is our nice very easily styled button

if we come over and hover over this button though you can see the covers with a weird gray color.

For some reason and that's definitely not the look that we want our users to see that's going to make

you think it's disabled and you can't press it or something like that.

So let's go up and on the estimate button style let's add an ampersand colon hover effect and we'll

open that up and whenever we are hovering over this item let's set a background color of theme dot powered

Howard's and this time we're actually going to use secondary and this is the system the I explained

when we'd went over the theme they actually can generate other color variants for you based on your

specified main colors and as you can see in our theme if we come up to the palette under a primary and

secondary we've passed in our main of ARC blue and our main of ARC orange.

And so what this does is it generates a light and a dark version that we can use.

So let's come over and would access the secondary dot light version.

So if we go ahead and save that we'll see the page refresh.

And now if I come and hover over the button you can see it just kind of lights up a little bit and that

I think is exactly what I would like.

Definitely better than turning it gray and I actually notice if we come and check the button in the

header we can see it does a weird opacity thing too.

So let's go ahead and actually copy that hover style and open up our header real quick and scroll down

to where we had the button style which is where we set up our estimate button and let's add that hover

style to the button in the header and it will save that to see the page refresh.

And when we come over and check that button now it does the same nice little highlight.

There are other button does I want to add a little bit of space here between our buttons and the text

up above it.

So let's close out of our header dot J.S. file in here.

The grid item wrapping both of our buttons.

Let's add a class name to this of classes dot button container and we'll come up to create this style

button container and we'll just give it a margin top of 1 am.

So save that it'll push those buttons down just a little bit.

Now let's get to that learn button though.

We'll make that shape up a little bit and so on our button here for learn more will add a class name

of classes the learn button.

Hero so you can probably tell they will have a couple of those moments go and will add or learn button

hero style with a border color of theme.

Dot pallets dot common dot Blue a border width of to a text transform of none.

A border or a radius of 50 font family will set to roam Bartow Farr awaits.

We'll just go bold font size.

The oddly specific is zero point nine REM and a height of forty five with a width of one forty five.

So what's save this now.

We'll see the page refresh

and it looks like I forgot one style actually under border color.

Add a color of theme palette the common Blue as well and save that and now we'll have the blue text

insides That looks way better we also then need to change the color of our little arrow.

But you can see that we're setting that with our Phil down here in our component.

So outside of our styles and we could probably figure out a way to just set this through our styles

but we can do this a lot easier if we go up and next to our Make styles import.

Let's also grab the use theme hook so that we can come down and under our classes constant let's create

a constant of theme equal to our use theme hook.

So now we've got access to it directly within our component and we can change this.

Phil of red on the button arrow to a Phil of theme dot palette dot com in dark blue.

And we can save this to see the page refresh.

And we've got a nice looking button now one tiny thing I might like to nit pick is to add a little bit

of space between the text here and the arrow.

So what's come over and we'll add a span a span around the learn more text right there.

And on this span we'll give it a style equal to a margin right of 10.

And if we save that we can see that now we've got that extra little bit of spacing within there.

Let's go ahead and I want to actually add a little bit of more spacing up here to the top of this.

I don't think they are content should be quite as close to the top and so on are container that wraps

the entire page we'll add a class name equal to classes classes dot main container and we'll come up

and create the main container style with a margin top of 5 m so we can save that.

And we'll see that pushed down the content a little bit more and we'll take a look at how this is when

we re size.

You can see it looks pretty good all the way until we get down to here where I honestly think that this

is now a little bit too much space above it.

So we're going to add a couple of breakpoints in here starting with our theme dot breakpoints died down

for medium and I'm going to set this one equal to a margin top of just three M and then we'll add another

breakpoint.

Copy this and change that to extra small and we'll set this to a margin top of just to M and we can

save this to see that.

Now our content is nice and close to the top of the screen let's take a look here and you can see right

here that it's still doing that really ugly look.

And we need to go ahead and fix that for sure.

And the way that I want to fix this is we'll just add some spacing here because you can see that it's

not a very large Yeah it's just a really small window.

It changes to stacking like that between a switching to this stacked look of the smaller size like this

to the horizontal spread out with enough space.

Look right there.

So it's just a tiny little window that it's sitting on top of each other like that.

So if we went ahead and we made sure that it could never shrink down to that small then it would automatically

resize to stacking on top of one another before it created that jarring layout.

So it's come down here and on the grid item the wraps are typography component and are button components.

Let's go ahead and add a class name here of.

Classes dot hero text container.

We'll come up to create our hero text container style and to make sure that our text never gets too

small to create that overlapping button pattern.

Let's make sure that we add a min width so it will never drop below this value of twenty one point five

m.

And then also go ahead and add a margin left of just a 1 m and that should give just enough of a push

so that when we are at this broken break point that the container should be squished enough for the

container to be resized.

So let's save this file and we'll see that refresh.

And now you can see there is jumping up to sitting on top of each other instead of creating that bad

look.

So we can see that now as smoothly goes straight to the jump but there is a small problem.

I don't know if you'll be able to tell but that margin left of a 1 m is actually still on that whole

container and it's just slightly off center now.

So there's a little bit more space over here than there is over here.

She might be able to notice if you look at that.

And so we need to make sure that when we get down to this small breakpoint size.

So for our theme Don breakpoints dot down for extra small we need to change that margin left to just

zero.

So get rid of it completely and pay attention to where this B is right here above my cursor and I'll

save the file so that refreshes and you can see it moved over just slightly over to here to where that's

now being fully centered if we go ahead and resize the page back up you'll see it very cleanly and perfectly

responds to all these screen sizes all the way up even to the biggest size and you can see here how

it's overlapping with the footer but you don't have to worry because by the time we have all the rest

of our content put in this footer is going to be pushed all the way at the bottom and everything will

look perfectly.

So we can keep scrolling this back down and we can see that again just how that reef flows and it keeps

our text getting smaller and smaller until it jumps up to sitting on top of one another.

There was one last real quick thing and you can see when it first transitions right here when it first

jumps to that break point of sitting on top of each other.

I think that the animation is actually a little bit too big here because the max width that we had set

was for when the screen size is very large.

We wanted to be able to go up to a higher size but in this situation where it has enough room to grow.

But we don't actually want it to grow that big.

So for this screen size we can go ahead and on the animation style let's add a theme breakpoint dot

down and we'll set this for these small value and we'll open this up to change our max width to now

just a 30 m. So if we save that you'll see that this now gets shrunk and down to a much more appropriate

size.

And if we then go ahead and we start making this bigger you can see at the larger break points it can

still reach the larger size as before.

So now I think we have gone in and really perfectly made this responsive for all of our screen sizes

that we're handling and really creating a consistent and pleasing user experience.

So this looks really good and you see we keep getting more practice with the grid system and with using

media queries.

So hopefully by the end of this first page by the end of this whole home page I think that you'll really

already start to feel very familiar with how all of this is working so let's keep this ball rolling

and move on to these services block of our home page.

So we're going to finally get some content underneath here in the next video.