"Parallax Login Form [RELOAD]"
Bootstrap 3.2.0 Snippet by SherylC

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 ---------->
<!--
* parallax_login.html
* @Author original @msurguy (tw) -> http://bootsnipp.com/snippets/featured/parallax-login-form
* @Tested on FF && CH
* @Reworked by @kaptenn_com (tw)
* @package PARALLAX LOGIN.
-->
<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<img src="http://blogs.ktph.com.sg/nutrition/wp-content/uploads/2013/12/KTPH-logo.png" class="img-responsive" alt="Conxole Admin"/>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form" class="form-signin">
<fieldset>
<label class="panel-login">
<div class="login_result"></div>
</label>
<input class="form-control" placeholder="Username" id="username" type="text">
<input class="form-control" placeholder="Password" id="password" type="password">
<br></br>
<input class="btn btn-lg btn-success btn-block" type="submit" id="login" value="Login »">
</fieldset>
</form>
</div>
</div>
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
/**
* parallax.css
* @Author Original @msurguy -> http://bootsnipp.com/snippets/featured/parallax-login-form
* @Reworked By @kaptenn_com
* @package PARALLAX LOGIN.
*/
body {
background-color: #444;
background: url(http://www.bca.gov.sg/data/ImgCont/395/KTPHfromLake.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
.form-signin input[type="text"] {
margin-bottom: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vertical-offset-100 {
padding-top: 100px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
/**
* parallax.js
* @Author original @msurguy (tw) -> http://bootsnipp.com/snippets/featured/parallax-login-form
* @Tested on FF && CH
* @Reworked by @kaptenn_com (tw)
* @package PARALLAX LOGIN.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: