Classic Minimalist Login Form - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Classic Minimalist Login Form</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); body { font-family: 'Montserrat', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #fafafa; margin: 0; } .login-container { background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); text-align: center; width: 300px; } .login-container h2 { margin: 0 0 20px; color: #333; } .login-container .input-group { margin: 10px 0; position: relative; } .login-container .input-group input { width: 80%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; outline: none; transition: border-color 0.3s ease; } .login-container .input-group input:focus { border-color: #333; } .login-container .btn { background: #333; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s ease; width: 90%; } .login-container .btn:hover { background: #555; } </style> </head> <body> <div class="login-container"> <h2>Login</h2> <div class="input-group"> <input type="text" id="username" placeholder="Username"> </div> <div class="input-group"> <input type="password" id="password" placeholder="Password"> </div> <button type="button" class="btn" onclick="login()">Login</button> </div> <script> function login() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; if (username && password) { alert(`Welcome, ${username}!`); } else { alert('Please enter both username and password.'); } } </script> </body> </html>