All language subtitles for 21. The Revolution Page - Process Continued

With the first process step completed we will be able to now easily create the rest of the page let's

first start by coming up in our code editor to the top and underneath where we in ported the consultation

image.

Let's go ahead and grab all of the other images that we're going to need so let's import mockup from

our assets folder mockup icon.

Then we'll import review from assets review icon import design from assets design icon and then import

build from assets build icon or import launch from assets.

Launch icon or import maintain from assets maintain.

Icon and finally will import iterate from assets iterate icon.

All right.

So far so good.

And we can scroll down now and we're going to select this entire grid item container that is wrapping

all of the typography for the text and the title along with our image.

So the entire grid item container the row container for the consultation section.

Let's go ahead and we're going to copy that.

So copy that and then come underneath it and let's go ahead and paste that in again here.

We will change the title to mockup and then we'll change the image to mockup and change the ult to basic

website design outline.

And now we can open up our design file and we'll scroll down to the mockup section with the text and

let's go ahead and copy in these paragraphs

okay and we're going to just repeat this process for all of these pages.

So let's go ahead and we're going to grab the grid item a row once again and then copy that entire thing.

Let's paste a new one and this time we'll change this to review and then change our image source to

review.

Change the old to magnifying glass and then we can scroll down in the design file to the review section

and come and copy these paragraphs.

All right.

Go ahead copy a grid item again Copy that.

We'll paste this in we can scroll down to the design.

So change this title to design change the icon image source to design change the Ault to paint brush

leaving stroke of paint and then I'll go and copy in the two paragraphs

paste that in and it looks like we don't need a third typography on that so we'll get rid of that and

then we'll go ahead.

Let's continue to copy the item paste it We'll scroll down past design.

We have another review.

So make this review review and then magnifying glass once again and then we'll copy these two paragraphs

so we'll just keep moving and we'll have some tweaking to do at the end but let's just keep getting

all of these sections out on the page.

So now we move on to the build section change the image to build change the old to construction site

they're actually foot building construction sites and then start copying in the paragraphs but we'll

need a few more for the build section.

So a little longer than some of the other ones.

So paste this in and then let's go ahead copy typography component and paste that one two three four

more times so he can come back in

all right.

Now come up and I'll copy one of these because we're not going to need all the typography components

in that one so let's copy this and we'll come back under paste in a new row container and then we'll

scroll down the design files.

Now we're in the launch section.

So lunch changed the image to launch.

Change the old to rocket and then we'll copy in our paragraphs

and now we can copy this row copy the row.

I just want this row.

Copy that taster and again we'll scroll down to the maintain section.

So this is maintain change the image to maintain changes to wrench tightening type ending bolts and

then we can come in and copy these paragraphs

All right.

So only one left.

So it's copy this.

Grid row container once again or copy that we can paste it underneath.

And now scroll down to the iterate section.

So change this to iterate and then change the image to iterate change the old to falling dominos and

then copy in our paragraphs

OK so that was a lot.

But let's minimize the design file now and we can go ahead and save the page save the code in our page

will refresh.

You can see we're still here on the consultation section but now we can scroll down to mockup and it

looks like we still have the same background color for all of these but we can only see the icons.

So here's review design.

It looks like we definitely will have to adjust to this a little bit.

Review build launch maintain and iterate.

So we're on to a good start.

But let's go ahead and let's make sure we put the correct background colors for all of these.

So the consultations correct.

But what scroll back up then we'll find the mockup section.

So a mockup section and here at the wrapping row container where we set the background color let's change

this for the mockup section to F F seventy three seventy three.

OK.

We'll scroll down find the background color for the review section and we will change this to 3 9 B

5 for a and then we can keep scrolling down and we'll find the design section and we'll change this

to a six seven C five to then we can scroll down.

We have review again.

So this is going to be the three nine B five for a.

And we'll continue.

This is for build.

We're going to change this color to f b b 0 3 b OK We'll scroll down and then we'll find the section

for launch.

And this is going to be C 1 2 7 2 D gives us a nice read and we'll scroll down here in the maintained

section we'll use a nice purple with eight E four five C E.

Scroll down to the last section for iterate and we'll give this a color of 2 9 A B E two.

All right.

So we can save that and our page will refresh and you can see already the mockup section has its new

nice colored background the review section in nice green a nice brown for the design another green review

our yellow construction site for build a red launch section are purple maintain section and the blue

iterate sections we now have nice set of colors for all the different process steps.