atricle.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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>article</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. <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
  14. </head>
  15. <body>
  16. <section id="Navigation" class="container-fluid" style="padding:0;margin:0">
  17. <div id="nav" class="row" style="padding:0;margin:0">
  18. <div id="logo" class=" col-md-2 col-lg-2">
  19. <a href=""> <img src="./img/LOGO.png" alt=""></a>
  20. </div>
  21. <div id="link" class="col-md-10 col-lg-8">
  22. <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="">相關新聞</a>
  23. <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="60">TOP NFT ARTIST</a>
  24. <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">洞察報告</a>
  25. <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">熱門作品</a>
  26. <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">NFT資訊</a>
  27. <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="-700">NFT趨勢數據</a>
  28. <a target="_blank"
  29. href=" https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
  30. </div>
  31. <img id="menu-btn1" src="./img/menu.png" alt="">
  32. <div id="socail-link" class="col-md-10 col-lg-2">
  33. <a target="_blank" href="https://www.facebook.com/nftboard"><img src="./img/facebook (2).png"
  34. alt=""></a>
  35. <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
  36. alt=""></a>
  37. </div>
  38. </div>
  39. </section>
  40. <section class="py-5 bg-white mb-5"></section>
  41. <section id="adv01" class="py-5 bg-light">
  42. <div class="container-fluid w-50">
  43. <img class="img-fluid" src="./img/adv/adv1.webp" alt="">
  44. </div>
  45. </section>
  46. <section id="sec10" class="container-fluid pt-3">
  47. <div class="row">
  48. <div class="col-lg-8">
  49. <h1>
  50. Lorem ipsum dolor sit amet consectetur adipisicing elit.
  51. </h1>
  52. <p class="card-text"><small class="text-muted">By NFTBoard</small></p>
  53. <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>2hr ago</span>
  54. <hr>
  55. <img class="img-fluid" src="./img/sec01/sec01-img06.jpg" alt="">
  56. <div class="sec11-content mt-3">
  57. <h2> Lorem ipsum dolor sit amet consectetur, </h2>
  58. <p>
  59. Lorem ipsum dolor sit amet consectetur,
  60. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  61. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  62. Lorem ipsum dolor sit amet consectetur,
  63. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  64. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  65. </p>
  66. <img class="img-fluid" src="./img/sec01/sec01-img04.webp" alt="">
  67. <h2 class="mt-3"> Lorem ipsum dolor sit amet consectetur </h2>
  68. <p>
  69. Lorem ipsum dolor sit amet consectetur,
  70. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  71. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia
  72. Lorem ipsum dolor sit amet consectetur,
  73. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  74. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia
  75. </p>
  76. <h2 class="mt-3"> Culpa blanditiis recusandae </h2>
  77. <p>
  78. Lorem ipsum dolor sit amet consectetur,
  79. adipisicing elit. Accusamus reprehenderit
  80. Culpa blanditiis recusandae minus. Eos quasi
  81. Lorem ipsum dolor sit amet consectetur,
  82. </p>
  83. <ul>
  84. <li>Lorem ipsum dolor sit amet consectetu</li>
  85. <li>adipisicing elit. Accusamus</li>
  86. <li>Culpa blanditiis recusandae minus</li>
  87. </ul>
  88. <h2 class="my-3"> Accusamus reprehenderit unde </h2>
  89. <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//hSO68EnYsgM' frameborder='0' allowfullscreen></iframe></div>
  90. <p>
  91. Eos quasi
  92. Lorem ipsum dolor sit amet consectetur,
  93. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  94. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  95. </p>
  96. <img class="img-fluid" src="./img/sec01/6.jpg" alt="">
  97. <h2>Eos quasi iste culpa voluptatibus</h2>
  98. <p>
  99. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  100. Lorem ipsum dolor sit amet consectetur,
  101. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  102. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  103. </p>
  104. </div>
  105. </div>
  106. <div class="col-lg-4">
  107. <hr>
  108. <div class="card-body">
  109. <h5 class="card-title">Card title</h5>
  110. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  111. additional content. This content is a little bit longer.</p>
  112. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  113. </div>
  114. <div class="card-body">
  115. <h5 class="card-title">Card title</h5>
  116. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  117. additional content. This content is a little bit longer.</p>
  118. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  119. </div>
  120. <div class="card-body">
  121. <h5 class="card-title">Card title</h5>
  122. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  123. additional content. This content is a little bit longer.</p>
  124. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  125. </div>
  126. <hr>
  127. <img class="img-fluid my-3" src="./img/adv/adv3-1.webp" alt="">
  128. <img class="img-fluid my-3" src="./img/adv/adv3-2.webp" alt="">
  129. <img class="img-fluid my-3" src="./img/adv/adv3-3.webp" alt="">
  130. </div>
  131. </div>
  132. </section>
  133. <footer id="footer" class="container-fluid" style="padding:0;margin:0">
  134. <div class="text" style="padding-right:0;">
  135. <a target="_blank" href="mailto:nftboard.info@gmail.com">
  136. <h2>客服信箱:nftboard.info@gmail.com</h2>
  137. </a>
  138. <h2>公司名稱:微生活知識科技公司</h2>
  139. <a target="_blank" href="https://www.facebook.com/nftboard">
  140. <img src="./img/facebook (2).png" alt=""></a>
  141. <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png" alt=""></a>
  142. <p>NFTBoard &copy; All Rights Reserved.</p>
  143. </div>
  144. </footer>
  145. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  146. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  147. crossorigin="anonymous"></script>
  148. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  149. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  150. crossorigin="anonymous"></script>
  151. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  152. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  153. <script src="./goto.js"></script>
  154. <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
  155. <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.js"></script>
  156. </body>
  157. </html>