Original subtitles

The services page is a nice place to start this section off because it's very similar to what we've

already done on part of the landing page think that now that we've gone through and use the grid component

to build our home page and we understand more about how it works in practice.

So I think that now these diagrams I've made of how we'll structure these more complex layouts are going

to make more sense now that you have experience with the actual code.

So we'll come over and this is a screenshot of these services page.

This is the entire page and you can see it is basically the services block from the home page.

Just move around a little bit to create this layout will first need an item for the entire page.

So this will be our overall rapping grid.

And this is going to be a great container with a direction of column so you can see how the items are

laid out top to bottom and see if I go forward you'll see so the services title that is the first item

in this grid container of column and that is a grid item wrapping a typography variant H2 and then the

next grid item in this container direction column has our Iowa's an Android app development section

and that itself is going to be broken into two items.

So this is a grid item container and we're not setting a direction here.

And so it's in the default direction of row and that will allow us to put our text on the left side

having the icon appear on the right.

So you can see then we have the next grid item and that is also going to be a grid item container with

the default direction of row and then we have the grid item container for the website development section

so hopefully this makes it a little more clear the four items within our overall grid container of direction

column and how all of the items are sitting on top of one another.

Thanks to the column direction but now let's go into one of these containers where the first item in

this container is the text with the section title subtitle and they learn more button so that is going

to be a grid item the container direction of column because this is containing these multiple typography

components as well as the button components and it needs them to be arranged from top to bottom.

And so we'll use the container direction of column that leaves the second grid item in this row container

which is the image and that is a grid item.

Simply wrapping in image within our grid item container of column for our text and the button we'll

start off with the title here and that is a grid item typography variant H four so you can see that

this is within our wrapping container of column and as the first grid item this will sit on the top

and then we have our subtitle which is a typography variant of subtitle.

And then the second subtitle is A typography subtitle one as well.

And then the last item within that container is our button which is a grid Item button so hopefully

this breakdown makes it a little more clearer especially seeing the code next to the actual screenshot

of what we're going to be building.

But for the sake of space here I'm not going to break down the custom software development or website

development sections because they are set up the exact same way as our Iaw and Android app development

section is here and we'll just be using our different justify values to arrange the sections towards

the left or the right but thankfully for this page it actually won't be too hard because we'll be able

to use the section that we've already made for the home page and then we'll just have to change it a

little bit from there.

So I'll switch over to the code editor and we'll get started.