All language subtitles for 23. About Us Page - Overview

The About Us page is the last page where we're really just focusing on the complex and layout structure.

And then on the Contact Us and Free Estimate pages we're actually going to be getting into some complex

functionality but with this we're really still just focusing on the layout and making sure that we are

100 percent solid on creating any layout using our grid component let's check out the screenshot and

you can see that we're gonna start with just a title on the left and in the center in italics is our

mission statement.

This is a pretty simple start and we'll have a grid item direction column wrapping the entire page of

course but I didn't include that here.

Just because we're already familiar with that we're breaking it up.

And so this will start off with an item for the top which will be our grid item and then is wrapping

a typography variant H H2 for our title that will be followed by another grid item.

This time a container justify set to center with a typography variant body one with the inline set to

center as well.

Because remember we can center that text on the page while still having it left aligned.

So setting the justifiable center moves it over on the page and the line of center actually gives us

the center aligned text.

So it will be a pretty easy start and then we'll move on to the next section which will give us a little

bit of history.

This will be broken down into a container for the whole row.

Now will be a grid item container with a direction of row and the first item within this container will

be a container direction of column.

And this will be holding all of our text stacked on top of one another.

As you can see we'll have the grid item with a variant H four for the history title as well as variant

body ones for all of those paragraphs so similar structure to what we're familiar with.

And then that will be followed by a grid item simply wrapping an image for the history icon.

So again this is a structure that we're already very familiar with the next section is where I cover

the team which at the moment is just myself.

So it's just a little bit about me along with the picture of my dog and a picture of a page that was

written about me for my sophomore year book when I worked with the district technology department to

do some cool things.

But the way that we go about structuring this section actually might be a little bit surprising to you

but the way that I've done this I think creates the easiest structure for the best layout.

So it will start off with an item container direction of column for all of this and we're going to be

giving it in a line items of center and that will center up the text in the picture in the middle and

then the first item in this container direction of column will be an item for the title actually.

So this will be an item wrapping a typography variant H for sitting on top of an item wrapping a body

one typography for my name and title and then we will have another grid item typography body one for

the next sentence that will be followed by an item wrapping in Avatar which is a new component that

will go over which just gives us the nice circular look for images like that.

That's really all it does so we'll just go over that briefly.

And then lastly we'll have a container for the entire bottom three icons.

OK.

So this will be important for the alignment that we'll need and within this container that is set up

from left to right.

We'll start with an item for that picture and caption So we'll have a great item container direction

of column so that we can have the picture on top of the caption and that will be followed by a grid

item wrapping the typography body ones that we'll use for those paragraphs see we'll have both of those

and then that will be followed by the grid item container direction of column.

Again wrapping the second image and caption and within these containers will have an item wrapping an

image and then we'll have the item wrapping a typography variant caption So this will be a new typography

variant that we'll be adding and that second item container will be set up in the exact same way.

So this is a little bit more of a complex layout than we have worked with on the past few pages and

will really make us think about what we're doing and why we're setting it up like this and how we get

all the alignments correct.

So this is a good last page for us to work on while we're really just focusing on the alignment and

the grid system.

So let's get into figuring out how this is all going to work in the next video.