Hello, learner In this article, we are going to create a Login and signup Form Design using HTML and Pure CSS. In the earlier past post, we have created Vintage Images Using CSS. Now it is time to create a Login and signup Form design.
IF you are a user of Facebook, Instagram, Twitter, and many more. You will find there a login or sign-up form. You should log in or sign up to enter that website or App service.
Generally, every login form contains a Username and password and Sign up page content Full name, Email address, and Password. In Our login form design, we have two different designs one is login and another sign-up page. As you see in the above image at the top form there is a button like an arrow with one side login and another site sign up. IF you click toward sign up you will get sign up page or if you click toward the login page you will get the login page
In the login form, there is two input section one is Email and another is Your password. There is a forgot password link. At the bottom of the login form, there is a submit button. In the signup form, there is three user input section Your Full Name, Your Email, and Your Password. And the bottom of there is a submit button for submitting the form
Login and signup Form Design using HTML and Pure CSS [Source code]
To create a login and signup Form Design using HTML and Pure CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code.
At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.
After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.
That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media
You might like this
- Responsive dropdown menu using HTML & CSS
- Pricing Card design using HTML and SCSS
- Mouse out animation using CSS
- Footer design using HTML and CSS