Hello friends, in this blog today you will learn how to design footer with html and CSS. In this footer, the contact form of that contact has been placed, which you will learn to use with the help of html and CSS. If you are a beginner in this field and you know html and CSS then you will learn to make this footer easily. Let me tell you, this footer is only designed
Footer : You will know what footer is used for and it is said that I can tell you that footer is used on a small section at the bottom of the page within the website. It is often used to display data or copyright information. Is what you learn to make it easily. That we shared
As you can see in this image, it is a footer designed using html and CSS only. In this footer, a contact us form has been designed which you will learn how to apply in the footer. We have written the code inside the form tag of html and the input field has been designed using the input tag and using a button tag, submit button has been created which you can see in this image.
Footer Design Using Html And CSS Source Codes
First of all, we know about the html code of footer design. We took a div inside the body tag named class wrapper. Inside this class name, another div tag is taken, whose class name is footer. It took two div inside the class footer. Whose class names are fot-mid and bottem-footer
There are four divs inside the class fot-mid whose class name is box-footer and inside all these divs the text is written with the h1 p tag, the last div whose class name is box-footer, inside it the form tag is taken which you Looking at the image of
A div is taken inside the class bottem-footer with two p tags inside it. The p tag is called a paragraph tag. The text of copyright is written inside these two p tags, which you are seeing at the bottom of the footer of the image.
Now know about the css of the footer design.First of all, like this time, the page of the footer has been zeroed and the box size is bordered and the box-size is boxed, followed by the width height and background-color to the wrapper. All other tags have been designed by styling as follows
This footer is not designed in responsive. To design in responsive, you can style the footer by using @ media screen and make it responsive by size according to the device. If you know JavaScript or Python then you can use this footer in your blog or Can use in website
If you are having difficulties in understanding the design of this footer, then you will understand by watching the video of this footer design, this video can be easily seen by clicking on the video given below.
Video Tutorial of Footer Design Using Html And CSS
I hope you have understood this by watching videos of this footer design and you have understood by looking at the code of this footer, the code of this footer is written only in html and CSS, if you know about html and CSS then you can easily find it You must have understood that if you are in this in the beginning then you will get a lot of help from this.
If you like this footer design, then you can get the source code of this footer which we have given in two files, one is html and the other is CSS file code, scroll down and copy both these files and copy and paste in your file. Take that will help you understand
Post a Comment