.back
.registration-form
header
h1 Sign Up
p Fill in all informations
form
.input-section.email-section
input(type="email" placeholder="ENTER YOUR E-MAIL HERE" autocomplete="off").email
.animated-button
span.icon-paper-plane
i.fa.fa-envelope-o
span.next-button.email
i.fa.fa-arrow-up
.input-section.password-section.folded
input(type="password" placeholder="ENTER YOUR PASSWORD HERE").password
.animated-button
span.icon-lock
i.fa.fa-lock
span.next-button.password
i.fa.fa-arrow-up
.input-section.repeat-password-section.folded
input(type="password" placeholder="REPEAT YOUR PASSWORD HERE").repeat-password
.animated-button
span.icon-repeat-lock
i.fa.fa-lock
span.next-button.repeat-password
i.fa.fa-paper-plane
.success
p ACCOUNT CREATED
View Compiled
$input-height: 75px;
body {
font-family: "Roboto";
}
.back {
background: linear-gradient(120grad, rgb(100, 57, 134), rgb(152, 174, 213));
position: absolute;
width: 100%;
height: 100%;
}
.registration-form {
width: 400px;
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 15%;
background: transparent;
header {
position: relative;
z-index: 4;
background: white;
padding: 20px 40px;
border-radius: 15px 15px 0 0;
h1 {
font-weight: 900;
letter-spacing: 1.5px;
color: #333;
font-size: 23px;
text-transform: uppercase;
margin: 0;
}
p {
word-spacing: 0px;
color: rgb(159, 172, 182);
font-size: 17px;
margin: 0;
margin-top: 5px;
}
}
form {
position: relative;
}
.input-section {
width: 100%;
position: absolute;
display: flex;
left: 50%;
transform: translate(-50%, 0);
height: $input-height;
border-radius: 0 0 15px 15px;
overflow: hidden;
z-index: 2;
box-shadow: 0px 0px 100px rgba(0,0,0,0.2);
transition: all 0.2s ease-in;
&.folded {
width: 95%;
margin-top: 10px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
input {
background-color: rgb(233, 226, 192);
}
span {
background-color: rgb(233, 226, 192);
}
}
&.folded + .folded {
width: 90%;
margin-top: 20px;
left: 50%;
transform: translate(-50%, 0);
z-index: 0;
input {
background-color: rgb(225, 188, 239);
}
span {
background-color: rgb(225, 188, 239);
}
}
&.fold-up {
margin-top: -$input-height;
}
}
form input {
background: lighten(rgb(243, 243, 251), 5%);
color: rgb(143, 143, 214);
width: 80%;
border: 0;
padding: 20px 40px;
margin: 0;
&:focus {
outline: none;
}
&::placeholder {
color: rgb(143, 143, 214);
font-weight: 100;
}
}
}
.animated-button {
width: 20%;
background-color: rgb(212, 212, 255);
span {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
line-height: $input-height;
text-align: center;
height: $input-height;
transition: all 0.2s ease-in;
i {
font-size: 25px;
color: rgb(153, 153, 248);
}
}
.next-button {
background: transparent;
color: rgb(153, 153, 248);
font-weight: 100;
width: 100%;
border: 0;
}
}
.next {
margin-top: -$input-height;
}
.success {
width: 100%;
position: absolute;
display: flex;
align-items: center;
left: 50%;
transform: translate(-50%, 0);
height: $input-height;
border-radius: 0 0 15px 15px;
overflow: hidden;
z-index: 2;
box-shadow: 0px 0px 100px rgba(0,0,0,0.2);
transition: all 0.2s ease-in;
background: limegreen;
margin-top: -$input-height;
p {
color: white;
font-weight: 900;
letter-spacing: 2px;
font-size: 18px;
width: 100%;
text-align: center;
}
}
View Compiled
$('.email').on("change keyup paste",
function(){
if($(this).val()){
$('.icon-paper-plane').addClass("next");
} else {
$('.icon-paper-plane').removeClass("next");
}
}
);
$('.next-button').hover(
function(){
$(this).css('cursor', 'pointer');
}
);
$('.next-button.email').click(
function(){
console.log("Something");
$('.email-section').addClass("fold-up");
$('.password-section').removeClass("folded");
}
);
$('.password').on("change keyup paste",
function(){
if($(this).val()){
$('.icon-lock').addClass("next");
} else {
$('.icon-lock').removeClass("next");
}
}
);
$('.next-button').hover(
function(){
$(this).css('cursor', 'pointer');
}
);
$('.next-button.password').click(
function(){
console.log("Something");
$('.password-section').addClass("fold-up");
$('.repeat-password-section').removeClass("folded");
}
);
$('.repeat-password').on("change keyup paste",
function(){
if($(this).val()){
$('.icon-repeat-lock').addClass("next");
} else {
$('.icon-repeat-lock').removeClass("next");
}
}
);
$('.next-button.repeat-password').click(
function(){
console.log("Something");
$('.repeat-password-section').addClass("fold-up");
$('.success').css("marginTop", 0);
}
);
This Pen doesn't use any external CSS resources.