<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 ----------> <header id="home-section"> <div class="home-inner container"> <div class="row"> <div class="col-lg-8 d-none d-lg-block "> <h1>Hello, this is a placeholder</h1> </div> <div class="col-lg-4"> <div id="login_signup_cards"> <div id="signup_card" class="card bg-signup-signin-cards text-center signup-signin-card-form"> <div class="card-body"> <h3 class="text-left">Sign Up Today</h3> <form id="signup_form"> <div class="input-group form-group"> <input type="text" class="form-control form-control-lg" placeholder="Username"> </div> <div class="input-group form-group"> <input type="email" class="form-control form-control-lg" placeholder="Email"> </div> <div class="input-group form-group"> <div class="input-group form-group"> <input type="password" class="form-control form-control-lg" placeholder="Password"> </div> <div class="input-group form-group"> <input type="password" class="form-control form-control-lg" placeholder="Confirm Password"> </div> <input type="submit" value="Submit" class="btn btn-outline-light btn-block"> </div> </form> </div> <div class="card-footer"> <div class="d-flex justify-content-center links"> Already a member? <a href="#" id="signin_link"> Login </a> </div> </div> </div> <div id="signin_card" class="card bg-signup-signin-cards text-center signup-signin-card-form"> <div class="card-body"> <h3 class="text-left">Log in</h3> <form id="signin_form"> <div class="input-group form-group"> <input type="text" class="form-control form-control-lg" placeholder="Username"> </div> <div class="input-group form-group"> <div class="input-group form-group"> <input type="password" class="form-control form-control-lg" placeholder="Password"> </div> <input type="submit" value="Submit" class="btn btn-outline-light btn-block"> </div> </form> </div> <div class="card-footer"> <div class="d-flex justify-content-center links"> New? <a href="#" id="signup_link"> Sign Up </a> </div> </div> </div> </div> </div> </div> </div> </header>

#home-section .bg-signup-signin-cards { background-color: #2f5da9; } #home-section .signup-signin-card-form { opacity: 0.9; }

$().ready(function () { $("#signin_card").hide(); }); $("#signup_link").click(function () { $("#signin_card").fadeOut(300); $("#signup_card").delay(400).fadeIn(300); return false; }); $("#signin_link").click(function () { $("#signup_card").fadeOut(300); $("#signin_card").delay(400).fadeIn(300); return false; });