And this is our progress as of now we have created the hero section and also the my project section now in this video we will design the.
Services section and the my skills section so let's get started right now if you go to the original.
Design we can see that for the services section we have these services displayed over here and we also have this hover effect so let's style this.
And if you go back to our html and let's scroll down and here we can see for the services section we have this ul so let's style this.
So here in our css file let's create a comment i'll just type services and let's type dot services ul because we can see for the services.
Padding right now let's style the list items inside the ul so let's type services ulli and first of all let's set the color of.
The text to white and let's set the font size to 30 pixels and let's bring it to the center so let's type text align center we'll also set the text transform to.
Uppercase so just up text transform uppercase and let's add some margin so let's type margin and let's set it to 16 pixels top and bottom and zero for.
Left and right right now let's add the dot that we see on the right when we hover over these services so for that we will use an after.
Selector so here i'll just tap services ulli column column after and let's set the content to blank and we need to position this after selector.
Relative to this list item so here we Wesdigital
Have to type position relative and here we just have position absolute and let's set the height to 8 pixels and the width to 8 pixels.And we need to have a round shape so let's type border radius and set it to 50 and we'll also set the background color to red.
And here we can see we have the dot displayed over here now let's set a right position so here i just type right and let's set it to negative 20 pixels.
Right now we can see that these dots are at the right we want it to be just after these list items so for that let's go back to the ul and let's set the display to flex.
And we'll set the flex direction to column and we'll also align items to the center and now we can see we have the correct positioning we'll also bring this dot to the center.
So for that here in the after selector let's type top of 50 and transform translate y to negative 50 right now we need to display this only.
When we hover over these list items so here i'll just set the opacity to zero and here we'll just type services ul li colon hover column column after and let's set the opacity to one and now.
We can see when we hover over this we have the dot displayed now the next thing we will style is the my skills section so let's go back over here and let's create a comment.
I'll just type skills and let's go back to our index.html file and here we can see for the skill section we have this division with the class of.
Icons container so let's style this
Here i'll just type skills icons container and let's set the display to grid and we'll type grid template columns.And we'll set it to 1fr 1fr 1fr so this will have three columns with the same width and now we can see we have these three columns over here now let's give it a max width so here you start max.
Width and let's set it to 800 pixels and let's also add a background color so that we can see it clearly and we'll also bring this to the center.
So let's type margin and for top and bottom i'll just type 60 pixels and auto for left and right right now let's style these icons so if you go to the index.html file here we.
Can see we have this division with the class of icon and in that we have the image and the skill name so here let's type skills icons container icon and let's set the display to flex and flex.
Direction to column and we'll also align items to the center and justify content to the center right now we'll also have some gap between these icons so here in the icons.
Container let's type gap and let's set it to 100 pixels and let's also remove the background color right now let's style these images.
So let's type skills icons container img and let's set the height to 100 pixels right now let's style the skill text.
So for that we have a division of the class of skill so let's start skills icons container icon skill and let's set the color of the text to white.
And i will set the font size to 20 pixels and we will set a margin top of 24 pixels and we also set.
The pointer events to none so that it is not interactable and now we can see we have the skills displayed over here but if you go back to the original design we can see that the skills are.
Not displayed over here by default if you hover over these we have the skills displayed so for that let's go back and we will set the opacity to 0 by default.
And we'll also add a transition so that we will have smooth animation let's set it to all 400 milliseconds is and here we will add a hover effect so let's tap skills.
Icons container icon colon hover skill and let's set the opacity back to one right now let's go back to our website and now if you hover over this we can.
See that the skill is displayed over here so that's basically it with the my skills section all right so that's it for this video if you have any doubts.
You can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice.