<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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div class="container">
<div class="card-wrap">
<div class="card border-0 shadow card--welcome is-show" id="welcome">
<div class="card-body">
<h2 class="card-title">WELCOME</h2>
<p>Welcome to the login page</p>
<div class="btn-wrap"><a class="btn btn-lg btn-register js-btn" data-target="register">REGISTER</a><a class="btn btn-lg btn-login js-btn" data-target="login">LOGIN</a></div>
</div>
</div>
<div class="card border-0 shadow card--register" id="register">
<div class="card-body">
<h2 class="card-title">Create Account</h2>
<p class="card-text">Enter your personal details<br/>and start journey with us</p>
<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
<p>or use your email for registration</p>
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Name" required="required"/>
</div>
<div class="form-group">
<input class="form-control" type="email" placeholder="Email" required="required"/>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="Password" required="required"/>
</div>
<button class="btn btn-lg">REGISTER</button>
</form>
</div>
<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
</div>
<div class="card border-0 shadow card--login" id="login">
<div class="card-body">
<h2 class="card-title">Welcome Back!</h2>
<p>To keep connected with us<br/>please login with your personal info</p>
<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
<p>or use your account</p>
<form>
<div class="form-group">
<input class="form-control" type="email" placeholder="Email" required="required"/>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="Password" required="required"/>
</div>
<p><a>Forgot your password?</a></p>
<button class="btn btn-lg">LOGIN</button>
</form>
</div>
<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
</div>
</div>
</div>
body{
display:flex;
height:100vh;
min-height:35rem;
align-items:center;
justify-content:center;
font-family:'Josefin Sans', sans-serif;
}
.card{
position:absolute;
top:50%;
left:50%;
width:100%;
padding-top:1rem;
padding-bottom:1rem;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.card-wrap{
position:relative;
margin:0 auto;
}
@media (min-width: 769px){
.card-wrap{
max-width:450px
}
}
.card-body{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.card-body p{
font-size:1.1rem;
}
.card-title{
font-weight:bold;
font-size:1.8rem;
}
.badge-wrap{
display:flex;
justify-content:center;
}
.badge-wrap a.badge{
display:flex;
align-items:center;
justify-content:center;
width:2.5rem;
height:2.5rem;
margin:0 .2rem;
padding:0;
opacity:.7;
border-radius:50%;
transition:opacity .3s ease-in;
font-size:1rem;
color:#fff;
text-decoration:none;
cursor:pointer;
}
.badge-wrap a.badge:hover{
opacity:1;
color:#fff;
}
.btn{
color:#fff !important;
width:10em;
transition:all .4s;
border-radius:20px;
border:2px solid transparent;
}
.btn.btn-back{
position:absolute;
top:0;
left:0;
border-radius:0;
width:3rem;
height:3rem;
font-size:1.5rem;
border:0;
}
.btn.btn-back:hover{
border:0 !important;
}
.form-control{
font-family:'Handle', cursive;
}
.form-control::-webkit-input-placeholder{
font-family:'Josefin Sans', sans-serif;
letter-spacing:.1em;
font-size:.9rem;
}
.form-control:-ms-input-placeholder{
font-family:'Josefin Sans', sans-serif;
letter-spacing:.1em;
font-size:.9rem;
}
.form-control::-ms-input-placeholder{
font-family:'Josefin Sans', sans-serif;
letter-spacing:.1em;
font-size:.9rem;
}
.form-control::placeholder{
font-family:'Josefin Sans', sans-serif;
letter-spacing:.1em;
font-size:.9rem;
}
.card--welcome{
z-index:3;
}
.card--welcome .card-title{
color:#ee9ca7;
}
.card--welcome .btn-wrap{
display:flex;
flex-direction:column;
}
.card--welcome .btn{
color:#fff;
transition:all .3s;
}
.card--welcome .btn:hover{
background-color:rgba(238,156,167,.25);
font-weight:bold;
}
.card--welcome .btn-register{
margin-bottom:.8em;
background-color:#ee9ca7;
}
.card--welcome .btn-register:hover{
color:#ee9ca7;
}
.card--welcome .btn-login{
background-color:#a7bfe8;
}
.card--register .card-title{
color:#ee9ca7;
}
.card--register .badge{
background-color:#ee9ca7;
}
.card--register .btn{
background-color:#ee9ca7;
}
.card--register .btn:hover{
background-color:#fff;
color:#ee9ca7 !important;
font-weight:bold;
border:2px solid rgba(238,156,167,.25);
}
.card--register .btn:focus{
box-shadow:0 0 0 0.2rem rgba(238,156,167,.25);
}
.card--register .form-control{
color:#ee9ca7;
border-color:rgba(238,156,167,.25);
}
.card--register .form-control:focus{
box-shadow:0 0 0 0.2rem rgba(238,156,167,.25);
}
.card--login .card-title{
color:#a7bfe8;
}
.card--login .badge{
background-color:#a7bfe8;
}
.card--login .btn{
background-color:#a7bfe8;
}
.card--login .btn:hover{
background-color:#fff;
color:#a7bfe8 !important;
font-weight:bold;
border:2px solid rgba(167,191,232,.25);
}
.card--login .btn:focus{
box-shadow:0 0 0 0.2rem rgba(167,191,232,.25);
}
.card--login .form-control{
color:#a7bfe8;
border-color:rgba(167,191,232,.25);
}
.card--login .form-control:focus{
box-shadow:0 0 0 0.2rem rgba(167,191,232,.25);
}
body{
background:linear-gradient(to right, #ffdde1, #ee9ca7, #a7bfe8, #6190e8);
background-size:500% 500%;
transition:background 3s ease;
background-position:50% 50%;
}
body.is-register{
background-position:0% 50%;
}
body.is-login{
background-position:100% 50%;
}
.card{
transition:all .3s .1s ease-out;
}
.card:not(.is-show){
opacity:0;
-webkit-transform:translate(-50%,-50%) rotateX(95deg);
transform:translate(-50%,-50%) rotateX(95deg);
}
.card.is-show{
opacity:1;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
z-index:5;
}
const cards = document.querySelectorAll('.card');
/* View Controller
-----------------------------------------*/
const btns = document.querySelectorAll('.js-btn');
btns.forEach((btn) => {
btn.addEventListener('click', on_btn_click, true);
btn.addEventListener('touch', on_btn_click, true);
});
function on_btn_click (e) {
const nextID = e.currentTarget.getAttribute('data-target');
const next = document.getElementById(nextID);
if(!next) return;
bg_change(nextID);
view_change(next);
return false;
}
/* Add class to the body */
function bg_change(next) {
document.body.className = '';
document.body.classList.add('is-'+next);
}
/* Add class to a card */
function view_change(next) {
cards.forEach((card) => { card.classList.remove('is-show'); });
next.classList.add('is-show');
}
![Sign up form [Validations NOT ACHIEVED]](http://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/085267fd2b785be54d5d05937defdd27ccc633ab.jpg)
