Просмотр файла index.html

Размер файла: 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>&copy; <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>