started right here I'm in the source code of the website and here this is the end of the testimonial section so let's add a comment over here and let's type.
End of testimonial section and let's go ahead and start with the contact Section so if we go back to our design here we can see this is the contact Section so let's go over.
Here and uh let's create a section and let's give it an ID of contact and in this uh we need to have this content inside a fixed WID wi so if we zoom out we can see that it has this.
Fixed width so let's go ahead and set a division with a class of container and we have already added the max width style over here in the CSS and.
Form and for now I'll just remove the action and uh let's start with this first section where we have this email ID text field and also this name text field so I'll just add both of them.
Inside a division with the class of group and in this let's create an input field and let's set the type to text and let's add a placeholder and uh let's type email and I'll just duplicate this.
And uh the next one is is uh full name so I'll just tap full name over here in the placeholder then let's go ahead and create this text area so let's go ahead and go outside this group and let's.
Create a text area I'll just go ahead and delete all of this and let's add a placeholder and let's type your message and then we need to have this button so for that I'll just create an.
Input field with the type of submit and uh let's go ahead and give it a class of BTN and let's set the value to send message and now let's go back to our design and uh this is how it looks right.
- How To Add Animated Card To Your Blogger Website (GSAP Animation)
- 7 Steps Infographic **FREE DOWNLOAD** PowerPoint Template
- Excel VBA Introduction Part 25 - Arrays
Now let's go ahead and style this using - ID Card Make
CSS so let's go to style CSS file and uh here let's create a comment I'll just type contact Section and let's go ahead and start with the form so let's type.Hash contact form and let's set the display to flex and and uh let's set the flex direction to column and let's go ahead and add a gap of 12 pixels between the elements and.
Let's also add a margin top of 32 pixels and this is how it looks right now let's go ahead and style these input fields and also this text area so let's type hash contact form input and hash.
Contact form text area and first of all let's set the width to 100 % and now we can see it has this width of 100% now we want these two elements to be one next to the other so.
Let's target the group so let's typ hash contact group and uh let's set the display to flex and uh let's add a gap of 12 pixels and now we can see these two elements are one next to the other.
Now let's go ahead and continue styling these input fields and this text area so here let's go ahead and add a font family of inter and sensitive and let's set the font.
Size to 16 pixels and let's go ahead and add a padding of 8 pixels top and bottom and 16 pixels left and right and let's set a border of 1 pixel solid light.
Gray and uh let's add a background color of light gray let's tap ef ef ef and now if we click on these uh input fields we have the this outline so let's remove that list Ty.
Outline none and now we don't have the outlines right now for the text area we will just have some more height so let's type contact.
Form text
Area and let's set the height to 160 pixels and uh now if you go over here we can see that we have this option of resizing the text area so I'll just.Disable that you can just type resize none and now we don't have the option of resizing all right now let's go ahead and style this button so let's tap hash contact and we have this class of BTN.
For the button so let's add that class over here and uh here we can see that we already have these Styles added because of.
The BTN class that we have over here so we have this BTN class over here now let's go ahead and make some changes in the button of the contact form so here let's set the max width of the button to.
200 pixels and uh let's set the background color to dark gray and let's set the color of the text.
To White and let's set the padding to 12 pixels and cursor to pointer and now when we hard this we'll just change the color a little bit so.
Let's tap hash contact button colum hover and let's set the background color to Black and let's add smooth transition over here so I'll just St transition all to 300 milliseconds e and.
Now we can see we have this hover effect and with that we have completed designing the contact Section now let's go ahead and style the footer so first of all let's write the.
HTML now here is the end of the contact Section so I'll just create a comment I'll just Ty end of contact Section and uh now for the footer let's create a footer element and in that we need to.
Have a Max width for all the content so here we can see we have this footer but for all the content we have this Max width so we need to add this container division so let's tap container over.
Here now in this we need to have these three different sections on the left side we need to have this logo and then we have this links in the center section and then we have these social media.
Icons so let's create a division with the class of sections and on the left side we have a section so let's create a division and I'll just give it a class of section.
Left and here I'll just Ty lb Dot and then we need to have this middle section so let's create another division over here inside sections and let's go ahead and give it a class name of.
Section Center and in this we need to have this heading so I'll just tap S3 and let's tap quick links and then we need to have these two links over here.
So I'll just create an un ordered list for this and in list items we'll have anchor tags and here let's type privacy policy and let's create another list items I'll just copy this and the next.
One is uh terms and conditions and here for this logo we also need to have it go to the homepage so I'll just create an anchor tag for this so let's create an anchor tag and.
Uh here I'll just type lb Dot and we also have a class for the logo so I'll just type class and let's type logo over here and the next thing we need to have is the last section which is on the.
Right side so let's create another division over here and let's give it a class name of section right now in this we need to have this heading so I'll just type.
S3 and we have to type follow us and then we need to have these three social media icons so for that let's create a division with a class of Socials and in that we will have anchor.
Tags and here you can add the links of your social media pages instead of this hash and then let's create an IMG tag and in the source List have images for Slash and we have these icons over here.
So we have Facebook Twitter and Linkedin so I'll just select Facebook icon.svg and let's go ahead and copy this and paste it two more times and the next one is.
Twitter and the last one is LinkedIn and then lastly we need to have this copyright info so I'll just copy this let's go back and uh we need to have this outside this uh container.
Division so let's go ahead and create a division with the class of copyright and let's paste the text over here right now let's go ahead and style this so let's create a comment I'll just have footer.
And the first thing we need to do is we need to change the background color to this color right here so this is how it looks right now so let's tap footer and let's set the background color to e FF.
EF and let's set the color of all the text to Black right now let's go ahead and add some padding top so let's T padding top and let's set the value to 30 pixels and now we can see we have.
This padding top right now let's go ahead and style this logo so let's Ty footer logo and uh let's go ahead and set the font size to 30.
Pixels and let's go ahead and set the font weight to bold let's remove the underlines by typing text decoration none and let's set the color of the text to.
Black right now we need to have all these three sections one next to the other so for that let's target the container division which is this division with a class of sections so.
Let's have footer sections and let's set the display to flex and let's set a gap of 50 pixels between the elements and justify content to space between and now we can see that all.
