All language subtitles for 20. The Revolution Page - Process

With the first part of the revolution page out of the way we can work on the last part which is the

process like I showed in the overview.

It will be made up of different blocks each with a different color to background an icon and then a

title and a description.

I'll go ahead and shrink the page down so that I have my code editor visible and then we can come and

underneath this last grid item container or the direction of row.

So after this grid item with only one grid tag underneath let's add a new grid item container direction

of row with a class name of classes dot row container container and then we will open this up and inside

of here we'll just add a single grid item wrapping a typography variant of H for the gutter bottom property.

And this will have the title process let's also go ahead and on the row container here.

Let's add a justified property of center so we can save this now and I'll refresh the page.

Get my development server started again.

And you can see that we've got the process title now centered in the bottom of the screen.

Now we can go ahead and actually start on the first process step by coming down.

And underneath this grid item container for the row let's add a new grid item container direction of

row with a class name of classes dot row container and then we'll open that up.

And the first item within this container will be itself a grid item container but with a direction of

column.

And then we can open this up and the first grid item within here will wrap a typography component with

a variant of H 4 in the gutter bottom prop.

And this will have the title consultation we can then come down and add another grid item.

And this will be for our typography variant body one with the paragraph prop.

And then we will open that up and come to our design file and let's come down here to the consultation

step and it looks like we'll need three paragraphs.

So let's go ahead and copy the typography variant body one and paste that two more times.

So then we can come in and copy in these paragraphs skip the first one second one and the third paragraph

OK.

And then we will minimize this file and let's just go ahead and save the code right now and we'll see

the page refresh and then you can see that we have the consultation text along with all of our body

paragraphs we'll need to change the coloring of those because in the design file you can see the title

is black and the text is white and it is actually going to be the same for all of the process steps.

So we'll repeat that style for those.

So we'll need to come in on the consultation title.

Let's add a style color.

No sign.

0 0 0 and I was actually just reading the other day and something mentioned that it's actually a little

more performance optimized if you use the actual hexadecimal number instead of say putting the word

black in here which I tend to do.

So I mean I would try and start using the actual hexadecimal.

It's supposed to be a little bit faster.

So we'll come down and on the body one paragraph so to add a style of color you need to be white.

So that's no sign f f f and we can go ahead copy this and paste it onto the rest of these body paragraphs.

Save that page will refresh and we have the black title and all the white text.

It's hidden on our white background we definitely don't want that text to be hidden though and we need

actually these specific colored background for this section and in the design overview I had said we

were going to use a class name to do this but since we're already setting the class name of row container

we could put in two classes but I'd really think it'd be easier if we just added a style here with a

background color of no sign.

B three B three B three too nice gray and then we'll give it a height of 90 M and so this will set a

fixed high on this container giving us the space that we need for our text and the icon.

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

And we certainly have the gray background that we had been looking for.

Now I want to change some of the spacing here as well because obviously we don't want our text taking

up the whole length of the container.

And we also don't want the title here pressed so close up against the top of that.

So on the style where we're changing the color to black on our title let's also give it a margin top

of five m and then here on our style for the body paragraphs let's add a max width of just 20 M and

then we'll go ahead and copy that property onto the other paragraphs as well so get the second one and

then get this last one and we can save that the Pedro refresh and now it looks like it looks like the

paragraph from the design file or very close to it.

This actually looks a little bit better so minimize that and you can see that we're definitely on the

right track and now we just need to get our icon in here let's go ahead and next to the grid item container

direction of column this wrapping all of our typography components.

Let's go find that closing grid tag and adjacent to that will add a grid item and this will just be

a grid item wrapping in image with a source of consultation and an old of handshake and then we can

close this off and let's go up to import the consultation image.

So underneath the vision we can import consultation from assets consultation icon s v g and now we can

save this and we'll see the page refresh with our icon now being displayed isn't exactly in the right

position though.

So to get the icon and the text to share this space and to sit on the same line.

Let's go ahead and we'll need to add the on the grid item wrapping our image add the large prop and

then we'll come up to the grid item direction of column and add the large prop here as well.

And that will make sure that up through the large breakpoint they share the space available to them

and we can save that.

To see that they then jump to now being on the same line now to move the image down into the center

of this container.

We're actually going to use a property that we haven't used before.

So if we come over and on the grid item wrapping our image let's add a style of a line.

Self Center online self property allows you to do what it sounds like and force an item just by itself

to have a different alignment than the other items in its container.

So even though we want the text here up at the top left hand corner we're then going to want the icon

over on the right but down in the center.

And so if we applied the center styling to our overall row container that would force the text down

in the center as well but we don't want that we just want the icon to be centered.

So we'll use the aligned self property and if we go ahead and save that now we'll see it jump to being

nice and centered so we've gotten this first section completely finished.

Now this looks really good.

And you can see that it really creates a cool look and manages the space very effectively to give us

until here to give us the look that we want but we'll go ahead and we'll address the responsive design

aspects of this.

After we get the rest of the process steps built out which we'll do in the next video.