Transparent Login Form with HTML
CSS and JavaScript
In this plan [Login Structure HTML CSS], as you can find in the picture see, this is an Astonishing Straightforward Login Structure which is made utilizing HTML CSS and JavaScript. Javascript is simply used to flip show or conceal passwords. In this login structure, there is a picture, a structure, a few texts, and a few online entertainment symbols. You can change this structure as per your necessities in the event that you have fundamental information on html and css.
Video Tutorial of Transparent Login Form
Transparent Login Form [Source Codes]
To Create Transparent Login Form with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Transparent Login Form</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="bg-img">
- <div class="content">
- <header>Login Into Your Account</header>
- <form action="#">
- <div class="field">
- <span class="fa fa-user"></span>
- <input type="text" required placeholder="Email or Phone">
- </div>
- <div class="field space">
- <span class="fa fa-lock"></span>
- <input type="password" class="pass-key" required placeholder="Password">
- <span class="show">SHOW</span>
- </div>
- <div class="pass">
- <a href="#">Forgot Password?</a>
- </div>
- <div class="field">
- <input type="submit" value="LOGIN">
- </div>
- </form>
- <div class="login">Or <br> login with</div>
- <div class="links">
- <div class="facebook">
- <i class="fab fa-facebook-f"><span>Facebook</span></i>
- </div>
- <div class="instagram">
- <i class="fab fa-instagram"><span>Instagram</span></i>
- </div>
- </div>
- <div class="signup">Don't have account?
- <a href="#">Signup Now</a>
- </div>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- user-select: none;
- font-family: 'Open Sans', 'Open Sans Regular', sans-serif;
- }
- .bg-img{
- background: url('bg.jpg');
- height: 100vh;
- background-size: cover;
- background-position: center;
- }
- .bg-img:after{
- position: absolute;
- content: '';
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background: rgba(0,0,0,0.8);
- }
- .content{
- position: absolute;
- top: 50%;
- left: 50%;
- z-index: 999;
- text-align: center;
- padding: 60px 32px;
- width: 600px;
- transform: translate(-50%,-50%);
- background: rgba(255,255,255,0.07);
- box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
- }
- .content header{
- color: white;
- font-size: 40px;
- font-weight: 600;
- margin: 0 0 35px 0;
- font-family: 'Montserrat',sans-serif;
- }
- .field{
- position: relative;
- height: 45px;
- width: 100%;
- display: flex;
- background: rgba(255,255,255,0.94);
- }
- .field span{
- color: #222;
- width: 20px;
- line-height: 45px;
- }
- .field input{
- height: 100%;
- width: 100%;
- background: transparent;
- border: none;
- outline: none;
- color: #222;
- font-size: 18px;
- }
- .space{
- margin-top: 16px;
- }
- .show{
- position: absolute;
- right: 13px;
- font-size: 13px;
- font-weight: 700;
- color: #222;
- margin-right: 15px;
- display: none;
- cursor: pointer;
- font-family: 'Montserrat',sans-serif;
- }
- .pass-key:valid ~ .show{
- display: block;
- }
- .pass{
- text-align: left;
- margin: 10px 0;
- }
- .pass a{
- color: white;
- text-decoration: none;
- font-family: 'Poppins',sans-serif;
- }
- .pass:hover a{
- text-decoration: underline;
- }
- .field input[type="submit"]{
- background: #785BF8;
- border: 1px solid #2691d9;
- color: white;
- font-size: 18px;
- letter-spacing: 1px;
- font-weight: 600;
- cursor: pointer;
- }
- .login{
- color: white;
- margin: 20px 0;
- }
- .links{
- display: flex;
- cursor: pointer;
- color: white;
- margin: 0 0 20px 0;
- }
- .facebook,.instagram{
- width: 100%;
- height: 45px;
- line-height: 45px;
- margin-left: 10px;
- }
- .facebook{
- margin-left: 0;
- background: #1FA0EE;
- border: 1px solid #3e61a8;
- }
- .instagram{
- background: #1FA0EE;
- }
- .facebook:hover{
- background: #3e61a8;
- }
- .instagram:hover{
- background: #1FA0EE;
- }
- .links i{
- font-size: 17px;
- }
- i span{
- margin-left: 8px;
- font-weight: 600;
- letter-spacing: 1px;
- font-size: 16px;
- }
- .signup{
- font-size: 15px;
- color: white;
- }
- .signup a{
- color: #3498db;
- text-decoration: none;
- }
- .signup a:hover{
- text-decoration: underline;
- }
-
Now paste the following codes into your script.js file
- const pass_field = document.querySelector('.pass-key');
- const showBtn = document.querySelector('.show');
- showBtn.addEventListener('click', function(){
- if(pass_field.type === "password"){
- pass_field.type = "text";
- showBtn.textContent = "HIDE";
- showBtn.style.color = "#3498db";
- }else{
- pass_field.type = "password";
- showBtn.textContent = "SHOW";
- showBtn.style.color = "#222";
- }
- });
-
If you face any difficulties while creating Transparent Login Form or your code is not working as expected, you can download the source code files by clicking download button.