"Login page form"
Bootstrap 4.0.0 Snippet by Anil Kumar Chaudhary

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://code.jquery.com/jquery-2.1.0.min.js" ></script>
<body>
<div id="formWrapper">
<div id="form">
<div class="logo">
<h1 class="text-center head">The form</h1>
</div>
<div class="form-item">
<p class="formLabel">Email</p>
<input type="email" name="email" id="email" class="form-style" autocomplete="off"/>
</div>
<div class="form-item">
<p class="formLabel">Password</p>
<input type="password" name="password" id="password" class="form-style" />
<!-- <div class="pw-view"><i class="fa fa-eye"></i></div> -->
<p><a href="#" ><small>Forgot Password ?</small></a></p>
</div>
<div class="form-item">
<p class="pull-left"><a href="#"><small>Register</small></a></p>
<input type="submit" class="login pull-right" value="Log In">
<div class="clear-fix"></div>
</div>
</div>
</div>
</body>
</html>
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
body{
background: url(http://www.timurtek.com/wp-content/uploads/2014/10/form-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:'HelveticaNeue','Arial', sans-serif;
}
a{color:#58bff6;text-decoration: none;}
a:hover{color:#aaa; }
.pull-right{float: right;}
.pull-left{float: left;}
.clear-fix{clear:both;}
div.logo{text-align: center; margin: 20px 20px 30px 20px; fill: #566375;}
.head{padding:40px 0px; 10px 0}
.logo-active{fill: #44aacc !important;}
#formWrapper{
background: rgba(0,0,0,.2);
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
transition:all .3s ease;}
.darken-bg{background: rgba(0,0,0,.5) !important; transition:all .3s ease;}
div#form{
position: absolute;
width:360px;
height:320px;
height:auto;
background-color: #fff;
margin:auto;
border-radius: 5px;
padding:20px;
left:50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
var formInputs = $('input[type="email"],input[type="password"]');
formInputs.focus(function() {
$(this).parent().children('p.formLabel').addClass('formTop');
$('div#formWrapper').addClass('darken-bg');
$('div.logo').addClass('logo-active');
});
formInputs.focusout(function() {
if ($.trim($(this).val()).length == 0){
$(this).parent().children('p.formLabel').removeClass('formTop');
}
$('div#formWrapper').removeClass('darken-bg');
$('div.logo').removeClass('logo-active');
});
$('p.formLabel').click(function(){
$(this).parent().children('.form-style').focus();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO
Elegant Login Page
My Awesome Login Page
login-form

Questions / Comments: