Hello friends, today in this blog you will learn how to create Neumorphism Registration form using html and CSS. Along with this registration form, you will learn to add social media login icon. As you know, the form is used to access a form or page. The user of the registration form has to give a field for name gmail password etc .. which the user has to fill and sing up the field.
We have previously created a responsive registration form using html or css in which animated radio button, checkbox and input are shared which you can see by clicking on this link.
As you can see in this photo, it is designed using an html or CSS, it is a Neumorphism registration form. In which you can see the social media login button is designed in the left side and the input field of FOR in the right side is designed with the icon which looks beautiful and attractive which you will learn to make it easy.
This Neumorphism registration form is shared with the design only, there will be no working on entering the name and password. Only html and CSS are used to create this form. There is no back source source function embedded in this registration form.
Registration Form Using Html And CSS Source Codes
We know about html of registration form inside body tag, we have taken a div whose class name is wrapper, this class name is given with another class name named fl this fl class name we have style of css The float from is written to the left and another div is taken under the class name wrapper, whose class name is named main and inside this main class name, an h1 tag and two divs are taken, h1 is the largest heading. Is used to give headings and the class names of both div are named sign-up and sign-up-l.
Three a tag is taken inside the class sign-up a tag is called anchor tag which is used for the link The class name of these three is given as btn ico bg1 hov1 btn ico bg2 hov2 and btn ico bg3 hov3 The i tag is taken inside all three classes, the i tag is used here for linking the font-icon, the class name is given inside this i tag, the icon is linked to the class name itself. The name is given as fab fa-facebook, fab fa-twitter and fab fa-google-plus-g
The class fab fa-facebook means the Facebook icon is linked, similarly the class fab fa-twitter means the Twitter icon is linked and the class fab fa-google-plus-g means the google-plus icon Is linked
A form tag is taken inside the class sign-up-l, inside which four p tags are taken. The p tag is called a paragraph tag. It is also called the inline block element. This p tag has a class name that has three The name is inpt and the input tag is taken inside the p tag, type text inside the first input and type email inside the second input and type password is taken in the input third and finally the input submit and class name sub is given in the input char.
Now we know about the style of css of registration form, like always, this time the page has zero margin and padding in the form and after doing box-sizing border-box, the class wrapper has width height and background-color Is styled by giving it likewise all other tags are styled
If you know JavaScript or Python, then you can use this form in your blog or website, this form is not designed in response, to design it in response, you need to use @ media screen according to every device You can make it responsive by giving size from it, if you are in it in the beginning, then this form is very interesting for you.
If you are having difficulties in understanding this Neumorphism registration form, you can understand it by watching the video of this form which is shared below.
Three a tag is taken inside the class sign-up a tag is called anchor tag which is used for the link The class name of these three is given as btn ico bg1 hov1 btn ico bg2 hov2 and btn ico bg3 hov3 The i tag is taken inside all three classes, the i tag is used here for linking the font-icon, the class name is given inside this i tag, the icon is linked to the class name itself. The name is given as fab fa-facebook, fab fa-twitter and fab fa-google-plus-g
The class fab fa-facebook means the Facebook icon is linked, similarly the class fab fa-twitter means the Twitter icon is linked and the class fab fa-google-plus-g means the google-plus icon Is linked
A form tag is taken inside the class sign-up-l, inside which four p tags are taken. The p tag is called a paragraph tag. It is also called the inline block element. This p tag has a class name that has three The name is inpt and the input tag is taken inside the p tag, type text inside the first input and type email inside the second input and type password is taken in the input third and finally the input submit and class name sub is given in the input char.
Now we know about the style of css of registration form, like always, this time the page has zero margin and padding in the form and after doing box-sizing border-box, the class wrapper has width height and background-color Is styled by giving it likewise all other tags are styled
If you know JavaScript or Python, then you can use this form in your blog or website, this form is not designed in response, to design it in response, you need to use @ media screen according to every device You can make it responsive by giving size from it, if you are in it in the beginning, then this form is very interesting for you.
If you are having difficulties in understanding this Neumorphism registration form, you can understand it by watching the video of this form which is shared below.
Video Tutorial of Registration Form Using Html And CSS
I hope you have understood by watching this video, what type of code has been written and for whom the said code has been used, you must have understood that if you want to get the source code of this registration form then you can go down You can get the source code. This source code is given in two files, one html and second CSS file, copy these files and paste them in your file.
Post a Comment