All language subtitles for 15. Creating The Information Block

We've made it to the last section of the actual home page because after this the next part that we'll

do is the call to action which will be repeated on multiple pages.

So the information block is kind of the last piece of that roadmap for the home page which guides you

to the rest of the site.

And if you don't remember what this looks like here is the screenshot.

And this is where we'll have links over to the about us and the Contact Us pages the setup for this

is going to be similar to the last block with the revolution where we used a div with a background image

to set that background within our grid item containing this overall block.

And within that grid item we'll have a single container and that container will have a grid item for

the About Us text and another grid container for the contact us text.

And that should make it very easy to create the alignment that we see here.

And then each grid item for the about us and then the contact section will itself be a container with

a direction of column so we can get that text with the learn more button stacked on top of each other

like that.

So hopefully that gives you a pretty good idea of how we're going to structure this.

So let's go over to the code editor and we'll get started.

Here we are at the bottom of the landing page dot J.S. file and the first thing I'd like to do is actually

this last grid item that we had here.

Let's go ahead and copy one of these comments from above.

And we've got to add one right here for the review revolution block.

So it just helps keep our code a little more clear but then we'll come down underneath of that grid

item and we'll add our next grid item for our information block.

So let's go ahead and paste that comment again and get in the information block right there inside this

grid item.

We said we'll need 1 grid container and all again set the direction the direction of row which I like

to do on these outermost grid containers for each section just to make it clear that we're laying these

out horizontally inside this container will create a grid item and this will be the grid item holding

our.

About us on the left side.

So we'll open this up and this will have a grid container with a direction of now column.

Like we said so we get that laid out top to bottom with our about US title the subtitle and the learn

more button inside here let's create our typography component as a variant of each.

To open that up and this will have the text about us.

So that's our title underneath this will create another typography component.

But this time a variant of a subtitle too.

So we'll create a new subtitled style for this one since we'll need it to be slightly different.

And this will have the text.

Let's get personal.

Let's go ahead and save this now to see our page refresh and we can scroll underneath the revolution

section to see are about us.

And let's get personal section on the page we had already set up our H2 style before.

And that's why we're reusing it.

But we actually for the about section we're going to want this to be white.

So instead of going in and changing that style for the actual H2 variant let's just go in and add a

style property to this H2 variant and we'll set this equal to a color color of white.

And that will just make sure we save this that now the text is receiving the white color.

So it looks like it's hidden but it's still there.

We can go and open up the theme that J.S. folder though and it will come down and underneath the subtitle

one let's add our subtitle to class and make sure to get the comma underneath there and we'll also give

this a color of a white light a font size of one point to five rim and then a far too weights of just

300.

So all we're really changing is the font color from gray to white for that but we can save that and

we'll see the page refresh.

And now we've got our styled subtitled text as well.

Let's close out of the theme J.S. file and now back in the landing page remember how we had to set a

height on our container to make sure that the image had space to fill.

Well we'll have to do the same thing on this grid item.

So here on our container with a direction of row let's go ahead and also add a style giving it a height

of this time just 80 m.

And so now we can come and inside of this grid.

But underneath our grid item let's go ahead and add the div with a class name this time of classes dot

info background and then we can close that off.

And now we'll come up to the top to import our info import info background from assets info background

Dias v g so and of course we'll come down and add to our styles object the info background style with

a background image.

And actually it's going to be almost all these same properties.

So let's go ahead and we'll grab all the properties from our revolution background.

Let's paste that in and then we'll change the revolution background U.R.L. right here to our info background.

We can save this now and we'll see the page refresh and now it looks like we've got a nice container

with our background image.

So this is exactly what we had wanted.

Except you'll notice that we have this gap up here.

And that's from where our text is actually still sitting.

So we need to get that on top of the image just like we had done for the card up here.

Remember how we did that was by setting the card to a position of absolute.

And we need to do the same thing for our about us grid item.

So we'll scroll all the way down here to the information block and here on the grid.

Item wrapping are about us.

Text.

Let's go ahead and add a style here to give it directly a position position of absolute.

So we can save that and we'll see the page refresh and our text is now sitting nicely on top of the

image.

Let's start to get this actually in position though because remember we want it down here centered in

the middle and we want a little border as well because we definitely don't want it pressed all the way

up against the edge like that.

And so to take care of that real quick where we added our style of position absolute.

Let's also go ahead and give it a margin left of a 5 M. And if we save that we'll see the page refresh.

And now we've got that nice little border and I'm using the same value that we had used up here for

these services blocks creating a nice consistent look throughout the home page now and to get the About

Us section down here in the middle.

We're going to have to use our justify and align items properties but to figure out which one we'll

have to think about where the grid item is and where we're trying to move it.

So you can see that we have our grid item is nested inside of the grid container with a direction of

row.

So that's laying us out from left to right horizontally.

And we want to move the text down vertically into the middle.

So that means we're going to want to specify the cross axis for this container and we can do that using

the line items property line items.

So if we set this to center we can save and see the page refresh.

And now we've got our text down in the middle where we want to do let's grab a learn more button now

and we can actually go ahead and we'll just use the one from our custom software block.

So let's grab the button right here.

The entire button.

Copy that we'll scroll down and let's go ahead and paste that under our subtitle to typography component.

Let's save this.

And we'll see the page refresh.

And we've got that button.

But it definitely doesn't look exactly how we wanted.

So we can start by changing the fill on our button arrow actually to white.

And we can get rid of the brackets here.

We don't actually need those.

We can just pass in white.

So if we go ahead and save this we'll see a refresh.

And now we've got a white arrow the button is still taking up too much space though and to fix that

let's actually just go ahead and we'll wrap the button with a grid item since it's within this container

and go underneath the button and we'll close off that grid tag.

And if we save this we will see the page refresh.

And now we've got the same sized button that we had had it from up here and we needed that so that the

button didn't just take up all of this available space to it but let's go now and we'll add a style

to our button component down here because we want all the learned buttons styles and we don't need to

duplicate that again but we need to change all those colors from the blue to white for this one.

So let's add a color of white and a border color of white and we can save that.

We'll see the page refresh.

And now we've got the style that we had wanted.