<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login - Secure Messaging by [Glz_SQL]</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .login-container { width: 500px; height: 400px; margin: 100px auto; padding: 40px; background-color: #ffffff; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .login-container h1 { text-align: center; color: #3498db; } .input-group { margin-bottom: 30px; } .input-group label { display: block; margin-bottom: 5px; font-weight: bold; } .input-group input { width: 90%; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .login-btn { width: 100%; padding: 20px; background-color: #3498db; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; } .login-btn:hover { background-color: #20efbb; } </style> </head> <body> <div class="login-container"> <h1>Login</h1> <form id="login-form" method='post'> <div class="input-group"> <label for="username">Username</label> <input type="text" id="username" name="username" required> </div> <div class="input-group"> <label for="password">Password</label> <input type="password" id="password" name="password" required> </div> <button class="login-btn" type="submit">Login</button> </form> </div> </body> </html>