All language subtitles for 9. Custom Software Development Page - Row 2

So it looks like I did just have the wrong numbers for this animation.

We needed the max height to be to seventy five the max with to be two seventy five and the minimum height

to be two hundred and fifty.

So if we save that now we'll see the page refresh and now it is no longer being cut off and is rendering

the full animation but let's go ahead and if we start to size this up you see the animation and I can

go ahead and create that one right there.

You can see that these are being pushed over to the left side of the screen when we'd really actually

want them to be more centered around.

So what we can do is we can come up in on the row there is wrapping both of these item containers.

Let's add a justify justify a property of space around and we can save this.

The page will refresh and now we actually have that spacing that we were looking for.

So these are much more laid out and we have consistent spacing around both the edges and within them

we can go ahead and shrink this back down.

But let's actually go and you can see it just right there it already happened that they're already jumping

to being stacked on top of one another even though they still have room to go and we're still on the

larger breakpoints see we're just now reaching medium and this is where I would like for them to be

sitting on top of each other but up here we still have plenty of space.

So what we need to do now actually leave this at a breakpoint where you can see it's broken is will

come in on each of the item containers.

Well let's add the medium prop so that they know to share the space and stay next to each other until

the medium break point.

So we'll save that.

The page will refresh and you can see that they are now on the same lines still all the way until when

we scroll down.

We get to the medium breakpoint and here you can see they actually don't automatically jump to sitting

on top of each other but that's because they still have room to go and you can see when we get too close

here there it is now overlapping that animation again.

And so we'll want to manually make sure to switch this from being laid out as a row when we are in the

larger breakpoints.

We'll want to switch that to the column layout as soon as we hit the medium breakpoint and that will

make sure that these are stacking on top of one another and we'll avoid that problem entirely but we'll

get to that in a minute.

I would like to kind of go in and do some of my responsive styling at the end after I have all of the

content on the screen so that you know none of the later content is going to mess with any of the styles

that you've already created.

I feel like that's a pretty good way to work and has been successful for me so far so I'm going to make

this bit bigger.

Back up to where we need it and let's start adding the next item on this page which is R. Root Cause

Analysis section will come and let's find this great item with a direction of row justify space around

and we'll go all the way down to the bottom.

So with just one grid tag underneath and let's add a new grid item container direction row and this

will be for the Root Cause Analysis section like I said.

And so this will have a grid item container direction of column inside a first grid item here is wrapping

an image with a source of roots and an old of tree with roots extending out and we'll go ahead and say

a height of four hundred and fifty m and a width of four hundred and fifty M as well.

Go ahead and close that off and then we'll scroll up to underneath the stopwatch import routes from

assets route we can save them.

The page will refresh.

And now you can see our icon has appeared.

But let's come down and continue adding the text to that.

So under the grid item wrapping our image add another grid item.

And here.

This will wrap a typography variant of H 4 in wide the gutter bottom.

And this will be our title route dash cause analysis.

And then underneath this typography we can add another typography.

But this time a variant of body one with the paragraph property.

And then we'll need to open up our design file and let's come to the root cause analysis section and

copy in these paragraphs so we'll copy that paste in this first typography and then we can go ahead

and just copy that will paste it again.

Copy the new paragraph and we will paste that paragraph let's close down the design file and then we

can save this.

And we should see all of our text appear.

But let's start getting all of this censored up.

So on all of these typography variants let's add in a line of center.

Go ahead and copy that.

We'll put that on all of these guys here and then on our grid item container with a direction of column.

Let's add in line items property of center as well.

Go ahead and save this and the page will refresh and you can see all of our content has now jumped properly

into the middle of the screen here on the grid.

Item wrapping all of our typography is let's add a class name of classes dot item container container

to give it the same styles as these text containers up here which will prevent it from expanding so

far so we can save that.

And we'll see the page refresh to give us a much nicer looking paragraph.

Now let's go ahead and start working on it.

This last section with the next two animations and so what we'll do is actually just go ahead and copy

the entire row for our digital documents and data and the scale sections and then we'll go ahead and

change that for the new animations.

So what's come up.

And I believe it's this grid item right here.

Yep.

So find your grid item justify space around and go ahead and just copy that entire grid item container.

And underneath are grid item container direction row for the Root Cause Analysis section.

Well let's paste this new section down here let's scroll up to this newly pasted digital documents and

data section and we'll actually change this to auto Mason and then open up the design file and scroll

down to the automation section and let's copy over these paragraphs.

So copy over the first one to our first typography body one the second paragraph to our second one and

the third paragraph into the third typography component then we'll come down and where we had copied

the scale section.

Let's scroll over in the design file to our user experience design section.

So let's change the title to user experience design and let's go ahead now and copy these paragraphs

over as well.

So copy the paste.

And then let's go ahead.

Copy that typography component and paste that two more times for these other paragraphs.

Get in there.

And there we go.

So let's get rid of the design file again.

Let's save this.

And the page is going to refresh with our new road down here.

And so we still have the same animations in place but we do have all the text and the title's correct.

But let's go up and to where we had set up our animation options.

Let's go ahead and copy that and we'll paste two more in.

Let's change this first one to auto Mason options.

The second one to you ex options and let's come up and import now or import automation animation from

up to animation automation animation data.

Jason and then we need to import the U X animation from animations you X animation data dot J.S..

And then in the automation options constant let's change these scale animation here to automation animation

and change the scale animation for you X options to the new X animation.

And now we can scroll down and then our lady components for the scale options down here in the item

container for user experience design.

Let's change this to our new X options and set a max height of three hundred and ten and then max width

of one hundred and fifty five and it will scroll up and now for our lady animation here where it says

documents.

Let's go in and now change this in the automation section to the automation animation with a max height

of two hundred and ninety eight max width of two hundred and eighty.

And we do not need a minimum height here.

So let's save this now and we'll see that page refresh.

And we now have both animations in place.

You can see I can go ahead and click this and it looks like we're having a problem with the automation

animation.

I don't see that popping up so much scroll back up to the automation options automation or oh we're

passing the it looks like we were passing the automation animation when we need to pass the automation

options.

So make sure you have that correct and save the page and we'll see that refresh.

And now both of our animations have appeared nicely.

The first thing that I see though is how close these animations are to our root cause analysis section

and we actually have the same problem here where the text is actually really close on the top as well.

So on the root cause analysis section I'm going to give a margin top and a margin bottom so it gives

some spacing to the page and kind of axes our buffer there in the middle.

So let's find our direction of a row grid item container for the routes section and here was let's add

a style of margin top 20 M and A Margin bottom of 20 m as well.

And we can save that.

We'll see the page refresh and now we've got a much nicer spaced page coming along.

This looks honestly really close to the design file already.

So we're almost finished up but this is a great place to take a break.

So I'll catch you in the next video to keep on working.