<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - 2-Step Registration Modal</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section id="login">
<div id="overlay"></div>
<div id="background-image-login"></div>
<!-- <h1>Start Your Free 3-Day Trial</h1> -->
<h1>Register</h1>
<!-- <h2>890 companies sign up to Keyhole every week…. Join them!</h2> -->
<div id="login-container">
<!-- <h1>Log in</h1> -->
<!-- <img src="http://keyhole.co/img/photo-logo.jpg" alt="" /> -->
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQseL24McD9cHKoM1rABCn5KhmpNAca9txxq6s-MYpi-HxNHcuO" alt="" />
<div id="steps-container">
<div class="single-step-wrapper" id="single-step-wrapper-2">
<i class="fa fa-user" aria-hidden="true"></i>
<p id="step-1">Step 1</p>
</div>
<svg>
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
<stop id="stop-1" offset="0%" stop-color="#00aced"/>
<stop id="stop-2" offset="20%" stop-color="#ddd"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>
<div class="single-step-wrapper" id="single-step-wrapper-2">
<i class="fa fa-building-o" aria-hidden="true"></i>
<p id="step-2">Step 2</p>
</div>
</div>
<form id="form" action="">
<div id="step-2-container">
<label>
<input type="text" placeholder="Company Name"/>
</label>
<label>
<input type="text" placeholder="Phone Number"/>
</label>
<button class="cta" type="submit" id="submit">Register</button>
<a id="goback">Made a mistake? <span>Go Back</span></a>
</div>
<div id="step-1-container">
<label>
<input type="text" placeholder="First Name"/>
</label>
<label>
<input type="text" placeholder="Last Name"/>
</label>
<input type="text" placeholder="E-mail" />
<label>
<input type="password" placeholder="Password"/>
</label>
<button class="cta" id="continue">Continue</button>
</div>
</form>
</div>
<a href="" id="already-user">Already a user? Sign in</a>
</section>
<!-- partial -->
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src="./script.js"></script>
</body>
</html>
@charset "UTF-8";
* {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
#login {
width: 100%;
height: 100%;
padding-top: 2.4em;
padding-bottom: 2em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#login #overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.76);
}
#login #background-image-login {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url("https://images.unsplash.com/photo-1437419764061-2473afe69fc2?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=844&q=80");
background-size: cover;
}
#login > h1 {
color: #fff;
z-index: 2;
font-weight: 300;
font-size: 1.6em;
text-align: center;
}
#login > h2 {
display: none;
color: #fff;
z-index: 2;
font-weight: 200;
font-size: 1.2em;
text-align: center;
}
#login #login-container {
width: 100%;
max-width: 400px;
background-color: #fff;
padding: 1em;
margin-top: 1em;
position: relative;
overflow: hidden;
}
#login #login-container h1 {
margin: 0;
font-size: 1.35em;
padding-bottom: 1em;
margin-bottom: 0.8em;
margin-top: 1.1em;
color: #666;
border-bottom: 1px solid #ddd;
}
#login #login-container img {
width: 14%;
display: table;
margin: 0.6em auto 1.4em;
}
#login #login-container #steps-container {
display: flex;
justify-content: center;
padding-bottom: 1em;
}
#login #login-container #steps-container .single-step-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
#login #login-container #steps-container .single-step-wrapper i {
color: #888;
}
#login #login-container #steps-container .single-step-wrapper i.fa-user {
color: #00aced;
}
#login #login-container #steps-container .single-step-wrapper p {
margin: 0;
margin-top: 0.36em;
font-size: 0.75em;
color: #888;
font-weight: 500;
}
#login #login-container #steps-container .single-step-wrapper p#step-1 {
color: #00aced;
}
#login #login-container #steps-container .single-step-wrapper#single-step-wrapper-2 {
padding-left: 0.8em;
}
#login #login-container #steps-container svg {
width: 200px;
height: 12px;
}
#login #login-container form {
width: 200%;
display: flex;
transform: translateX(-50%);
transition: all 500ms;
}
#login #login-container form > div {
width: 100%;
transition: all 250ms ease-in-out;
}
#login #login-container form > div#step-2-container {
opacity: 0;
}
#login #login-container form input {
width: 100%;
padding: 0.75em;
font-size: 1.1em;
margin-bottom: 0.5em;
border: 1px solid #ddd;
border-radius: 3px;
font-weight: 300;
}
@keyframes SUBMIT-BUTTON {
0% {
border-bottom: 4px solid #0077a4;
}
100% {
border-bottom: 6px solid #0077a4;
}
}
#login #login-container form input:focus, #login #login-container form input:hover {
background-color: #fafafa;
}
#login #login-container form button.cta {
border: none;
margin: 0;
width: 100%;
margin-top: 1em;
padding: 1em;
font-size: 1.1em;
border-radius: 0;
letter-spacing: 0.02em;
background-color: #00aced;
color: white;
cursor: pointer;
}
@keyframes ARROW-SLIDE {
0% {
margin-left: -20px;
opacity: 0;
}
100% {
margin-left: 0px;
opacity: 1;
}
}
#login #login-container form button.cta:after {
font-family: FontAwesome;
content: " ";
margin-left: -20px;
opacity: 0;
}
#login #login-container form button.cta:hover {
background: rgba(0, 172, 237, 0.9);
}
#login #login-container form button.cta:hover:after {
animation: ARROW-SLIDE 300ms;
animation-fill-mode: forwards;
}
#login #login-container form button.cta#submit:hover:after {
display: none;
}
#login #login-container form #goback {
color: #444;
cursor: pointer;
}
#login #login-container form #goback span:hover {
text-decoration: underline;
}
#login a {
z-index: 2;
display: block;
color: white;
font-size: 0.75em;
margin-top: 1.6em;
}
#login a:hover {
color: #eee;
}
@media only screen and (max-width: 350px) {
#login {
font-size: 0.9em;
}
}
$(document).ready(function(){
continueClick();
goBack();
})
function continueClick(){
$('#continue').on('click',function(){
$(form).css('transform','translateX(0)')
$('#step-2-container').css('opacity','1')
$('#step-1-container').css('opacity','0')
$('.fa-building-o').css('color', '#00aced')
$('#step-2').css('color', '#00aced')
$('#stop-1').attr('offset','100%')
return false;
})
}
function goBack(){
$('#goback').on('click',function(){
$(form).css('transform','translateX(-50%)')
$('#step-2-container').css('opacity','0')
$('#step-1-container').css('opacity','1')
$('.fa-building-o').css('color', '#888')
$('#step-2').css('color', '#888')
$('#stop-1').attr('offset','0%')
})
}