This is our progress as of now we have designed the hero section the my project section and the services section and also the my skills section now in this video we will design the.
Contact section and the footer so let's get started now this is our source code so let's go to the index.html file.
And if you scroll down we can see that we have this section with the class of contact and in that we have this form and in the form we have the input fields the text area and the button now if you.
Go to the original design we can see that in the contact form we have all the input fields one below the other so for that let's target this form and we will set the display to flex.
So let's go over here to style.css file and let's create a comment i'll just type contact me and we have a class called contact and in.
And now we can see we have all these input fields one below the other all right now let's style these input fields and this text area so let's go back and here we'll just type contact.
Form input and we have a type of text so i'll just type type text over here and we'll also target the text area so let's type contact form text area and let's set a padding of 8 pixels top.
And bottom and 32 pixels left and right and we'll set the font size to 18 pixels and we'll also set the font family to enter and sans serif.
Right now if we go back we can see that we have the correct styling for the input fields and the text area now here we can see for the text area we have this option to resize.
The text area so if i drag over here we are able to resize the text area now we don't need to have this option right here so let's go back to our css and let's target the text area so i'll.
Just type contact Wesdigital
Form text area and we'll type resize and set it to none now if you go back we can see that we don't have the option of resizing the.Text area and now if we click on any of these input fields or text area we can see that we have this blue outline so let's remove that let's go back to our css.
And let's type contact form input column focus and contact form text area.
Colon focus so these styles will be added when we focus on any of these elements so let's type outline and let's set it to none and now if you go back and if we click.
On any of these input fields or text area we can see that we don't have the outline displayed right now the last thing we need to do in this contact form is to align this button to the right.
So in our original design we can see that we have this button on the right so let's go back and let's target the button.
So for the button we have this button with the class of btn so here i'll just have contact form btn and let's type align self and we'll set it to flex end.
Which will align it to the right and we'll also remove the border so i'll just type border none and now we can see we have the correct styling for the button now let's style.
This footer so let's create a comment over here i'll just type footer now if you go to the index.html file and if you scroll down we can see that we.
Have this footer element so let's target
That here i'll just have footer and if you go back to the original design we can see that for the footer we have.This gray color so let's type background and let's set it to our gray color and we'll also add a padding of 16 pixels top and bottom and zero for left and right.
And here we can see we have the background color added now the next thing we need to do is we need to place all these elements one next to the other so right now we have all the elements.
One below the other so if we go back to our index.html file we can see inside the footer we have this division of the class of wrapper and inside the wrapper we have the logo the copyright.
Information and the social media icons so let's target this wrapper inside the footer so here i'll just type footer wrapper and let's set the display to flex and.
Align items to the center and let's type justify content and set it to space between and now we can see we have all the elements in the correct position we have.
The logo over here we have the copyright information over here and then we have the social media icons let's also change the color of the text so let's set the color of the text to white.
Right now let's style this logo so for the logo we have a division with a class of logo so here i just type footer logo and let's set the font size to 30.
Pixels and we'll set the font weight to 800 and we'll also set the color of the text to var primary color and now let's go back.
And here we can see we have the styling for the logo right now let's have some space between these social media icons so here.
In the index.html file we can see that we have the anchor tags and in the anchor tags we have the images so let's select these anchor tags inside.
The social division so here i'll just type footer social a and let's set a margin of 0 for top and bottom and 32 pixels left and right and now we can see we have this spacing.
Between these anchor tags now we don't want to have margin at the right of the last element so here i'll just type footer social.
A colon last child and i will set the margin right to zero right now the last thing we need to do is decrease the height of these images so here i'll just type footer.
Social img and let's set the height to 40 pixels and that looks alright so that's basically it with the styling of the contact midsection and the footer.
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.