<body>
<div class="container">
<form class="form">
<div class="label-case">
<label class="name">Name</label>
<label class="email"></label>
<label class="info"></label>
<label class="address"></label>
</div>
<input id="input" class="input" type="text" value="" />
<p class="verify">Please enter the proper info</p>
<!--<img id="arrow" class="arrow" src="images/arrow.png" alt="" />-->
<p class='arrow' id='arrow'>go</p>
<!--<input type="submit" value="" />-->
<div id="progress-bar-wrap" class="progress-bar-wrap">
<div id="progress-bar" class="progress-bar"></div>
</div>
<div class="counter">
<p><span class="yes">1</span>/4</p>
</div>
</form>
<div class="outro-text">
<p class="thanks">Thanks! We'll be in touch!</p>
</div>
</div>
</body>html, body { height: 100%; width: 100%}
div { height: 100%; width: 100%}
body {
margin: 0;
padding: 0;
border: 0;
}
input:focus,
textarea:focus {
outline: none;
}
.container {
margin: 0 auto;
min-height: 500px;
background-color: #3caf6d;
}
form {
position: relative;
top: 200px;
margin: 0 auto;
padding: 0 50px 0 5px;
width: 500px;
height: 50px;
background-color: rgb(43, 118, 75);
border: none;
box-shadow: inset 0px 0px 1px 1px rgb(32, 89, 56);
transition: all .3s linear 0s;
font-family: helvetica;
}
form input[type=text] {
width: 490px;
height: 48px;
background-color: rgba(0, 0, 0, 0);
border: none;
font-size: 26px;
color: rgb(14, 45, 27);
position: relative;
padding: 0 0 13px 10px;
top: -30px;
left: -5px;
transition: all .3s linear 0s;
}
label {
position: relative;
/*text-transform: uppercase;*/
font-family: helvetica;
/*top: 0;*/
display: block;
left: 4px;
height:30px;
color: rgb(14, 45, 27);
font-size: 25px;
font-family: raleway;
font-family: helvetica;
font-weight: 500;
overflow: hidden;
transition: all .3s linear 0s;
}
.arrow {
width: 6%;
position: absolute;
right: 10px;
top: 3px;
text-transform: uppercase;
font-family: helvetica;
cursor: pointer;
}
.hide {
display: none;
}
.progress-bar-wrap {
width: 100%;
height: 5px;
background-color: #50db8b;
position: absolute;
top: 50px;
left: 0px;
}
.progress-bar {
width: 0;
height: 5px;
background-color: #1f5938;
transition: all .3s linear 0s;
}
.label-case {
overflow: hidden;
width: 400px;
height: 30px;
position: relative;
top: -35px;
}
/*#this,
#that,
#there {
margin-top: 20px;
}*/
.outro-text {
display: none;
position: absolute;
margin: 0 auto;
top: 25%;
font-family: helvetica;
}
.outro-text p {
margin: 0;
text-align: center;
font-family: raleway;
font-family: helvetica;
font-weight: 500;
font-size: 50px;
transition: all .3s linear 0s;
}
.verify {
display: none;
margin: -20px 0 0 180px;
font-family: raleway;
font-weight: 500;
transition: all .3s linear 0s;
font-family: helvetica;
}
.counter {
position: absolute;
top: 65px;
left: 525px;
}
.counter p {
margin: 0;
font-family: raleway;
font-weight: 500;
color: rgb(14, 45, 27);
font-family: helvetica;
}var inputValues = new Array();
$(document).ready(function() {
var form = $('.form')
var arrow = $('.arrow');
var label = $('label');
var progress = $('.progress-bar');
var send = $('.submit');
var inputValues = [];
$(arrow).on('click', function() {
//CHECK IF INPUT IS EMPTY BEFORE PROCEEDING
if (!$(arrow).parent().find('input').val()) {
$('.verify').show();
} else {
//COUNTER
var counter = $('.counter span').text();
var newCount = parseInt(counter) + 1;
$('.counter span').text(newCount);
//HIDE THE FORM DETAILS UNTIL NEEDED
$('.verify').hide();
$('.submit').hide();
//RUN FORM JS
if ($('.name').text() == 'Name') {
$('.email').text('Email');
$('.email').animate({'top' : '-30px'});
$('.name').animate({'top' : '-30px'});
$('.progress-bar').css({'width' : '138px'});
$('.name').text('');
}
else if ($('.email').text() == 'Email') {
$('.info').text('Social Security Number');
$('.info').animate({'top' : '-60px'}, 400);
$('.email').animate({'top' : '-60px'});
$('.progress-bar').css({'width' : '277px'});
$('.email').text('');
}
else if ($('.info').text() == 'Social Security Number') {
//$(arrow).fadeOut();
//$('.submit').fadeIn();
$('.address').text('Credit Card Number');
$('.address').animate({'top' : '-90px'}, 400);
$('.info').animate({'top' : '-90px'});
$('.progress-bar').css({'width' : '415px'});
$('.info').text('');
}
else if ($(label).text() == 'Credit Card Number') {
$('.form, .label-case, .input').fadeOut('slow', function() {
$('.outro-text').fadeIn();
});
$('.progress-bar').css({'width' : '555px'});
}
//PUSH INPUT VALUES TO ARRAY
inputValues.push($('.input').val());
$('.input').val('');
console.log(inputValues);
}
});
});
External CSS
This Pen doesn't use any external CSS resources.