In this video.
Let's see how we are going to implement these kinds of services.
So we are going to create a component core services.
So back to our folder here.
Inside the SLC components, let's create one for the core services and I'm going to create one file
for services dot JS and it corresponded CSS as services dot CC.
So let's start with the component.
So let's go forward by making our AFC E and you are good to go.
So for this one, we are going to have a first day that's going to be our services container.
So dart services dash container and here we go.
And inside we are going to have the list of these services, which is this one.
So we have a parent container as that so that we can add some margin.
And then for services list this what we have.
So let's add that one quickly here.
So the first one going to be our services.
Dash lists, dash container rate.
So the services list container is going to drop this once.
That is the service's list description and then the service's list items.
So inside the list container, we are going to add to Dave's one, going to be the description and then
that's going to be the items.
Great.
So let's start with the description.
So here we go.
I'm going to add services description, container two dot services description dash container hit enter.
And I think the container is something like this is dash here.
Great.
So services description container.
And after that for the items two is going to be service item container going to be our service dash
item dash container.
Great.
So let's start with this one first.
So let's collapse this one and let's work on the description.
So here we go.
So here, let's give it h one and says that my awesome.
And I want to style a specific text.
So I'm going to wrap inside span and going to be our services.
Great because you can see that for the final one.
We have services with different color, so that's why I'm adding span between them.
And after that I want to add the description copy here and then we add some dummy text here.
I can add more gray disk cocaine.
And lastly, I'm going to be a button for hide me.
All right, let's see.
So to be able to render it, we are going to call this component inside the app.
So let's go to app and let's bring in the services component, which is this one.
And now after the header, I want to add the component here.
So save it and let's have a look.
And this is what we have.
The next step is that let's add the services item so we are done with this one so I can collapse it.
I'll start and let's work with this one.
So inside here, let's add one day of course, services item is going to be our services dash.
Adam.
And here we go.
And inside, I want to add an icon with a class called f x solid f e code.
When it be as class name, f a dash solid, and then f a dash code.
So save it and let's see.
And we have something like this.
The next step is about the description.
So after the icon, I'm going to add a date called description, going to be as a description, as a
dash description.
And inside let's add a three and call it as web development.
And after the eighth three, let's add the P top four description as that.
So we can see that we have this course for web development, desktop, tablet with different icons.
So here we are going to copy the item and paste it and change the icons and then the title.
So here I will select all and press shift option and down arrow key as that.
Now I have two of them making three.
So let's see.
Indeed we have three.
The final one.
Two, we have three services.
Great.
So let's go ahead and change these icons and then the title.
The first one is this one.
The second one is going to be as F a desktop, we're going to be as F a desktop and then going to be
as desktop development.
And next one going to be the F a tablet art, which is this 1fa tablet.
That's art.
And this I'm going to be as tablet development or tablet.
So let's make it as FU stock or u x design.
I got so you x design.
Great.
So let's see what we have a something like this.