<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Flat Payment Form</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='container'>
<div class='info'>
<span></span>
</div>
<form class='modal'>
<header class='header'>
<h1>Payment Form Design</h1>
<div class='card-type'>
<a class='card active' href='#' id="one">
<img src='http://image.flaticon.com/icons/png/128/297/297559.png' width="64"/>
<p>Account Information</p>
</a>
<a class='card' href='#' id="two">
<img src='http://image.flaticon.com/icons/png/128/236/236832.png' width="64"/>
<p>Personal Information</p>
</a>
<a class='card' href='#' id="three">
<img src='http://image.flaticon.com/icons/png/128/297/297563.png' width="64"/>
<p>Payment Information</p>
</a>
<a class='card' href='#' id="four">
<img src='http://image.flaticon.com/icons/png/128/297/297557.png' width="64"/>
<p>Confirm Your Details</p>
</a>
</div>
</header>
<div class='content' id="one-inner">
<div class='form'>
<div class='form-row'>
<div class='input-group'>
<label for=''>Username</label>
<input placeholder='Username' type='text'>
</div>
</div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Email</label>
<input placeholder='Email' type='text'>
</div>
</div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Password</label>
<input placeholder='Password' type='text'>
</div>
</div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Confirm password</label>
<input placeholder='Confirm password' type='text'>
</div>
</div>
</div>
<footer class='footer'>
<button class='button' id="one-button"> Next Step</button>
</footer>
</div><!--one-->
<div class='content' id="two-inner">
<div class='form'>
<div class='form-row content_two'>
<div class='input-group'>
<label for=''>Salutation</label>
<select name="salut" class="dropdown-select">
<option value="1">Mr</option>
<option value="2">Mrs</option>
</select>
</div>
</div>
<div class='form-row content_two'>
<div class='input-group'>
<label for=''>Gender</label>
<select name="gender" class="dropdown-select" style="margin-left:2%;">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
<div class="clear"></div>
<div class='form-row content_two'>
<div class='input-group'>
<label for=''>First Name</label>
<input placeholder='First Name' type='text'>
</div>
</div>
<div class='form-row content_two' style="margin-left:2%;">
<div class='input-group'>
<label for=''>Last Name</label>
<input placeholder='Last Name' type='text'>
</div>
</div>
<div class="clear"></div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Email</label>
<input placeholder='Email' type='text'>
</div>
</div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Phone</label>
<input placeholder='Phone' type='number'>
</div>
</div>
<div class="clear"></div>
<div class='form-row content_two'>
<div class='input-group'>
<label for=''>Zip Code</label>
<input placeholder='Zip Code' type='number'>
</div>
</div>
<div class='form-row content_two' style="margin-left:2%;">
<div class='input-group'>
<label for=''>Select State</label>
<select name="state" class="dropdown-select">
<option value="1">Texas</option>
<option value="2">New York</option>
</select>
</div>
</div>
<div class="clear"></div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Home address</label>
<input placeholder='Address' type='text'>
</div>
</div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Select Country</label>
<select name="country" class="dropdown-select">
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="2">UK</option>
</select>
</div>
</div>
</div>
<footer class='footer'>
<button class='button' id="two-button"> Next Step</button>
</footer>
</div><!--two-->
<div class='content' id="three-inner">
<div class='form'>
<div class='form-row'>
<div class='input-group'>
<label for=''>Card Type</label>
<select name="card-type" class="dropdown-select">
<option value="1">Visa</option>
<option value="2">Master Card</option>
</select>
</div>
</div>
<div class='form-row content_two'>
<div class='input-group'>
<label for=''>Card Number</label>
<input placeholder='Number' type='text'>
</div>
</div>
<div class='form-row content_two' style="margin-left:2%;">
<div class='input-group'>
<label for=''>CVC</label>
<input placeholder='CVC' type='text'>
</div>
</div>
<div class="clear"></div>
<div class='form-row'>
<div class='input-group'>
<label for=''>Card Holder Name</label>
<input placeholder='Card Holder Name' type='text'>
</div>
</div>
<div class="clear"></div>
<div class='form-row content_two'>
<div class='input-group'>
<label for=''>Expiry Month</label>
<select name="month" class="dropdown-select">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class='form-row content_two' style="margin-left:2%;">
<div class='input-group'>
<label for=''>Expiry Year</label>
<select name="year" class="dropdown-select">
<option value="1">2014</option>
<option value="2">2015</option>
<option value="3">2016</option>
<option value="4">2017</option>
</select>
</div>
</div>
</div>
<footer class='footer'>
<button class='button' id="three-button"> Next Step</button>
</footer>
</div><!--three-->
<div class='content' id="four-inner">
<div class='form'>
<div class="data-container">
<dl>
<dt>Username :-</dt>
<dd>John_503in</dd>
</dl>
<dl>
<dt>Email ID :-</dt>
<dd>john_doe@gmail.com</dd>
</dl>
<dl>
<dt>Full Name :-</dt>
<dd>John Doe</dd>
</dl>
<dl>
<dt>Gender :-</dt>
<dd>Male</dd>
</dl>
<dl>
<dt>Telephone NO :-</dt>
<dd>325-555-1234</dd>
</dl>
<dl>
<dt>Address :-</dt>
<dd>111 W.App Ave. Suite 123, Sunway, CA</dd>
</dl>
<dl>
<dt>Zip Code :-</dt>
<dd>94086</dd>
</dl>
<dl>
<dt>Country :-</dt>
<dd>USA</dd>
</dl>
<dl>
<dt>Card Type :-</dt>
<dd>Visa</dd>
</dl>
<dl>
<dt>Card NO :-</dt>
<dd>4519-1235-9869-4321</dd>
</dl>
</div>
<div class="clear"></div>
</div>
<footer class='footer'>
<button class='button' id="four-button" > Submit</button>
</footer>
</div><!--four-->
</form>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
body {
background:url(http://www.incube-8.com/wp-content/uploads/2013/11/incube8-background-ONLINE-PAYMENT.jpg);
background-size:cover;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
line-height: 1;
}
.container {
font-family: 'Open Sans', sans-serif;
display: block;
max-width: 480px;
margin: 40px auto;
}
.modal {
font-family: 'Open Sans', sans-serif;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
background: #FFF;
-webkit-border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-border-radius: 4px;
-moz-background-clip: padding;
border-radius: 4px;
background-clip: padding-box;
overflow: hidden;
}
.modal .form .form-row {
font-family: 'Open Sans', sans-serif;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 0 0 30px;
}
.modal .form .form-row:last-child {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
/*.modal .form .form-row:last-child .input-group {
width: 75%;
margin: 0 15px 0 0;
}
.modal .form .form-row:last-child .input-group:last-child {
width: 25%;
margin: 0 0 0 15px;
}*/
.modal .form .input-group {
width: 100%;
}
.modal .form label {
font-family: 'Open Sans', sans-serif;
display: block;
width: 100%;
margin: 0 0 10px;
color: #00A6EA;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.modal .form input {
padding: 0px 10px !important;
height: 42px;
font-family: 'Open Sans', sans-serif;
outline: none;
display: block;
background: rgba(0, 0, 0, 0.1);
width: 100%;
margin: 0;
border: 0;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
padding: 15px;
color: #999;
font-size: 12px;
font-weight: 700;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.modal .form select {
padding: 0px 10px !important;
height: 42px;
font-family: 'Open Sans', sans-serif;
outline: none;
display: block;
background: rgba(0, 0, 0, 0.1);
width:100%;
margin: 0;
border: 0;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
padding: 15px;
color: #999;
font-size: 12px;
font-weight: 700;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.modal .header {font-family: 'Open Sans', sans-serif;
background: #00A6EA;
padding: 30px;
text-align: center;
}
.modal .header h1 {font-family: 'Open Sans', sans-serif;
margin: 0 0 15px;
color: #FFF;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.modal .header .card-type {font-family: 'Open Sans', sans-serif;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.modal .header .card-type .card {font-family: 'Open Sans', sans-serif;
position: relative;
width: 25%;
min-width: 54px;
text-align: center;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
.modal .header .card-type .card.active {font-family: 'Open Sans', sans-serif;
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
filter: grayscale(0);
}
.modal .header .card-type .card.active:after {font-family: 'Open Sans', sans-serif;
display: block;
bottom: -30px;
}
.modal .header .card-type .card:after {font-family: 'Open Sans', sans-serif;
content: '';
position: absolute;
bottom: -60px;
left: 50%;
margin: 0 0 0 -10px;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #FFF;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.modal .header .card-type .card img {font-family: 'Open Sans', sans-serif;
display: inline-block;
}
.modal .header .card-type li {font-family: 'Open Sans', sans-serif;
display: inline-block;
margin: 0 10px;
}
.modal .content {font-family: 'Open Sans', sans-serif;
padding: 30px;
overflow-y: scroll !important;
height: 150px !important;
}
.modal .footer .button {
font-family: 'Open Sans', sans-serif;
margin-top:25px;
outline: none;
display: block;
background: #6772e5;
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
border-radius: 4px;
width: 100%;
border: 0;
padding: 20px 30px;
color: #FFF;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all .15s ease;
}
.modal .footer .button:hover {font-family: 'Open Sans', sans-serif;
color: #FFF;
transform: translateY(-5px);
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.info {font-family: 'Open Sans', sans-serif;
width: 300px;
margin: 50px auto;
text-align: center;
}
.info h1 {font-family: 'Open Sans', sans-serif;
margin: 0 0 15px;
padding: 0;
font-size: 24px;
font-weight: 400;
color: #333;
}
.info span {font-family: 'Open Sans', sans-serif;
color: #666;
font-size: 12px;
}
.info span a {
color: #000;
text-decoration: none;
}
.info span .fa {font-family: 'Open Sans', sans-serif;
color: #00A6EA;
}
lesshat-selector {
-lh-property: 0; }
@-webkit-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
@-moz-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
@-o-keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
@keyframes active{ 0%{ bottom: -60px; opacity: 0; } 100%{ bottom: -30px; opacity: 1 }}
[not-existing] {
zoom: 1;
}
.card-type a{ font-family: 'Open Sans', sans-serif; text-decoration: none;
list-style: none;}
.card-type p{font-family: 'Open Sans', sans-serif; font-size: 11px;
color: #FFF;
font-weight: 600;}
.content_two{width:49% !important; float:left;font-family: 'Open Sans', sans-serif;}
.clear{clear: both;}
.data-container dd {font-family: 'Open Sans', sans-serif;
width: 50%;
float: left;
line-height: 29px;
font-weight: bold;
font-size: 13px;
color: #9e9e9e;font-family: 'Open Sans', sans-serif;
}
.data-container dt {font-family: 'Open Sans', sans-serif;
width: 48%;
float: left;
line-height: 29px;
font-weight: bold;
font-size: 13px;
}
$('.card').on('click', function() {
$('.card').removeClass('active');
$(this).addClass('active');
$('.form').stop().slideUp();
$('.form').delay(300).slideDown();
});
$('#one-button').on('click', function() {
$('.card').removeClass('active');
$('#two').addClass('active');
$('.form').stop().slideUp();
$('.form').delay(300).slideDown();
});
$('#two-button').on('click', function() {
$('.card').removeClass('active');
$('#three').addClass('active');
$('.form').stop().slideUp();
$('.form').delay(300).slideDown();
});
$('#three-button').on('click', function() {
$('.card').removeClass('active');
$('#four').addClass('active');
$('.form').stop().slideUp();
$('.form').delay(300).slideDown();
});
$('#four-button').on('click', function() {
$('.card').removeClass('active');
$('#one').addClass('active');
$('.form').stop().slideUp();
$('.form').delay(300).slideDown();
});
$(document).ready(function(){
$("#one-button").click(function(){
$("#one-inner").hide();
});
$("#one-button").click(function(){
$("#two-inner").show();
});
$("#two-button").click(function(){
$("#two-inner").hide();
});
$("#two-button").click(function(){
$("#three-inner").show();
});
$("#three-button").click(function(){
$("#three-inner").hide();
});
$("#three-button").click(function(){
$("#four-inner").show();
});
$("#four-button").click(function(){
$("#four-inner").hide();
});
$("#four-button").click(function(){
$("#one-inner").show();
});
$("#two-inner").hide();
$("#three-inner").hide();
$("#four-inner").hide();
$("#one").click(function(){
$("#two-inner").hide();
$("#three-inner").hide();
$("#four-inner").hide();
});
$("#one").click(function(){
$("#one-inner").show();
});
$("#two").click(function(){
$("#one-inner").hide();
$("#three-inner").hide();
$("#four-inner").hide();
});
$("#two").click(function(){
$("#two-inner").show();
});
$("#three").click(function(){
$("#one-inner").hide();
$("#two-inner").hide();
$("#four-inner").hide();
});
$("#three").click(function(){
$("#three-inner").show();
});
$("#four").click(function(){
$("#one-inner").hide();
$("#two-inner").hide();
$("#three-inner").hide();
});
$("#four").click(function(){
$("#four-inner").show();
});
});
