View file index.html

File size: 5.51Kb
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- BEGIN HEAD -->
  4. <head>
  5. <meta charset="utf-8"/>
  6. <title>JQuery Cloud Pricing Slider</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  10.  
  11.  
  12.  
  13. <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  14. <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
  15. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  16.  
  17. <!-- Just for demo page not required -->
  18. <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
  19.  
  20. <!-- REQUIRED FOR SLIDER, But Template's jQuery UI CSS can be used if included -->
  21. <link href="assets/css/jquery-ui.min.css" rel="stylesheet" media="screen,projection" type="text/css" />
  22.  
  23. <!-- Slider Main CSS -->
  24. <link href="assets/css/slider.min.css" rel="stylesheet" media="screen,projection" type="text/css" />
  25.  
  26. </head>
  27. <!-- END HEAD -->
  28.  
  29. <!-- BEGIN BODY -->
  30. <body>
  31.  
  32. <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  33. <div class="container">
  34. <div class="navbar-header">
  35. <div class="logo">
  36. <a class="navbar-brand" target="_blank" href="http://www.qsthemes.com"><img src="assets/images/logo.png" alt=""></a>
  37. </div>
  38. <!--div class="btn-buynow">
  39. <a href="http://www.qsthemes.com" target="_blank" class="btn btn-primary btn-default" role="button"></a>
  40. </div-->
  41. </div>
  42. </div>
  43. </div>
  44.  
  45. <!-- container -->
  46. <div class="container" style="margin-top: 125px">
  47. <h4><strong>Configure Your <span class="text-success">Cloud</span> Instance</strong></h4>
  48. <!-- well -->
  49. <div class="well">
  50. <!-- begain the Slider -->
  51. <div id="qsSlider">
  52. <div class="row">
  53. <div class="col-sm-8">
  54. <div id="QsControls">
  55. <!--CPU Slider -->
  56. <div class="slabels">
  57. <div class="values">
  58. <div id="cpuvalue" class="label label-primary"></div>
  59. </div>
  60. </div>
  61. <h4 class="title">Processor</h4>
  62. <div id="cpu" class="slider ui-slider-primary">
  63. <div class="sdecs">Each core included minimum 2.26 GHz vCore power</div>
  64. </div>
  65.  
  66. <!--RAM Slider -->
  67. <div class="slabels">
  68. <div class="values">
  69. <div id="ramvalue" class="label label-success"></div>
  70. </div>
  71. </div>
  72. <h4 class="title">Memory</h4>
  73. <div id="ram" class="slider ui-slider-success">
  74. <div class="sdecs">Equal to burstable/vswap memory included</div>
  75. </div>
  76. <!--HDD Slider -->
  77. <div class="slabels">
  78. <div class="values">
  79. <div id="hddvalue" class="label label-danger"></div>
  80. </div>
  81. </div>
  82. <h4 class="title">Storage</h4>
  83. <div id="hdd" class="slider ui-slider-danger">
  84. <div class="sdecs">RAID 10 storage with SATA drives</div>
  85. </div>
  86. <!--Optional Massege -->
  87. <h4 class="text-muted">1000 GB <span class="text-danger">bandwidth</span> included per month, at 100 Mbit/s uplink port</h4>
  88. <!--//End Massege -->
  89.  
  90. </div>
  91. </div><!--//col-->
  92.  
  93. <div class="col-sm-4">
  94. <div id="QsPrice">
  95. <div class="prices">
  96. <div id="presets">
  97. <div id="tooltip">
  98. <div class="text"></div>
  99. </div>
  100. </div>
  101. <div class="clearfix"></div>
  102. <!--Total Pricing Text -->
  103. <div id="pricetext">
  104. <h5>Estimated Prices</h5>
  105. <span class="text-muted"><i class="fa fa-usd"></i></span>
  106. <span id="doller"></span>
  107. <span id="cents"></span>
  108. <span id="btext">/mo</span>
  109. </div>
  110. <!--Control Panel Option -->
  111. <div id="panelselector">
  112. <div id="panel">
  113. <div id="pincluded"><strong>cPanel</strong> included</div>
  114. <div id="panelbackdrop"></div>
  115. <div id="nopanel">Not required</div>
  116. </div>
  117. </div>
  118. <span class="text-info">
  119. Fully Managed with cPanel only
  120. </span>
  121. <!--Billing Period Option -->
  122. <div id="periodselector">
  123. <div id="period">
  124. <div id="month">Pay Monthly</div>
  125. <div id="periodbackdrop"></div>
  126. <div id="year">12-Months <span class="text-danger">Save 25%</span></div>
  127. </div>
  128. </div>
  129. <!--Buy Now Button -->
  130. <div id="btn-buynow" class="btn btn-success">Signup Now!</div>
  131. </div>
  132. </div>
  133. </div><!--//col-->
  134.  
  135.  
  136. </div><!--//row-->
  137. </div>
  138. <!-- //END the Slider -->
  139.  
  140.  
  141. </div>
  142. <!-- Well-->
  143. <hr>
  144.  
  145. <footer>
  146. <p>&copy; <a href="http://www.qsthemes.com">QsThemes</a> 2014, All Rights Reserved.</p>
  147. </footer>
  148. </div> <!-- /container -->
  149.  
  150. <!-- BEGIN JAVASCRIPTS But Template's jQuer can be used if included-->
  151. <script src="assets/js/jquery-1.11.0.min.js" type="text/javascript"></script>
  152. <!-- REQUIRED FOR SLIDER, But Template's jQuery UI can be used if included -->
  153. <script src="assets/js/jquery-ui.min.js" type="text/javascript"></script>
  154. <!-- Slider Main Script -->
  155. <script src="assets/js/qs.slider.js" type="text/javascript"></script>
  156. <script src="assets/js/qs.slider.init.js" type="text/javascript"></script>
  157. </body>
  158. <!-- END BODY -->
  159. </html>