File size: 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>