<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1 style="text-align:center;">Hi guys, Please click to <strong>Join</strong> and see that what is it.</h1>
<br><br>
<div class="sub_table">
<div class="container">
<div class="row">
<div class="table_title">
<p>Step One</p>
<hr>
<h1>Choose Your Plan</h1>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<div class="box-1 center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<h3>1 Month</h3>
</div>
<div class="panel-body text-center">
<p><strong>$100</strong></p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><strong>10</strong><br>
Fidelity Point</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join1">JOIN</a> </div>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<div class="box-1 center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<h3>3 Month</h3>
</div>
<div class="panel-body text-center">
<p><strong>$300</strong></p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><strong>30</strong><br>
Fidelity Point</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join2">JOIN</a> </div>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<div class="box-1 center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<h3>6 Month</h3>
</div>
<div class="panel-body text-center">
<p><strong>$600</strong></p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><strong>90</strong><br>
Fidelity Point</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join3">JOIN</a> </div>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<div class="box-1 center">
<div class="panel panel-success panel-pricing">
<div class="panel-heading">
<h3>12 Month</h3>
</div>
<div class="panel-body text-center">
<p><strong>$1200</strong></p>
</div>
<ul class="list-group text-center">
<li class="list-group-item"><strong>240</strong> <br>
Fidelity Point</li>
</ul>
<div class="panel-footer"> <a class="btn btn-lg btn-block btn-success" id="join4">JOIN</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="form_div">
<div class="container">
<div class="order">
<div class="table_title">
<p>Step Two</p>
<hr>
<h1>Enter Your Order</h1>
</div>
<form method="post" action="">
<div class="col-sm-6 col-md-6 col-xs-12">
<div class="row">
<div class="col-sm-8 col-md-8 col-xs-12">
<p>
<input type="text" placeholder="Street Address" name="street_address">
</p>
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<p>
<input type="text" placeholder="Suite Apt" name="suit_apt">
</p>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<p>
<input type="text" placeholder="City" name="city">
</p>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<p>
<select name="state">
<option class="active">State</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<p>
<input type="text" placeholder="Zip Code" name="zip_code">
</p>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<p>
<input type="text" placeholder="Phone Number" name="phone_no">
</p>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<p>
<input type="email" placeholder="Email Address" name="email">
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<div class="col-sm-6 col-md-6 col-xs-12">
<p>
<input type="text" placeholder="First Name" name="fname">
</p>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<p>
<input type="text" placeholder="Last Name" name="lname">
</p>
</div>
<!--<button class="cn_btn">Continue</button>-->
<input type="submit" class="cn_btn" name="submit" value="Continue" />
</div>
</form>
</div>
</div>
</div>
</div>
<div id="form_div1" class="row">
<div class="container">
<div class="order">
<div class="table_title">
<p>Step Three</p>
<hr>
<h1>Add a Payment Method </h1>
</div>
<form action="" method="post">
<div class="col-sm-6 col-md-6 col-xs-12">
<div class="row">
<div class="col-sm-9 col-md-9 col-xs-12">
<p>
<input type="text" name="ac_number" placeholder="Credit Card / Debit Card Number ">
</p>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<p>
<input type="text" name="cvv" placeholder="CVV">
</p>
</div>
<div class="col-sm-6 col-md-6 col-xs-12">
<p>
<select name="month">
<option class="active">Month</option>
<option value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</p>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<p>
<select name="year">
<option class="active">Year</option>
<option value="1">2015</option>
<option value="2">2016</option>
</select>
</p>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<p>
<input type="text" name="zip" placeholder="Billing Zip">
</p>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-xs-12">
<div class="r_pay">
<!-- PayPal Logo --><table border="0" cellpadding="10" cellspacing="0" align="center"><tr><td align="center"></td></tr><tr><td align="center"><a href="https://www.paypal.com/uk/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/uk/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/Logo/AM_mc_vs_ms_ae_UK.png" border="0" alt="PayPal Acceptance Mark"></a></td></tr></table><!-- PayPal Logo -->
<button>Get It</button>
<button>Cancel / Remove From Cart</button>
</div>
</div>
</form>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);
body{font-family: 'Raleway', sans-serif;}
.table_title h1, .table_title p {
text-align: center;
}
.table_title > p {
font-size: 21px;
}
.table_title > hr {
border-color: #e3e3e3;
border-width: 3px;
max-width: 3%;
width: 100%;
}
.table_title h1, .table_title p {
text-align: center;
}
.table_title > h1 {
font-size: 33px !important;
}
.center {
text-align: center;
}
.panel-success {
border: 1px solid #ffd3b4;
}
.panel-success > .panel-heading {
background: #f05f40 none repeat scroll 0 0;
color: #fff;
padding: 10px 15px;
}
.panel-body {
padding: 15px;
}
.panel-body.text-center > p {
margin-bottom: 0;
}
.panel-body.text-center strong {
font-size: 24px;
}
.panel > .list-group, .panel > .panel-collapse > .list-group {
margin-bottom: 0;
}
.list-group-item {
font-size: 20px;
padding-bottom: 18px;
}
.list-group + .panel-footer {
border-top-width: 0;
}
.panel-footer {
background-color: #f5f5f5;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top: 1px solid #ddd;
padding: 10px 15px;
}
.btn.btn-lg.btn-block.btn-success {
background: #f05f40 none repeat scroll 0 0;
color: #fff !important;
}
.btn {
border: 0 none;
border-radius: 300px;
font-family: "Raleway",sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.table_title > h1 {
font-size: 33px !important;
padding-bottom:20px;
}
/*form*/
.order input, .order select {
border: 2px solid #e5e5e5 !important;
}
.order input, select {
-moz-appearance: none;
border: 1px solid #e5e5e5;
border-radius: 2px;
box-sizing: border-box;
color: #666;
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
padding: 14px 15px;
transition: border-color 0.25s ease 0s;
width: 100%;
}
.cn_btn {
background: #f05f40 none repeat scroll 0 0;
color: #fff !important;
margin: 0 0 0 15px !important;
max-width: 241px;
padding: 14px 0 !important;
width: 100%;
}
.order input:focus, .order select:focus {
border: 2px solid #f05f40 !important;
}
.r_pay img {
margin-top: -16px;
max-width: 225px;
width: 100%;
}
.r_pay > button {
background: #f05f40 none repeat scroll 0 0;
border: medium none;
border-radius: 3px;
color: #fff;
margin: 3px 0;
padding: 8.5px 0;
width: 100%;
}
p{margin-bottom"10px;}
$(document).ready(function(e) {
$("#form_div, #form_div1").hide();
$("#join1").click(function(){
$("#form_div, #form_div1").toggle( "slow" );
});
$("#join2").click(function(){
$("#form_div, #form_div1").toggle( "slow" );
});
$("#join3").click(function(){
$("#form_div, #form_div1").toggle( "slow" );
});
$("#join4").click(function(){
$("#form_div, #form_div1").toggle( "slow" );
});
});
