Time to refresh (s)=5725<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->


<div class="container-fluid">
	 <div class="row">
		<div class="col-md-12">
			<ul class="nav nav-tabs">
				<li class="active">
					<a href="#">These Buttons </a>
				</li>
				<li>
					<a href="#"> Do Nothing </a>
				</li>
				<li class="disabled">
					<a href="#">At all</a>
				</li>
				<!-- <li class="dropdown pull-right">
					 <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li>
							<a href="#">Action</a>
						</li>
						<li>
							<a href="#">Another action</a>
						</li>
						<li>
							<a href="#">Something else here</a>
						</li>
						<li class="divider">
						</li>
						<li>
							<a href="#">Separated link</a>
						</li> -->
					</ul>
				</li>
			</ul>
			<div class="row">
				<div class="col-md-5">
					<div class="jumbotron">
						<h2 style="text-align: center;">
							<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Cycling Stats
						</h2>
						</BR>
						<p>
							Goal: 9000 km</BR> Current status: 1741.887 km (19%)</BR> Interest Payment: 24.66 km/day</BR> Current total deficit: 7258.11 km</BR> Rideable Days Remaining in year: 170 days (42.69 km/day)</BR> Behind the pace by 3066.33 km<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-animated progress-bar-striped" role="progressbar" style="width:19%">
	1742
    </div>
    <div class="progress-bar progress-bar-danger progress-bar-striped progress-bar-animated" role="progressbar" style="width:34%">
      3066
    </div>
    <div class="progress-bar progress-bar-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width:47%">
	4192
    </div>
    
  </div>
  <span class="label label-success">Complete</span>
  <span class="label label-danger">Behind</span>
  <span class="label label-primary">Remaining</span>						</p>
						<p>
							<!-- <a class="btn btn-primary btn-large" href="#">Learn more</a> -->
						</p>
					</div>
				</div>
				<div class="col-md-7">
					<div class="jumbotron">
						<h2 style="text-align: center;"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Crypto Mining Stats</h2>
						</BR>
						
							<p><div class="panel panel-primary"><div class="panel-heading"><h2 align="center"><span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>ITCOIN</h2></div><table class="table"><tr> <td>HOSTNAME</td> <td>Hashrate</td> <td>capacity</td> </tr><tr><td></td><td><p><span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>itcoin hashrate: </p></td><td><p>0Th/s</p></td></tr></table></div><div class="panel panel-primary"><div class="panel-heading"><p align="center">ETHER</p></div><table class="table"><tr> <td>HOSTNAME</td> <td>Hashrate</td> <td>capacity</td> </tr><tr><td></td><td><p>Ether hashrate: </p></td><td><p>0Mh/s</p></td></tr></table></div>						</p>
						<p>
							<!-- <a class="btn btn-primary btn-large" href="#">Learn more</a> -->
						</p>
					</div>
				</div>
			</div>
		<!-- <div class="jumbotron">
				<h2>
					FUTURE HOME OF RIDE HISTORY GRAPH
				</h2>
				<p>
					<img src="media/bike-animated-gif-3.gif" />
				</p>
				<p>
					<!-- <a class="btn btn-primary btn-large" href="#">Learn more</a> -->
				</p>
			</div> -->
		</div>
	</div>
</div>