index.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  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-fixed-top">
  13. <div class="container">
  14. <div class="navbar-header">
  15. <a href="/" class="navbar-brand">Blasting off with Boostrap</a>
  16. </div>
  17. <ul class="nav navbar-nav navbar-right">
  18. <li class="nav navbar-link"><a href="#tickets.html">Tickets</a></li>
  19. <li class="nav navbar-link"><a href="#stations.html">Stations</a></li>
  20. <li class="nav navbar-link"><a href="#about.html">About</a></li>
  21. </ul>
  22. </div>
  23. </div>
  24. <div class="container">
  25. <div class="row well well-lg">
  26. <div class="col-xs-12 col-md-6">
  27. <h2>The fastest way to space</h2>images
  28. <p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
  29. <button type="button" class="btn btn-lg btn-default">Take the tour</button>
  30. <button type="button" class="btn btn-lg btn-primary">Book Tickets now</button>
  31. </div>
  32. <div class="visible-md visible-lg col-sm-6">
  33. <a class=thumbnail href="images/blasting-off.png"><img src="images/blasting-off.png" /></a>
  34. </div>
  35. </div>
  36. <div class="row features text-center">
  37. <div class="col-xs-10 col-xs-offset-1 col-sm-4 col-sm-offset-0">
  38. <i class="glyphicon glyphicon-briefcase"></i>
  39. <h3>Book Today!</h3>
  40. <p>Even if you're traveling tomorrow, you can still get tickets today. We have
  41. a number of conveniently located ports around the globe to service everyone.</p>
  42. </div>
  43. <div class="col-xs-6 col-sm-4">
  44. <i class="glyphicon glyphicon-random"></i>
  45. <h3>Go anywhere</h3>
  46. <p>If you need to get to space today, why not try out a transporter? Despite
  47. the claims, there has been no deaths in the last 6 weeks!</p>
  48. </div>
  49. <div class="col-xs-6 col-sm-4">
  50. <i class="glyphicon glyphicon-send"></i>
  51. <h3>RocketBus&reg;</h3>
  52. <p>For cheapest fares, catch the next RocketBus&reg; to the stars. Cheaper on
  53. your wallet, and easiest way to make friends.</p>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="quote">
  58. <div class="container">
  59. <blockquote>
  60. <p>Any sufficiently advanced technology is indistinguishable from magic.</p>
  61. <footer>Arthur C. Clarke in <cite title="Source Title">Profiles of the Future</cite></footer>
  62. </blockquote>
  63. </div>
  64. </div>
  65. <div class="container transport-systems">
  66. <div class='row'>
  67. <div class='col-md-10 col-md-offset-1'>
  68. <h2>Our Transport Systems</h2>
  69. <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>
  70. </div>
  71. </div>
  72. <div class='row text-center'>
  73. <div class='transporter col-md-3 col-md-offset-1 well'>
  74. <h3>Transporter</h3>
  75. <ul class="list-unstyled">
  76. <li>8 second travel time</li>
  77. <li>Chance of death only 1 in 7,593</li>
  78. <li>Low price of only $15.99!</li>
  79. </ul>
  80. <p><button class="btn btn-info"><i class='glyphicon glyphicon-transfer'></i> Beam Me Up!</button></p>
  81. </div>
  82. <div class='space-elevator col-md-3 col-md-offset-1 well'>
  83. <h3>Space Elevator</h3>
  84. <ul class="list-unstyled">
  85. <li>8 hour scenic ride</li>
  86. <li>Only 1 horrific death per 12,456</li>
  87. <li>Only $45.99 if you book today!</li>
  88. </ul>
  89. <p><button class="btn btn-info"><i class='glyphicon glyphicon-sort'></i> Board the Elevator!</button></p>
  90. </div>
  91. <div class='rocketbus col-md-3 col-md-offset-1 well'>
  92. <h3>RocketBus</h3>
  93. <ul class="list-unstyled">
  94. <li>8 minute scenic ride</li>
  95. <li>Plunging death rate of under 1/100k</li>
  96. <li>$74.99 lets you blast off today!</li>
  97. </ul>
  98. <p><button class="btn btn-info"><i class='glyphicon glyphicon-plane'></i> Blast Off!</button></p>
  99. </div>
  100. </div>
  101. </div>
  102. <div class='footer'>
  103. <div class='container'>
  104. <div class='row'>
  105. <div class='col-md-3 col-sm-4 col-xs-6'>
  106. <h4>Who We Are</h4>
  107. <p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='tickets.html'>Book your ticket today</a>!</p>
  108. <p><a href='about.html'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
  109. </div>
  110. <div class='col-md-offset-1 col-sm-2 col-xs-6'>
  111. <h4>Links</h4>
  112. <ul class='list-unstyled'>
  113. <li><a href='/'>Home</a></li>
  114. <li><a href='tickets.html'>Tickets</a></li>
  115. <li><a href='stations.html'>Stations</a></li>
  116. </ul>
  117. </div>
  118. <div class='clearfix visible-xs'></div>
  119. <div class='col-sm-2 col-xs-6'>
  120. <h4>Stay in Touch</h4>
  121. <ul class='list-unstyled'>
  122. <li><a href='about.html'>About</a></li>
  123. <li><a href='contact.html'>Contact Us</a></li>
  124. <li><a href='/blog'>Blog</a></li>
  125. <li><a href='http://twitter.com/codeschool'>Twitter</a></li>
  126. <li><a href='http://facebook.com/codeschool'>Facebook</a></li>
  127. </ul>
  128. </div>
  129. <div class='col-md-3 col-md-offset-1 col-sm-4 col-xs-6'>
  130. <h4>Contact Us</h4>
  131. <ul class='list-unstyled'>
  132. <li><i class='glyphicon glyphicon-globe'></i> Orlando, FL</li>
  133. <li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off</li>
  134. <li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:blastingoff@codeschool.com'>blastingoff@codeschool.com</a></li>
  135. </ul>
  136. <p>Blasting Off With Bootstrap &copy;2214.</p>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. <script src="js/jquery-2.2.1.js"></script>
  142. <script src="js/bootstrap.js"></script>
  143. </body>
  144. </html>