API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 20th, 2019
696
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4. Filename: bootstrap4Template.html
  5. Author: Janet Bott
  6. Date: 10 August 2018
  7. Description: Starting template for Bootstrap 4 exercises
  8. -->
  9.  
  10. <html lang="en">
  11.  
  12. <head>
  13. <!-- Required meta tags -->
  14. <meta charset="utf-8">
  15. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  16.  
  17. <!-- Search Engine meta tags -->
  18. <meta name="description" content="">
  19. <meta name="keywords" content="">
  20. <meta name="author" content="">
  21.  
  22. <!-- Bootstrap CSS -->
  23. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  24.  
  25. <!-- Link to Font Awesome icons -->
  26. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css" integrity="sha384-wxqG4glGB3nlqX0bi23nmgwCSjWIW13BdLUEYC4VIMehfbcro/ATkyDsF/AbIOVe" crossorigin="anonymous">
  27.  
  28. <!-- Custom CSS file to override any Bootstrap CSS -->
  29. <link rel="stylesheet" href="css/demo.css">
  30.  
  31. <title>Demo Bootstrap</title>
  32. </head>
  33.  
  34. <body>
  35. <noscript>
  36. <p>This page uses JavaScript. To see this page as it is meant to appear, please use a JavaScript enabled browser.</p>
  37. </noscript>
  38. <!-- Navigation -->
  39. <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  40. <a class="navbar-brand" href="#">Acme Inc</a>
  41. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  42. <span class="navbar-toggler-icon"></span>
  43. </button>
  44. <div class="collapse navbar-collapse" id="navbarNavDropdown">
  45. <ul class="navbar-nav">
  46. <li class="nav-item active">
  47. <a class="nav-link" href="#"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
  48. </li>
  49. <li class="nav-item">
  50. <a class="nav-link" href="#">Menu 1</a>
  51. </li>
  52. <li class="nav-item">
  53. <a class="nav-link" href="#">Menu 2</a>
  54. </li>
  55. <li class="nav-item dropdown">
  56. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  57. Menu 3
  58. </a>
  59. <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  60. <a class="dropdown-item" href="#">This</a>
  61. <a class="dropdown-item" href="#">and</a>
  62. <a class="dropdown-item" href="#">that</a>
  63. </div>
  64. </li>
  65. </ul>
  66. </div>
  67. </nav>
  68.  
  69. <!-- Headder -->
  70. <header>
  71. <div class="jumbotron jumbotron-fluid ">
  72. <div class="container">
  73. <h1 class="display-1 text-success">Vacations for all</h1>
  74. <p class="lead">Make your dream a reality</p>
  75. </div>
  76. <!-- Button trigger modal -->
  77. <button type="button" class="btn btn-success" data-toggle="modal" data-target="#startNow">
  78. Start Now!
  79. </button>
  80. </div>
  81.  
  82.  
  83. </header>
  84.  
  85. <!-- Main content 3 equal width columns -->
  86. <div class="container">
  87. <div class="row">
  88. <div class="col-sm">
  89. <article>
  90. <h2 class="text-center">Column 1</h2>
  91. <img src="images/demo/bear.jpg" class="img-fluid border-success rounded-circle mx-auto d-block" alt="Bear">
  92. <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  93. <h3>Image Carousel</h3>
  94. <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  95. <div class="carousel-inner">
  96. <div class="carousel-item active">
  97. <img src="images/demo/bear.jpg" class="d-block w-100" alt="Bear">
  98. </div>
  99. <div class="carousel-item">
  100. <img src="images/demo/dog.jpg" class="d-block w-100" alt="dog">
  101. </div>
  102. <div class="carousel-item">
  103. <img src="images/demo/food.jpg" class="d-block w-100" alt="food">
  104. </div>
  105. </div>
  106. </div>
  107. </article>
  108. </div>
  109. <div class="col-sm">
  110. <article>
  111. <h2 class="text-center">Column 2</h2>
  112. <img src="images/demo/dog.jpg" class="img-fluid border-success rounded-circle mx-auto d-block" alt="Dog">
  113. <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  114. <h3>Handel Data</h3>
  115. <table class="table table-striped">
  116. <thead>
  117. <tr>
  118. <th scope="col">#</th>
  119. <th scope="col">First</th>
  120. <th scope="col">Last</th>
  121. <th scope="col">Handle</th>
  122. </tr>
  123. </thead>
  124. <tbody>
  125. <tr>
  126. <th scope="row">1</th>
  127. <td>Mark</td>
  128. <td>Otto</td>
  129. <td>@mdo</td>
  130. </tr>
  131. <tr>
  132. <th scope="row">2</th>
  133. <td>Jacob</td>
  134. <td>Thornton</td>
  135. <td>@fat</td>
  136. </tr>
  137. <tr>
  138. <th scope="row">3</th>
  139. <td>Larry</td>
  140. <td>the Bird</td>
  141. <td>@twitter</td>
  142. </tr>
  143. </tbody>
  144. </table>
  145. </article>
  146. </div>
  147. <div class="col-sm">
  148. <article>
  149. <h2 class="text-center">Column 3</h2>
  150. <img src="images/demo/food.jpg" class="img-fluid border-success rounded-circle mx-auto d-block" alt="Food">
  151. <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  152. <h3>Additonal Information</h3>
  153. <div class="accordion" id="accordionExample">
  154. <div class="card">
  155. <div class="card-header" id="headingOne">
  156. <h2 class="mb-0">
  157. <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  158. Collapsible Group Item #1
  159. </button>
  160. </h2>
  161. </div>
  162.  
  163. <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  164. <div class="card-body">
  165. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  166. </div>
  167. </div>
  168. </div>
  169. <div class="card">
  170. <div class="card-header" id="headingTwo">
  171. <h2 class="mb-0">
  172. <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  173. Collapsible Group Item #2
  174. </button>
  175. </h2>
  176. </div>
  177. <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
  178. <div class="card-body">
  179. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  180. </div>
  181. </div>
  182. </div>
  183. <div class="card">
  184. <div class="card-header" id="headingThree">
  185. <h2 class="mb-0">
  186. <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  187. Collapsible Group Item #3
  188. </button>
  189. </h2>
  190. </div>
  191. <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
  192. <div class="card-body">
  193. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </article>
  199. </div>
  200. </div>
  201. </div>
  202. <!-- Modal -->
  203. <div class="modal fade" id="startNow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  204. <div class="modal-dialog" role="document">
  205. <div class="modal-content">
  206. <div class="modal-header">
  207. <h5 class="modal-title" id="exampleModalLabel">Welcome- lets get started</h5>
  208. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  209. <span aria-hidden="true">&times;</span>
  210. </button>
  211. </div>
  212. <div class="modal-body">
  213. What are you waiting for? get going.
  214. </div>
  215. <div class="modal-footer">
  216. <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  217.  
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. <!-- footer -->
  223. <footer>
  224. <div class="container-fluid bg-light">
  225. <div class="row">
  226. <div class="col-sm">
  227. Acme Incorperated 2018
  228. </div>
  229. <div class="col-sm-auto">
  230. <a href="">Privacy Policy</a>|<a href="">Copyright Policy</a>|<a href=""> Terms and Conditions</a>|<a href="">FAQs</a>
  231. </div>
  232. <div class="col-sm text-right">
  233. <a href=""><i class="fas fa-mail-bulk"></i> Contact Web Master</a>
  234. </div>
  235. </div>
  236. </div>
  237. </footer>
  238.  
  239.  
  240. <!-- JavaScript -->
  241. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  242. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  243. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  244. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  245. </body>
  246.  
  247. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!