All language subtitles for 18. The Revolution Page - Overview

The revolution page has a pretty unique look but overall a relatively simple structure will start off

at the top of the page with the title in the top left hand corner and then that will be followed by

a large icon here on the left and on the right of the icon.

We have a few paragraphs with a subtitle first we'll need the container for the page of course and like

the other pages this will be a great container with the direction of column and the first item within

this container is the item for our title.

So this will be a grid item and then following that we will have a another item a grid item container

for the second part of the page for the icon in that text the title is our typography variant of H2

and then for our grid item container we will first have an item here on the left.

And that would be a grid item wrapping our image followed by a another grid item.

But this time a grid item container with a direction of column because that's going to need to hold

a title which is our first grid item within this container wrapping a typography variant of H 4 followed

by our typography variant body ones for all of the paragraphs.

So this layout isn't too complicated at all and should be pretty easy for us to get going and this will

be on top of this next section.

And this is similar to before where we had the image on the left and some text on the right.

Now we have our text on the left and we have this will be an animation on the right we'll have a container

for this whole row and this will be a grid.

I don't container and we'll need that relayed laid out from left to right.

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

of column to give us the same stack layout as we had previously.

The second item will be a another grid item.

But this time wrapping our lady component within our grid item container direction of column for our

technology section we'll start off with the title which will be our grid item with a typography variant

of H 4 followed by the typography body ones for all of our paragraphs.

So again this is a pretty straightforward layout not too complicated after the technology section will

move on to the process section this is probably one of my favorite designs of the entire Web site up

there with the revolution block on the home page and I think it ends up creating a really cool look.

That's a little more unique than a simple step by step list or something.

I only have the first section of the process listed on here because all of the rest of the process steps

are going to be the same structure just with the different title different paragraphs and a different

icon and background color so it will be very similar.

And we only really needed to walk through the one version of it but what we'll need is first we'll need

a row just for that title there.

So that will be a grid item container direction of row and we'll have the justify center on there of

course.

And this will be wrapping just a typography variant of H for that is the only thing we'll need in there

and that will just get us the process.

Title this will be followed by a item container for our consultation section.

This will be a grid item container with a class name of classes consultation background and we will

be using this class to set the background color for this section.

So if I go back you'll see that that gray color.

We will be setting that using the consultation background class name so then what we'll do is inside

of this item container.

We will set an item container direction of column to hold all of the text and the process step.

Title this will be followed then by an item wrapping our image.

So this is the way that we're gonna structure this.

We're gonna have the text in a container on the left and we're going to have an icon to the right of

that and then we'll set a background color to the overall row.

And this will create a really great look and the way that we'll use the icons since their G's will guarantee

that it always looks perfectly responsive on any screen size without having to go in and make a bunch

of different versions of this background.

Say for a large version a medium version and a mobile version or something like that.

So this is a very efficient way to create a great guaranteed user experience all we have left then is

inside of that grid iron container with a direction of column.

We'll be setting the title using our grid item typography variant of H for followed by the typography

variance body ones for all of our paragraphs.

So again like I said it has a really unique look and I really love the overall feel of this page but

it honestly is relatively simple in practice so I'll see you in the next video when we start working

on it.