index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Blasting off with Bootstrap</title>
  6. <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <link rel="stylesheet" href="css/bootstrap.css"/>
  9. <link rel="stylesheet" href="css/main.css" />
  10. </head>
  11. <body>
  12. <div class="navbar navbar-default navbar-static-top">
  13. <div class="container">
  14. <!-- navbar-header takes up 100% width on XS screens only -->
  15. <div class="navbar-header">
  16. <a href="/" class="navbar-brand">Blasting off with Boostrap</a>
  17. <button type="button" class="navbar-toggle"
  18. data-toggle="collapse" data-target=".navbar-collapse">
  19. <!-- sr-only means Screen Readers Only -->
  20. <span class="sr-only">Toggle navigation</span>
  21. <!-- The number of .icon-bar spans defines the number of rows in the button -->
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. <span class="icon-bar"></span>
  25. </button>
  26. </div>
  27. <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
  28. <li class="nav navbar-link"><a href="#tickets.html">Tickets</a></li>
  29. <li class="nav navbar-link"><a href="#stations.html">Stations</a></li>
  30. <li class="nav navbar-link">
  31. <a href="about.html" data-target="#" data-toggle="dropdown">About <span class="caret"></span></a>
  32. <ul class="dropdown-menu">
  33. <li><a href="story.html">Our Story</a></li>
  34. <li><a href="contact.html">Contact Us</a></li>
  35. <li class="divider"></li>
  36. <li><a href="blog">Blog</a></li>
  37. <li class="divider"></li>
  38. <li><a href="http://twitter.com/osinet">Twitter</a></li>
  39. <li><a href="https://www.facebook.com/OSInet-217871594891150">Facebook</a></li>
  40. </ul>
  41. </li>
  42. </ul>
  43. </div>
  44. </div>
  45. <div class="container">
  46. <div class="row well well-lg">
  47. <div class="col-xs-12 col-md-6">
  48. <h2>The fastest way to space</h2>images
  49. <p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
  50. <div class='btn-group'>
  51. <button type='button' class='btn btn-default btn-lg dropdown-toggle' data-toggle="dropdown">
  52. Take the Tour <span class="caret"></span>
  53. </button>
  54. <ul class="dropdown-menu">
  55. <li><a href='#'>Transporter</a></li>
  56. <li><a href='#'>Orbital Elevator</a></li>
  57. <li><a href='#'>RocketBus</a></li>
  58. <li class="divider"></li>
  59. <li><a href='#'>Learn More</a></li>
  60. </ul>
  61. </div>
  62. <button type="button" class="btn btn-lg btn-primary">Book Tickets now</button>
  63. </div>
  64. <div class="visible-md visible-lg col-sm-6">
  65. <a class=thumbnail href="images/blasting-off.png"><img src="images/blasting-off.png" /></a>
  66. </div>
  67. </div>
  68. <div class="row features text-center">
  69. <div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0">
  70. <i class="glyphicon glyphicon-briefcase"></i>
  71. <h3>Book Today!</h3>
  72. <p>Even if you're traveling tomorrow, you can still get tickets today. We have
  73. a number of conveniently located ports around the globe to service everyone.</p>
  74. </div>
  75. <div class="col-xs-6 col-sm-4">
  76. <i class="glyphicon glyphicon-random"></i>
  77. <h3>Go anywhere</h3>
  78. <p>If you need to get to space today, why not try out a transporter? Despite
  79. the claims, there has been no deaths in the last 6 weeks!</p>
  80. </div>
  81. <div class="col-xs-6 col-sm-4">
  82. <i class="glyphicon glyphicon-send"></i>
  83. <h3>RocketBus&reg;</h3>
  84. <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on
  85. your wallet, and easiest way to make friends.</p>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="quote">
  90. <div class="container">
  91. <blockquote>
  92. <p>Any sufficiently advanced technology is indistinguishable from magic.</p>
  93. <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>
  94. </blockquote>
  95. </div>
  96. </div>
  97. <div class="container transport-systems">
  98. <div class='row'>
  99. <div class='col-md-10 col-md-offset-1'>
  100. <h2>Our Transport Systems</h2>
  101. <p>Learn more about our transport systems to find out which one is right for you. Pick out the mode of transport that works for your budget and risk level.</p>
  102. </div>
  103. </div>
  104. <div class='row text-center'>
  105. <div class='transporter col-md-3 col-md-offset-1 well'>
  106. <h3>Transporter</h3>
  107. <ul class="list-unstyled">
  108. <li>8 second travel time</li>
  109. <li>Chance of death only 1 in 7,593</li>
  110. <li>Low price of only $15.99!</li>
  111. </ul>
  112. <p><button class="btn btn-info"><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>
  113. </div>
  114. <div class='space-elevator col-md-3 col-md-offset-1 well'>
  115. <h3>Space Elevator</h3>
  116. <ul class="list-unstyled">
  117. <li>8 hour scenic ride</li>
  118. <li>Only 1 horrific death per 12,456</li>
  119. <li>Only $45.99 if you book today!</li>
  120. </ul>
  121. <p><button class="btn btn-info"><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>
  122. </div>
  123. <div class='rocketbus col-md-3 col-md-offset-1 well'>
  124. <h3>RocketBus</h3>
  125. <ul class="list-unstyled">
  126. <li>8 minute scenic ride</li>
  127. <li>Plunging death rate of under 1/100k</li>
  128. <li>$74.99 lets you blast off today!</li>
  129. </ul>
  130. <p><button class="btn btn-info"><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>
  131. </div>
  132. </div>
  133. </div>
  134. <div class='quote'>
  135. <div class='container'>
  136. <blockquote>
  137. <p>A dream that became a reality and spread throughout the stars.</p>
  138. <footer>Captain Kirk in <cite title="Source Title">Whom Gods Destroy</cite></footer>
  139. </blockquote>
  140. </div>
  141. </div>
  142. <div class='container'>
  143. <div class='row'>
  144. <div class='col-md-8'>
  145. <h2>Plan Your Trip Today!</h2>
  146. <ul class='nav nav-tabs'>
  147. <li class='active'><a href='#time'>Todays Times</a></li>
  148. <li><a href='#deals'>Hot Deals</a></li>
  149. <li><a href='#forecast'>Forecast</a></li>
  150. </ul>
  151. <div class='tab-content'>
  152. <div class='tab-pane fade active' id='time'>
  153. <p>Todays Time here</p>
  154. </div>
  155. <div class='tab-pane fade' id='deals'>
  156. <p>Deals here</p>
  157. </div>
  158. <div class='tab-pane fade' id='forecast'>
  159. <p>Forecast</p>
  160. </div>
  161. </div>
  162. </div>
  163. <div class='col-md-3 col-md-offset-1'>
  164. <div class='panel-group'>
  165. <div class='panel panel-success'>
  166. <div class='panel-heading'>
  167. <h4 class='panel-title'>
  168. <a href='#systemsOperational' data-toggle="collapse" data-parent='.panel-group'>All Systems Operational</a>
  169. </h4>
  170. </div>
  171. <div id='systemsOperational' class='panel-collapse collapse in'>
  172. <div class='panel-body'>
  173. <p>All systems are operational</p>
  174. <ul class='list-unstyled'>
  175. <li><i class='glyphicon glyphicon-ok'></i> Transporters</li>
  176. <li><i class='glyphicon glyphicon-ok'></i> Space Elevator</li>
  177. <li><i class='glyphicon glyphicon-ok'></i> RocketBus</li>
  178. </ul>
  179. </div>
  180. </div>
  181. </div>
  182. <div class='panel panel-warning'>
  183. <div class='panel-heading'>
  184. <h4 class='panel-title'>
  185. <a href='#weatherAlert' data-toggle="collapse" data-parent='.panel-group'>Weather Alert</a>
  186. </h4>
  187. </div>
  188. <div id='weatherAlert' class='panel-collapse collapse'>
  189. <div class='panel-body'>
  190. <p>The National Weather Service has issued a solar flare watch for the following time periods. Please plan accordingly:</p>
  191. <ul class='list-unstyled'>
  192. <li><strong>February 9th, 21:43</strong></li>
  193. <li><strong>May 18, 19:82</strong></li>
  194. <li><strong>July 4, 08:42</strong></li>
  195. </ul>
  196. </div>
  197. </div>
  198. </div>
  199. <div class='panel panel-danger'>
  200. <div class='panel-heading'>
  201. <h4 class='panel-title'>
  202. <a href='#transportationWarning' data-toggle="collapse" data-parent='.panel-group'>Transportation Generals Warning: Transporters</a>
  203. </h4>
  204. </div>
  205. <div id='transportationWarning' class='panel-collapse collapse'>
  206. <div class='panel-body'>
  207. <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>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. <div class='footer'>
  216. <div class='container'>
  217. <div class='row'>
  218. <div class='col-md-3 col-sm-4 col-xs-6'>
  219. <h4>Who We Are</h4>
  220. <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
  221. <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
  222. </div>
  223. <div class='col-md-offset-1 col-sm-2 col-xs-6'>
  224. <h4>Links</h4>
  225. <ul class='list-unstyled'>
  226. <li><a href='/'>Home</a></li>
  227. <li><a href='tickets.html'>Tickets</a></li>
  228. <li><a href='stations.html'>Stations</a></li>
  229. </ul>
  230. </div>
  231. <div class='clearfix visible-xs'></div>
  232. <div class='col-sm-2 col-xs-6'>
  233. <h4>Stay in Touch</h4>
  234. <ul class='list-unstyled'>
  235. <li><a href='about.html'>About</a></li>
  236. <li><a href='contact.html'>Contact Us</a></li>
  237. <li><a href='/blog'>Blog</a></li>
  238. <li><a href='http://twitter.com/codeschool'>Twitter</a></li>
  239. <li><a href='http://facebook.com/codeschool'>Facebook</a></li>
  240. </ul>
  241. </div>
  242. <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>
  243. <h4>Contact Us</h4>
  244. <ul class='list-unstyled'>
  245. <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>
  246. <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>
  247. <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
  248. </ul>
  249. <p>Blasting Off With Bootstrap &copy;2214.</p>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. <script src="js/jquery-2.2.1.js"></script>
  255. <script src="js/bootstrap.js"></script>
  256. </body>
  257. </html>