Metabust
Home
Tutorials
References
Guides
Blog
Tools
Login
Simple Responsive Login Form
Run Code
<!DOCTYPE html> <html> <head> <title>The Login Form</title> <style> *{ margin:0; padding: 0; box-sizing: border-box; } html{ height: 100%; } body{ font-family: 'Segoe UI', sans-serif;; font-size: 1rem; line-height: 1.6; height: 100%; } .wrap { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #fafafa; } .login-form{ width: 350px; margin: 0 auto; border: 1px solid #ddd; padding: 2rem; background: #ffffff; } .form-input{ background: #fafafa; border: 1px solid #eeeeee; padding: 12px; width: 100%; } .form-group{ margin-bottom: 1rem; } .form-button{ background: #69d2e7; border: 1px solid #ddd; color: #ffffff; padding: 10px; width: 100%; text-transform: uppercase; } .form-button:hover{ background: #69c8e7; } .form-header{ text-align: center; margin-bottom : 2rem; } .form-footer{ text-align: center; } </style> </head> <body> <div class="wrap"> <form class="login-form" action=""> <div class="form-header"> <h3>Login Form</h3> <p>Login to access your dashboard</p> </div> <!--Email Input--> <div class="form-group"> <input type="text" class="form-input" placeholder="email@example.com"> </div> <!--Password Input--> <div class="form-group"> <input type="password" class="form-input" placeholder="password"> </div> <!--Login Button--> <div class="form-group"> <button class="form-button" type="submit">Login</button> </div> <div class="form-footer"> Don't have an account? <a href="#">Sign Up</a> </div> </form> </div><!--/.wrap--> </body> </html>
Notification
A second ago