"Easy Log in form"
Bootstrap 3.2.0 Snippet by umarshokat

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 ---------->
<section id="login">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-wrap">
<h1>Log in with your email account</h1>
<form role="form" action="javascript:;" method="post" id="login-form" autocomplete="off">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="somebody@example.com">
</div>
<div class="form-group">
<label for="key" class="sr-only">Password</label>
<input type="password" name="key" id="key" class="form-control" placeholder="Password">
</div>
<div class="checkbox">
<span class="character-checkbox" onclick="showPassword()"></span>
<span class="label">Show password</span>
</div>
<input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Log in">
</form>
<a href="javascript:;" class="forget" data-toggle="modal" data-target=".forget-modal">Forgot your password?</a>
<hr>
</div>
</div> <!-- /.col-xs-12 -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</section>
<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
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
/* --------------------------------------------------
:: Login Section
-------------------------------------------------- */
#login {
padding-top: 50px
}
#login .form-wrap {
width: 30%;
margin: 0 auto;
}
#login h1 {
color: #1fa67b;
font-size: 18px;
text-align: center;
font-weight: bold;
padding-bottom: 20px;
}
#login .form-group {
margin-bottom: 25px;
}
#login .checkbox {
margin-bottom: 20px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#login .checkbox.show:before {
content: '\e013';
color: #1fa67b;
font-size: 17px;
margin: 1px 0 0 3px;
position: absolute;
pointer-events: none;
font-family: 'Glyphicons Halflings';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function showPassword() {
var key_attr = $('#key').attr('type');
if(key_attr != 'text') {
$('.checkbox').addClass('show');
$('#key').attr('type', 'text');
} else {
$('.checkbox').removeClass('show');
$('#key').attr('type', 'password');
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: