API tools faq
paste
Advertisement
Guest User

index.html

a guest
Jan 28th, 2020
215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6. <meta charset="utf-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  10.  
  11. <title>Sepeda</title>
  12.  
  13. <!-- Bootstrap core CSS -->
  14. <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  15.  
  16. <!-- Custom styles for this template -->
  17. <link href="css/shop-homepage.css" rel="stylesheet">
  18. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  19. </head>
  20.  
  21. <body>
  22.  
  23. <!-- Navigation -->
  24. <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  25. <div class="container">
  26. <a class="navbar-brand" href="#">Hobi Sepeda</a>
  27. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  28. <span class="navbar-toggler-icon"></span>
  29. </button>
  30. <div class="collapse navbar-collapse" id="navbarResponsive">
  31. <ul class="navbar-nav">
  32. <li class="nav-item active">
  33. <a class="nav-link" href="#">Home
  34. <span class="sr-only">(current)</span>
  35. </a>
  36. </li>
  37. <li class="nav-item">
  38. <a class="nav-link" href="#">About</a>
  39. </li>
  40. <li class="nav-item">
  41. <a class="nav-link" href="#">Services</a>
  42. </li>
  43. <li class="nav-item">
  44. <a class="nav-link" href="#">Contact</a>
  45. </li>
  46. </ul>
  47. <ul class="navbar-nav ml-auto">
  48. <li class="nav-item dropdown">
  49. <a class="nav-link dropdown-toggle btn btn-info text-white" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  50. <i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="badge badge-light">4</span>
  51. </a>
  52. <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  53. <a class="dropdown-item" href="#">Action</a>
  54. <a class="dropdown-item" href="#">Another action</a>
  55. <a class="dropdown-item" href="#">Something else here</a>
  56. </div>
  57. </li>
  58. <li class="nav-item">
  59. <a class="nav-link" href="#">Login</a>
  60. </li>
  61. </ul>
  62. </div>
  63. </div>
  64. </nav>
  65.  
  66. <!-- Page Content -->
  67. <div class="container">
  68.  
  69. <div class="row">
  70.  
  71. <div class="col-lg-3">
  72.  
  73. <h1 class="my-4">Bike</h1>
  74. <div class="list-group">
  75. <a href="#" class="list-group-item">Fullbike</a>
  76. <a href="#" class="list-group-item">Frameset</a>
  77. <a href="#" class="list-group-item">Aksesoris</a>
  78. </div>
  79.  
  80. </div>
  81. <!-- /.col-lg-3 -->
  82.  
  83. <div class="col-lg-9">
  84.  
  85. <div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
  86. <ol class="carousel-indicators">
  87. <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  88. <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  89. <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  90. </ol>
  91. <div class="carousel-inner" role="listbox">
  92. <div class="carousel-item active">
  93. <img class="d-block img-fluid" src="images/1.jpg" alt="First slide">
  94. </div>
  95. <div class="carousel-item">
  96. <img class="d-block img-fluid" src="images/2.jpg" alt="Second slide">
  97. </div>
  98. <div class="carousel-item">
  99. <img class="d-block img-fluid" src="images/3.jpg" alt="Third slide">
  100. </div>
  101. </div>
  102. <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  103. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  104. <span class="sr-only">Previous</span>
  105. </a>
  106. <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  107. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  108. <span class="sr-only">Next</span>
  109. </a>
  110. </div>
  111.  
  112. <div class="row">
  113.  
  114. <div class="col-lg-4 col-md-6 mb-4">
  115. <div class="card h-100">
  116. <a href="#"><img class="card-img-top" src="images/4.jpg" alt=""></a>
  117. <div class="card-body">
  118. <h4 class="card-title">
  119. <a href="#">Item One</a>
  120. </h4>
  121. <h5>$24.99</h5>
  122. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
  123. </div>
  124. <div class="card-footer">
  125. <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
  126. </div>
  127. </div>
  128. </div>
  129.  
  130. <div class="col-lg-4 col-md-6 mb-4">
  131. <div class="card h-100">
  132. <a href="#"><img class="card-img-top" src="images/1.jpg" alt=""></a>
  133. <div class="card-body">
  134. <h4 class="card-title">
  135. <a href="#">Item Two</a>
  136. </h4>
  137. <h5>$24.99</h5>
  138. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur! Lorem ipsum dolor sit amet.</p>
  139. </div>
  140. <div class="card-footer">
  141. <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
  142. </div>
  143. </div>
  144. </div>
  145.  
  146. <div class="col-lg-4 col-md-6 mb-4">
  147. <div class="card h-100">
  148. <a href="#"><img class="card-img-top" src="images/2.jpg" alt=""></a>
  149. <div class="card-body">
  150. <h4 class="card-title">
  151. <a href="#">Item Three</a>
  152. </h4>
  153. <h5>$24.99</h5>
  154. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
  155. </div>
  156. <div class="card-footer">
  157. <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
  158. </div>
  159. </div>
  160. </div>
  161.  
  162. <div class="col-lg-4 col-md-6 mb-4">
  163. <div class="card h-100">
  164. <a href="#"><img class="card-img-top" src="images/3.jpg" alt=""></a>
  165. <div class="card-body">
  166. <h4 class="card-title">
  167. <a href="#">Item Four</a>
  168. </h4>
  169. <h5>$24.99</h5>
  170. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
  171. </div>
  172. <div class="card-footer">
  173. <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
  174. </div>
  175. </div>
  176. </div>
  177.  
  178. <div class="col-lg-4 col-md-6 mb-4">
  179. <div class="card h-100">
  180. <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
  181. <div class="card-body">
  182. <h4 class="card-title">
  183. <a href="#">Item Five</a>
  184. </h4>
  185. <h5>$24.99</h5>
  186. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur! Lorem ipsum dolor sit amet.</p>
  187. </div>
  188. <div class="card-footer">
  189. <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
  190. </div>
  191. </div>
  192. </div>
  193.  
  194. <div class="col-lg-4 col-md-6 mb-4">
  195. <div class="card h-100">
  196. <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
  197. <div class="card-body">
  198. <h4 class="card-title">
  199. <a href="#">Item Six</a>
  200. </h4>
  201. <h5>$24.99</h5>
  202. <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur!</p>
  203. </div>
  204. <div class="card-footer">
  205. <small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
  206. </div>
  207. </div>
  208. </div>
  209.  
  210. </div>
  211. <!-- /.row -->
  212.  
  213. </div>
  214. <!-- /.col-lg-9 -->
  215.  
  216. </div>
  217. <!-- /.row -->
  218.  
  219. </div>
  220. <!-- /.container -->
  221.  
  222. <!-- Footer -->
  223. <footer class="py-5 bg-dark">
  224. <div class="container">
  225. <p class="m-0 text-center text-white">Copyright &copy; Your Website 2019</p>
  226. </div>
  227. <!-- /.container -->
  228. </footer>
  229.  
  230. <!-- Bootstrap core JavaScript -->
  231. <script src="vendor/jquery/jquery.min.js"></script>
  232. <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  233.  
  234. </body>
  235.  
  236. </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!