atricle.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  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="./index.html"><img src="./img/LOGO.png" alt=""></a>
  20. </div>
  21. <div class="link2 col-md-10 col-lg-8">
  22. <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
  23. <div class="container-fluid">
  24. <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  25. data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
  26. aria-expanded="false" aria-label="Toggle navigation">
  27. <span class="navbar-toggler-icon"></span>
  28. </button>
  29. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  30. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  31. <li class="nav-item dropdown">
  32. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  33. data-bs-toggle="dropdown" aria-expanded="false">
  34. 相關新聞
  35. </a>
  36. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
  37. <li><a class="dropdown-item" href="#">Action</a></li>
  38. <li><a class="dropdown-item" href="#">Another action</a></li>
  39. <li>
  40. <hr class="dropdown-divider">
  41. </li>
  42. <li><a class="dropdown-item" href="#">Something else here</a></li>
  43. </ul>
  44. </li>
  45. <li class="nav-item dropdown">
  46. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  47. data-bs-toggle="dropdown" aria-expanded="false">
  48. NFT資訊
  49. </a>
  50. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
  51. <li><a class="dropdown-item" href="#">Action</a></li>
  52. <li><a class="dropdown-item" href="#">Another action</a></li>
  53. <li><a class="dropdown-item" href="#">Something else here</a></li>
  54. </ul>
  55. </li>
  56. <li class="nav-item dropdown">
  57. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  58. data-bs-toggle="dropdown" aria-expanded="false">
  59. 洞察報告
  60. </a>
  61. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
  62. <li><a class="dropdown-item" href="#">Action</a></li>
  63. <li><a class="dropdown-item" href="#">Another action</a></li>
  64. <li><a class="dropdown-item" href="#">Something else here</a></li>
  65. </ul>
  66. </li>
  67. <li class="nav-item dropdown">
  68. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  69. data-bs-toggle="dropdown" aria-expanded="false">
  70. NFT人物
  71. </a>
  72. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
  73. <li><a class="dropdown-item" href="#">Action</a></li>
  74. <li><a class="dropdown-item" href="#">Another action</a></li>
  75. <li><a class="dropdown-item" href="#">Something else here</a></li>
  76. </ul>
  77. </li>
  78. <li class="nav-item">
  79. <a class="nav-link" aria-current="page" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
  80. </li>
  81. </ul>
  82. <!-- <form class="d-flex">
  83. <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  84. <button class="btn btn-outline-light" type="submit">Search</button>
  85. </form> -->
  86. </div>
  87. </div>
  88. </nav>
  89. <!-- <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
  90. data-bs-toggle="dropdown" aria-expanded="false">
  91. 相關新聞
  92. </a>
  93. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
  94. <li><a class="dropdown-item" href="#">Action</a></li>
  95. <li><a class="dropdown-item" href="#">Another action</a></li>
  96. <li><a class="dropdown-item" href="#">Something else here</a></li>
  97. </ul>
  98. <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
  99. data-bs-toggle="dropdown" aria-expanded="false">
  100. NFT資訊
  101. </a>
  102. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
  103. <li><a class="dropdown-item" href="#">Action</a></li>
  104. <li><a class="dropdown-item" href="#">Another action</a></li>
  105. <li><a class="dropdown-item" href="#">Something else here</a></li>
  106. </ul>
  107. <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
  108. data-bs-toggle="dropdown" aria-expanded="false">
  109. 洞察報告
  110. </a>
  111. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
  112. <li><a class="dropdown-item" href="#">Action</a></li>
  113. <li><a class="dropdown-item" href="#">Another action</a></li>
  114. <li><a class="dropdown-item" href="#">Something else here</a></li>
  115. </ul>
  116. <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
  117. data-bs-toggle="dropdown" aria-expanded="false">
  118. NFT人物
  119. </a>
  120. <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
  121. <li><a class="dropdown-item" href="#">Action</a></li>
  122. <li><a class="dropdown-item" href="#">Another action</a></li>
  123. <li><a class="dropdown-item" href="#">Something else here</a></li>
  124. </ul>
  125. <a target="_blank"
  126. href=" https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a> -->
  127. </div>
  128. <img id="menu-btn1" src="./img/menu.png" alt="">
  129. <div id="socail-link" class="col-md-10 col-lg-2 py-5">
  130. <a target="_blank" href="https://www.facebook.com/nftboard"><img src="./img/facebook (2).png"
  131. alt=""></a>
  132. <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
  133. alt=""></a>
  134. </div>
  135. </div>
  136. </section>
  137. <section class="py-5 bg-white mb-5"></section>
  138. <section id="adv01" class="py-5 bg-light">
  139. <div class="adv01-1 container-fluid">
  140. <img class="img-fluid" src="./img/adv/adv1.webp" alt="">
  141. </div>
  142. </section>
  143. <section id="sec10" class="container-fluid pt-3">
  144. <div class="row">
  145. <div class="col-lg-7">
  146. <h1>
  147. NFT席捲體育界 NBA數位收藏交易掀熱潮~疫情推升NBA熱潮,玩家身家暴漲百倍~
  148. </h1>
  149. <p class="card-text"><small class="text-muted">By NFTBoard</small></p>
  150. <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>2hr ago</span>
  151. <hr>
  152. <img class="img-fluid" src="./img/sec01/sec01-img06.jpg" alt="">
  153. <div class="sec11-content mt-3">
  154. <h2> Lorem ipsum dolor sit amet consectetur, </h2>
  155. <p>
  156. Lorem ipsum dolor sit amet consectetur,
  157. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  158. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  159. Lorem ipsum dolor sit amet consectetur,
  160. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  161. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  162. </p>
  163. <img class="img-fluid" src="./img/sec01/sec01-img04.webp" alt="">
  164. <h2 class="mt-3"> Lorem ipsum dolor sit amet consectetur </h2>
  165. <p>
  166. Lorem ipsum dolor sit amet consectetur,
  167. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  168. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia
  169. Lorem ipsum dolor sit amet consectetur,
  170. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  171. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia
  172. </p>
  173. <h2 class="mt-3"> Culpa blanditiis recusandae </h2>
  174. <p>
  175. Lorem ipsum dolor sit amet consectetur,
  176. adipisicing elit. Accusamus reprehenderit
  177. Culpa blanditiis recusandae minus. Eos quasi
  178. Lorem ipsum dolor sit amet consectetur,
  179. </p>
  180. <ul>
  181. <li>Lorem ipsum dolor sit amet consectetu</li>
  182. <li>adipisicing elit. Accusamus</li>
  183. <li>Culpa blanditiis recusandae minus</li>
  184. </ul>
  185. <h2 class="my-3"> Accusamus reprehenderit unde </h2>
  186. <style>
  187. .embed-container {
  188. position: relative;
  189. padding-bottom: 56.25%;
  190. height: 0;
  191. overflow: hidden;
  192. max-width: 100%;
  193. }
  194. .embed-container iframe,
  195. .embed-container object,
  196. .embed-container embed {
  197. position: absolute;
  198. top: 0;
  199. left: 0;
  200. width: 100%;
  201. height: 100%;
  202. }
  203. </style>
  204. <div class='embed-container'><iframe src='https://www.youtube.com/embed//hSO68EnYsgM'
  205. frameborder='0' allowfullscreen></iframe></div>
  206. <p>
  207. Eos quasi
  208. Lorem ipsum dolor sit amet consectetur,
  209. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  210. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  211. </p>
  212. <img class="img-fluid" src="./img/sec01/6.jpg" alt="">
  213. <h2>Eos quasi iste culpa voluptatibus</h2>
  214. <p>
  215. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  216. Lorem ipsum dolor sit amet consectetur,
  217. adipisicing elit. Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  218. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  219. </p>
  220. <ul>
  221. <li>Lorem ipsum dolor sit amet consectetu</li>
  222. <li>adipisicing elit. Accusamus</li>
  223. <li>Eos quasi iste culpa voluptatibus</li>
  224. <li>Culpa blanditiis recusandae minus</li>
  225. </ul>
  226. <p> Accusamus reprehenderit unde fugiat dolore quam totam quaerat nisi?
  227. Culpa blanditiis recusandae minus. Eos quasi iste culpa voluptatibus ipsam aut quia repellendus!
  228. </p>
  229. </div>
  230. </div>
  231. <div class="col-lg-1"></div>
  232. <div class="col-lg-4">
  233. <hr>
  234. <div class="card-body">
  235. <h5 class="card-title">原本預計2020東京奧運一直延遲到2021舉辦,也搭上了NFT熱潮啦!</h5>
  236. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  237. additional content. This content is a little bit longer.</p>
  238. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  239. </div>
  240. <div class="card-body">
  241. <h5 class="card-title">NFT遊戲 | 玩轉遊戲世界 究竟NFT能擴充到什麼樣的地步?</h5>
  242. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  243. additional content. This content is a little bit longer.</p>
  244. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  245. </div>
  246. <div class="card-body">
  247. <h5 class="card-title">NFT排名 | 最美風景NFT 你知道最美NFT誰是第一名嗎?</h5>
  248. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
  249. additional content. This content is a little bit longer.</p>
  250. <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  251. </div>
  252. <hr>
  253. <img class="img-fluid my-3" src="./img/adv/adv3-1.webp" alt="">
  254. <img class="img-fluid my-3" src="./img/adv/adv3-2.webp" alt="">
  255. <img class="img-fluid my-3" src="./img/adv/adv3-3.webp" alt="">
  256. </div>
  257. </div>
  258. </section>
  259. <section id="adv02" class="py-5 bg-light">
  260. <div class="adv01-1 container-fluid">
  261. <img class="img-fluid" src="./img/sec01/218116504_124830393175329_4675674980376029305_n.jpg" alt="">
  262. </div>
  263. </section>
  264. <section id="sec11">
  265. <div id="sec11-container" class="container-fluid px-0 py-5">
  266. <h1>RECENT POST(NEWS)</h1>
  267. <div class="sec11-01 row row-col-1 row-cols-sm-2">
  268. <div class="col my-3">
  269. <div class="card mb-3 p-1 h-100 border-0">
  270. <div class="col-12"></div>
  271. <img class="sec11-img img-fluid rounded-3" src="./img/sec01/Olympic.png" alt="">
  272. <h2 class="my-3"> Lorem ipsum dolor sit</h2>
  273. <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
  274. style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
  275. </div>
  276. </div>
  277. <div class="col my-3">
  278. <div class="card mb-3 p-1 h-100 border-0">
  279. <div class="col">
  280. <img class="sec11-img img-fluid rounded-3" src="./img/sec06/sec06-01.webp" alt="">
  281. <h2 class="my-3"> Lorem ipsum dolor sit</h2>
  282. <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
  283. style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
  284. </div>
  285. </div>
  286. </div>
  287. <div class="col my-3">
  288. <div class="card mb-3 p-1 h-100 border-0">
  289. <div class="col">
  290. <img class="sec11-img img-fluid rounded-3" src="./img/sec01/SEC11.png" alt="">
  291. <h2 class="my-3"> Lorem ipsum dolor sit</h2>
  292. <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
  293. style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
  294. </div>
  295. </div>
  296. </div>
  297. <div class="col my-3">
  298. <div class="card mb-3 p-1 h-100 border-0">
  299. <div class="col">
  300. <img class="sec11-img img-fluid rounded-3" src="./img/sec01/sec01-img02webp.webp" alt="">
  301. <h2 class="my-3"> Lorem ipsum dolor sit</h2>
  302. <p class="card-text"><small class="text-muted">By NFTBoard | <img class="m-1"
  303. style="width: 15px;" src="./img/time.png" alt=""> 2 hr ago </small></p>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. </section>
  311. <footer id="footer" class="container-fluid" style="padding:0;margin:0">
  312. <div class="text" style="padding-right:0;">
  313. <a target="_blank" href="mailto:nftboard.info@gmail.com">
  314. <h2>客服信箱:nftboard.info@gmail.com</h2>
  315. </a>
  316. <h2>公司名稱:微生活知識科技公司</h2>
  317. <a target="_blank" href="https://www.facebook.com/nftboard">
  318. <img src="./img/facebook (2).png" alt=""></a>
  319. <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
  320. alt=""></a>
  321. <p>NFTBoard &copy; All Rights Reserved.</p>
  322. </div>
  323. </footer>
  324. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  325. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  326. crossorigin="anonymous"></script>
  327. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  328. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  329. crossorigin="anonymous"></script>
  330. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  331. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  332. <script src="./goto.js"></script>
  333. <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
  334. <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.js"></script>
  335. </body>
  336. </html>