news.html 5.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  9. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  10. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  11. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
  12. <link rel="stylesheet" href="./style.css">
  13. </head>
  14. <body>
  15. <section id="sec01" class="sec01 container-fluid px-0 mx-0 mb-5">
  16. <div class="card bg-transparent text-white border-0">
  17. <img src="./img/sec03.png" class="img-fluid" alt="...">
  18. <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end justify-content-center">
  19. <h5 data-aos="fade-left"
  20. style="background: rgba(0,0,0,0.7); font-size: 16px; position: absolute; z-index: 20;"
  21. class="card-title p-4 w-50 text-center fw-bold">最新消息</h5>
  22. </div>
  23. </div>
  24. </section>
  25. <section class="sec04 my-5">
  26. <div class="row row-cols-1 mx-0 px-0 g-4 mt-5">
  27. <div class="col px-0 mx-0">
  28. <div class="card border-0">
  29. <img src="./img/sec04/Tiktok.png" class="card-img-top" alt="...">
  30. <div style="position: relative;" class="card-img-overlay p-0 d-flex justify-content-center">
  31. <h5 style="background: rgba(255,255,255,0.8); font-size: 14px; position: absolute; z-index: 20; top:-50px;" class="card-date py-4 pe-3 text-end">2021/08/25</h5>
  32. </div>
  33. <div class="card-body">
  34. <h5 class="card-title">Tiktok & Audius聯手,帶領全球音樂人大步走進幣圈與NFT的世界!</h5>
  35. <p class="card-text">Audius於8月正式公告與TikTok的合作消息,在外界看來,與Apple music、spotify 相比,Audius絕非是強強聯手的優先選擇,而能夠讓擁有8億會員的TikTok 選擇當第一批新......</p>
  36. </div>
  37. </div>
  38. <hr>
  39. </div>
  40. <div class="col px-0 mx-0">
  41. <div class="card border-0">
  42. <img src="./img/sec04/alibaba.jpg" class="card-img-top" alt="...">
  43. <div style="position: relative;" class="card-img-overlay p-0 d-flex justify-content-center">
  44. <h5 style="background: rgba(255,255,255,0.8); font-size: 14px; position: absolute; z-index: 20; top:-50px;" class="card-date py-4 pe-3 text-end">2021/08/25</h5>
  45. </div>
  46. <div class="card-body">
  47. <h5 class="card-title">NFT版權│阿里巴巴推出,阿里拍賣,實現版權交易的 NFT 市場</h5>
  48. <p class="card-text">8月17日,阿里再次登場,宣布推出新的NFT市場「區塊鏈數字版權資產交易」,允許版權持有人出售IP相關的代幣化版權資產憑證。</p>
  49. </div>
  50. </div>
  51. <hr>
  52. </div>
  53. <div class="col px-0 mx-0">
  54. <div class="card border-0">
  55. <img src="./img/sec04/nft-pay.jpg" class="card-img-top" alt="...">
  56. <div style="position: relative;" class="card-img-overlay p-0 d-flex justify-content-center">
  57. <h5 style="background: rgba(255,255,255,0.8); font-size: 14px; position: absolute; z-index: 20; top:-50px;" class="card-date py-4 pe-3 text-end">2021/08/25</h5>
  58. </div>
  59. <div class="card-body">
  60. <h5 class="card-title">NFT電影│娛樂圈結合NFT,電影票開放使用比特幣與萊特幣支付</h5>
  61. <p class="card-text">連結你的加密錢包,馬上進場, Matt Hartley 表示:“這是娛樂發行的下一步。我們認為這有可能成為比特幣的 Netflix”。</p>
  62. </div>
  63. </div>
  64. <hr>
  65. </div>
  66. </div>
  67. </section>
  68. <footer style="background: #484848;" class="py-4">
  69. <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
  70. </footer>
  71. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  72. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  73. crossorigin="anonymous"></script>
  74. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  75. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  76. crossorigin="anonymous"></script>
  77. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  78. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  79. <script src="./goto.js"></script>
  80. </body>
  81. </html>