DEV Community

Cover image for How to make a simple Transparent Login form using HTML, CSS, and Javascript
keshavs759
keshavs759

Posted on • Originally published at vidyasheela.com

How to make a simple Transparent Login form using HTML, CSS, and Javascript



In this article, we will learn how to make a responsive transparent login page in HTML and CSS. Actually, if you know HTML and CSS, creating a front-end design for a login form isn't that difficult. However, you may be short on time, in which case employing templates like these can come in handy.

A login page is a web page or website entry page that requires user identification and authentication, which is often performed by entering a username and password. Logins may grant access to the entire site or only a portion of it. In addition to enabling site access, logging in allows the website to track the user's activities and habits.

As mentioned above in we are here to learn how to make a responsive transparent login page template using HTML and CSS. Following is the code to make such. The code is easy to understand.

We have created a "div" with the class name "background"  to set the blurred background images. Another "div" named container holds the login form and other elements. We have created this element transparent. To make it transparent we set "background: transparent;"  in its style. To make this login page responsive we have set media queries at different width levels. You can understand other styling by going through the code. I recommend you to watch this video along with this code.

CODE:

NOTE:

These look good, but just a note. You're not supposed to use Google login buttons without the G icon on a white background. It's against the style guidelines & in severe cases could result in losing access to the people api.

You can download the file from here.

Also read:

If you encounter any problem with the code feel free to comment.

Discussion (0)