<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>
<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>
</div>
</div>
</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">