"Flip Login or Register Form"
Bootstrap 3.3.0 Snippet by arshadadil

<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 ----------> <body class="main"> <div class="login-screen"></div> <div class="login-center"> <div class="container min-height" style="margin-top: 20px;"> <div class="row"> <div class="col-xs-4 col-md-offset-8"> <div class="login" id="card"> <div class="front signin_form"> <p>Login Your Account</p> <form class="login-form"> <div class="form-group"> <div class="input-group"> <input type="email" class="form-control" placeholder="Type your email"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> </div> </div> <div class="form-group"> <div class="input-group"> <input type="password" class="form-control" placeholder="Type your password"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> </div> </div> <div class="checkbox"> <label><input type="checkbox">Remember me next time.</label> </div> <div class="form-group sign-btn"> <input type="submit" class="btn" value="Log in"> <p><a href="#" class="forgot">Can't access your account?</a></p> <p><strong>New to TimeInfo?</strong><br><a href="#" id="flip-btn" class="signup signup_link">Sign up for a new account</a></p> </div> </form> </div> <div class="back signup_form" style="opacity: 0;"> <p>Sign Up for Your New Account</p> <form class="login-form"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" placeholder="Username"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"><button type="button" class="btn btn-cyan"><span class="fa fa-refresh"></span></button></span> </div> </div> <div class="form-group"> <div class="input-group"> <input type="password" class="form-control" placeholder="Confirm Password"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> </div> </div> <div class="form-group"> <div class="input-group"> <input type="email" class="form-control" placeholder="Email"> <span class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </span> </div> </div> <div class="form-group sign-btn"> <input type="submit" class="btn" value="Sign up"> <br><br> <p>You have already Account So <a href="#" id="unflip-btn" class="signup">Log in</a></p> </div> </form> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.0.18/jquery.flip.js"></script> </body>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100); @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css); /* ========================================================================== Author's custom styles ========================================================================== */ html, body { height: 100%; width: 100%; } body { font-family: 'Raleway',sans-serif; position: relative; /*background: rgba(0, 0, 0, 0) url("../img/ptn.png") repeat scroll 0 0;*/ } .in-page { min-height: 520px; } .main { position: relative; } a { color: #1b5a7c; } a:hover, a:focus { color: #1b5a7c; } .btn-cyan { background-color: #1b5a7c; color: #fff; } .btn-cyan:hover { color: #fff; opacity: 0.9; } .form-control:focus { border-color: #1b5a7c; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(24, 204, 162, 0.6); outline: 0 none; } .min-height { min-height: 380px; } .login-screen { background-image: url(https://www.squiz.net/__public/Systems/Perspective/FileCache/1-32000/465/prop/header-bg-image.jpg?t=1472431690); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; position: fixed; top: 0; bottom: 0; right: 0; left: 0; } .login-screen:before { content: ""; background: rgba(0,0,0, 0.5); position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .login-center { text-align: left; } .login { width: 320px; color: #fff; } .login .login-form { text-align: left; } .login label { color: #fff; } .login-form .input-group .form-control { background: none; height: 44px; color: #ddd; } .login-form .input-group .input-group-addon { background: none; } .login-form .input-group .input-group-addon .glyphicon { color: #1b5a7c; } .login-form .input-group .form-control::-moz-placeholder { color: #fff; opacity: 0.3; } .login .sign-btn input.btn { background: #1b5a7c; border-color: #1b5a7c; color: #fff; width: 180px; } .login .sign-btn a { text-decoration: none; } .login .checkbox { margin-top: 20px; margin-bottom: 20px; } .login .forgot { display: inline-block; margin: 20px 0; }
$().ready(function() { $("#card").flip({ trigger: 'manual' }); }); $(".signup_link").click(function() { $(".signin_form").css('opacity', '0'); $(".signup_form").css('opacity', '100'); $("#card").flip(true); return false; }); $("#unflip-btn").click(function(){ $(".signin_form").css('opacity', '100'); $(".signup_form").css('opacity', '0'); $("#card").flip(false); return false; });

Related: See More


Questions / Comments: