WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un code par fastbug70
1743
fastbug70
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 December 2024
Un code par efficientcloud646
10 June 2025
Un code par alejandrokundrah
23 June 2025
Un code 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