"logIn and signUp form"
Bootstrap 3.2.0 Snippet by xrozix

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>login and signUp form</head>
<body id="top">
<div class="container-flued" >
<div class=" col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2 noPadding">
<ul class="list-group" style="width:50% ;float:right">
<li class="active list-group-item-choice list-group-item " >
<a class="swichChoices " href="#signIn">signIn</a>
</li>
<li class="list-group-item-choice list-group-item ">
<a class="swichChoices" href="#signIn">signUp</a>
</li>
</ul>
</div>
<div class=" col-lg-4 col-md-4 col-sm-4 col-xs-4 noPadding">
<div class="row">
<form action="" method="post" id="loginform">
<div class="form-group">
<label for="username" class="sr-only">User Name</label>
<input type="text" class="form-control input-lg input-block" id="username" name="username" placeholder="username">
</div>
<div class="form-group">
<label for="password" class="sr-only"> Password</label>
<input type="password" class="form-control input-lg input-block" id="password" name="password" placeholder="password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block" id="submitform" >enter </button>
</div>
</form>
</div>
<div class="row">
<form action="" method="post" id="signUpForm">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#loginform , #signUpForm{
background-color: rgba(231, 232, 232, 0.73);
border: 3px none;
width:100%;
box-shadow: #333 9px 9px 30px 3px inset;
margin-top:0px;
margin-bottom: 0px;
padding: 20px 0;
}
#signUpForm{
display:none;
}
body
{
/*background-image:url(../img/wall.jpg);
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }*/
background-color: #0d6565;
}
.list-group-item-choice{
background-color:#4CAF50;
background-color:#a0b3b0;
border-top: 1px solid #ddd;
border-bottom:1px solid #ddd;
border-right:0px solid #ddd;
margin:auto;
padding:10px 50px;
}
.active {
background: #1ab188;
color: #ffffff;
width:100%;
padding: 30px 52px;
}
.list-group-item-choice:hover{
background: #179b77;
color: #ffffff;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
$('.swichChoices').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
var target =$('.active > a').text();
if(target=="signIn"){
$("#signUpForm").slideUp(function(){$('#loginform').slideDown();});
}
else if(target=="signUp")
{
$('#loginform').slideUp(function(){$('#signUpForm').slideDown();});
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard
Signup form
login-form
Login Form

Questions / Comments: