<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;
}
.big {
font-size: 37px;
}
.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;
}
.option .hided-icon {
color: #0FB112;
margin-left: -14px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
</style>
<div class="container prices">
<div class="jumbotron pricing-tables-jumbotron">
<h2>3 Column Pricing Layout</h2>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="option">
<div class="option-title">
<h3>Trial</h3>
<span>no strings attached</span>
</div>
<div class="option-price">
<span class="price">$0</span>
<span class="period">per month</span>
</div>
<div class="option-list">
<ul class="item-list">
<li><strong>1GB</strong> Disk Space</li>
<li><strong>0</strong> Email Addresses</li>
<li><strong>2</strong> Domains </li>
<li><strong>4</strong> Subdomains</li>
<li><div class="qr" id="order1"></div></li>
</ul>
<button type="button" class="btn btn-success big"><i class="fa fa-hand-o-right hided-icon big"></i> Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="option">
<div class="option-title">
<h3>Standard</h3>
<span>most valued</span>
</div>
<div class="option-price">
<span class="price">$99</span>
<span class="period">per month</span>
</div>
<div class="option-list">
<ul class="item-list">
<li><strong>12GB</strong> Disk Space</li>
<li><strong>7</strong> Email Addresses</li>
<li><strong>10</strong> Domains </li>
<li><strong>40</strong> Subdomains</li>
<li><div class="qr" id="order2"></div></li>
</ul>
<button type="button" class="btn btn-success big"><i class="fa fa-hand-o-right hided-icon big"></i> Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="option">
<div class="option-title">
<h3>Premium</h3>
<span>extended version</span>
</div>
<div class="option-price">
<span class="price">$150</span>
<span class="period">per month</span>
</div>
<div class="option-list">
<ul class="item-list">
<li><strong>50GB</strong> Disk Space</li>
<li><strong>30</strong> Email Addresses</li>
<li><strong>30</strong> Domains </li>
<li><strong>120</strong> Subdomains</li>
<li><div class="qr" id="order3"></div></li>
</ul>
<button type="button" class="btn btn-success big"><i class="fa fa-hand-o-right hided-icon big"></i> Sign Up</button>
</div>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
<br/>
<br/>
<br/>
<div class="container">
<div class="row">
<div>
This template uses the ShieldUI-Lite open source Suite. It it used for visualization of a QR byte code.<br />
The <a href="https://github.com/shieldui/shieldui-lite/\">ShieldUI-Lite</a> QR code allows encoding into all dimensions and data capacities available for the QR code symbology.<br />
To see more examples of this type of widget, please go <a href="https://demos.shieldui.com/web/qrcode/basic-usage\">here</a>.<br />
The control also supports a flexible <a href="https://demos.shieldui.com/web/qrcode/api\">API</a> for dynamic modification and initialization.<br />
The full documentation on the widget is available <a href="https://www.shieldui.com/documentation/qrcode/javascript/getting.started\">here</a>.<br />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#order1").shieldQRcode({
mode: "byte",
size: 150,
value: "https://somesite/order?plan=1"
});
$("#order2").shieldQRcode({
mode: "byte",
size: 150,
value: "https://somesite/order?plan=2"
});
$("#order3").shieldQRcode({
mode: "byte",
size: 150,
value: "https://somesite/order?plan=3"
});
});
</script>