collect.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>ARK.Cards</title>
  8. <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  9. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  10. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  11. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  12. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
  13. <link rel="stylesheet" href="./style.css">
  14. </head>
  15. <body>
  16. <section id="sec01" class="sec01-collect container-fluid px-0 mx-0">
  17. <img class="img-fluid" src="./img/banner.png" alt="">
  18. <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end">
  19. <h5 style="background: #fff; font-size: 16px; position: absolute; z-index: 20;"
  20. class="card-title py-3 px-5 text-center mb-0 fw-bold">我的收藏</h5>
  21. </div>
  22. </section>
  23. <section id="sec05-moblie" class="sec05 mt-4">
  24. <div class="sec05-moblie container-fluid">
  25. <div class="sec05-moblie-header">
  26. <h1 class="secn-title ps-2">音樂</h1>
  27. </div>
  28. <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
  29. <div class="col">
  30. <div class="card h-100">
  31. <a target="_blank" href="./artist-course.html">
  32. <img src="./img/sec05/sec05-1.png"class="card-img-top" alt="...">
  33. </a>
  34. <div class="card-body">
  35. <a target="_blank" href="./artist-course.html">
  36. <h5 class="card-title">Lorem ipsum.</h5>
  37. </a>
  38. <p class="card-text">
  39. Lorem ipsum dolor sit amet,
  40. </p>
  41. <p class="card-text row">
  42. <small class="text-muted col-6 px-1">
  43. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  44. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  45. </small>
  46. <small class="price col-6 px-0 text-center">
  47. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  48. </p>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="col">
  53. <div class="card h-100">
  54. <a target="_blank" href="./artist-course.html">
  55. <img src="./img/sec05/sec05-2.png"class="card-img-top" alt="...">
  56. </a>
  57. <div class="card-body">
  58. <a target="_blank" href="./artist-course.html">
  59. <h5 class="card-title">Lorem ipsum.</h5>
  60. </a>
  61. <p class="card-text">
  62. Lorem ipsum dolor sit amet,
  63. </p>
  64. <p class="card-text row">
  65. <small class="text-muted col-6 px-1">
  66. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  67. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  68. </small>
  69. <small class="price col-6 px-0 text-center">
  70. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  71. </p>
  72. </div>
  73. </div>
  74. </div>
  75. <div class="col">
  76. <div class="card h-100">
  77. <a target="_blank" href="./artist-course.html">
  78. <img src="./img/sec05/sec05-3.png"class="card-img-top" alt="...">
  79. </a>
  80. <div class="card-body">
  81. <a target="_blank" href="./artist-course.html">
  82. <h5 class="card-title">Lorem ipsum.</h5>
  83. </a>
  84. <p class="card-text">
  85. Lorem ipsum dolor sit amet,
  86. </p>
  87. <p class="card-text row">
  88. <small class="text-muted col-6 px-1">
  89. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  90. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  91. </small>
  92. <small class="price col-6 px-0 text-center">
  93. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  94. </p>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="col">
  99. <div class="card h-100">
  100. <a target="_blank" href="./artist-course.html">
  101. <img src="./img/sec05/sec05-4.png"class="card-img-top" alt="...">
  102. </a>
  103. <div class="card-body">
  104. <a target="_blank" href="./artist-course.html">
  105. <h5 class="card-title">Lorem ipsum.</h5>
  106. </a>
  107. <p class="card-text">
  108. Lorem ipsum dolor sit amet,
  109. </p>
  110. <p class="card-text row">
  111. <small class="text-muted col-6 px-1">
  112. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  113. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  114. </small>
  115. <small class="price col-6 px-0 text-center">
  116. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  117. </p>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. <div class="sec05-moblie container-fluid">
  124. <div class="sec05-moblie-header">
  125. <h1 class="secn-title ps-2">運動</h1>
  126. </div>
  127. <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
  128. <div class="col">
  129. <div class="card h-100">
  130. <a target="_blank" href="./artist-course.html">
  131. <img src="./img/sec05/5.png"class="card-img-top" alt="...">
  132. </a>
  133. <div class="card-body">
  134. <a target="_blank" href="./artist-course.html">
  135. <h5 class="card-title">Lorem ipsum.</h5>
  136. </a>
  137. <p class="card-text">
  138. Lorem ipsum dolor sit amet,
  139. </p>
  140. <p class="card-text row">
  141. <small class="text-muted col-6 px-1">
  142. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  143. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  144. </small>
  145. <small class="price col-6 px-0 text-center">
  146. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  147. </p>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="col">
  152. <div class="card h-100">
  153. <a target="_blank" href="./artist-course.html">
  154. <img src="./img/sec05/6.png"class="card-img-top" alt="...">
  155. </a>
  156. <div class="card-body">
  157. <a target="_blank" href="./artist-course.html">
  158. <h5 class="card-title">Lorem ipsum.</h5>
  159. </a>
  160. <p class="card-text">
  161. Lorem ipsum dolor sit amet,
  162. </p>
  163. <p class="card-text row">
  164. <small class="text-muted col-6 px-1">
  165. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  166. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  167. </small>
  168. <small class="price col-6 px-0 text-center">
  169. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  170. </p>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="col">
  175. <div class="card h-100">
  176. <a target="_blank" href="./artist-course.html">
  177. <img src="./img/sec05/7.png"class="card-img-top" alt="...">
  178. </a>
  179. <div class="card-body">
  180. <a target="_blank" href="./artist-course.html">
  181. <h5 class="card-title">Lorem ipsum.</h5>
  182. </a>
  183. <p class="card-text">
  184. Lorem ipsum dolor sit amet,
  185. </p>
  186. <p class="card-text row">
  187. <small class="text-muted col-6 px-1">
  188. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  189. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  190. </small>
  191. <small class="price col-6 px-0 text-center">
  192. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  193. </p>
  194. </div>
  195. </div>
  196. </div>
  197. <div class="col">
  198. <div class="card h-100">
  199. <a target="_blank" href="./artist-course.html">
  200. <img src="./img/sec05/8.png"class="card-img-top" alt="...">
  201. </a>
  202. <div class="card-body">
  203. <a target="_blank" href="./artist-course.html">
  204. <h5 class="card-title">Lorem ipsum.</h5>
  205. </a>
  206. <p class="card-text">
  207. Lorem ipsum dolor sit amet,
  208. </p>
  209. <p class="card-text row">
  210. <small class="text-muted col-6 px-1">
  211. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  212. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  213. </small>
  214. <small class="price col-6 px-0 text-center">
  215. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  216. </p>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. <div class="sec05-moblie container-fluid">
  223. <div class="sec05-moblie-header">
  224. <h1 class="secn-title ps-2">藝術</h1>
  225. </div>
  226. <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
  227. <div class="col">
  228. <div class="card h-100">
  229. <a target="_blank" href="./artist-course.html">
  230. <img src="./img/sec05/9.png" class="card-img-top" alt="...">
  231. </a>
  232. <div class="card-body">
  233. <a target="_blank" href="./artist-course.html">
  234. <h5 class="card-title">Lorem ipsum.</h5>
  235. </a>
  236. <p class="card-text">
  237. Lorem ipsum dolor sit amet,
  238. </p>
  239. <p class="card-text row">
  240. <small class="text-muted col-6 px-1">
  241. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  242. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  243. </small>
  244. <small class="price col-6 px-0 text-center">
  245. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  246. </p>
  247. </div>
  248. </div>
  249. </div>
  250. <div class="col">
  251. <div class="card h-100">
  252. <a target="_blank" href="./artist-course.html">
  253. <img src="./img/sec05/10.png"class="card-img-top" alt="...">
  254. </a>
  255. <div class="card-body">
  256. <a target="_blank" href="./artist-course.html">
  257. <h5 class="card-title">Lorem ipsum.</h5>
  258. </a>
  259. <p class="card-text">
  260. Lorem ipsum dolor sit amet,
  261. </p>
  262. <p class="card-text row">
  263. <small class="text-muted col-6 px-1">
  264. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  265. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  266. </small>
  267. <small class="price col-6 px-0 text-center">
  268. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  269. </p>
  270. </div>
  271. </div>
  272. </div>
  273. <div class="col">
  274. <div class="card h-100">
  275. <a target="_blank" href="./artist-course.html">
  276. <img src="./img/sec05/11.png"class="card-img-top" alt="...">
  277. </a>
  278. <div class="card-body">
  279. <a target="_blank" href="./artist-course.html">
  280. <h5 class="card-title">Lorem ipsum.</h5>
  281. </a>
  282. <p class="card-text">
  283. Lorem ipsum dolor sit amet,
  284. </p>
  285. <p class="card-text row">
  286. <small class="text-muted col-6 px-1">
  287. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  288. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  289. </small>
  290. <small class="price col-6 px-0 text-center">
  291. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  292. </p>
  293. </div>
  294. </div>
  295. </div>
  296. <div class="col">
  297. <div class="card h-100">
  298. <a target="_blank" href="./artist-course.html">
  299. <img src="./img/sec05/12.png"class="card-img-top" alt="...">
  300. </a>
  301. <div class="card-body">
  302. <a target="_blank" href="./artist-course.html">
  303. <h5 class="card-title">Lorem ipsum.</h5>
  304. </a>
  305. <p class="card-text">
  306. Lorem ipsum dolor sit amet,
  307. </p>
  308. <p class="card-text row">
  309. <small class="text-muted col-6 px-1">
  310. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  311. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  312. </small>
  313. <small class="price col-6 px-0 text-center">
  314. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  315. </p>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. </section>
  322. <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
  323. <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
  324. </footer>
  325. <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  326. <script>
  327. AOS.init();
  328. </script>
  329. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  330. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  331. crossorigin="anonymous"></script>
  332. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  333. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  334. crossorigin="anonymous"></script>
  335. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  336. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  337. <script src="./goto.js"></script>
  338. </body>
  339. </html>