Loading... Please wait
Run
Login to your account
Username or Email
Password
Login
* , *:before , *:after { margin: 0; padding: 0; font-family: inherit; box-sizing: border-box; } #main { width: max-content; margin: 40px auto; font-family: "Segoe UI" , sans-serif; padding: 25px 28px; background: #151414; border-radius: 4px; border: 1px solid #302d2d; animation: popup 0.4s cubic-bezier(.68,-0.55,.27,1.55); } @keyframes popup { 0% { transform: scale(0.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } h2 { text-align: center; font-size: 28px; margin-bottom: 20px; font-weight: 400; color: #e7e7e7; } .input-parent { display: block; margin-bottom: 20px; } label { display: block; font-size: 16px; margin-bottom: 8px; color: #a4a4a4; } .input-parent input { padding: 10px 8px; width: 100%; font-size: 16px; background: #323131; border: none; color: #c7c7c7; border-radius: 4px; outline: none; transition: all 0.2s ease; } .input-parent input:hover { background: #404040; } .input-parent input:focus { box-shadow: 0px 0px 0px 1px #0087ff; } button { padding: 10px 18px; font-size: 15px; background: #1a3969; width: 100%; border: none; border-radius: 4px; color: #f4f4f4; transition: all 0.2s ease; } button:hover { opacity: 0.9; } button:focus { box-shadow: 0px 0px 0px 3px black; } body { background: #1c1b1b; }
X
Edit in Trycode