index.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  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/home-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="site-heading">
  75. <h1>Clean Blog</h1>
  76. <span class="subheading">A Blog Theme by Start Bootstrap</span>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </header>
  82. <!-- Main Content -->
  83. <div class="container">
  84. <div class="row">
  85. <div class="col-lg-8 col-md-10 mx-auto">
  86. <div class="post-preview">
  87. <a href="post.html">
  88. <h2 class="post-title">
  89. Man must explore, and this is exploration at its greatest
  90. </h2>
  91. <h3 class="post-subtitle">
  92. Problems look mighty small from 150 miles up
  93. </h3>
  94. </a>
  95. <p class="post-meta">
  96. Posted by
  97. <a href="#">Start Bootstrap</a>
  98. on September 24, 2019
  99. </p>
  100. </div>
  101. <hr />
  102. <div class="post-preview">
  103. <a href="post.html">
  104. <h2 class="post-title">
  105. I believe every human has a finite number of heartbeats. I don't
  106. intend to waste any of mine.
  107. </h2>
  108. </a>
  109. <p class="post-meta">
  110. Posted by
  111. <a href="#">Start Bootstrap</a>
  112. on September 18, 2019
  113. </p>
  114. </div>
  115. <hr />
  116. <div class="post-preview">
  117. <a href="post.html">
  118. <h2 class="post-title">
  119. Science has not yet mastered prophecy
  120. </h2>
  121. <h3 class="post-subtitle">
  122. We predict too much for the next year and yet far too little for
  123. the next ten.
  124. </h3>
  125. </a>
  126. <p class="post-meta">
  127. Posted by
  128. <a href="#">Start Bootstrap</a>
  129. on August 24, 2019
  130. </p>
  131. </div>
  132. <hr />
  133. <div class="post-preview">
  134. <a href="post.html">
  135. <h2 class="post-title">
  136. Failure is not an option
  137. </h2>
  138. <h3 class="post-subtitle">
  139. Many say exploration is part of our destiny, but it’s actually
  140. our duty to future generations.
  141. </h3>
  142. </a>
  143. <p class="post-meta">
  144. Posted by
  145. <a href="#">Start Bootstrap</a>
  146. on July 8, 2019
  147. </p>
  148. </div>
  149. <hr />
  150. <!-- Pager -->
  151. <div class="clearfix">
  152. <a class="btn btn-primary float-right" href="#"
  153. >Older Posts &rarr;</a
  154. >
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <hr />
  160. <!-- Footer -->
  161. <footer>
  162. <div class="container">
  163. <div class="row">
  164. <div class="col-lg-8 col-md-10 mx-auto">
  165. <ul class="list-inline text-center">
  166. <li class="list-inline-item">
  167. <a href="#">
  168. <span class="fa-stack fa-lg">
  169. <i class="fas fa-circle fa-stack-2x"></i>
  170. <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  171. </span>
  172. </a>
  173. </li>
  174. <li class="list-inline-item">
  175. <a href="#">
  176. <span class="fa-stack fa-lg">
  177. <i class="fas fa-circle fa-stack-2x"></i>
  178. <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
  179. </span>
  180. </a>
  181. </li>
  182. <li class="list-inline-item">
  183. <a href="#">
  184. <span class="fa-stack fa-lg">
  185. <i class="fas fa-circle fa-stack-2x"></i>
  186. <i class="fab fa-github fa-stack-1x fa-inverse"></i>
  187. </span>
  188. </a>
  189. </li>
  190. </ul>
  191. <p class="copyright text-muted">
  192. Copyright &copy; Your Website 2019
  193. </p>
  194. </div>
  195. </div>
  196. </div>
  197. </footer>
  198. <!-- Bootstrap core JavaScript -->
  199. <script src="vendor/jquery/jquery.min.js"></script>
  200. <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  201. <!-- Custom scripts for this template -->
  202. <script src="js/clean-blog.min.js"></script>
  203. </body>
  204. </html>