<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 ---------->
<!-- you need to include the shieldui css and js assets in order for the grids to work -->
<script type="text/javascript" src="http://www.prepbootstrap.com/Content/shieldui-lite/dist/js/shieldui-lite-all.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
.qr {
margin-left: auto;
margin-right: auto;
}
.prices {
padding-bottom: 40px;
color: #fff;
background: #B3C0DD;
background: -moz-linear-gradient(-45deg, #3f4c6b 0%, #3f4c6b 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3f4c6b), color-stop(100%,#3f4c6b));
background: -webkit-linear-gradient(-45deg, #B3C0DD 0%,#3f4c6b 100%);
background: -o-linear-gradient(-45deg, #B3C0DD 0%,#3f4c6b 100%);
background: -ms-linear-gradient(-45deg, #B3C0DD 0%,#3f4c6b 100%);
background: linear-gradient(135deg, #B3C0DD 0%,#3f4c6b 100%);
}
.pricing-tables-jumbotron {
text-align: center;
background: none;
}
.price {
display: block;
font-size: 21px;
font-weight: bold;
font-style: italic;
}
.big {
font-size: 24px;
}
.rbig {
font-size: 50px;
}
.option {
background: #f9f9f9;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
border-radius: 4px 4px 0 0;
position: relative;
margin: 20px 0;
text-align: center;
color: #333;
}
.option:hover .hided-icon {
color: #fff;
padding: 0 10px;
}
.option > .option-title {
padding: 20px;
}
.option > .option-title > h3 {
font-weight: bold;
font-size: 32px;
text-transform: uppercase;
margin: 0;
}
.option > .option-title > span {
font-style: italic;
font-size: 16px;
}
.option > .option-price {
background: #fff;
padding: 0 0 10px;
color: #0FB112;
}
.option > .option-price > .price {
display: block;
font-size: 72px;
font-weight: bold;
font-style: italic;
}
.option > .option-price > .period {
font-size: 14px;
}
.option .option-list {
padding: 0;
}
.option .item-list {
list-style: none;
padding: 0;
}
.option .item-list li:nth-child(even) {
background: #fdfdfd;
}
.option .item-list > li {
padding: 10px 5px;
font-size: 16px;
}
.option .btn {
width: 100%;
padding: 18px 8px;
border-radius: 0;
border: none;
text-transform: uppercase;
}
.option .btn-success {
color: #fff;
background: #0FB112;
}
.option .btn-success:hover {
background: #1d7019;
}
</style>
<div class="container prices">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="option">
<div class="option-title">
<h3>Simple Start</h3>
</div>
<div class="option-price">
<div class="option-price">
<div>
<div id="price1" class="price rbig">$79</div>
<span class="period">Per Month</span><br>
<select id="simple" style="font-size: 16px;" onchange="document.getElementById('price1').innerHTML='$'+this.value">
<option value="79">5 seats</option>
<option value="99">7 seats</option>
<option value="129">10 seats</option>
<option value="159">15 seats</option>
<option value="199">20 seats</option>
<option value="219">25 seats</option>
<option value="259">35 seats</option>
<option value="299">50 seats</option>
<option value="349">75 seats</option>
<option value="399">100 seats</option>
<option value="439">125 seats</option>
<option value="499">150 seats</option>
<option value="559">200 seats</option>
<option value="599">300 seats</option>
</select>
</select>
</div>
</div>
</div>
<div class="option-list">
<ul class="item-list">
<li>Transaction Management</li>
<li>Commission Tracking</li>
<li>E-signature & Templates</li>
<li>Customizable Reports</li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li><div class="qr" id="order1"></div></li>
</ul>
<button type="button" class="btn btn-success big">Free 30 Day Trial</button>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="option">
<div class="option-title">
<h3>Standard</h3>
</div>
<div class="option-price">
<div>
<div id="price2" class="price rbig">$129</div>
<span class="period">Per Month</span><br>
<select id="standard" style="font-size: 16px;" onchange="document.getElementById('price2').innerHTML='$'+this.value">
<option value="129">5 seats</option>
<option value="159">7 seats</option>
<option value="189">10 seats</option>
<option value="229">15 seats</option>
<option value="279">20 seats</option>
<option value="319">25 seats</option>
<option value="359">35 seats</option>
<option value="399">50 seats</option>
<option value="479">75 seats</option>
<option value="599">100 seats</option>
<option value="689">125 seats</option>
<option value="759">150 seats</option>
<option value="799">200 seats</option>
<option value="899">300 seats</option>
</select>
</select>
</div>
</div>
<div class="option-list">
<ul class="item-list">
<li>Transaction Management</li>
<li>Commission Tracking</li>
<li>E-signature & Templates</li>
<li>Customizable Reports</li>
<li>MLS Integration</li>
<li>QuickBooks Integration </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li><div class="qr" id="order2"></div></li>
</ul>
<button type="button" class="btn btn-success big">Free 30 Day Trial</button>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="option">
<div class="option-title">
<h3>Enterprise</h3>
</div>
<div class="option-price">
<div>
<div id="price3" class="price rbig">$179</div>
<span class="x-interval">Per Month</span><br>
<select id="enterprise" style="font-size: 16px;" onchange="document.getElementById('price3').innerHTML='$'+this.value">
<option value="179">5 seats</option>
<option value="199">7 seats</option>
<option value="229">10 seats</option>
<option value="299">15 seats</option>
<option value="349">20 seats</option>
<option value="389">25 seats</option>
<option value="439">35 seats</option>
<option value="499">50 seats</option>
<option value="599">75 seats</option>
<option value="689">100 seats</option>
<option value="759">125 seats</option>
<option value="799">150 seats</option>
<option value="859">200 seats</option>
<option value="999">300 seats</option>
</select>
</div>
</div>
<div class="option-list">
<ul class="item-list">
<li>Transaction Management</li>
<li>Commission Tracking</li>
<li>E-signature & Templates</li>
<li>Customizable Reports</li>
<li>MLS Integration</li>
<li>QuickBooks Integration </li>
<li>White Label</li>
<li>Multiple Office Locations</li>
<li>API Access</li>
<li>Single Sign-On (SSO)</li>
<li>CRM/Contact Sync Integration</li>
<li><div class="qr" id="order3"></div></li>
</ul>
<button type="button" class="btn btn-success big">Free 30 Day Trial</button>
</div>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<script type="text/javascript">
$(document).ready(function () {
$("#order1").shieldQRcode({
mode: "byte",
size: 150,
value: "http://transactionadmin.com"
});
$("#order2").shieldQRcode({
mode: "byte",
size: 150,
value: "http://transactionadmin.com"
});
$("#order3").shieldQRcode({
mode: "byte",
size: 150,
value: "http://transactionadmin.com"
});
});
</script>
