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
1742
fastbug70
Abrir en el editor
Publica tu código
Recomendado
14 May 2025
baúl del avión
7 November 2024
Plantilla de página de destino de sitio web
14 December 2025
Sólo un jefe
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