All language subtitles for 6. Styling The Hero Block

We're definitely a great starting point for the hero block but let's go ahead and start right away on

making this look exactly like we have designed one of the first steps that I would like to do is to

get this animation all the way over here against the right edge of the screen.

And since the container for these items you can see the container here since this container has a direction

of row the horizontal direction is actually the main axis so to align items along our main axis for

the container we need to use the justify property.

And we said that we want for the animation to be aligned against the right end of the screen.

So we're going to use the Flex and property.

Let's go ahead and save that and we'll see our page refresh.

And now that animation is pushed all the way over to the end that'll give it the nice a flush look with

the edge of the screen.

But now we need all of our text and buttons to come down and be censored with this in the middle now

since we're wanting to move this item down in the vertical direction.

And we've already established that the main axis is the horizontal direction for this container.

And so we use the justify prop. So to align these items along the vertical axis of this container we're

going to want to use the line items property and we're going to want to set that equal to just a center.

And that should center up our text with the animation for go ahead and save that.

We will see that that was the case that already looks a lot closer to what our design file looks like.

But let's start going in and styling those buttons as well as our text.

We're going to start with that text and we're actually going to replace this div with a typography component.

So what's come up and we will import the typography typography components from material dash UI slash

core slash typography.

Let's go down and get rid of the div now and we can put our typography component and replace that closing

tag as well oh girl Ivy.

There we go.

Now here I'm also going to make a slight executive decision on the design and the more and more that

I've been looking at this the more that I think I would like the text to be centered instead of it being

left aligned like this.

So instead of being left aligned like that I think I'd really prefer all to just be centered and from

my testing I really think that that just ends up looking the best.

So let's go ahead and all our typography components.

We can add in a line property to change the text alignment of the items within it and let's set that

to center.

So we'll go ahead and save that to see our text now centered and styled since we added the typography

component.

We're going to want that text to be pretty large though since it's the main text on this page.

So let's go ahead and we're going to add a variance on the typography component of H to we can save

that and we'll see the page refresh with that much larger style.

So let's go ahead and open up our theme dot J.S. file and we'll come up above the age 3 and let's add

in H 2 variant and open up and add the comma down below and let's change the font family to a railway

and a font weight of seven hundred a font size of 2.5 rem and a color of our arc blue.

So let's use the bag ticks to inject the arc blue color.

So let's go ahead and we'll save this.

Now see the page refresh and you can see that looks exactly like our design.

The only difference is that there actually should be a little bit more spacing between these words here.

And so I actually want to come and add one more style to this a line height set to one point five.

So we'll save that and we'll see that.

Now there is much more spacing in between those which I think gives it a bit of a better look let's

go back to the landing page now and we can close out of the themed J.S. and I'll point out right now

that if we go and we start to resize the screen there it kind of starts to get jumbled and it doesn't

look the best and as we continue to shrink it down you'll see it actually does resize pretty well here.

But I want to go and make sure they re sizes too being stacked on top of each other instead of being

laid out horizontally at a smaller breakpoint because you can see they here at this larger break point

is already stacked on top of each other when in reality it should look like this all the way until I

get down to a small enough size.

So here here it's obviously breaking much too early.

So let's go ahead and on each of those grid items.

So the grid item for our text grid item for the animation sets this grid item and that grid item.

Let's go ahead and we're going to add the small prop.

Go ahead and set this for both of them.

And if you remember from the documentation walkthrough if we just set a breakpoint without any of the

numbers on it it's going to set the auto property.

And so that means that they are automatically going to share this space until they get below the specified

breakpoint at which point they will each receive their own line.

Let's go ahead and save that and we'll see the page refreshes.

And now at that breakpoint where before they were stacked it is now still horizontal.

And as we go and refresh this it stays horizontal and you can see it now just resized our text to maintain

the horizontal look until we get to the small brake point at which point when we get underneath it will

turn to stacking.

So by specifying these small breakpoint ensures that only at the extra small breakpoint will actually

snap to being stacked.

So all of these break points above is going to maintain the horizontal look by sharing the space and

shrinking down the items as necessary.

I'm going to bring this back up to size now back up to here.

Now you saw when we were resizing that window they when we were at a very small size here you can see

that actually that makes the animation pretty small right there.

And I think that's actually a bit smaller than I would like it to be.

And if we come and make the screen all the way large you can see it actually gets way too big and messes

up the design.

So I'm going to go ahead and a shrink that back down and to make sure it never gets too big or too small.

We can set a minimum width with the men width property and a maximum width with the max width property.

So let's go ahead and on our Waddy component.

Let's add a class name equal to classes dot animation and we'll go up to our styles object up here and

we'll open this up and we'll add the animation class with a max with set to 50 m and a men with set

to twenty one m.

I also want to push the animation off of the top edge right here.

How it's flush with the app bar as well as put in a little more space between the text.

So let's go ahead and we'll add a margin top of to M and A margin left of 10 percent.

And so that's going to make that margin between the text responsive based on the screen size so that

it shouldn't ever be too much and it didn't actually take effect because I made a little mistake.

We need to put the class name not on the NYT component but on the item wrapping it.

So let's go ahead and save that now and we'll see the page refresh.

And now there is a little gap where it is being pushed down a little bit.

Thanks to our margin.

But to illustrate the difference here between M and percent you can see that this margin at the top

is set to 2 m.

And so it creates this nice little gap here and no matter if we change the screen size it's always going

to be that same little gap right up there.

It's just the animations resizing so it might be hard to tell but it is that same a little 2 AM gap.

Now what makes it responsive is the number of pixels that make up that gap is going to be different

on each device and we'll make it proportional based on the screen size but then it generates the fixed

proportional value with percentage though.

If you look at the spacing between the text and the animation here as I resize the page that amount

of spacing actually increases because 10 percent of this screen size is a much larger area than 10 percent

of that screen size.

So hopefully that makes a little more sense to you guys of why you would switch between em and percentages

but that's definitely given us the look that we wanted.

And like I said if we now open this up and we keep increasing it you can see there's a point at which

the animation no longer grows larger.

And if we start shrinking it down you'll see there's a point where it no longer shrinks and it'll start

getting closer to the text and here you can see where the buttons now stack on top of each other.

And it really is squishing the text down until we reached the break point where it stacks on top of

one another.

So this look right here right there even though it's just for a little bit.

We definitely want to avoid that that is not the look that we want.

So let's go ahead and work on styling those buttons in the next video.