Login page using HTML AND CSS

Document { padding: 0; margin: 0; } / Element selector / body { height: 100vh; background: linear-gradient(to right, rgb(86, 163, 240), rgb(239, 106, 223)); display: flex; justify-content: center; align-items: center; } / Class selector / .login-box{ background-color: white; padding: 40px; border-radius: 10px; max-width: 350px; } .login-box h2{ text-align: center; margin-bottom: 20px; } .login-box input{ width: 100%; margin-bottom: 16px; padding: 10px; border: 1px solid rgb(196, 194, 194); border-radius: 6px; transition: border-color 0.3s; } / psudo classes */ .login-box input:focus{ border-color: rgb(20, 132, 230); outline: none; } .login-box button{ width: 100%; padding: 10px; background-color: rgb(109, 136, 245); color: white; font-weight: bold; border: none; border-radius: 6px; transition: background-color 0.3s; } .login-box button:hover{ background-color: rgb(59, 95, 238); } .login-box p{ margin-top: 20px; text-align: center; } .login-box p a{ text-decoration: none; color: rgb(109, 136, 245); } .login-box p a:hover{ text-decoration: underline; } Login Login Don't have an account? Sign up

May 12, 2025 - 15:22





    
    
    Document
    



    
        Login
        
            
            
            
            Don't have an account? Sign up