Here is the code using html,css and js to create a log in page:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #f5f5f5; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; padding: 0; } form { background-color: #fff; padding: 30px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; } input[type=text], input[type=password] { padding: 10px; margin: 10px; border-radius: 5px; border: none; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } input[type=submit] { background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; margin: 10px; cursor: pointer; } input[type=submit]:hover { background-color: #3e8e41; } .error { color: red; margin: 10px; font-size: 14px; display: none; } </style></head><body> <form onsubmit="return validate()"> <h1>Login</h1> <input type="text" id="username" placeholder="Username" required> <input type="password" id="password" placeholder="Password" required> <input type="submit" value="Login"> <div class="error" id="error"></div> </form> <script> function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "" || password == "") { document.getElementById("error").innerHTML = "Please enter both username and password."; document.getElementById("error").style.display = "block"; return false; } else if (username != "example" || password != "password") { document.getElementById("error").innerHTML = "Invalid username or password."; document.getElementById("error").style.display = "block"; return false; } else { document.getElementById("error").style.display = "none"; return true; } }
</script>
</body>
</html>
It's just a sample.