Bootstrap Snippet Login Page using HTML CSS Javascript

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div id="wrapper">
    <form name="login-form" class="login-form" action="" method="post">
    
        <div class="header">
        <h1>Login</h1>
        </div>
    
        <div class="content">
        <input name="username" type="text" class="input username" placeholder="Username" />
        <div class="user-icon"></div>
        <input name="password" type="password" class="input password" placeholder="Password" />
        <div class="pass-icon"></div>       
        </div>
        <div class="footer">
        <input type="submit" name="submit" value="Login" class="button" />
        </div>
    <span>For more Visit the author <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik</a></span>
    </form>
</div>
<div class="gradient"></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
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
    color: #fff;
    background: #f676b2; /* Safari */
}
::-moz-selection {
    color: #fff;
    background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
body {
    background: rgb(17, 109, 100);;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:300;
    text-align: left;
    text-decoration: none;
    height: 500px;
}
#wrapper {
    /* Center wrapper perfectly */
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
$('input[type="submit"]').click(function(){
  $('.login').addClass('test')
  setTimeout(function(){
    $('.login').addClass('testtwo')
  },300);
  setTimeout(function(){
    $(".authent").show().animate({right:-320},{easing : 'easeOutQuint' ,duration: 600, queue: false });
    $(".authent").animate({opacity: 1},{duration: 200, queue: false }).addClass('visible');
  },500);
  setTimeout(function(){
    $(".authent").show().animate({right:90},{easing : 'easeOutQuint' ,duration: 600, queue: false });
    $(".authent").animate({opacity: 0},{duration: 200, queue: false }).addClass('visible');
    $('.login').removeClass('testtwo')
  },2500);
  setTimeout(function(){
    $('.login').removeClass('test')
    $('.login div').fadeOut(123);
  },2800);
  setTimeout(function(){
    $('.success').fadeIn();
  },3200);
});
$('input[type="text"],input[type="password"]').focus(function(){
  $(this).prev().animate({'opacity':'1'},200)
});
$('input[type="text"],input[type="password"]').blur(function(){
  $(this).prev().animate({'opacity':'.5'},200)
});
$('input[type="text"],input[type="password"]').keyup(function(){
  if(!$(this).val() == ''){
    $(this).next().animate({'opacity':'1','right' : '30'},200)
  } else {
    $(this).next().animate({'opacity':'0','right' : '20'},200)
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Login Page"
Bootstrap 3.3.0 Snippet by Besnikhetemi

Related: See More

Questions / Comments:

"Login Page" Bootstrap 3.3.0 Snippet by Besnikhetemi

Related: See More

Questions / Comments:

"Login Page"
Bootstrap 3.3.0 Snippet by Besnikhetemi