- Hello, Visitor
- Monday, November 11, 2024
Search Result
Home » Html Css
» Form Design
» Transparent Login Form HTML CSS & JavaScript
Transparent Login Form HTML CSS & JavaScript
Posted by NzCoding - 20 December 2021
Html COde:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Html 5 - Transparent Login Form</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="style.css"></head><body><div class="bg-img"><div class="content"><header>Login Form</header><form action="#"><div class="field"><i class="fa fa-user"></i><input type="text" placeholder="Enter Email or Phone" required /></div><div class="field space"><i class="fa fa-lock"></i><input type="password" class="pass-key" placeholder="Enter Password" required /><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 login with</div><div class="links"><div class="facebook"><i class="fa fa-facebook"> <span>Facebook</span></i></div><div class="gmail"><i class="fa fa-envelope"> <span>G-Mail</span></i></div></div><div class="signup">Don't have an account? <a href="#">Signup Now</a></div></div></div><script>const pass_field = document.querySelector('.pass-key');const show_btn = document.querySelector('.show');show_btn.addEventListener('click', function(){if(pass_field.type === "password"){pass_field.type = "text";show_btn.textContent = "HIDE";show_btn.style.color = '#3498db';}else{pass_field.type = "password";show_btn.textContent = "SHOW";show_btn.style.color = '#222';}});</script></body></html>
Css Code:
*{margin: 0;padding: 0;box-sizing: border-box;user-select: none;}.bg-img{background: url('background.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.2);}.content{position: absolute;top: 50%;left: 50%;z-index: 999;text-align: center;padding: 60px 30px;width: 370px;transform: translate(-50%, -50%);background:rgba(255, 255, 255, 0.1);box-shadow: -1px 4px 28px 0px rgba(0, 0, 0, 0.75);}.content header{color: white;font-size: 35px;font-weight: 600;margin-bottom: 35px;font-family: 'Montserrat',sans-serif;}.field{position: relative;height: 45px;width: 100%;display: flex;background: rgba(255, 255, 255, 0.9);}.field i{color: #222;width: 40px;line-height: 45px;}.field input{height: 100%;width: 100%;background: transparent;border: none;outline: none;color: #222;font-size: 16px;font-family: 'Poppins',sans-serif;}.space{margin-top: 15px;}.show{position: absolute;right: 10px;top: 15px;font-weight: 700;font-size: 13px;color: #222;display: none;cursor: pointer;font-family: 'Montserrat',sans-serif;}.pass-key:valid ~ .show{display: block;}.pass{text-align: left;margin: 10px 0;}.pass a{font-size: 13px;color: white;text-decoration: none;font-family: 'Poppins',sans-serif;}.pass a:hover{text-decoration: underline;}.field input[type="submit"]{background: #6e9df3;border: 1px solid #5489eb;color: white;font-size: 18px;letter-spacing: 1px;font-weight: 600;cursor: pointer;font-family: 'Montserrat',sans-serif;}.field input[type="submit"]:hover{background: #5885da;}.login{color: white;margin: 20px 0px;font-family: 'Poppins',sans-serif;}.links{display: flex;cursor: pointer;color: white;margin-bottom: 20px;}.facebook, .gmail{width: 100%;height: 45px;line-height: 45px;margin-left: 10px;}.facebook{margin-left: 0;background: #4267B2;border: 1px solid #3e61a8;}.gmail{background: #db6a6a;border: 1px solid #f07b7b;}.facebook:hover{background: #3157a1;}.gmail:hover{background: #b94a4a;}.links i{font-size: 17px;}i span{margin-left: 8px;font-weight: 500;letter-spacing: 1px;font-size: 16px;font-family: 'Poppins',sans-serif;}.signup{font-size: 15px;color: white;font-family: 'Poppins',sans-serif;}.signup a{color: #3498db;text-decoration: none;}.signup a:hover{text-decoration: underline;}
Get Code in Github
Popular Posts
Featured Post
Categories
- Html Css 7
- More 3
- Card Design 2
- Spinner 2
- GitHub 2
- Laravel 16
- Livewire 12
- Javascript 1
- Form Design 1
- SEO 1
- Php 0
Leave a Reply