WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated login form
2877
Andev.web
Open In Editor
Publish Your Code
Recommended
6 May 2024
Login Form Comic
15 September 2024
Animated Login form
18 May 2024
Multicolor login form
HTML
Copy
Andev Web
Login
Email
Password
Remember me
Forgot Password?
Login
Don't have an account?
Register
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); * { box-sizing: border-box; padding: 0; margin: 0; } body, input, button { font-size: 1rem; font-family: "Poppins", sans-serif; } body { color: hsl(0, 0%, 100%); } input, button { border: none; outline: none; } a { text-decoration: none; } img { max-width: 100%; height: auto; } /*=============== LOGIN ===============*/ .login { position: relative; height: 100vh; display: grid; align-items: center; } .login__img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } .container { position: relative; background-color: hsla(0, 0%, 10%, 0.1); border: 2px solid white; margin-inline: 1.5rem; padding: 2.5rem 1.5rem; border-radius: 1rem; backdrop-filter: blur(10px); } .login__title { text-align: center; font-size: 1.75rem; font-weight: 500; margin-bottom: 2rem; } .login__content, .login__box { display: grid; } .login__content { row-gap: 1.75rem; margin-bottom: 1.5rem; } .login__box { grid-template-columns: max-content 1fr; align-items: center; column-gap: 0.75rem; border-bottom: 2px solid hsl(0, 0%, 100%); } .login__icon, .login__eye { font-size: 1.25rem; } .login__input { width: 100%; padding-block: 0.8rem; background: none; color: hsl(0, 0%, 100%); position: relative; z-index: 1; } .login__box-input { position: relative; } .login__label { position: absolute; left: 0; top: 13px; font-weight: 500; transition: top 0.3s, font-size 0.3s; } .login__eye { position: absolute; right: 0; top: 18px; z-index: 10; cursor: pointer; } .login__box:nth-child(2) input { padding-right: 1.8rem; } .login__check, .login__check-group { display: flex; align-items: center; justify-content: space-between; } .login__check { margin-bottom: 1.5rem; } .login__check-label, .login__forgot, .login__register { font-size: 0.813rem; } .login__check-group { column-gap: 0.5rem; } .login__check-input { width: 16px; height: 16px; } .login__forgot { color: hsl(0, 0%, 100%); } .login__forgot:hover { text-decoration: underline; } .login__button { width: 100%; padding: 1rem; border-radius: 0.5rem; background-color: hsl(0, 0%, 100%); font-weight: 500; cursor: pointer; margin-bottom: 2rem; } .login__register { text-align: center; } .login__register a { color: hsl(0, 0%, 100%); font-weight: 500; } .login__register a:hover { text-decoration: underline; } /* Input focus move up label */ .login__input:focus + .login__label { top: -12px; font-size: 0.813rem; } /* Input focus sticky top label */ .login__input:not(:placeholder-shown).login__input:not(:focus) + .login__label { top: -12px; font-size: 0.813rem; } /*=============== BREAKPOINTS ===============*/ /* For medium devices */ @media screen and (min-width: 576px) { .login { justify-content: center; } .container { width: 400px; padding: 4rem 3rem 3.5rem; border-radius: 1.5rem; } .login__title { font-size: 2rem; } }
JS
Copy