"Untitled"
Bootstrap 4.1.1 Snippet by Atheeq

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <link rel="stylesheet" href="login-page.css"> <script defer src="login-page.js"></script> </head> <body> <main id="main-holder"> <h1 id="login-header">Login</h1> <div id="login-error-msg-holder"> <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p> </div> <form id="login-form"> <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username"> <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password"> <input type="submit" value="Login" id="login-form-submit"> </form> </main> </body> </html>
html { height: 100%; } body { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; display: grid; justify-items: center; align-items: center; background-color: #3a3a3a; } #main-holder { width: 50%; height: 70%; display: grid; justify-items: center; align-items: center; background-color: white; border-radius: 7px; box-shadow: 0px 0px 5px 2px black; } #login-error-msg-holder { width: 100%; height: 100%; display: grid; justify-items: center; align-items: center; } #login-error-msg { width: 23%; text-align: center; margin: 0; padding: 5px; font-size: 12px; font-weight: bold; color: #8a0000; border: 1px solid #8a0000; background-color: #e58f8f; opacity: 0; } #error-msg-second-line { display: block; } #login-form { align-self: flex-start; display: grid; justify-items: center; align-items: center; } .login-form-field::placeholder { color: #3a3a3a; } .login-form-field { border: none; border-bottom: 1px solid #3a3a3a; margin-bottom: 10px; border-radius: 3px; outline: none; padding: 0px 0px 5px 5px; } #login-form-submit { width: 100%; padding: 7px; border: none; border-radius: 5px; color: white; font-weight: bold; background-color: #3a3a3a; cursor: pointer; outline: none; }
const loginForm = document.getElementById("login-form"); const loginButton = document.getElementById("login-form-submit"); const loginErrorMsg = document.getElementById("login-error-msg"); loginButton.addEventListener("click", (e) => { e.preventDefault(); const username = loginForm.username.value; const password = loginForm.password.value; if (username === "user" && password === "web_dev") { alert("You have successfully logged in."); location.reload(); } else { loginErrorMsg.style.opacity = 1; } })

Related: See More

Argon Dashboard PRO

Questions / Comments: