All language subtitles for 12. iOSAndroid App Development Page - Overview

The next page that we have on our site is the Iaw slash Android app development page.

This is our second services page and we'll have a similar structure at the top with the arrows for navigating

between the different services pages as well as the heading text at the top with the title and description

of the service layout.

Below that however will be a little different and so we'll have to structure that a little differently

than we had before.

So if we come over we'll see these screenshot of the first part of the page and you can see where I

talked about that top part with the arrows and the title and the description and then below we'll have

a section with two bodies of text and an animation in the middle to break this down we'll start of course

with a container for the entire page and like the others this will be a grid container with a direction

of column and this will wrap all of the content on this page this container here the top will be broken

into two further containers the top being for our first half this will be a grid item container followed

by the second half which is also a great item container inside these containers of the top the first

item that we have will be our arrow and so that will be again a grid item wrapping an image for the

Arrow followed by an item for our text and this will need to be a grid item container with a direction

of column so that we can allow that text to stack on top of each other followed by the item for our

arrow which again is the great item wrapping in image in the second half of the page in that grid item

we will have an item the four arcs text but this will need to be a grid item container they direction

of column followed by an item wrapping Wadi component for animation and the third will have the item

for our other text which again is a container with a direction of column breaking down the heading text

at the top like we had done before it starts off with our title which is a grid item inside of that

container of column and this grid item is wrapping a typography variant H H2 for our title followed

by a grid item for our typography variant body ones and the other body ones as well the text in the

sections below will break down similarly starting with a title but this time wrapping a typography variant

H for but then again using our typography variant body ones for the paragraphs below and you can see

the other section also uses our title of H for and the body one variance for our paragraphs so this

should be pretty familiar to you hopefully this structure helps that makes sense but it's a pretty straightforward

design on this one this is the majority of the work on the page because the second section you can see

is just a set of icons and this is similar to the Save Energy save time save money icons that we had

just worked with except now they have different titles and different icons but we'll still be setting

this up with a grid item container direction of row for this section which is laying out from left to

right a grid item for each section.

So this is an item container direction of column which will allow the title to sit on top of the picture

followed by the grid item container direction columns for each of the other sections and within these

sections we will have a one grid item for the typography variant H for with our title and another grid

item wrapping our image and it is that simple for all of them.

So it really is a straight forward design here.

This shouldn't be too complicated to set up and making it responsive should be pretty easy as well so

I'll flip over to the code editor and see you there in the next one.