|
|
@@ -10,13 +10,24 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
- <div class="navbar navbar-default navbar-fixed-top">
|
|
|
+ <div class="navbar navbar-default navbar-static-top">
|
|
|
<div class="container">
|
|
|
+ <!-- navbar-header takes up 100% width on XS screens only -->
|
|
|
<div class="navbar-header">
|
|
|
<a href="/" class="navbar-brand">Blasting off with Boostrap</a>
|
|
|
+
|
|
|
+ <button type="button" class="navbar-toggle"
|
|
|
+ data-toggle="collapse" data-target=".navbar-collapse">
|
|
|
+ <!-- sr-only means Screen Readers Only -->
|
|
|
+ <span class="sr-only">Toggle navigation</span>
|
|
|
+ <!-- The number of .icon-bar spans defines the number of rows in the button -->
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
|
|
|
- <ul class="nav navbar-nav navbar-right">
|
|
|
+ <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
|
|
|
<li class="nav navbar-link"><a href="#tickets.html">Tickets</a></li>
|
|
|
<li class="nav navbar-link"><a href="#stations.html">Stations</a></li>
|
|
|
<li class="nav navbar-link"><a href="#about.html">About</a></li>
|
|
|
@@ -110,6 +121,93 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class='quote'>
|
|
|
+ <div class='container'>
|
|
|
+ <blockquote>
|
|
|
+ <p>A dream that became a reality and spread throughout the stars.</p>
|
|
|
+ <footer>Captain Kirk in <cite title="Source Title">Whom Gods Destroy</cite></footer>
|
|
|
+ </blockquote>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='container'>
|
|
|
+ <div class='row'>
|
|
|
+ <div class='col-md-8'>
|
|
|
+ <h2>Plan Your Trip Today!</h2>
|
|
|
+
|
|
|
+ <ul class='nav nav-tabs'>
|
|
|
+ <li class='active'><a href='#time'>Todays Times</a></li>
|
|
|
+ <li><a href='#deals'>Hot Deals</a></li>
|
|
|
+ <li><a href='#forecast'>Forecast</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div class='tab-content'>
|
|
|
+ <div class='tab-pane fade active' id='time'>
|
|
|
+ <p>Todays Time here</p>
|
|
|
+ </div>
|
|
|
+ <div class='tab-pane fade' id='deals'>
|
|
|
+ <p>Deals here</p>
|
|
|
+ </div>
|
|
|
+ <div class='tab-pane fade' id='forecast'>
|
|
|
+ <p>Forecast</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='col-md-3 col-md-offset-1'>
|
|
|
+ <div class='panel-group'>
|
|
|
+ <div class='panel panel-success'>
|
|
|
+ <div class='panel-heading'>
|
|
|
+ <h4 class='panel-title'>
|
|
|
+ <a href='#systemsOperational' data-toggle="collapse" data-target="#systemsOperational">All Systems Operational</a>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ <div id='systemsOperational' class='panel-collapse collapse in'>
|
|
|
+ <div class='panel-body'>
|
|
|
+ <p>All systems are operational</p>
|
|
|
+ <ul class='list-unstyled'>
|
|
|
+ <li><i class='glyphicon glyphicon-ok'></i> Transporters</li>
|
|
|
+ <li><i class='glyphicon glyphicon-ok'></i> Space Elevator</li>
|
|
|
+ <li><i class='glyphicon glyphicon-ok'></i> RocketBus</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='panel panel-warning'>
|
|
|
+ <div class='panel-heading'>
|
|
|
+ <h4 class='panel-title'>
|
|
|
+ <a href='#weatherAlert' data-toggle="collapse" data-target="#weatherAlert">Weather Alert</a>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ <div id='weatherAlert' class='panel-collapse collapse'>
|
|
|
+ <div class='panel-body'>
|
|
|
+ <p>The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:</p>
|
|
|
+ <ul class='list-unstyled'>
|
|
|
+ <li><strong>February 9th, 21:43</strong></li>
|
|
|
+ <li><strong>May 18, 19:82</strong></li>
|
|
|
+ <li><strong>July 4, 08:42</strong></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='panel panel-danger'>
|
|
|
+ <div class='panel-heading'>
|
|
|
+ <h4 class='panel-title'>
|
|
|
+ <a href='#transportationWarning' data-toggle="collapse" data-target="#transportationWarning">Transportation Generals Warning: Transporters</a>
|
|
|
+ </h4>
|
|
|
+ </div>
|
|
|
+ <div id='transportationWarning' class='panel-collapse collapse'>
|
|
|
+ <div class='panel-body'>
|
|
|
+ <p>Technically, transporting means making a clone of yourself and killing off the other one. If you believe in a soul, you should be aware of this fact before attempting travel using a transporter.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
<div class='footer'>
|
|
|
<div class='container'>
|
