All language subtitles for 25. About Us Page - Team

We can start building the rest of the About Us page with the team.

Section go ahead and underneath the grid.

Item row container for the History section.

We'll go ahead and create a grid item container but a direction of column but also with the class name

still of classes top row container and we'll go ahead and open that up.

Like we went over in the design overview.

We'll start off with a grid item which will be wrapping a typography variance H 4 we'll put the gutter

bottom and this will saying team.

I'll fix that and then we'll add a grid item adjacent to that and this will be a typography variant

body one paragraph.

And let's give it an a line center so we'll know we'll need that and this will be my name.

Zachary Reese and then a comma and founder pay and underneath here under this same typography component

we can add a typography variant body one paragraph a line center for the sentence I started coding when

I was nine years old we can go ahead and save this now and the page will refresh and you see that we

have these in the center but the team is not so let's go ahead and add in a line of center onto the

typography for the title and now we have that in the center as well.

Before we move on to the next section I want to take just a second to come up.

I'll open a new tab and go to the material UI Web site and I'm gonna go to components and then scroll

all the way down until we have avatars.

Avatars are found throughout material design with uses in everything.

So this is really just creating a little circular image when we pass in a image source.

OK.

So all it's doing is we're setting the avatar component with an old that will be used for the all property

on the image and then the source where our image is located and then we can set a class name if we want

as well.

But the avatar gives us this circular styling which is found commonly in Web site profiles.

So this is a convenient quick way to throw your images into a little container and you can see they

give examples of how you can use just letters in there to create your default anonymous looking profiles

or even passing in icons so that you can just use images make it almost like a little button looks like

if we scroll down they also have a square or rounded corner variance so he can use the variance square

or variant rounded which will get you the rounded square but really that is all this avatar component

does.

So I didn't think it needed its own overview video for you to just know that a wraps your image in a

circle.

Basically so I'll get out of that and let's come up to the top here and underneath typography let's

import that Avatar component from material.

Dash UI slash core slash Avatar.

And then underneath the history picture let's go ahead and import profile from assets founder dot JPEG

and then import yearbook from assets yearbook and import puppy from assets.

Puppy.

Now we can scroll back down and underneath the grid item wrapping these last two typography components

let's add an adjacent grid item and here we'll put our avatar within Ault of founder and a source of

profile and then we'll set a class name of classes dot Avatar we can make this a self closing component

and we'll come up real quick to our style object add the avatar style which will receive a height of

twenty five m and a width of twenty five m and go ahead and save that.

Now the page will refresh and you can see my picture has appeared on the page.

This is looking good but let's go ahead and we need this image to now be over in the center along with

our text.

So we'll come down and on the container direction column row container that we have wrapping all of

these items.

Let's go ahead and give this in a line items of center.

And remember since this is in a direction of column that means the main axis is the vertical direction

and so the line items which specifies the cross axis will this time align our contents in the horizontal

direction.

So if we give it on line items of center that should horizontally censor the image where we want it.

So I'll go ahead and save that.

We'll see the page refresh and our image is now centered we can go ahead and start working on the next

part of the team section so we'll come underneath the grid item wrapping the avatar in here will create

a grid item container and we'll open this up.

And the first item here.

And so remember this will be the container laid out from left to right with the yearbook picture and

the caption on the left.

Some more text in the middle and then the picture of my puppy and the caption on the right.

And so the first item in this container will be the grid item container direction of column.

And this will be the container for the yearbook picture and caption first a grid item here will be our

image with a source of yearbook and an alt of yearbook page about founder and then we can close off

the image and come underneath that grid item to create another grid item.

This time wrapping a typography variant of caption which if you remember is one of the default variants

built in but we will go and customize it but we'll close this off and have it say a page from my sophomore

yearbook and I'm purposely leaving the first a under case just because I think that style looks a little

better here.

Go ahead and save that and we'll see where this gets us the page or refresh.

And here you see we've got the image along with a little default styled caption So it's looking good

so far.

So now let's create that text here in the middle so adjacent to that grid item container direction of

column wrapping the yearbook items.

Let's go ahead and create a grid item and we'll open this up and have it wrap a typography variant of

body one with a line center and the paragraph prop we'll open this up and let's actually go ahead.

Copy that real quick paste it again and open up the design file to come in and you can just copy these

two paragraphs right there.

Paste in the first one copy this and paste in the second one.

So now we can minimize the design file once again and save this to see the page refresh.

And now we have our text within it will obviously need to change the styling of that text a little bit

but let's continue and adjacent to the grid item here that we had just created for the text adjacent

to that grid item.

Let's create our grid item container direction of column that will hold the picture of my puppy and

the caption there.

So we'll create a grid item wrapping an image the source of puppy and all of gray spotted puppy and

we can close off the image.

Create a new grid item adjacent to that wrapping our typography variant caption with the text my miniature

Apple docs and Sterling action.

Make sure you get the comma in there.

Go ahead and save this page will refresh.

And there we have the caption and the picture of Madame.

Now let's get all of these containers to share that same line available to them.

We can do that with the trick that we know the large prop go through and add that to all of these wrapping

grid items.

So the large prop there you can save that and that will refresh.

And now they're all sharing this space very much like the design file that already made a very big difference.

This is looking good.

But let's go ahead and on the puppy container.

We actually want this caption to be over here on the right side.

It's kind of going to be right aligned.

So on this container with the direction of column wrapping our puppy picture.

Let's go ahead and set in a line items of flex.

And then we can save that and we will see that it does indeed jump over to the end of that container

which also gives us the correct spacing here proportional with the spacing on the left.

We'll keep moving and you'll see if we shrink the page down they are text it can get pretty close to

those pictures you see right there is good press.

Right all the way up against those you know I don't like that.

So we'll go in on the grid item wrapping these two typography components.

Let's give it a style with a max width of 45 M and then we'll give it a padding of one point two five

m so that this will go all the way around.

So this will give us some padding up.

So it's not pressed against up against my picture or against the yearbook picture or against the puppy

or against the bottom.

So there's give us that padding all the way around.

Let's go ahead and save this to see that and you can see it give us a little bit of space there and

just a nice little border around the text no matter how small it gets until obviously we jump to this

break point and looks like everything goes crazy.

So it's not even look at that right now.

Well we'll keep working on this.

So let's go and let's actually style these captions how they need to look instead of just looking like

some weird black text on the page.

So we'll come into the UI folder and open up our theme dot J.S. and at the bottom here.

Let's add a caption variant.

Make sure you get the comma and we'll give this a font size of one rim a font weight of three hundred

and a color of ARC Gray.

So let's save that and both of our captions will change to a much more appropriate looking style consistent

with the rest of our theme let's go ahead and take a break right there and we'll come back and start

finishing up the responsive design for this page in the next video.