WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Login page
3825
pan4o
Open In Editor
Publish Your Code
Recommended
2 March 2025
HTML, Login Register animated
23 August 2025
Login & Registration Form HTML (Turkish)
18 October 2024
Page web de Modern
HTML
Copy
Login page
Made by pan4o
Login
Remember me
Forgot password?
Login
Don't have an account?
Register here!
CSS
Copy
* { font-family: sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url(https://c.wallhere.com/photos/da/70/digital_art_landscape_illustration_skyline-2285476.jpg!d) no-repeat; background-size: cover; background-position: center; #credits {position: fixed; bottom: 10px; right: 10px; color: rgb(255, 255, 255); font-size: 12px; font-family: Arial, sans-serif;} } .container { width: 420px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); color: #fff; border-radius: 10px; padding: 30px 40px; } .container h1 { font-size: 36px; text-align: center; } .container .input-box { position: relative; width: 100%; height: 50px; margin: 30px 0px; } .input-box input { width: 100%; height: 100%; background: transparent; border: none; outline: none; border: 2px solid rgb(255, 255, 255, 0.2); border-radius: 5px; font-size: 16px; color: #fff; padding: 20px 45px 20px 20px; } .input-box input::placeholder { color: #fff; } .input-box i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; } .container .remember-forgot { display: flex; justify-content: space-between; font-size: 14.5px; margin: -15px 0px 15px; } .remember-forgot label input { color: #fff; margin-right: 3px; } .remember-forgot a { color: #fff; text-decoration: none; } .remember-forgot a:hover { text-decoration: underline; } .container .btn { width: 100%; height: 45px; background: #fff; border: none; outline: none; border-radius: 5px; box-decoration-break: 0px 0px 10px rgba(0, 0, 0, 0.1); cursor: pointer; font-size: 16px; font-weight: 600; color: #333; } .container .register-link { font-size: 14.5px; text-align: center; margin: 20px 0px 15px; } .register-link p a { color: #fff; text-decoration: none; font-weight: 600; } .register-link p a:hover { text-decoration: underline; }
JS
Copy