And till now we have created the design of this hero section now in this video we will add the design of this my project section so here we.
Can see if you scroll down we have already written the html of the my project section in this video we will add the css so let's get started .
Right here i'm in the css of our design so let's create a comment and i'll just type sections so the first thing we will do is style this heading now we need to add the same styles for all the headings.
In our sections so if you scroll down we can see we have headings for all the sections and if you go to our original design here we can see we have this.
Styling for the heading and if you scroll down we have the same styling for all the headings so first of all let's style all the.
We can see for the section we have this h2 so let's type h2 and first of all let's set the font size to 60 pixels and we need to set the color of the text to white.
I also need to change the background color of the sections so if you go back to the original design here we can see we have this dark color for this first section and for the second section we.
Have a gray color and then we have the dark color and then we have the gray color so we need to alternate these two colors in the sections.
So here we just type section and by default we will set the background color to the dark color and we have already created this variable over here at the top.
So we have the dark color over here and also the gray color right now what we will do is we'll type section colon end of type and here we'll just type even.
So this will select all the even Wesdigital
Sections like the second section the fourth section the sixth and so on so he will just have background and we'll set the color to gray color.And now let's go back and here we can see we have this dark color here for the first section and then we have a light color for the second section and we cannot see the.
Difference clearly because we have this gap over here so first of all let's tile the headings so here for the headings we'll first of all remove the margin and we'll add a.
Margin bottom of 40 pixels and we'll also text align it to the center and we'll also type text.
Transform and set it to uppercase so here we can see we have our heading now for all the sections in general we will have some padding so let's go back and here for the section let's type.
Padding and let's set the padding to 140 pixels for top and 0 for right 100 pixels for the bottom and 0 for left so now we have the padding for the.
Sections right now the next thing we need to do is we need to add the same text over here at the top so here we can see we have this text.
Written over here so for that we will use a before selector so here i'll just type section h2 column column before now here we need.
To add a content property and for example if i just type one two three we can see one two three is being displayed over here before the heading now we want this to be positioned relative to this.
Heading
So for this h2 i'll just type position relative and here we need to type position absolute.And now here instead of typing one two three we need to add the same text so for that let's go back to our html and we will use a data attribute for that so for the first h2 i'll just type.
Data hyphen title and we'll set it equal to my projects and we'll do the same for all the other headings so for the second heading.
We will type data hyphen title services and then we have the testimonials section we don't have a heading in that.
And then we have the skills section so here let's type data hyphen title my skills and then we have the contact section so.
Here let's type data hyphen title contact me right that's it with the headings of the sections now let's go back to our css.
And here instead of one two three let's type attr for attribute and here we'll just have data hyphen title now let's position this correctly so let's set the.
Top position to negative 60 pixels and let's set the left position to 50 and we also need to type transform translate x and negative 50 to bring it exactly to the center.
And we'll set the font size to 100 pixels and we'll set the font weight to 100 and we also set the color of the text to rgba 255 255 255 and for the opacity.
I'll just type 0.1 and now we can see that the text is displayed in two different lines so for that you type white space and set it to no wrap.
And now we can see we have the correct styling for the heading and if you scroll down we have the styling for all the headings so that's it with the styling of the.
Heading now let's style this gallery so let's go back to our css and let's create a comment let's type my project section and let's go back to our html and.
For the project section we have this division with the class of gallery so let's style that here i'll just type dot gallery and we'll set the display to grid and now we.
Need to have three columns so let's type grid template columns and let's set it to one fr one fr one so this will make sure that it will have three columns with the same width and.
Will also set a gap of 36 pixels and let's go back and here we can see we have all the images displayed over here in three columns right now for all the images let's set.
The width and the height to 100 percent so let's type gallery img and let's type width of 100 and height of 100 and we'll also type object fit to cover.
So that it has the correct aspect ratio right now the next thing we need to do is when we hover over these images we want to display the title and we also want to.
Increase the size of the image so let's do that let's go back to our css and here we'll just type gallery img colon hover and let's type transform.
Scale and let's set the scale to 1.2 and we'll also add smooth transition so here i'll just start transition and we set it to all 400 milliseconds is.
And now if you hover over this we can see that the image increases the scale now we want to increase the scale of the image but we don't want to increase the.
Overall width and height of the project so here we can see the width and the height of the project remains the same so for that let's target the parent division so here.
We can see we have this project division over here and in that we have the image so here i'll just type gallery project and we'll set the overflow to hidden.
And now let's go back and now if you hover over this we can see that the overall height and width stays the same all right now the next thing we will style is the title.
So let's go back and if you go back to our html file here we can see we have this division with the class of title so let's go back to our css and here we'll just type gallery.
Project title and now we need to position this title relative to the project so here for the project i'll just type position relative.
And here for the title i just have position absolute and let's set the bottom position to 2 pixels and we'll also set the left position to.
2 pixels and the right position to 2 pixels and we'll also set a padding of 10 pixels top and bottom and 24 pixels left and right.
We'll set the font size to 18 pixels and we'll set the font weight to 800 now let's see the background color to the dark color.
And let's set the color of the text to white right now we don't want to display this title at the beginning we just want to display it when we hover over this image.