This is a nice login page using html, css, javascript in one single file. Just copy this code and paste it in a html file. Then save this file and open it with browser. Enjoy ......
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
*{
text-align: center;
padding: 5px;
}
li {
list-style-type: none;
text-align: center;
padding-bottom: 5%;
}
input {
background-color: #f4f4f4;
border: 1px solid green;
border-radius: 2px;
text-align: left;
color: white;
}
h1{
font-family: sans-serif;
color: #F07334;
}
.container {
font-family: sans-serif;
border: 1px solid #F07334;
width: 24%;
text-align: center;
margin: auto;
border-radius: 12px;
background-color: white;
padding-bottom: 10px;
- webkit-box-shadow: 3px 0px 10px 0px black;
- moz -box-shadow: 3px 0px 10px 0px black;
box-shadow: 3px 0px 10px 0px black;
}
.submit{
background-color: green;
color: white;
border: 1px solid black;
border-radius: 5px;
width: 40%;
font-family: sans-selif;
font-size: 18px;
transition: 0.9s ease;
text-align: center;
padding: 5px;
cursor: pointer;
}
.submit.hover {
background-color: #F07334;
color: black;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.password, .username {
width: 50%
}
body {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Login</h1>
</div>
<form name="login" onsubmit="return validateForm() ;" method="post">
<ul>
<li>Username: <input class="username" type="text" name="username">
</li>
<li>Password: <input class="password" type="password" name="password">
</li>
</ul>
<input type="button" class="submit" value="Log In" name="submit" onclick="validate()">
</form>
</div>
<script>
var count = 2;
function validate ()
{
var user = document.login.username.value;
var password = document.login.password.value;
var valid = false;
var usernameArray = ["Admin"]
var passwordArray = ["1234"]
for (var i = 0; i < usernameArray.length; i++)
if (user == usernameArray[i])
if (password == passwordArray [i])
{
valid = true;
break;
}
if(valid)
{
alert("Login was successful");
window.location = "wwww.google.ie"
return false ;
}
var again = "tries";
if (count ==1)
{
again = "try"
}
if(count >= 1)
{
alert("Wrong password or username")
count--;
}
}
</script>
</body>
</html>
Just replace the redirect link as your own link where you redirect after successful login.