WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de fastbug70
1745
fastbug70
Abrir en el editor
Publica tu código
Recomendado
18 November 2024
Pantalla de bienvenida
1 April 2025
Lista de tareas inteligentes
10 May 2025
Un código de Mete
HTML
Copy
Andev Web
Login
Username
Password
Remember me
Forgot password?
Don't have an account?
Register
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } :root { --primary-color: #ffffff; --second-color: #d0d0d0; --black-color: #000000; } body { background-image: url("https://i.postimg.cc/qRk8Qk49/20008380-6221846.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } a { text-decoration: none; color: var(--second-color); } a:hover { text-decoration: underline; } .wrapper { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: rgba(0, 0, 0, 0.2); } .login_box { position: relative; width: 450px; backdrop-filter: blur(25px); border: 2px solid var(--primary-color); border-radius: 15px; padding: 7.5em 2.5em 4em 2.5em; color: var(--second-color); box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2); } .login-header { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); width: 140px; height: 70px; border-radius: 0 0 20px 20px; } .login-header span { font-size: 30px; color: var(--black-color); } .login-header::before { content: ""; position: absolute; top: 0; left: -30px; width: 30px; height: 30px; border-top-right-radius: 50%; background: transparent; box-shadow: 15px 0 0 0 var(--primary-color); } .login-header::after { content: ""; position: absolute; top: 0; right: -30px; width: 30px; height: 30px; border-top-left-radius: 50%; background: transparent; box-shadow: -15px 0 0 0 var(--primary-color); } .input_box { position: relative; display: flex; flex-direction: column; margin: 20px 0; } .input-field { width: 100%; height: 55px; font-size: 16px; background: transparent; color: var(--second-color); padding-inline: 20px 50px; border: 2px solid var(--primary-color); border-radius: 30px; outline: none; } #user { margin-bottom: 10px; } .label { position: absolute; top: 15px; left: 20px; transition: 0.2s; } .input-field:focus ~ .label, .input-field:valid .label { position: absolute; top: -10px; left: 20px; font-size: 14px; background-color: var(--primary-color); border-radius: 30px; color: var(--black-color); padding: 0 10px; } .icon { position: absolute; top: 18px; right: 25px; font-size: 20px; } .remember-forgot { display: flex; justify-content: space-between; font-size: 15px; } .input-submit { width: 100%; height: 50px; background: #ececec; font-size: 16px; font-weight: 500; border: none; border-radius: 30px; cursor: pointer; transition: 0.3s; } .input-submit:hover { background: var(--second-color); } .register { text-align: center; } .register a { font-weight: 500; } @media only screen and (max-width: 564px) { .wrapper { padding: 20px; } .login_box { padding: 7.5em 1.5em 4em 1.5em; } }
JS
Copy