<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Sign up</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="flipper">
<section class="front">
<header>
<ul>
<li><h1>Email Sign Up</h1></li>
<li>
<a href="#"><span class="fontawesome-twitter"></span></a>
</li>
<li>
<a href="#"><span class="fontawesome-facebook"></span></a>
</li>
</ul>
</header>
<form>
<label class="horizontal">
<span>Email address</span>
<input type="text" value="
[email protected]">
</label>
<input type="password" placeholder="Enter your password">
<label class="inline">
<div class="checkbox">
<input type="checkbox">
</div>
I agree with the <a href="#">Terms & Conditions</a>
</label>
<button type="submit"><span class="fontawesome-arrow-right"></span> Sign up</button>
</form>
</section>
<section class="back">
<h2>
<span class="fontawesome-beer"></span>
Way to go!
</h2>
<p>Check your email to confirm your registration.</p>
<a href="#" class="go-back"><span class="fontawesome-arrow-left"></span> Go back</a>
</section>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Dosis:300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
body {
font-family: 'Dosis', sans-serif;
background: -webkit-linear-gradient(left, #60a2dc 0%, #66c5db 50%, #60a2dc 100%);
margin: 65px auto;
perspective: 1000;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: auto;
width: 700px;
}
section {
width: 700px;
background: #FFF;
border-radius: 7px;
overflow: hidden;
margin: auto;
box-shadow: 0px 0px 23px 2px rgba(0,0,0,0.3);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
section.front {
z-index: 20;
transform: rotateY(0deg);
}
section.back {
transform: rotateY(180deg);
}
header {
background: #f8f8f8;
}
header ul {
list-style: none;
width: 100%;
height: 94px;
border-bottom: 1px solid #e6e6e6;
}
header li {
padding: 35px 50px;
float: left;
font-size: 1.5em;
}
header li a {
text-decoration: none;
color: #c0c0c0;
}
header h1 {
}
header li:nth-child(n+2) {
border-left: 1px solid #e6e6e6;
float:right;
font-size: 2em;
}
label.horizontal {
position: relative;
display: block;
color: #F87793;
text-transform: uppercase;
height: 120px;
z-index: 1;
}
label.horizontal span {
position: absolute;
top: 30px;
left: 50px;
z-index: 10;
}
input[type="text"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font: 1.6em 'Dosis', sans-serif;
border: none;
border-bottom: 1px solid #e6e6e6;
padding: 20px 10px 0 50px;
outline: none;
}
input[type="password"] {
outline: none;
border:none;
border-bottom: 1px solid #e6e6e6;
display:block;
width: 100%;
height: 110px;
font: 1.6em 'Dosis', sans-serif;
padding: 20px 0 0 50px;
}
label.inline {
display: block;
font: 1.6em 'Dosis', sans-serif;
padding: 30px 0 40px; 0;
line-height: 20px;
cursor: pointer;
}
.checkbox {
border: 1px solid #e6e6e6;
margin: 0 10px 0 50px;
width: 20px;
height: 20px;
float: left;
border-radius: 5px;
}
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"]:before {
visibility: 1;
content: 'V';
border: 1px solid #e6e6e6;
background: red;
margin: 0 10px 0 50px;
width: 20px;
height: 20px;
float: left;
}
button {
width: 100%;
background: linear-gradient(135deg, #f8759d 0%,#f7757c 100%);
border: 0;
color: #FFF;
text-transform: uppercase;
font: 2em 'Dosis', sans-serif;
padding: 30px 0;
cursor: pointer;
outline: none;
}
label a {
color: #F87793;
text-decoration: none;
}
/*** BACK ***/
section.back {
background: linear-gradient(135deg, #f8759d 0%,#f87865 100%);
text-align: center;
padding-top: 80px;
}
h2 {
color: #FFF;
font-size: 2.6em;
}
h2 span {
display: block;
font-size: 2.6em;
margin-bottom: 20px;
}
section.back p {
color:#fcb8b2;
font-size: 2em;
width: 350px;
margin: 30px auto 125px;
}
.go-back {
display: block;
color: #FFF;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
margin-bottom: 30px;
}
// From https://dribbble.com/shots/2307358-Sign-Up
$('form').on('submit', function(e){
e.preventDefault();
$('.flipper').css('transform', 'rotateY(180deg)');
});
$('.go-back').on('click', function(e){
e.preventDefault();
$('.flipper').css('transform', 'rotateY(0deg)');
});