Размер файла: 5.51Kb
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8"/>
<title>JQuery Cloud Pricing Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Just for demo page not required -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
<!-- REQUIRED FOR SLIDER, But Template's jQuery UI CSS can be used if included -->
<link href="assets/css/jquery-ui.min.css" rel="stylesheet" media="screen,projection" type="text/css" />
<!-- Slider Main CSS -->
<link href="assets/css/slider.min.css" rel="stylesheet" media="screen,projection" type="text/css" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="logo">
<a class="navbar-brand" target="_blank" href="http://www.qsthemes.com"><img src="assets/images/logo.png" alt=""></a>
</div>
<!--div class="btn-buynow">
<a href="http://www.qsthemes.com" target="_blank" class="btn btn-primary btn-default" role="button"></a>
</div-->
</div>
</div>
</div>
<!-- container -->
<div class="container" style="margin-top: 125px">
<h4><strong>Configure Your <span class="text-success">Cloud</span> Instance</strong></h4>
<!-- well -->
<div class="well">
<!-- begain the Slider -->
<div id="qsSlider">
<div class="row">
<div class="col-sm-8">
<div id="QsControls">
<!--CPU Slider -->
<div class="slabels">
<div class="values">
<div id="cpuvalue" class="label label-primary"></div>
</div>
</div>
<h4 class="title">Processor</h4>
<div id="cpu" class="slider ui-slider-primary">
<div class="sdecs">Each core included minimum 2.26 GHz vCore power</div>
</div>
<!--RAM Slider -->
<div class="slabels">
<div class="values">
<div id="ramvalue" class="label label-success"></div>
</div>
</div>
<h4 class="title">Memory</h4>
<div id="ram" class="slider ui-slider-success">
<div class="sdecs">Equal to burstable/vswap memory included</div>
</div>
<!--HDD Slider -->
<div class="slabels">
<div class="values">
<div id="hddvalue" class="label label-danger"></div>
</div>
</div>
<h4 class="title">Storage</h4>
<div id="hdd" class="slider ui-slider-danger">
<div class="sdecs">RAID 10 storage with SATA drives</div>
</div>
<!--Optional Massege -->
<h4 class="text-muted">1000 GB <span class="text-danger">bandwidth</span> included per month, at 100 Mbit/s uplink port</h4>
<!--//End Massege -->
</div>
</div><!--//col-->
<div class="col-sm-4">
<div id="QsPrice">
<div class="prices">
<div id="presets">
<div id="tooltip">
<div class="text"></div>
</div>
</div>
<div class="clearfix"></div>
<!--Total Pricing Text -->
<div id="pricetext">
<h5>Estimated Prices</h5>
<span class="text-muted"><i class="fa fa-usd"></i></span>
<span id="doller"></span>
<span id="cents"></span>
<span id="btext">/mo</span>
</div>
<!--Control Panel Option -->
<div id="panelselector">
<div id="panel">
<div id="pincluded"><strong>cPanel</strong> included</div>
<div id="panelbackdrop"></div>
<div id="nopanel">Not required</div>
</div>
</div>
<span class="text-info">
Fully Managed with cPanel only
</span>
<!--Billing Period Option -->
<div id="periodselector">
<div id="period">
<div id="month">Pay Monthly</div>
<div id="periodbackdrop"></div>
<div id="year">12-Months <span class="text-danger">Save 25%</span></div>
</div>
</div>
<!--Buy Now Button -->
<div id="btn-buynow" class="btn btn-success">Signup Now!</div>
</div>
</div>
</div><!--//col-->
</div><!--//row-->
</div>
<!-- //END the Slider -->
</div>
<!-- Well-->
<hr>
<footer>
<p>© <a href="http://www.qsthemes.com">QsThemes</a> 2014, All Rights Reserved.</p>
</footer>
</div> <!-- /container -->
<!-- BEGIN JAVASCRIPTS But Template's jQuer can be used if included-->
<script src="assets/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- REQUIRED FOR SLIDER, But Template's jQuery UI can be used if included -->
<script src="assets/js/jquery-ui.min.js" type="text/javascript"></script>
<!-- Slider Main Script -->
<script src="assets/js/qs.slider.js" type="text/javascript"></script>
<script src="assets/js/qs.slider.init.js" type="text/javascript"></script>
</body>
<!-- END BODY -->
</html>