"Application Login"
Bootstrap 3.2.0 Snippet by Herve

<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 ----------> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.css"> <div class="container"> <div class="row"> <div class="com-md-12"> <div class="notification login-alert"> Please Enter Your Username And Password! </div> <div class="notification notification-success logged-out"> You logged out successfully! </div> <div class="well welcome-text"> Hello, to access our app please <button class="btn btn-default btn-login">Log in</button> or <button class="btn btn-default btn-register" disabled="disabled">Register</button> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="well login-box"> <form action=""> <legend>Login</legend> <div class="form-group"> <label for="username-email">E-mail or Username</label> <input value='' id="username-email" placeholder="E-mail or Username" type="text" class="form-control" /> </div> <div class="form-group"> <label for="password">Password</label> <input id="password" value='' placeholder="Password" type="text" class="form-control" /> </div> <div class="form-group text-center"> <button class="btn btn-danger btn-cancel-action">Cancel</button> <input type="submit" class="btn btn-success btn-login-submit" value="Login" /> </div> </form> </div> <div class="logged-in well"> <h1>You are loged in! <div class="pull-right"><button class="btn-logout btn btn-danger"><span class="glyphicon glyphicon-off"></span> Logout</button></div></h1> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); body { background: -webkit-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: -moz-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: -ms-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: -o-linear-gradient(90deg, #FF512F 10%, #DD2476 90%); background: linear-gradient(90deg, #FF512F 10%, #DD2476 90%); font-family: 'Open Sans', sans-serif!important; } .well{ background-color:#fff!important; border-radius:0!important; border:none!important; } .well.login-box { width:300px; margin:0 auto; display:none; } .well.login-box legend { font-size:26px; text-align:center; font-weight:300; } .well.login-box label { font-weight:300; font-size:16px; } .well.login-box input[type="text"] { box-shadow:none; border-color:#ddd; border-radius:0; } .well.welcome-text{ font-size:21px; } /* Notifications */ .notification{ position:fixed; top: 20px; right:0; background-color:#FF4136; padding: 20px; color: #fff; font-size:21px; display:none; } .notification-success{ background-color:#3D9970; } .notification-show{ display:block!important; } /*Loged in*/ .logged-in{ display:none; } .logged-in h1{ margin:0; font-weight:300; }
function varticalCenterStuff() { var windowHeight = $(window).height(); var loginBoxHeight = $('.login-box').innerHeight(); var welcomeTextHeight = $('.welcome-text').innerHeight(); var loggedIn = $('.logged-in').innerHeight(); var mathLogin = (windowHeight / 2) - (loginBoxHeight / 2); var mathWelcomeText = (windowHeight / 2) - (welcomeTextHeight / 2); var mathLoggedIn = (windowHeight / 2) - (loggedIn / 2); $('.login-box').css('margin-top', mathLogin); $('.welcome-text').css('margin-top', mathWelcomeText); $('.logged-in').css('margin-top', mathLoggedIn); } $(window).resize(function () { varticalCenterStuff(); }); varticalCenterStuff(); // awesomeness $('.btn-login').click(function(){ $(this).parent().fadeOut(function(){ $('.login-box').fadeIn(); }) }); $('.btn-cancel-action').click(function(e){ e.preventDefault(); $(this).parent().parent().parent().fadeOut(function(){ $('.welcome-text').fadeIn(); }) }); $('.btn-login-submit').click(function(e){ e.preventDefault(); var element = $(this).parent().parent().parent(); var usernameEmail = $('#username-email').val(); var password = $('#password').val(); if(usernameEmail == '' || password == ''){ // wigle and show notification // Wigle var element = $(this).parent().parent().parent(); $(element).addClass('animated rubberBand'); $(element).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(element).removeClass('animated rubberBand'); }); // Notification // reset $('.notification.login-alert').removeClass('bounceOutRight notification-show animated bounceInRight'); // show notification $('.notification.login-alert').addClass('notification-show animated bounceInRight'); $('.notification.login-alert').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ setTimeout(function(){ $('.notification.login-alert').addClass('animated bounceOutRight'); }, 2000); }); }else{ $(element).fadeOut(function(){ $('.logged-in').fadeIn(); }); }//endif }); $('.btn-logout').click(function(){ $('.logged-in').fadeOut(function(){ $('.welcome-text').fadeIn(); // Notification $('.notification.logged-out').removeClass('bounceOutRight notification-show animated bounceInRight'); // show notification $('.notification.logged-out').addClass('notification-show animated bounceInRight'); $('.notification.logged-out').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ setTimeout(function(){ $('.notification.logged-out').addClass('animated bounceOutRight'); }, 2000); }); }); });

Related: See More


Questions / Comments: