In this video.
Let's go ahead and then style to have something like this.
So let's get to the component that is the services and we have the CSS file inside that.
So let's work on the services component.
See as the first step is we want to give it a background color for the services container.
So here we go, dart services does container and then let's give it a margin of 20 pixels and then background
color to be hashtag F, that is triple FS.
Well, we didn't see the effect because we are not using the CSS inside this component.
So let's require it quickly.
I start save it.
And now you can see that we have a margin around the container.
Did you see that?
Yes.
Good.
So next step is let's start the services list container.
So here we go, Dot's services dash list does container.
And for this, let's give it a border radius as five pixels and this is padding of 20 POSIX save it.
And now let's have a look a something like this.
But I forgot.
Let's design for mobile first.
So here, here we go.
Great.
I think for this one too, we can have some margin around the image.
Right.
Is too close together here.
So what we can do is that let's locate the header CSS.
Well, let's switch just a little bit.
So let's locate the image itself, which is the profile image container and we can give it margin as
ten POSIX.
So let's see.
Yeah, something like this one.
So the next step is that let's style the items, which is this once to have some card with some colorful
icons.
So back here after the services list container, let's select the services item going to be as service
dash item.
And here let's give margin of $20 and then border radios as $16 and box shadow is going to be zero.
And then for P6 and $30 RG be in with red bin zero and then going zero blue zero and under there are
0.1.
So next step is let's give it part N of 20 parsecs and let's see.
Yes.
Now we have some padding around each.
The next step is that let's increase these icons here.
So we are going to target the services that are icons.
And then the I so I can copy this one and down here change this one to I.
And here let's remove everything and change to font size as to ram and then margin as ten parsecs.
So let's have a look a something like this.
So let's go ahead and add colour to individual icons here.
Remember they have their specific name as F a desktop and then F a fonts.
So let's select those classes.
So don't f a dash code and here we go.
The colour for this one is hashtag E nine for c89 and this one going to be the F eight desktop so I
can copy this one.
And then down here we're going to be as desktop for the icon and the colour is hashtag F, db4, four,
eight.
And lastly, it's about the tablets.
So down here I'll change this one to tablet dash art.
The colour is hashtag c31f0c, so save it and let's have a look a something like this.
You can see that on mobile.
It looks nice.
So let's also work on this one services container.
So let's select the services description container.
So here we go.
Going to be as DOT.
Services.
Dash description.
Does container.
So here you go, display flex and then flex direction to the column and then align items as black starts
and then margin of 20 parsecs.
So let's have a look.
Great.
Something like this.
The next step is that I want to style this services.
If I check the final one, we can see that this is what we have.
Or on mobile, we can reduce the font size of this one.
The choice is yours.
So here, let me select the services container h one span.
So here you go.
Services container.
So this is what I am selecting.
I'm targeting the container and then the span or better.
So you can give this one a class and then inside the case we can target that.
So here I want to change the font size of this 1 to 2.5 RAM and then the color for that one going to
be as hash hashtag fdb4 for eight.
So let's save it.
And now let's have a look.
And indeed, this is what we have.
And this the final one.
We are almost there.
Right.
Great.
So next step is let's tile the bottom.
You can see that we have this button down here.
So let's go ahead and then start that one.
So here we go.
So first of all, I targeted the services container and then the button.
So here you go.
I gave it background color.
Background color as this one and border as none.
Border none.
And border radius is five, six and color of hashtag F, F, and then margin bottom to B, 30 P6 and
then margin top to B $20 and the width of the button to be 120 P6.
That is it.
Save it.
And now let's have a look.
Oh, we have something like this.
There is no padding, so let's add some padding of ten pieces on both sizes.
A something like this.
Now we are done with the description.