/blogen/posts.html

https://bitbucket.org/Trulsh/personal-bootstrap-projects · HTML · 198 lines · 183 code · 7 blank · 8 comment · 0 complexity · 966ecdd1c4eec4fcefcadcf592759a23 MD5 · raw file

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="stylesheet" href="style.compressed.css" />
  8. <title>Blogen Admin Area</title>
  9. </head>
  10. <body>
  11. <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  12. <div class="container">
  13. <a href="index.html" class="navbar-brand">Blogen</a>
  14. <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
  15. <span class="navbar-toggler-icon"></span>
  16. </button>
  17. <div class="collapse navbar-collapse" id="navbarNav">
  18. <ul class="navbar-nav">
  19. <li class="nav-item px-2">
  20. <a href="index.html" class="nav-link">Dashboard</a>
  21. </li>
  22. <li class="nav-item px-2">
  23. <a href="posts.html" class="nav-link active">Posts</a>
  24. </li>
  25. <li class="nav-item px-2">
  26. <a href="categories.html" class="nav-link">Categories</a>
  27. </li>
  28. <li class="nav-item px-2">
  29. <a href="users.html" class="nav-link">Users</a>
  30. </li>
  31. </ul>
  32. <ul class="navbar-nav ml-auto">
  33. <li class="nav-item dropdown mr-3">
  34. <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
  35. <i class="fa fa-user"></i> Welcome Andrea
  36. </a>
  37. <div class="dropdown-menu">
  38. <a href="profile.html" class="dropdown-item">
  39. <i class="fa fa-user-circle"></i> Profile
  40. </a>
  41. <a href="settings.html" class="dropdown-item">
  42. <i class="fa fa-gear"></i> Settings
  43. </a>
  44. </div>
  45. </li>
  46. <li class="nav-item">
  47. <a href="login.html" class="nav-link">
  48. <i class="fa fa-user-times"></i> Logout
  49. </a>
  50. </li>
  51. </ul>
  52. </div>
  53. </div>
  54. </nav>
  55. <!-- HEADER -->
  56. <header id="main-header" class="py-2 bg-primary text-white">
  57. <div class="container">
  58. <div class="row">
  59. <div class="col-md-6">
  60. <h1><i class="fa fa-pencil"></i> Posts</h1>
  61. </div>
  62. </div>
  63. </div>
  64. </header>
  65. <!-- ACTIONS -->
  66. <section id="actions" class="py-4 mb-4 bg-light">
  67. <div class="container">
  68. <div class="row">
  69. <div class="col-md-6 ml-auto">
  70. <div class="input-group">
  71. <input type="text" class="form-control" placeholder="Search">
  72. <span class="input-group-btn">
  73. <button class="btn btn-primary">Search</button>
  74. </span>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </section>
  80. <!-- POSTS -->
  81. <section id="posts">
  82. <div class="container">
  83. <div class="row">
  84. <div class="col">
  85. <div class="card">
  86. <div class="card-header">
  87. <h4>Latest Posts</h4>
  88. </div>
  89. <table class="table table-striped">
  90. <thead class="thead-inverse">
  91. <tr>
  92. <th>#</th>
  93. <th>Title</th>
  94. <th>Category</th>
  95. <th>Date Posted</th>
  96. <th></th>
  97. </tr>
  98. </thead>
  99. <tbody>
  100. <tr>
  101. <td scope="row">1</td>
  102. <td>Post One</td>
  103. <td>Web Development</td>
  104. <td>July 12, 2017</td>
  105. <td><a href="datails.html" class="btn btn-secondary"><i class="fa fa-angle-dobule-right"></i> Details</a></td>
  106. </tr>
  107. <tr>
  108. <td scope="row">2</td>
  109. <td>Post Two</td>
  110. <td>Tech Gadgets</td>
  111. <td>July 13, 2017</td>
  112. <td><a href="datails.html" class="btn btn-secondary"><i class="fa fa-angle-dobule-right"></i> Details</a></td>
  113. </tr>
  114. <tr>
  115. <td scope="row">3</td>
  116. <td>Post Three</td>
  117. <td>Web Development</td>
  118. <td>July 14, 2017</td>
  119. <td><a href="datails.html" class="btn btn-secondary"><i class="fa fa-angle-dobule-right"></i> Details</a></td>
  120. </tr>
  121. <tr>
  122. <td scope="row">4</td>
  123. <td>Post Four</td>
  124. <td>Business</td>
  125. <td>July 15, 2017</td>
  126. <td><a href="datails.html" class="btn btn-secondary"><i class="fa fa-angle-dobule-right"></i> Details</a></td>
  127. </tr>
  128. <tr>
  129. <td scope="row">5</td>
  130. <td>Post Five</td>
  131. <td>Web Development</td>
  132. <td>July 16, 2017</td>
  133. <td><a href="datails.html" class="btn btn-secondary"><i class="fa fa-angle-dobule-right"></i> Details</a></td>
  134. </tr>
  135. <tr>
  136. <td scope="row">6</td>
  137. <td>Post Six</td>
  138. <td>Health & Wellness</td>
  139. <td>July 17, 2017</td>
  140. <td><a href="datails.html" class="btn btn-secondary"><i class="fa fa-angle-dobule-right"></i> Details</a></td>
  141. </tr>
  142. </tbody>
  143. </table>
  144. <nav class="ml-4">
  145. <ul class="pagination">
  146. <li class="page-item disabled">
  147. <a href="#" class="page-link">Previous</a>
  148. </li>
  149. <li class="page-item active">
  150. <a href="#" class="page-link">1</a>
  151. </li>
  152. <li class="page-item">
  153. <a href="#" class="page-link">2</a>
  154. </li>
  155. <li class="page-item">
  156. <a href="#" class="page-link">3</a>
  157. </li>
  158. <li class="page-item">
  159. <a href="#" class="page-link">Next</a>
  160. </li>
  161. </ul>
  162. </nav>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. </section>
  168. <!-- FOOTER -->
  169. <footer id="main-footer" class="bg-dark text-white mt-5 p-5">
  170. <div class="container">
  171. <div class="row">
  172. <div class="col">
  173. <p class="lead text-center">Copyright &copy; 2018 Blogen</p>
  174. </div>
  175. </div>
  176. </div>
  177. </footer>
  178. <!-- Bootstrap core JavaScript
  179. ================================================== -->
  180. <!-- Placed at the end of the document so the pages load faster -->
  181. <script src="js/jquery-3.3.1.min.js"></script>
  182. <script src="js/popper.min.js"></script>
  183. <script src="js/bootstrap.min.js"></script>
  184. <script src="https://use.fontawesome.com/226dbaa6de.js"></script>
  185. <script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
  186. <script>
  187. CKEDITOR.replace( 'editor1' );
  188. </script>
  189. <!--<script src="../../../../assets/js/vendor/holder.min.js"></script>-->
  190. </body>
  191. </html>