In this tutorial, we will design a Login system by using HTML, CSS and JavaScript.This tutorial
helps you to design a login page design in your website.
HTML:
_____________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="" content=""/>
<!-------custom css-->
<link rel="stylesheet" href="style.css" type="text/css"/>
<Title>Login</Title>
</head>
<body>
<div class="container">
<img class="img-container" src="hoodie-.png" alt="logo" height="130px" width="130px"/>
<div class="sub-container">
<input type="text" placeholder="Username" id="name" class="txt" autocomplete="off"/>
<input type="password" placeholder="Password" id="password" class="txt" autocomplete="off"/>
<input type="button" value="login" id="" onclick="myfunc()" class="btn"/>
<h3 class="heading">Forgot Password?<a href="#" class="heading1">Click Here</a></h3>
</div>
<h1 id="nam"></h1>
<h1 id="pas"></h1>
</div>
<script>
function myfunc(){
var name=document.getElementById('name').value;
var password=document.getElementById('password').value;
if(name==="waseem")
{
if(password==="waseem")
{
location.replace('success.html');
}
else
{
location.replace('warning.html');
}
}
else
{
location.replace("warning.html");
}
}
</script>
</body>
</html>
CSS:
_____________________________________________________
body{
padding: 0;
margin: 0;
background-color: rgb(255,194,0);
}
.container{
margin: 15px auto;
height: 550px;
width: 400px;
}
.img-container{
position: relative;
top: 70px;
left: 125px;
border-style: solid;
border-color: white;
border-radius: 70px;
border-width: 3px;
}
.sub-container{
margin-top: 0px;
height: 300px;
width: 400px;
background-color: white;
}
.txt{
position: relative;
top:90px;
left: 65px;
padding:12px 80px 12px 15px;
margin-bottom: 9px;
background: rgba(237, 237, 237,0.8);
border-style: solid;
border-width: 2px;
border-color: rgba(237, 237, 237,0.8);
border-radius: 2px;
outline: none;
}
.btn{
position: relative;
top:91px;
left: 80px;
padding:8px 85px 8px 85px;
text-transform: uppercase;
background-color: rgb(255,194,0);
border-style: solid;
border-width: 2px;
outline: none;
border-color: rgb(255,194,0);
}
.txt:focus{
border-style: solid;
border-width: 2px;
border-color: rgb(255,194,0);
}
.btn:hover{
border-style: solid;
border-width: 2px;
border-color: rgb(255,194,0);
background-color:rgba(237, 237, 237,0.8);
}
.heading{
position: relative;
top:95px;
left: 95px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px;
color: rgba(0, 0, 0, 0.4);
}
.heading1{
color: rgba(0, 0, 0, 0.4);
padding-left: 4px;
}
_________________________________________________________________________________
0 Comments