<div class="panel_blur"></div>
<div class="panel">
<div class="panel__form-wrapper">
<button type="button" class="panel__prev-btn" aria-label="Go back to home page" title="Go back to home page">
<svg fill="rgba(255,255,255,0.5)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z"/>
</svg>
</button>
<ul class="panel__headers">
<li class="panel__header"><a href="#register-form" class="panel__link" role="button">Sign Up</a></li>
<li class="panel__header active"><a href="#login-form" class="panel__link" role="button">Sign In</a></li>
</ul>
<div class="panel__forms">
<form class="form panel__login-form" id="login-form" method="post" action="/">
<div class="form__row">
<input type="text" id="email" class="form__input" name="login-mail" data-validation="email" data-error="Invalid email address." required>
<span class="form__bar"></span>
<label for="email" class="form__label">E-mail</label>
<span class="form__error"></span>
</div>
<div class="form__row">
<input type="password" id="password" class="form__input" name="login-pass" data-validation="length" data-validation-length="8-25" data-error="Password must contain 8-25 characters." required>
<span class="form__bar"></span>
<label for="password" class="form__label">Password</label>
<span class="form__error"></span>
</div>
<div class="form__row">
<input type="submit" class="form__submit" value="Get Started!">
<a href="#password-form" class="form__retrieve-pass" role="button">Forgot Password?</a>
</div>
</form>
<form class="form panel__register-form" id="register-form" method="post" action="/">
<div class="form__row">
<input type="text" id="register-email" class="form__input" name="register-mail" data-validation="email" data-error="Invalid email address." required>
<span class="form__bar"></span>
<label for="register-email" class="form__label">E-mail</label>
<span class="form__error"></span>
</div>
<div class="form__row">
<input type="password" id="register-password" class="form__input" name="register-pass" data-validation="length" data-validation-length="8-25" data-error="Password must contain 8-25 characters" required>
<span class="form__bar"></span>
<label for="register-password" class="form__label">Password</label>
<span class="form__error"></span>
</div>
<div class="form__row">
<input type="password" id="register-password-check" class="form__input" name="register-repeat-pass" data-validation="confirmation" data-validation-confirm="register-pass" data-error="Your passwords did not match." required>
<span class="form__bar"></span>
<label for="register-password-check" class="form__label">Check password</label>
<span class="form__error"></span>
</div>
<div class="form__row">
<input type="submit" class="form__submit" value="Register!">
</div>
</form>
<form class="form panel__password-form" id="password-form" method="post" action="/">
<div class="form__row">
<p class="form__info">Can't log in? Please enter your email. We will send you an email with instructions on how to reset your password.</p>
</div>
<div class="form__row">
<input type="text" id="retrieve-pass-email" class="form__input" name="retrieve-mail" data-validation="email" data-error="Invalid email address." required>
<span class="form__bar"></span>
<label for="retrieve-pass-email" class="form__label">E-mail</label>
<span class="form__error"></span>
</div>
<div class="form__row">
<input type="submit" class="form__submit" value="Send new password!">
</div>
</form>
</div>
</div>
</div>
$pink: #ff1552;
$white: #fff;
$black: #000;
html{
font-size: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html, body{
width: 100%;
height: 100%;
}
body,
a,
button,
input{
font-family: 'Montserrat', sans-serif;
color: #fff;
font-weight: 400;
font-size: 0.938rem;
line-height: 1.15;
}
body{
position: relative;
background: url('https://image.ibb.co/jGk9RR/bg.jpg') no-repeat center fixed;
background-size: 100% 100%;
overflow-y: auto;
@media screen and (min-width: 768px){
min-height: 100%;
height: auto;
max-height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: visible;
}
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
button{
padding: 0;
border: none;
background: none;
cursor: pointer;
&:active,
&:hover {
outline: 0;
}
}
a{
text-decoration: none;
cursor: pointer;
&:active,
&:hover {
outline: 0;
}
}
.panel_blur,
.panel{
width: 100%;
height: 100%;
overflow-y: auto;
@media screen and (min-width: 768px){
width: 350px;
height: 500px;
overflow-y: visible;
}
}
.panel_blur{
position: absolute;
background: url('https://image.ibb.co/jGk9RR/bg.jpg') no-repeat center fixed;
background-size: 100% 100%;
filter: blur(5px);
}
.panel{
position: relative;
z-index: 1;
&__register-form,
&__password-form{ display: none; }
&__register-form .form__submit{ margin-top: 5px !important; }
&__form-wrapper{
width: 100%;
height: 100%;
padding: 10%;
background-color: rgba(0,0,0,0.5);
overflow-y: auto;
@media screen and (min-width: 768px){
padding: 10% 15%;
border-radius: 10px;
overflow-y: visible;
}
}
&__prev-btn{
width:24px;
height: 24px;
background: none;
padding: 0;
svg{ transition: fill 0.3s; }
&:hover > svg{ fill: $pink; }
}
&__headers{
padding: 10px 0;
text-align: center;
}
&__header{
font-size: 1.375rem;
&:first-child{ padding-bottom: 5px; }
&.active > .panel__link{
color: $pink;
font-size: 3rem;
}
}
&__link{
color: inherit;
transition: all 0.3s;
font-weight: 600;
}
}
.form{
&__row{
position: relative;
padding-top: 40px;
&.has-error > .form__error:after{
display: block;
}
}
&__input{
width: 100%;
padding: 5px 0;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.5);
background: none;
&:focus, &:active{
outline: 0;
}
&:focus ~ .form__label,
&:active ~ .form__label,
&:valid ~ .form__label{
bottom: 30px;
font-size: 0.75rem;
}
&:focus ~ .form__bar,
&:active ~ .form__bar{
left: 0;
right: 0;
width: 100%;
}
}
&__bar{
position: absolute;
bottom: 0;
left: 50%;
right: 50%;
display: block;
width: 0;
height: 2px;
background-color: $pink;
transition: all 0.3s;
}
&__label{
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
transition: all 0.3s;
pointer-events: none;
}
&__submit{
width: 100%;
padding: 10px 0;
margin-top: 30px;
border: none;
border-radius: 10px;
font-weight: 600;
background-color: $pink;
cursor: pointer;
}
&__retrieve-pass{
display: block;
padding: 15px 0;
text-align: center;
color: rgba(255,255,255,0.5);
transition: all 0.3s;
&:hover{
color: $white;
}
}
&__error{
position: absolute;
bottom: -20px;
display: block;
width: 100%;
height: 20px;
color: $pink;
font-size: 0.75rem;
line-height: 20px;
&:after{
content: 'x';
position: absolute;
bottom: 20px;
right: -20px;
display: none;
width: 20px;
height: 25px;
font-size: 1.125rem;
line-height: 25px;
text-align: center;
color: $pink;
}
}
&__info{
text-align: center;
}
}
View Compiled
$(function() {
$("form").attr('novalidate', 'novalidate');
$('.panel__link, .form__retrieve-pass').on('click', function(e) {
e.preventDefault();
if ($(this).attr('href') === '#password-form') {
$('.panel__header').removeClass('active');
} else {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
target = $(this).attr('href');
$('.panel__forms > form').not(target).hide();
$(target).fadeIn(500);
});
$('.panel__prev-btn').on('click', function(e) {
$('.panel, .panel_blur').fadeOut(300);
});
});
$.validate({
modules : 'security',
errorMessageClass: 'form__error',
validationErrorMsgAttribute: 'data-error'
});
