<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 ----------> <div class="container"> <div class="c1"> <div class="c11"> <h1 class="mainhead">PICK YOUR SPOT</h1> <p class="mainp">Just click the buttons below to toggle between SignIn & SignUp</p> </div> <div id="left"><h1 class="s1class"><span>SIGN</span><span class="su">IN</span> </h1></div> <div id="right"><h1 class="s2class"><span>SIGN</span><span class="su">UP</span></h1></div> </div> <div class="c2"> <form class="signup"> <h1 class="signup1">SIGN UP</h1> <br><br><br><br> <input name="username" type="text" placeholder="Username*" class="username"/> <input name="email" type="text" placeholder="Email*" class="username"/> <input name="password" type="password" placeholder="Password*" class="username"/> <button class="btn">Sign Up</button> </form> <form class="signin"> <h1 class="signup1">SIGN IN</h1> <br><br><br><br> <input name="username" type="text" placeholder="Username*" class="username"/> <input name="password" type="password" placeholder="Password*" class="username"/> <button class="btn">Get Started</button> <br><br><br><br> <a href=""><p class="signup2">Forget Password?</p></a> </form> </div> </div>

body { background:#FAF3EC; font-family: 'Roboto'; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #748194; } ::-moz-placeholder { /* Firefox 19+ */ color: #748194; } :-ms-input-placeholder { /* IE 10+ */ color: #748194; } :-moz-placeholder { /* Firefox 18- */ color: #748194; } .container{ display:none; position:absolute; width: auto; height:auto; top: calc(50% - 240px); left: calc(40% - 160px); border-radius:15px 15px 15px 15px; } .c1{ box-shadow:0 0 10px grey; background-color:white; width:300px; height:500px; display:inline-block; border-radius:15px 15px 15px 15px; } .c11{ background-image:url('https://i.pinimg.com/736x/b8/09/22/b80922f6ea2daaf36a6627378662803b--deck-of-cards-phone-wallpapers.jpg'); background-size:300px 400px; background-repeat: no-repeat; background-color:white; width:300px; height:400px; display:inline-block; position:absolute; z-index:4; border-radius:15px 15px 200px 200px; } #left, #right { color:white; display: inline-block; width:146px; height: 500px; background-color:white; cursor:pointer; } #left{ border-radius:15px 0px 0px 15px; } #right{ border-radius:15px 15px 15px 0px; } .left_hover{ color:#EE9BA3; box-shadow: 5px 0 18px -10px #333; z-index:1; position:absolute; } .right_hover{ box-shadow: -5px 0 15px -10px #333; z-index:1; position:absolute; } .s1class{ color:#748194; position:absolute; bottom:0; left:63%; margin-left: -50%; } .s1class span, .s2class span{ display:block; } .su{ font-size:20px; } .s2class{ color:#748194; position:absolute; bottom:0; right:63%; margin-right: -50%; } .mainhead{ color:white; font-size:24px; text-align:center; margin-top:50px; } .mainp{ color:white; font-size:13px; text-align:center; margin-top:10px; } .c2{ background-color:white; width:300px; height:500px; border-radius:15px; position:absolute; left:370px; display:inline-block; } .username{ font-weight: bold; width: 200px; margin: 0 35px 20px ; height: 35px; padding: 6px 15px; border-radius: 5px; outline: none; border: none; background: #F6F7F9; color: #748194; font-size: 14px; } .btn{ font-weight: bold; width: 230px; margin: 0 35px 20px ; height: 45px; padding: 6px 15px; border-radius: 5px; outline: none; border: none; background: #EE9BA3; color: white; font-size: 14px; } .signup1{ color:#748194; font-size:30px; text-align:center; } a{ text-decoration: none; } .signup2{ color:#748194; font-size:20px; text-align:center; } .signup{ display:initial; } .signin{ display:initial; }

$(document).ready(function(){ $(".container").fadeIn(1000); $(".s2class").css({"color":"#EE9BA3"}); $(".s1class").css({"color":"#748194"}); $("#left").removeClass("left_hover"); $("#right").addClass("right_hover"); $(".signin").css({"display":"none"}); $(".signup").css({"display":""}); }); $("#right").click(function(){ $("#left").removeClass("left_hover"); $(".s2class").css({"color":"#EE9BA3"}); $(".s1class").css({"color":"#748194"}); $("#right").addClass("right_hover"); $(".signin").css({"display":"none"}); $(".signup").css({"display":""}); }); $("#left").click(function(){ $(".s1class").css({"color":"#EE9BA3"}); $(".s2class").css({"color":"#748194"}); $("#right").removeClass("right_hover"); $("#left").addClass("left_hover"); $(".signup").css({"display":"none"}); $(".signin").css({"display":""}); });