All language subtitles for 4. Contact Information

First on the container direction of column let's go ahead and add a justify of center here.

And since the direction is column that main axis is the vertical axis so justifies should justify our

content down here in the center.

So let's save that and we'll see the content jump.

And that was correct.

So now we can go up and underneath it are important for the background image.

Let's go ahead and import the phone icon from our assets slash phone Di SPG and then we'll import email

icon from assets.

Email Dias Fiji.

Now we can go ahead and we'll actually add an item inside of the grid container direction of column

but adjacent to the item that's wrapping our typography components so adjacent to that item here.

Let's add a grid item container and we'll open this up and we want this to be a just a container.

So it has the default direction of a row so that we can place our icon on the left and the phone.

And then the email on the right but for this one will first start out here with a grid item and this

will wrap our image with a source of phone icon and an alt of phone.

And then we can close that off and then adjacent to that great item.

Let's add a grid item and this will be a typography variant of our body one style.

But let's give it a style of colour theme dot palette dot Coleman dot blue.

So the text will be the blue colour that we've been using and inside of the typography component let's

add 5 5 5 5 5 5 dash 5 5 5 5 or whatever phone number you want.

It should work fine let's save this now and we'll see the page refresh and you can see we've got some

text and we've got an icon before we duplicate this for the email.

Let's go ahead and you see how the icon is pressed right up against the number like that.

I always don't like when that happens.

So on our phone image let's go ahead and add a style here with a margin right of just zero point five

m we can save that.

We'll see it jump.

And now I've got a little bit of spacing in there that definitely looks better.

So now we can copy that whole grid item container that we had just created wrapping the image and the

phone number and let's paste this and then change the source to email icon change the ought to envelope

and then come down and change the phone number and I'll put in Zachary at gmail dot com and then we

can go ahead we'll save this.

And now our email has appeared as well.

Now before we take a break and then we'll come back and set up the text fields in the next video.

But you see how the text is also pretty misaligned with the icons here the icon is floating above our

text.

Let's start and we can fix that by let's reduce the size of this text a little bit because I don't think

that these should be quite as big as that text there.

So where we set the color to the theme top how it top blue let's also set a font size here of one rim

and you can go ahead and copy that style and paste it down on the typography for our email as well and

we can save that page will refresh.

Now we have a much nicer looking smaller text and the phone icon is pretty nicely aligned but this bottom

icon the e-mail icon is still having issues so we can come and on the email icon.

Well let's add a style next to the margin right.

With a vertical line set to bottom and I believe that we had use this before when we were setting up

the footer Slash.

And what this does is it tells the image which points on the image should be anchored to the page.

And this is telling it to do that to the bottom so that the bottom of the image will be the anchor point.

And so that should bring it down onto the same line as our text.

So let's go ahead and save the file and we can see that that did indeed jump to a much nicer looking

position.

We'll go ahead and take a break here now before we come back in the next video and start setting up

our text fields.