"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <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 ----------> <div class="login-reg-panel"> <div class="login-info-box"> <h2>Have an account?</h2> <p>Login for best tour package deals </p> <label id="label-register" for="log-reg-show">Login</label> <input type="radio" name="active-log-panel" id="log-reg-show" checked="checked"> </div> <div class="register-info-box"> <h2>Don't have an account?</h2> <p>Register to avail best tour package deals</p> <label id="label-login" for="log-login-show">Register</label> <input type="radio" name="active-log-panel" id="log-login-show"> </div> <div class="orange-panel"> <div class="login-show"> <h2>LOGIN</h2> <input type="text" placeholder="Email"> <input type="password" placeholder="Password"> <input type="button" value="Login"> <script type="text/javascript"> // Popup window code function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <a href="JavaScript:newPopup('https://bootsnipp.com/fullscreen/O15WE/');">Forgot password?</a> </div> <div class="register-show"> <h2>REGISTER</h2> <input type="text" placeholder="Email"> <input type="password" placeholder="Password"> <input type="password" placeholder="Confirm Password"> <input type="button" value="Register"> </div> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Mukta'); body{ font-family: 'Mukta', sans-serif; height:100vh; min-height:550px; background-image: url(https://c.pxhere.com/photos/eb/e7/houseboat_backwater_water_kerala_india_tourism_travel_canal-1187486.jpg!d); background-repeat: no-repeat; background-size:cover; background-position:center; position:relative; overflow-y: hidden; } a{ text-decoration:none; color:#203989; } .login-reg-panel{ position: relative; top: 50%; transform: translateY(-50%); text-align:center; width:70%; right:0;left:0; margin:auto; height:400px; background-color: rgba(32, 57, 137, 1); } .orange-panel{ background-color: rgba(252,102, 0, 1); height:500px; position:absolute; top:-50px; width:50%; right:calc(50% - 50px); transition:.3s ease-in-out; z-index:0; box-shadow: 0 0 15px 9px #00000096; } .login-reg-panel input[type="radio"]{ position:relative; display:none; } .login-reg-panel{ color:#ffffff; } .login-reg-panel #label-login, .login-reg-panel #label-register{ border:1px solid #9E9E9E; padding:5px 5px; width:150px; display:block; text-align:center; border-radius:10px; cursor:pointer; font-weight: 600; font-size: 18px; } .login-info-box{ width:30%; padding:0 50px; top:20%; left:0; position:absolute; text-align:left; } .register-info-box{ width:30%; padding:0 50px; top:20%; right:0; position:absolute; text-align:left; } .right-log{right:50px !important;} .login-show, .register-show{ z-index: 1; display:none; opacity:0; transition:0.3s ease-in-out; color:#FFFFFF; text-align:left; padding:50px; } .show-log-panel{ display:block; opacity:0.9; } .login-show input[type="text"], .login-show input[type="password"]{ width: 100%; display: block; margin:20px 0; padding: 15px; border: 1px solid #203989; outline: none; } .login-show input[type="button"] { max-width: 150px; width: 100%; background: #203989; color: #ffffff; border: none; padding: 10px; text-transform: uppercase; border-radius: 2px; float:right; cursor:pointer; } .login-show a{ display:inline-block; padding:10px 0; } .register-show input[type="text"], .register-show input[type="password"]{ width: 100%; display: block; margin:20px 0; padding: 15px; border: 1px solid #b5b5b5; outline: none; } .register-show input[type="button"] { max-width: 150px; width: 100%; background: #203989; color: #ffffff; border: none; padding: 10px; text-transform: uppercase; border-radius: 2px; float:right; cursor:pointer; } .credit { position:absolute; bottom:10px; left:10px; color: #ffffff; margin: 0; padding: 0; font-family: Arial,sans-serif; text-transform: uppercase; font-size: 12px; font-weight: bold; letter-spacing: 1px; z-index: 99; } a{ text-decoration:none; color:#203989; }
$(document).ready(function(){ $('.login-info-box').fadeOut(); $('.login-show').addClass('show-log-panel'); }); $('.login-reg-panel input[type="radio"]').on('change', function() { if($('#log-login-show').is(':checked')) { $('.register-info-box').fadeOut(); $('.login-info-box').fadeIn(); $('.orange-panel').addClass('right-log'); $('.register-show').addClass('show-log-panel'); $('.login-show').removeClass('show-log-panel'); } else if($('#log-reg-show').is(':checked')) { $('.register-info-box').fadeIn(); $('.login-info-box').fadeOut(); $('.orange-panel').removeClass('right-log'); $('.login-show').addClass('show-log-panel'); $('.register-show').removeClass('show-log-panel'); } });

Related: See More


Questions / Comments: