All language subtitles for 13. Creating The Revolution Block

All right.

I think we've got the card pretty well figured out.

If you don't go back watch that video again.

But let's just get into the code editor and see it in action.

All right.

And here I am at the code editor.

The first thing I'm going to do.

You actually won't need to do but I'm going to come down and here on the default options for the animation

I'm just going to turn auto play to false and I'm just going to save that for myself so that the animation

isn't constantly running which I think will go a little bit better as I edit these videos.

So we viewers to true if you want to see the animation I'm just going to leave mine on false but I can

always click it click it if I want to see it start.

So if you want to go ahead and turn that off feel free to do so as well.

But let's come back up to the top and here under our use media query import.

Let's go ahead and import import the card components from app material dash UI slash core slash card.

And we're also going to import the card content component from material boobs material UI slash core

slash card content then we'll come back down and all the way at the bottom here.

Let's go ahead and outside of this last grid item for the Web sites.

BLOCK Let's go ahead and we'll add our grid item for the revolution block here will place our card component

within nested card content inside.

Now inside the card I'm actually going to use the grid to help me unwind some of these items because

I'm styling this pretty differently than any of the defaults or examples.

So the grid will kind of help me customize this.

So let's create a grid container container to start off.

But let's go ahead and also add a direction to this container of column.

And this will get the vertical look that we want for this card.

If you don't remember.

Pull up the design file real quick.

Just we could get a little snapshot of that.

So I'll open up my design file or come in here and you can see this loads will go in.

So here is our revolution block.

And this is our card.

So that is going to be our card in our card content.

These text and the button within and so to make sure that these all line up on top of each other.

That's why we're setting the direction of column.

So keep this in mind as we're building close out of that.

We'll come back to our project folder and inside of this grid container we've created.

Let's add a grid item and this grid item is going to have our typography components with the text.

The revolution inside we're going to make this typography component a variant of h three.

So that'll make it decently large.

And underneath that I'm going to create in a separate grid item another typography component.

But this time with a variant of subtitle one which we already have set up and we'll give it the text.

Visionary insights coupled with cutting edge technology is a recipe for revolution.

Let's now go and we'll come up to the top here our hero blog and let's go ahead and we'll copy this

button component so our learn more button from the hero block.

Let's go ahead and copy that.

And underneath this typography is subtitle one component.

Let's go ahead and paste in that button.

Now let's go ahead and save this.

You just see where we're at and the page will refresh.

So it's a scroll down.

And here you can see we've got a card although definitely not the card we want but it is a card.

You can see the little drop shadow right there.

But it's spanning the full width of the screen.

And the styling still isn't right.

So we obviously still have some work to do but we're on the right track.

I want all of this text in the button to be centered here.

And so let's go ahead and on this grid item wrapping all of our text and the button on that grid item.

Let's add a style here with just the text a line set to center so let's save that.

We'll see the page refresh.

And now we've got some centered text but we don't have that title aligned.

So actually let's go ahead and move this style off of that grid item onto the overall container inside

of the car.

Content.

So we'll go ahead and paste that style right there and when the page refreshes we now see that all of

that card content has been styled correctly now before I go ahead and fix the size of the card and stop

it from being this full span of the screen let's actually go ahead and we're going to add the background

for this.

That repeating background that we had seen in the design file which the card is going to be sitting

on top of not only is the card going to be sitting on top of this background but it also needs to be

centered inside of it.

And to use that I'm actually going to use the grid system again.

And so inside of our grid item but outside of the card we're going to create a grid container and we'll

open that up and we'll actually just cut our entire card and make sure you get all the way to the bottom

card component and we'll cut that and paste it within our grid container that we just created.

And on that grid container since we want this card to be centered in all directions we can add in a

line items of sensor and a justify of sensor which will sensor a line the card for all directions placing

it right in the middle of the container now inside of this container.

But outside of the card.

So here underneath our card tag we'll create a new line and it will create a div here with a class name

of classes dot revolution background and we'll make this a self closing div this div is where we're

going to apply the background they are card is going to be sitting on top of.

So let's scroll up and let's actually come in underneath are Web sites icon.

Let's import revolution background from up one directory assets and then repeating background dot SVP

repeating background.

And now of course that means we can come into our styles objects and create the revolution background

style and to set a background image will use the background image property with a little bit of weird

syntax here but we'll use the back ticks and then you are L parentheses.

And here we will inject the revolution background which we had just imported.

We'll set the background position to center the background size size to cover background.

Repeat to no repeat and give it a height of 100 percent.

So these are all options for the background image property which specify how the image should be anchored

within the element.

And we're telling it that we want it to be in the direct center of our element.

So the center of the picture so the line up with the center of our container and we want that background

to cover the whole container.

So it will stretch and fit a little bit to make sure that all of the space within the container is covered

with the image instead of creating a smaller cropped version of the image within the container to preserve

the aspect ratio of the original image.

So by using cover we're going to make sure that it is zoomed in enough to cover the whole space available

to it.

And by setting no repeat we make sure that that extra space available is not filled by duplicating the

icon which would result in a weird blocky look with multiple copies of the image.

So that's definitely not what we want.

And setting the high of one hundred percent of course just tells it to take all of the space that it

can.

So let's go ahead and save this to see our image and where we're at.

And you can see the page refreshed and we now have a smaller card but our background image seems to

be missing.

The reason for this is it.

We told it to take up all of the space available to it.

With the height of 100.

If we scroll down and we look this container actually just contains the card and nothing else besides

that.

So the image actually doesn't have any room for itself to be displayed.

And what we need to do is add a fixed height to our containers so that the image then knows to fill

100 percent of that available space.

But it needs the space in the first place.

So on this container let's give it a style of height

100 m below make sure we have a nice large background appropriate for any of the different screen sizes

so we can save this.

Now Paige will refresh and it looks like the image still isn't appearing.

I think I must have a problem.

Come up here.

Oh we actually we need to add a width to this as well of course because if it doesn't have a width then

it's going to default to zero.

So we obviously don't want that.

So let's tell it to take up 100 percent of the height and the width available to it and we'll save this.

And now you can see our repeating image has appeared it's not quite perfect though because we want the

card to be sitting on top of the image.

Obviously not above it.

So to do that let's come down all the way back and on our card.

Let's add a class name of classes revolution card and we can come up to add our revolution card style

to the styles objects.

And here we can add all the styles to get this to look like the design file.

So first off to get it to sit on top of that image we have to set our position to absolute.

And then the rest of this is just going to be styling to make it look a bit better.

So I'm going to add a box shadow property because I think that the little tiny little bit of shadow

that they have there is just way too measly.

And I want it to be floating way more than that.

And if you remember we actually have shadows available to us in the theme so I'm going to use that by

referencing our theme dot shadows.

And this is actually an array that you can take any of the shadows from with the smaller numbers being

a lighter and smaller shadow and the larger numbers being a darker and larger shadow.

So I'll access this array and access the tenth shadow or shadow at the tenth index.

I should say and then we'll also add a border radius of 15.

And that's going to add a bit more rounded corners than what we have currently.

And the padding of 10 m and so that'll create a bigger card by adding some padding around all of our

text.

So let's go ahead and save that.

To see how it looks and we'll see now that we've got our much larger card our much bigger shadow and

it is sitting on top of our background image giving us a really nice look exactly how we had wanted.