<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>Lorem ipsum dolor sit amet</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>Lorem ipsum dolor sit amet</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="white-panel"> <div class="login-show"> <h2>LOGIN</h2> <input type="text" placeholder="Email"> <input type="password" placeholder="Password"> <input type="button" value="Login"> <a href="">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(http://www.planwallpaper.com/static/images/Free-Wallpaper-Nature-Scenes.jpg); background-repeat: no-repeat; background-size:cover; background-position:center; position:relative; overflow-y: hidden; } a{ text-decoration:none; color:#444444; } .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(236, 48, 20, 0.9); } .white-panel{ background-color: rgba(255,255, 255, 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:#B8B8B8;

$(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(); $('.white-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(); $('.white-panel').removeClass('right-log'); $('.login-show').addClass('show-log-panel'); $('.register-show').removeClass('show-log-panel'); } });