post.html 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8. />
  9. <meta name="description" content="" />
  10. <meta name="author" content="" />
  11. <title>Clean Blog - Start Bootstrap Theme</title>
  12. <!-- Bootstrap core CSS -->
  13. <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  14. <!-- Custom fonts for this template -->
  15. <link
  16. href="vendor/fontawesome-free/css/all.min.css"
  17. rel="stylesheet"
  18. type="text/css"
  19. />
  20. <link
  21. href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
  22. rel="stylesheet"
  23. type="text/css"
  24. />
  25. <link
  26. href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
  27. rel="stylesheet"
  28. type="text/css"
  29. />
  30. <!-- Custom styles for this template -->
  31. <link href="css/clean-blog.min.css" rel="stylesheet" />
  32. </head>
  33. <body>
  34. <!-- Navigation -->
  35. <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  36. <div class="container">
  37. <a class="navbar-brand" href="/">Start Bootstrap</a>
  38. <button
  39. class="navbar-toggler navbar-toggler-right"
  40. type="button"
  41. data-toggle="collapse"
  42. data-target="#navbarResponsive"
  43. aria-controls="navbarResponsive"
  44. aria-expanded="false"
  45. aria-label="Toggle navigation"
  46. >
  47. Menu
  48. <i class="fas fa-bars"></i>
  49. </button>
  50. <div class="collapse navbar-collapse" id="navbarResponsive">
  51. <ul class="navbar-nav ml-auto">
  52. <li class="nav-item">
  53. <a class="nav-link" href="/">Home</a>
  54. </li>
  55. <li class="nav-item">
  56. <a class="nav-link" href="/about">About</a>
  57. </li>
  58. <li class="nav-item">
  59. <a class="nav-link" href="/post">Sample Post</a>
  60. </li>
  61. <li class="nav-item">
  62. <a class="nav-link" href="/contact">Contact</a>
  63. </li>
  64. </ul>
  65. </div>
  66. </div>
  67. </nav>
  68. <!-- Page Header -->
  69. <header class="masthead" style="background-image: url('img/post-bg.jpg')">
  70. <div class="overlay"></div>
  71. <div class="container">
  72. <div class="row">
  73. <div class="col-lg-8 col-md-10 mx-auto">
  74. <div class="post-heading">
  75. <h1>Man must explore, and this is exploration at its greatest</h1>
  76. <h2 class="subheading">
  77. Problems look mighty small from 150 miles up
  78. </h2>
  79. <span class="meta"
  80. >Posted by
  81. <a href="#">Start Bootstrap</a>
  82. on August 24, 2019</span
  83. >
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </header>
  89. <!-- Post Content -->
  90. <article>
  91. <div class="container">
  92. <div class="row">
  93. <div class="col-lg-8 col-md-10 mx-auto">
  94. <p>
  95. Never in all their history have men been able truly to conceive of
  96. the world as one: a single sphere, a globe, having the qualities
  97. of a globe, a round earth in which all the directions eventually
  98. meet, in which there is no center because every point, or none, is
  99. center — an equal earth which all men occupy as equals. The
  100. airman's earth, if free men make it, will be truly round: a globe
  101. in practice, not in theory.
  102. </p>
  103. <p>
  104. Science cuts two ways, of course; its products can be used for
  105. both good and evil. But there's no turning back from science. The
  106. early warnings about technological dangers also come from science.
  107. </p>
  108. <p>
  109. What was most significant about the lunar voyage was not that man
  110. set foot on the Moon but that they set eye on the earth.
  111. </p>
  112. <p>
  113. A Chinese tale tells of some men sent to harm a young girl who,
  114. upon seeing her beauty, become her protectors rather than her
  115. violators. That's how I felt seeing the Earth for the first time.
  116. I could not help but love and cherish her.
  117. </p>
  118. <p>
  119. For those who have seen the Earth from space, and for the hundreds
  120. and perhaps thousands more who will, the experience most certainly
  121. changes your perspective. The things that we share in our world
  122. are far more valuable than those which divide us.
  123. </p>
  124. <h2 class="section-heading">The Final Frontier</h2>
  125. <p>
  126. There can be no thought of finishing for ‘aiming for the stars.’
  127. Both figuratively and literally, it is a task to occupy the
  128. generations. And no matter how much progress one makes, there is
  129. always the thrill of just beginning.
  130. </p>
  131. <p>
  132. There can be no thought of finishing for ‘aiming for the stars.’
  133. Both figuratively and literally, it is a task to occupy the
  134. generations. And no matter how much progress one makes, there is
  135. always the thrill of just beginning.
  136. </p>
  137. <blockquote class="blockquote">
  138. The dreams of yesterday are the hopes of today and the reality of
  139. tomorrow. Science has not yet mastered prophecy. We predict too
  140. much for the next year and yet far too little for the next ten.
  141. </blockquote>
  142. <p>
  143. Spaceflights cannot be stopped. This is not the work of any one
  144. man or even a group of men. It is a historical process which
  145. mankind is carrying out in accordance with the natural laws of
  146. human development.
  147. </p>
  148. <h2 class="section-heading">Reaching for the Stars</h2>
  149. <p>
  150. As we got further and further away, it [the Earth] diminished in
  151. size. Finally it shrank to the size of a marble, the most
  152. beautiful you can imagine. That beautiful, warm, living object
  153. looked so fragile, so delicate, that if you touched it with a
  154. finger it would crumble and fall apart. Seeing this has to change
  155. a man.
  156. </p>
  157. <a href="#">
  158. <img class="img-fluid" src="img/post-sample-image.jpg" alt="" />
  159. </a>
  160. <span class="caption text-muted"
  161. >To go places and do things that have never been done before –
  162. that’s what living is all about.</span
  163. >
  164. <p>
  165. Space, the final frontier. These are the voyages of the Starship
  166. Enterprise. Its five-year mission: to explore strange new worlds,
  167. to seek out new life and new civilizations, to boldly go where no
  168. man has gone before.
  169. </p>
  170. <p>
  171. As I stand out here in the wonders of the unknown at Hadley, I
  172. sort of realize there’s a fundamental truth to our nature, Man
  173. must explore, and this is exploration at its greatest.
  174. </p>
  175. <p>
  176. Placeholder text by
  177. <a href="http://spaceipsum.com/">Space Ipsum</a>. Photographs by
  178. <a href="https://www.flickr.com/photos/nasacommons/"
  179. >NASA on The Commons</a
  180. >.
  181. </p>
  182. </div>
  183. </div>
  184. </div>
  185. </article>
  186. <hr />
  187. <!-- Footer -->
  188. <footer>
  189. <div class="container">
  190. <div class="row">
  191. <div class="col-lg-8 col-md-10 mx-auto">
  192. <ul class="list-inline text-center">
  193. <li class="list-inline-item">
  194. <a href="#">
  195. <span class="fa-stack fa-lg">
  196. <i class="fas fa-circle fa-stack-2x"></i>
  197. <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  198. </span>
  199. </a>
  200. </li>
  201. <li class="list-inline-item">
  202. <a href="#">
  203. <span class="fa-stack fa-lg">
  204. <i class="fas fa-circle fa-stack-2x"></i>
  205. <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
  206. </span>
  207. </a>
  208. </li>
  209. <li class="list-inline-item">
  210. <a href="#">
  211. <span class="fa-stack fa-lg">
  212. <i class="fas fa-circle fa-stack-2x"></i>
  213. <i class="fab fa-github fa-stack-1x fa-inverse"></i>
  214. </span>
  215. </a>
  216. </li>
  217. </ul>
  218. <p class="copyright text-muted">
  219. Copyright &copy; Your Website 2019
  220. </p>
  221. </div>
  222. </div>
  223. </div>
  224. </footer>
  225. <!-- Bootstrap core JavaScript -->
  226. <script src="vendor/jquery/jquery.min.js"></script>
  227. <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  228. <!-- Custom scripts for this template -->
  229. <script src="js/clean-blog.min.js"></script>
  230. </body>
  231. </html>