"Register + Signup and Login Form"
Bootstrap 3.0.0 Snippet by 252782

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<body class="body-green" data-elink-extension-installed="1.1.5">
<!-- Body -->
<div class="wrapper body-inverse"> <!-- wrapper -->
<div class="container">
<div class="row">
<!-- Sign In form -->
<div class="col-sm-5 col-sm-offset-1">
<h3>Sign In to your account</h3>
<p class="text-muted">
Please fill out the form below to login to your account.
</p>
<div class="form-white">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-block btn-color btn-xxl">Submit</button>
</form>
<hr>
<p><a href=".html#" id="lost-btn">Lost your password?</a></p>
<div class="hidden" id="lost-form">
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
/**colors**/
/*------------------------------------------------------------------
Project: theglobemasters
Version: 1.1.1
Created: 29/08/17
-------------------------------------------------------------------*/
/* ===== Style Toggle ===== */
i.style-toggle-btn {
position: fixed;
z-index: 55555;
top: 100px;
right: 0;
color: #FFF;
background: #777878 /9;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
.style-toggle {
position: fixed;
z-index: 55555;
top: 100px;
right: 0;
background: #777878 /9;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 3px 0 0 3px;
}
.style-toggle > i {
color: #FFF;
cursor: pointer;
}
.style-toggle ul {
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
/** Custom JS ** /
*
* /*------------------------------------------------------------------
Project: theglobemasters
Version: 1.1.1
Created: 29/08/17
-------------------------------------------------------------------*/
// Recent works thumbnail image height resize
//===========================================
$('.recent-works .thumbnail > .image').on( 'resize', function () {
$('.recent-works .thumbnail > .image').height( $('.recent-works .thumbnail > .image').width() / 1.6 );
}).resize();
// Sign In & Sign Out
// ==================
$('#sign-in').on('click', function() {
$("#user-bar").toggleClass("show hidden");
$("#user-bar").toggleClass("animated flipInX");
$("#sign-in").toggleClass("hidden show");
$("#sign-up").toggleClass("hidden show");
$("#sign-in").removeClass("animated flipInX");
$("#sign-up").removeClass("animated flipInX");
return false;
});
$('#sign-out').on('click', function() {
$("#user-bar").toggleClass("show hidden");
$("#user-bar").toggleClass("animated flipInX");
$("#sign-in").toggleClass("hidden show");
$("#sign-in").addClass("animated flipInX");
$("#sign-up").toggleClass("hidden show");
$("#sign-up").addClass("animated flipInX");
return false;
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Angular
Signup form
login-form
Login Form

Questions / Comments: