OK, next up, we're going to start our service section.
And first, we need to create our e-mail for our service section, so let's go back and our index thought
e-mail file and let's create in our comment a service section.
Let's keep it cool underneath, it puts it in and also a section.
And as always, let's also Kopit enthusiasts file.
Now, let's create a section tag again and let's give it the idea of services.
But then here again, we're going to give it a title, so a H to services.
After each two.
Again, I'm going to create a general container which will create free, which will contain again,
I'm going to create a general container which will create container services.
So service.
Container.
Look within here, we'll have free services, but each one of them, I'm going to name service.
So let's create a class of services or service and I'm going to multiply it by three, and this would
create free containers.
Now, let's go in the first of them.
Actually, I'm going to do it anyway, so it in here, I'm going to hold down now.
Option on the Mac or all on a PC going to create the age free tag.
After each free tag, I'm going to create the icon tag and after the icon tag, I'm going to create
a paragraph tag with a Lauren Tam I believe law Lauren 10.
OK, now each with tags.
First one.
Would be webdesign.
The second one, really Web development.
And the first service will be Web hosting.
Now for the anchor tags, we need font awesome, so let's go to font awesome.
And he actually one of them we already have, because we show you it's a screen on our services.
And then to use that, hmm.
OK, so I need this one, this one and this one.
Now, I already know them, I know I already know what kind of classes I need to use, so within our
anchor tag, I will now type in a class of F is then F a dash and dash nip and also F a dash three X.
And I said save and I see what happened.
I actually I need to go here and go out of service section.
Hey there we go.
First of all, the service section is stuck.
Why is that.
Because it's the second section and it's a oord section.
So I just go in here into styling and the first thing I need to do is to change the color of the text
because we can see you can see anything.
So within our service section, going to target the idea of services
and within this I'm going to target our age to.
And changed the color to hash ever.
Also.
We need to go into service and all kinds of services.
She was just ServiceSource saw this and also here, I'm going to give this a color of epithet.
And they should fix our problem to save.
Services for.
OK, so this.
There we go.
Now, we're not finished with our stuff, with our e-mail.
We still need we have this one.
I'm just going to copy this class, going to our next icon down here pasted in.
Well, what just happened?
So let's try it again.
Copied a class going to.
I can tag it.
This shouldn't happen.
Why is this copying the class right click?
Copy, right click.
At least that's much better.
And I'm just going to change the class.
Instead of pen, we have a pencil.
And their ruler.
OK, that's it, safe and let's see what we get, we got our best man ruler.
Yeah, okay.
So the last thing was the database.
So let me paste in here again the clip, the class, and let's change this one to database.
I it's safe and there we go, we have our service sections in our e-mail.
OK, so now let's get into styling.
First, the service section section is Social Services.
You to displayed as flex.
We're going to change the flex direction to call them again.
You have to justify the content center and allow the items to the center.
And also want to give this a bit of a margin from the top, not the bottom, the top of the room, so
let's see what we just did.
There we go.
There's also a section now let's take care of our services.
So first of all, the service container so has services.
And within this, the class of service container.
Dash cam, Dana.
And we also need to display this as flex.
And then we're going to use the flex wrap property because we want when we shrink anything together.
Deflects items to rap, so let's use flaks rap.
OK, I'm going to also give them margin from the top of forum.
Now, let's see how they look, I say slowly forgetting to say, OK, now I also want to give them a
bit of space around them.
So let's go back in here.
And I say space justify content with space around, OK, let's say.
And there we go.
Nassib, let's start each and every service, so first of all, on the change, the background color,
the white.
OK, that's much better.
Now, let's give them also a max width of 300 pixels.
Each and every service will have only 300 pixels for the width.
And let's give them also a shadow of zero zero 15 pixels spread and find pixel.
OK, they have a box.
I don't know.
I was given a margin of error, margin of one gram and also a padding.
Off to Rome
now, we're going to display them as flags again, so within the within a service, we have free items
and now we can display each and every one of them as flags unless change reflects direction to a column.
OK, so there we go now, because we display them as facts, we can now play around with them by aligning
the items to the center and also.
That's the apex, the line to the center.
OK, so let's take a look.
Excellent.
I fear that they will.
No, because I want later on to have a homosexual actually let me do this right now, so I need our
services.
I copied this go down here.
When I hover over them so as to a hover effect.
To change my curse at the pointer, so in order to indicate that I am over a service like.
Then let's do a transform of scale of let's increase then, so one point zero one.
This just means I'm going to increase them by 10 percent and then we're going to adjust to a transition
of point five seconds and ease.
And I'm also going to copy this transition up here, so not only what I'm hauling in, but also as I'm
holding out.
Now, the change, also the background color to ash five by five and the color of the text.
Itself to harsh epithet.
OK, so let's see how this looks promising and after that, when we hover over them, call the background
changes and also the color of the text.
And we have that nice Porchetto.
Okay, so I think basically that's it for a service section so soon, the next one by.