A Pen by Chaitanya-Pratap-Singh on CodePen.
Created
December 14, 2021 07:42
-
-
Save Chaitanya-Pratap-Singh/623260c89ee15a5c24e7fab74ff90aa1 to your computer and use it in GitHub Desktop.
LOGIN Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="bg-img"> | |
| <div class="content"> | |
| <header>Login To 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 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> | |
| 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"; | |
| } | |
| }); | |
| </script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap'); | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| user-select: none; | |
| } | |
| .bg-img{ | |
| background: url('https://icecube-eu-403.icedrive.io/thumbnail?p=%2BAJ1T6NPMKXPRbja975I%2FLGB1pA%2FBz2VN8gcBZhDvBZZZI29XcCbKsn7o6K9Qspsz5ZDOat9%2FFazDCGpNCjgWnJyFQmD6%2Bdtxv2b0HpF5RNr6yRo5tsIN1cG1wlY989H&w=1280&h=1280&m=cropped'); | |
| 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.7); | |
| } | |
| .content{ | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| z-index: 999; | |
| text-align: center; | |
| padding: 60px 32px; | |
| width: 370px; | |
| transform: translate(-50%,-50%); | |
| background: rgba(255,255,255,0.04); | |
| box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75); | |
| } | |
| .content header{ | |
| color: white; | |
| font-size: 33px; | |
| 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: 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: 16px; | |
| } | |
| .show{ | |
| position: absolute; | |
| right: 13px; | |
| font-size: 13px; | |
| font-weight: 700; | |
| 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{ | |
| color: white; | |
| text-decoration: none; | |
| font-family: 'Poppins',sans-serif; | |
| } | |
| .pass:hover a{ | |
| text-decoration: underline; | |
| } | |
| .field input[type="submit"]{ | |
| background: #3498db; | |
| border: 1px solid #2691d9; | |
| color: white; | |
| font-size: 18px; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| font-family: 'Montserrat',sans-serif; | |
| } | |
| .field input[type="submit"]:hover{ | |
| background: #2691d9; | |
| } | |
| .login{ | |
| color: white; | |
| margin: 20px 0; | |
| font-family: 'Poppins',sans-serif; | |
| } | |
| .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: #4267B2; | |
| border: 1px solid #3e61a8; | |
| } | |
| .instagram{ | |
| background: #E1306C; | |
| border: 1px solid #df2060; | |
| } | |
| .facebook:hover{ | |
| background: #3e61a8; | |
| } | |
| .instagram:hover{ | |
| background: #df2060; | |
| } | |
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment