All language subtitles for 8. Creating The Services Block - Custom Software

Would the hero block in place we can now move on to the next section of the home page which is the services

block.

This is going to contain a little icon and some text to describe each of the services that we have listed

on the Web site.

We're going to start by creating the custom software part and then we'll use that as our template to

create the other parts.

So if you don't remember exactly what that looks like.

Here is the screenshot of the entire services block with all of the different sections.

And if you think for a moment about how we would set this up using our grid containers and items we'll

definitely need a container for all of them together.

And then each of the individual sections will be a grid item and in each of those sections we have the

text and the button on the left and then our icon on the right.

And so I think the by breaking it down like that we should be able to guarantee the alignment that we're

looking for.

And it should all flow together pretty easily.

So let's go ahead and jump over to our code editor to get started.

OK.

And here we are and the first thing I'm going to do real quick is on this grid item the one containing

our entire hero block.

Let's go ahead and right next to this going to add some javascript so we can put in a comment and I'm

just going to put five dashes and then a hero block another five dashes and then close off the comment.

And that way it'll just be easy to find that this whole grid item that that is the code for our hero

block.

And that'll make it a little more clear once we get all the rest of the content in so let's start now

and we'll come underneath of this grid item.

So we'll create our second section for our services and we'll make this a grid item open that up and

it will add a comment right next to this grid item for the services block

it we go in inside of here.

We will have our grid container to hold all of the content for this block and I'll make sure to set

the direction of row on there just so that it's clear for each of our blocks that they are being laid

out horizontally within the overall column layout of the home page within this container.

We will have each of the sections for the different services.

So it will start out with a grid item and this will contain a typography component.

And we're going to set actually the variant of this to an H four.

And it'll contain the text custom software development so that develop mint.

So that is the title for this little section.

And then if we come underneath this let's create a another typography component.

But this time a variance of a subtitle one will close that off and we'll put the text save energy energy

save time save money and then we'll come down create one more typography component which is a variance

of subtitle 1.

Again we'll close that off and we'll put the text inside here.

Complete digital digit total solutions and then a comma from investigation to celebration.

And then let's come and I'm going to wrap the words celebration with a span so span in front and behind

this closed off.

There we go and to make sure we get a space in here properly.

Let's inject some javascript with just a space character.

Let's go ahead and save this real quick just to see where we're at.

And it looks like that actually is not a bad start.

Well let's get the learn more button in there though.

So underneath our typography component here let's create a button component with a variant of outlined

and we'll close off to put learn more inside.

But we're actually we can just come up to the button up here the learn more button for the hero and

copy that span that has the style margin right of 10.

We're going to copy that.

We're going to use that again down here for this learn more as well.

So make sure you get that.

And then underneath this span we'll add our button arrow component with a width of 10 a height of 10

and a fill of theme palettes common dot blue.

So we can save that.

And it looks like I forgot to close this.

Make sure you get the closing tag on there and then save.

We'll see the page refresh.

Now we've got a learn more button what's also on the word celebration inside the span makes sure we

get a period at the end of that and then we'll save.

I just like the way that looks right they're sort of just having it hanging off.

But now we need to go ahead and let's get the custom software development icon.

That's going to be here up on the screen before we go in and finish up our styles.

So let's come to the top of the page and underneath the animation data let's import custom software

icon from up one directory assets custom software icon dot s v g so let's scroll back down here and

since this grid container is containing this whole software development section and then this item is

containing all of our text we need to go ahead and create an item next to that which will contain our

icon.

So this first grid item here is all of this.

And since that's in a container with direction of row when we add another item that will appear over

to the right of this item which is exactly where we want the icon.

So what's come in inside this grid item we created let's add an image tag within Ault of custom software

icon and a source of the custom software icon that we have imported.

We can go ahead and close that off and if we go ahead to save this we'll see the page refresh.

And now we've got our nice icon there the icon looks really good just how it is.

So let's go ahead and start styling this text as well to get this all in order.

So we set the H for variant for the title and the subtitle one variance for both of our little lines

here.

So let's open up our theme dot J.S. file and underneath are h H3 style let's add in H 4 variant.

Make sure you get the karma underneath that and we'll give this a font family of railway a font size

of one point seven five REM a color of using the back ticks and then injecting our javascript the arc

blue variable.

And lastly a font weight of 700.

So that will make it a little bit bolder.

So we can save this and we'll see the page refresh.

And now we've got a nice styled title that looks like our design file to style these extra lines down

here that we have set with the subtitle.

Let's go ahead and we'll start actually by creating a new constant up here of ARC Gray and we'll make

this the color 8 6 8 6 8 6 as a nice pretty default gray and then what's come down and under our H for

style let's add a subtitle one variant.

Make sure you get the comma here.

Make sure you get the subtitle one not just a subtitle.

And then we'll set this to a font size of one point to five REM a font weight of three hundred.

So a little lighter and a color of using the back takes arc Gray which we just created can save this.

We'll see the page refresh.

And now our text again that looks just like the design file definitely comes together quickly when you

have the grid system to manage all of this alignment and stuff like that for you.

I think we can flip back over to our landing page file now though and in the design file you'll see

that the word celebration is actually styled differently.

It's orange and it has a different font which is actually the Pacifica font that we use for the estimate

button.

So on the span that we had created around the word celebration let's add a class name to this equal

to classes dogs special text special text and then we can come up to our styles object and add the special

text style with a font family of Pacifica and a color of theme palettes common orange.

So let's say that now you can see are a cool looking styled word right there.

Let's get this learn button taken care of.

So we can come down and here where our button is.

Let's add a class name of classes to learn button and it will come up to the top where we had the learn

button.

Hero styles and let's go ahead and we're actually going to cut all of these styles except the very last

three.

So we've the font size height and width but everything else we can go ahead and cut and we'll cut that

empty line out and let's go back over to our theme dot J.S. file.

And underneath are a subtitle one style.

Let's go ahead and add another style here of learn button and a paste in all of those styles that we

had just copied.

But of course we have to change where we're referencing the theme here to use are back ticks and then

inject are ARC blue color and we'll do the same thing right here although I actually I just realized

I keep forgetting we can just put in the variable without having to inject it.

So arc blue and I'm just going to replace these two arc blue I don't know why I keep forgetting that

arc blue.

There we go.

So we'll save that with the page refresh.

It's like I missed this arc gray right here arc Gray.

We'll save that and everything is still working properly but let's come back to the landing page and

now that we have all of those worn buttons styles centralized in the theme we need to make sure that

we extend the theme dot typography dot learn button styles.

So if we save that we'll make sure that everything is still in order.

Now we can go ahead though and that learn button class that we added on to our new word button.

Let's go ahead and add that style here and learn button style where we will again extend the theme typography

Griffey dot worn button style and then we'll give this a font size of just zero point seven REM and

a height of 35.

So we'll save that.

We'll see how this looks and this looks pretty good.

It looks a little thin though so I'm going to actually add a padding of 5 to this as well which is just

going to make it not quite as long as I was coming from some padding but then make it a little bit fatter

up on the top.

So that gives it a little bit of better look and it matches up with the design.

I would also like to hear on these lines the two different subtitles.

I'd like to add a little bit of spacing in between those.

I think that that would look a little bit better.

So let's come down and on the first subtitle one the save energy save time save money let's add a class

name to this of classes dot subtitle and we'll come up to our styles object and add the subtitle class

and we'll just give it a margin bottom of a 1 m and if we save that C page refresh and now we've got

a little bit of more space in between those two.