 |
| 3 layered login with Registration,Login & and Reset Password Forms. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V2.0 by roundCube</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="background">
<div id="signUp">
<div id="signUpInner">
<h3><b>Sign Up</b></h3>
<h4>It's free and always will be</h4>
<div id="signUpForm">
<form role="form">
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control input-lg" id="pwd">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="pwd1" placeholder="Confirm Password">
</div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">© roundCube 2015</a></div>
</div>
<div id="signUpButton">
<button type="submit" class="btn btn-default btn-block btn-lg regButton"><b>REGISTER</b></button>
</form>
</div>
</div>
<div id="login">
<div id="loginInner">
<h3><b>Login form</b></h3>
<h4>Welcome you back to our site</h4>
<div id="loginForm">
<form role="form">
</br>
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control input-lg" id="pwd">
</div>
</div>
</div>
<div id="loginButton">
<button type="submit" class="btn btn-default btn-block btn-lg logButton"><b>LOGIN</b></button>
</form>
</div>
</div>
<div id="reset">
<div id="resetInner">
<h3><b>Reset Password</b></h3>
<h4>Enter your new password</h4>
<div id="resetForm">
<form role="form">
</br>
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" placeholder="New Password" class="form-control input-lg" id="pwd">
</div>
</div>
</div>
<div id="resetButton">
<button type="submit" class="btn btn-default btn-block btn-lg resetButton"><b>RESET PASSWORD</b></button>
</form>
</div>
</div>
</div>
</body>
<style>
#background{
position: absolute;
top:0px;
left:0px;
height:100%;
width:100%;
background-color:rgb(38, 38, 38);
}
#signUp{
position: absolute;
top:15%;
left:35%;
width:30%;
height:400px;
border-radius: 10px;
text-align: center;
z-index: 10;
}
#signUpForm{
position: absolute;
top:30%;
left:10%;
width:80%;
height:60%;
}
#signUpInner{
position: absolute;
top:0%;
left:0%;
width:100%;
height:80%;
background-color: white;
border-radius: 10px;
box-shadow:0px 0px 20px 20px rgba(0,0,0,0.1);
}
#signUpButton{
position: absolute;
bottom:0%;
left:7%;
width:86%;
height:17%;
}
.regButton{
background-color: rgb(139, 199, 25);
border-color: rgb(139, 199, 25);
color: white;
}
.regButton:hover{
background-color: rgb(106, 144, 34);
border-color: rgb(106, 144, 34);
color: white;
}
input{
text-align: center;
}
#login{
position: absolute;
left:12%;
width:25%;
top:17%;
height:300px;
border-radius: 10px;
z-index: 1;
opacity: 0.7;
}
#loginInner{
position: absolute;
top:0%;
left:0%;
width:100%;
height:80%;
background-color: white;
border-radius: 10px;
text-align: center;
}
#loginButton{
position: absolute;
bottom:0%;
left:7%;
width:86%;
height:17%;
}
#loginForm{
position: absolute;
top:30%;
left:10%;
width:80%;
height:60%;
}
.logButton{
background-color: rgb(25, 108, 240);
border-color: rgb(25, 108, 240);
color: white;
}
.logButton:hover{
background-color: rgb(23, 86, 185);
border-color: rgb(23, 86, 185);
color: white;
}
#reset{
position: absolute;
right:12%;
width:25%;
top:17%;
height:300px;
border-radius: 10px;
z-index: 1;
opacity: 0.7;
}
#resetInner{
position: absolute;
top:0%;
left:0%;
width:100%;
height:80%;
background-color: white;
border-radius: 10px;
text-align: center;
}
#resetButton{
position: absolute;
bottom:0%;
left:7%;
width:86%;
height:17%;
}
#resetForm{
position: absolute;
top:30%;
left:10%;
width:80%;
height:60%;
}
.resetButton{
background-color: rgb(229, 34, 42);
border-color: rgb(229, 34, 42);
color: white;
}
.resetButton:hover{
background-color: rgb(222, 20, 28);
border-color: rgb(222, 20, 28);
color: white;
}
#copyright{
position: absolute;
bottom:0px;
left:0px;
height:7%;
width: 100%;
opacity: 0.5;
}
#copyright a{
text-decoration: none;
color:black;
}
@media only screen and (max-width:888px)
{
#signUp{
left:32.5%;
width:35%;
}
#login{
left:8%;
width:30%;
}
#reset{
right:8%;
width:30%;
}
</style>
</html>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
0 comments: