All language subtitles for 18. Creating The Call To Action Continued

Let's go ahead and set the background image for our call to action now so we can actually see this properly.

And we'll start by coming inside of our grid container this big the whole wrapping container and just

above it will add our div with a class name of classes.

Classes dot background and then we'll close that off.

And now we can come up and we need to import the background so it will come underneath our import statements.

And I said earlier that we're actually going to be using two backgrounds so we'll import the background

from one directories up to directories and then assets and then background background.

Dog j peg the only J pegs and we'll import mobile.

Background.

Background from two directories assets mobile background dot j peg.

So make sure you have both of those correct.

And then we'll come inside of our styles object and add the background style we can actually go over

to the landing page once again and we can find either the revolution background or the info background

doesn't really matter.

They're both the same and what's copy those styles and come back over to the call to action and pace

that style in of course this time though we're going to need to change revolution background to just

the background that we had imported but now we also need to make sure that the mobile background is

applied at the right time.

So underneath these styles we'll add a theme dot breakpoints dot down for medium which is when we begin

to show the draw and here will change our background image to be we can just copy this value paste up

the mobile background and then we need to put a height on our container like we've done before to make

sure that our image pops up.

So here on our wrapping grid container let's add a style giving a height of 60 m.

Now if we go ahead and save this we'll see the page refresh.

And there we have our image now to get our text from sitting above it to actually sitting on top of

it.

We need to come to our grid item and give it a style setting our position to absolute like we have done

for all of the rest of the items.

So we can save this.

We'll see the page refresh and now our text is sitting correctly on top of the image.

And now that is looking much better also really quick.

Want to make this subtitle text a little bit bigger but I don't want to change the styling that we had

used for this text above which we're copying with the subtitle to text.

So on our typography subtitle too let's just give that a style.

Changing the font size to one point five rim.

Now if we save them we'll see that that gives us a bit of a bigger text which is what I had wanted.

Well let's go ahead and move the text down now here into the center of this container.

And so since this container has a direction of row this outer main container has the default direction

of row and we want to move the text down we need to use our line items to change that cross axis and

we'll set this to center.

So let's save that and we'll see the text now is in the center of the container and looking much better

but we need to push this off the edge here like we've done with everything else and so on.

This wrapping a grid item will actually add a margin left here of 5 m you can save that page will refresh

and we can see we've now got a border consistent with all of the rest of the items on the page.

So looking very good very consistent and still matching up very very closely with the design file let's

work on our free estimate button now and outside of this grid.

Item for the text once I add our grid item where we will be wrapping our button so we'll just put a

button here with a variance of contained to give us that nice filled in look and the text free estimate

can also go ahead and we'll set the class name of classes dot estimate button and we'll come up to create

this style.

Make sure you get the comma there and we'll create the estimate button style extending the theme dot

typography Dodd estimate style we have been using and then setting the border radius of 50 a height

of 80 a width to 0 5 a background color of theme dot palettes dot common dot orange and a font size

of one point five RIM.

So let's save this and we'll see the R button is not immediately visible but that is because it is up

here since it does not have the style position of absolute that we had on our text however.

If you try to come in on this grid item rapping the button and you wanted to add a style here with the

same position of absolute OK you'll see the page refresh and you'll think OK this is a step in the right

direction but now if you go to move these elements and distribute them along this axis by setting a

justify of space between here on our main container you'll see the elements do not move and that is

because we are positioning them absolutely.

So what we'll actually do in this case is we are going to come down and get rid of this div where we're

setting the background we're in completely get rid of it and we're going to add the class name of classes

background to our main container.

OK.

So here we can take this style that we're setting with a height of 60 m and instead in the background

style we can set 60 m right there.

Now let's go ahead and remove the position of absolute from both of these grid items.

Get rid of that whole style and we'll leave the justify space between on our grid container as well

and let's go ahead and save this now and we'll see the page refreshes.

And now you see we have the desired look by setting the background on the grid container instead of

a nother div that they have to avoid.

We then avoided having to mess with the absolute positioning and the grid items will just be contained

within the grid container as normal now I would like to push our estimate button off the edge of the

screen here and so on our estimate button style.

Let's give it a margin right of 5 m to be consistent with the rest of the styles that we have made.

We'll say that and now we've got a nice little border here and I think that now this is looking really

good.

So it's come in we'll open it up to the nice full screen size and we'll see this looks really nice here.

And this is smaller than our other sections but I did want it to be not taking up as much space.

And when you scroll all the way to the bottom it should be the only thing you see.

So it does that and I think it looks good.

So we'll scroll it down and you can see how that picture resize is nicely.

And as we keep scrolling down you'll see that now our mobile background has hit.

And so now I used a section that doesn't include that lighthouse because fitting it in on all the different

devices just started to make it kind of look weird.

So I think that this was a much cleaner look but we'll have to do some changes as we get all the way

down to are even smaller sizes because you see then it really starts to do some weird things.