HTML Login Frame
HTML Login Frame:
________________________________________________
1.HTML Login Frame
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML Login Form</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="main"> <div class="login"> <form> <label>Login Form</label> <input type="text" name="txt" placeholder="User Name" required=""> <input type="email" name="email" placeholder="Email" required=""> <input type="password" name="paswd" placeholder="Password" required=""> <button>Login</button> </form> </div> </div> </body> </html>
2.Style.css
body{ margin: 0; padding: 0; align-items: center; min-height: 100vh; font-family: sans-serif; display: flex; justify-content: center; background: black; } .main{ width: 350px; height: 500px; background: green; overflow: hidden; border-radius: 10px; } label{ color: white; font-size: 20px; justify-content: center; display: flex; margin: 60px; font-weight: bold; cursor: pointer; } input{ width:60%; height: 20px; background: white; justify-content: center; border: none; outline: none; display: flex; margin: 20px auto; padding: 10px; border-radius: 5px; } button{ width: 60%; height: 40px; margin: 10px auto; justify-content: center; display: block; color: white; background: black; font-weight: bold; margin-top: 20px; outline: none; border: none; border-radius: 5px; transition: .2s ease-in; cursor: pointer; } button:hover{ background: green; }
_____________________________________________
Dark Hers
YouTube
https://instagram.com/darkhers
https://www.facebook.com/darkhers
TikTok
https://www.tiktok.com/@darkhers
https://www.pinterest.co.uk/darkhers
Comments
Post a Comment