<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":""});
});