1 Answer

0 votes
by (487 points)

Hello guys, 

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. 

The login Default User is Admin and Password is 1234. Change this user name and Password with your own. 

312 questions

91 answers

6 comments

5,034 users

4 Online Users
0 Member 4 Guest
Today Visits : 7066
Yesterday Visits : 2524
Total Visits : 6982856
...