內容更新

NFTContent.json

@@ -1,4 +1,11 @@
 [
+    {
+      
+        "newsimg": "img/sec01/sec01-8.jpg",
+        "newstext1": " 俄羅斯的冬宮將藝術品作為 NFT 出售",
+        "newstext2": "該博物館將在幣安 NFT 上出售達芬奇、喬爾喬內、康定斯基、梵谷和莫內作品的NFT。Piotrovsky 在一份聲明中說「NFT 使奢侈品變得更容易獲得，同時又是獨一無二的」，Hermitage 將繼續探索，並在這些新技術的基礎上，進行新的實驗。 ",
+        "website": "https://www.facebook.com/nftboard/posts/126429853015383"
+    },
     {
       
         "newsimg": "img/sec01/Olympic.png",
@@ -33,14 +40,6 @@
         "newstext1": "全景式解讀NFT音樂：市場現狀、變革潛力、挑戰",
         "newstext2": "NFT市場在2021上半年取得長足發展。數據顯示，NFT市場規模於今年上半年達到25億美元，同比上漲182倍。未來，隨著更多普通消費者參與NFT音樂市場，NFT對音樂業的影響將更加深刻，倒逼唱片公司轉型，打擊流媒體在音樂業的地位。",
         "website": "https://www.facebook.com/nftboard/posts/122115373446831"
-    },
-    {
-       
-        "newsimg": "img/sec01/6.jpg",
-        "newstext1": "慈善正在轉向NFT技術與藝術家建立了合作關係",
-        "newstext2": "經過一年多的 COVID-19，經濟衝擊導致慈善捐款枯竭，親自捐贈的機會大幅減少。與世界其他地方一樣，慈善事業正在轉向技術來適應。這就是為什麼初創公司能夠幫助NFT、慈善機構和希望為人道主義事業工作的藝術家之間建立聯繫的原因。",
-        "website": "https://www.facebook.com/nftboard/posts/121036453554723"
     }
  
-  
 ]

atricle.html

@@ -20,21 +20,118 @@
     <section id="Navigation" class="container-fluid" style="padding:0;margin:0">
         <div id="nav" class="row" style="padding:0;margin:0">
             <div id="logo" class=" col-md-2 col-lg-2">
-                <a href=""> <img src="./img/LOGO.png" alt=""></a>
+                <a href="./index.html"><img src="./img/LOGO.png" alt=""></a>
             </div>
-            <div id="link" class="col-md-10 col-lg-8">
-                <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="">相關新聞</a>
-                <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="60">TOP NFT ARTIST</a>
-                <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">洞察報告</a>
-                <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">熱門作品</a>
-                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">NFT資訊</a>
-                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="-700">NFT趨勢數據</a>
-                <a target="_blank"
-                    href="  https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
+            <div class="link2 col-md-10 col-lg-8">
+                <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
+                    <div class="container-fluid">
+                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                            aria-expanded="false" aria-label="Toggle navigation">
+                            <span class="navbar-toggler-icon"></span>
+                        </button>
+                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">
+                                        相關新聞
+                                    </a>
+                                    <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
+                                        <li><a class="dropdown-item" href="#">Action</a></li>
+                                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                                        <li>
+                                            <hr class="dropdown-divider">
+                                        </li>
+                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">
+                                        NFT資訊
+                                    </a>
+                                    <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
+                                        <li><a class="dropdown-item" href="#">Action</a></li>
+                                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">
+                                        洞察報告
+                                    </a>
+                                    <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
+                                        <li><a class="dropdown-item" href="#">Action</a></li>
+                                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                                        data-bs-toggle="dropdown" aria-expanded="false">
+                                        NFT人物
+                                    </a>
+                                    <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
+                                        <li><a class="dropdown-item" href="#">Action</a></li>
+                                        <li><a class="dropdown-item" href="#">Another action</a></li>
+                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
+                                    </ul>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link" aria-current="page" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
+                                  </li>
+                            </ul>
+                            <!-- <form class="d-flex">
+                                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                                <button class="btn btn-outline-light" type="submit">Search</button>
+                            </form> -->
+                        </div>
+                    </div>
+                </nav>
+                <!-- <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    相關新聞
+                </a>
+                <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
+                    <li><a class="dropdown-item" href="#">Action</a></li>
+                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+                <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    NFT資訊
+                </a>
+                <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
+                    <li><a class="dropdown-item" href="#">Action</a></li>
+                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+                <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    洞察報告
+                </a>
+                <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
+                    <li><a class="dropdown-item" href="#">Action</a></li>
+                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+                <a class="nav-link dropdown-toggle d-inline" href="#" id="navbarDropdownMenuLink" role="button"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+                    NFT人物
+                </a>
+                <ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdownMenuLink">
+                    <li><a class="dropdown-item" href="#">Action</a></li>
+                    <li><a class="dropdown-item" href="#">Another action</a></li>
+                    <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
 
+                <a target="_blank"
+                    href="  https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a> -->
             </div>
             <img id="menu-btn1" src="./img/menu.png" alt="">
-            <div id="socail-link" class="col-md-10 col-lg-2">
+            <div id="socail-link" class="col-md-10 col-lg-2 py-5">
                 <a target="_blank" href="https://www.facebook.com/nftboard"><img src="./img/facebook (2).png"
                         alt=""></a>
                 <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
@@ -42,6 +139,7 @@
             </div>
         </div>
     </section>
+
     <section class="py-5 bg-white mb-5"></section>
     <section id="adv01" class="py-5 bg-light">
         <div class="adv01-1 container-fluid">
@@ -53,7 +151,7 @@
         <div class="row">
             <div class="col-lg-7">
                 <h1>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                    NFT席捲體育界 NBA數位收藏交易掀熱潮~疫情推升NBA熱潮，玩家身家暴漲百倍~
                 </h1>
                 <p class="card-text"><small class="text-muted">By NFTBoard</small></p>
                 <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>2hr ago</span>
@@ -146,19 +244,19 @@
             <div class="col-lg-4">
                 <hr>
                 <div class="card-body">
-                    <h5 class="card-title">Card title</h5>
+                    <h5 class="card-title">原本預計2020東京奧運一直延遲到2021舉辦，也搭上了NFT熱潮啦!</h5>
                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                         additional content. This content is a little bit longer.</p>
                     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                 </div>
                 <div class="card-body">
-                    <h5 class="card-title">Card title</h5>
+                    <h5 class="card-title">NFT遊戲 | 玩轉遊戲世界 究竟NFT能擴充到什麼樣的地步？</h5>
                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                         additional content. This content is a little bit longer.</p>
                     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                 </div>
                 <div class="card-body">
-                    <h5 class="card-title">Card title</h5>
+                    <h5 class="card-title">NFT排名 |  最美風景NFT 你知道最美NFT誰是第一名嗎？</h5>
                     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                         additional content. This content is a little bit longer.</p>
                     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@@ -177,9 +275,8 @@
     </section>
     <section id="sec11">
 
-        <div id="sec11-container" class="container-fluid px-0">
-            <hr>
-            <h1>Related posts</h1>
+        <div id="sec11-container" class="container-fluid px-0 py-5">
+            <h1>RECENT POST(NEWS)</h1>
             <div class="sec11-01 row row-col-1 row-cols-sm-2">
                 <div class="col my-3">
                     <div class="card mb-3 p-1 h-100 border-0">

index.html

@@ -18,7 +18,7 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="author" content="Choozmo">
 
-    <meta property="og:image" content="https://i.imgur.com/X6nYWji.jpeg"/>
+    <meta property="og:image" content="https://i.imgur.com/X6nYWji.jpeg" />
     <meta property="og:description" content="全球NFT指標告示板" />
     <meta property="og:site_name" content="NFTBoard" />
     <meta property="og:title" content="NFTBoard-官方網站" />
@@ -36,36 +36,38 @@
     <link rel="stylesheet" href="./style.css">
     <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
     <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
+        window.dataLayer = window.dataLayer || [];
+        function gtag() { dataLayer.push(arguments); }
+        gtag('js', new Date());
 
-    gtag('config', 'UA-201820994-1');
+        gtag('config', 'UA-201820994-1');
     </script>
-    
+
     <!-- Facebook Pixel Code -->
     <script>
-    !function(f,b,e,v,n,t,s)
-    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
-    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
-    n.queue=[];t=b.createElement(e);t.async=!0;
-    t.src=v;s=b.getElementsByTagName(e)[0];
-    s.parentNode.insertBefore(t,s)}(window, document,'script',
-    'https://connect.facebook.net/en_US/fbevents.js');
-    fbq('init', '100259488965753');
-    fbq('track', 'PageView');
+        !function (f, b, e, v, n, t, s) {
+            if (f.fbq) return; n = f.fbq = function () {
+                n.callMethod ?
+                n.callMethod.apply(n, arguments) : n.queue.push(arguments)
+            };
+            if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
+            n.queue = []; t = b.createElement(e); t.async = !0;
+            t.src = v; s = b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t, s)
+        }(window, document, 'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+        fbq('init', '100259488965753');
+        fbq('track', 'PageView');
     </script>
     <noscript><img height="1" width="1" style="display:none"
-    src="https://www.facebook.com/tr?id=100259488965753&ev=PageView&noscript=1"
-    /></noscript>
+            src="https://www.facebook.com/tr?id=100259488965753&ev=PageView&noscript=1" /></noscript>
     <!-- End Facebook Pixel Code -->
 </head>
 
 <body id="top" class="container-fluid w-100" style="padding: 0; margin: 0;">
 
     <!-- 主選單 -->
-    <section id="Navigation" class="container-fluid" style="padding:0;margin:0">
+    <section id="Navigation" class="container-fluid px-0 mx-0">
         <div id="nav" class="row" style="padding:0;margin:0">
             <div id="logo" class=" col-md-2 col-lg-2">
                 <a href=""> <img src="./img/LOGO.png" alt=""></a>
@@ -77,14 +79,16 @@
                 <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">熱門作品</a>
                 <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">NFT資訊</a>
                 <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="-700">NFT趨勢數據</a>
-                <a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
+                <a target="_blank"
+                    href="https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
 
             </div>
             <img id="menu-btn1" src="./img/menu.png" alt="">
-            <div id="socail-link" class="col-md-10 col-lg-2">
+            <div id="socail-link" class="col-md-10 col-lg-2 mx-0">
                 <a target="_blank" href="https://www.facebook.com/nftboard"><img src="./img/facebook (2).png"
                         alt=""></a>
-                <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png" alt=""></a>        
+                <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
+                        alt=""></a>
             </div>
         </div>
     </section>
@@ -107,7 +111,8 @@
             <hr>
             <a class="link" data-gt-target="#sec07-moblir-title" data-gt-duration="500" data-gt-offset="80">NFT趨勢數據</a>
             <hr>
-            <a class="link" target="_blank" href="  https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
+            <a class="link" target="_blank"
+                href="  https://docs.google.com/forms/d/e/1FAIpQLSf2gw6oO4WJ2lmNGescLRdGgS3H5IUgOd2xu4nmzqh5g0JH5g/viewform">聯絡我們</a>
             <hr>
             <a target="_blank" href="https://www.facebook.com/nftboard">粉絲專頁</a>
             <hr>
@@ -116,7 +121,7 @@
 
     </div>
     <!-- 主視覺 -->
-    <section id="banner" class="container-fluid" style="margin: 0; padding: 0;">
+    <section id="banner" class="container-fluid mx-0 px-0">
         <div id="banner-container">
             <div class="youtube-slider">
                 <!-- <div class="youtube ">
@@ -272,18 +277,46 @@
 
                 </div> -->
                 <div id="youtube6" class="youtube">
-                    <div class="row">
+                    <div class="row mx-0 px-0">
                         <div id="youtube-text" class="col-12 order-2 col-lg-5 order-lg-1 ">
-                           <a target="_blank" href="https://www.facebook.com/nftboard/posts/123175760007459"> <h1 class="youtube-text-title1">東京奧運紀念別針胸章 NFT Olympic Pins Announcement</h1></a>
-                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/123175760007459"><h1 class="youtube-text-title2"></h1></a>
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/123175760007459">
+                                <h1 class="youtube-text-title1">東京奧運紀念別針胸章 NFT Olympic Pins Announcement</h1>
+                            </a>
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/123175760007459">
+                                <h1 class="youtube-text-title2"></h1>
+                            </a>
                             <hr>
-                            <h2 style="font-size: 25px;" class="youtube-text-title2">國際奧委會今年與nWayPlay 合作推出一系列 紀念 NFT 胸章</h2>
-                            <div class="youtube-text-hr" style="border-top:1px dashed #cccccc;height: 1px;overflow:hidden"></div>
-                            <p>此次發行的有1896年的雅典奧運、1924年的巴黎奧運、1924 年的霞慕尼冬奧（首屆冬季奧運）、1932 年的普萊西德湖冬奧（首屆在美國舉行的冬奧）、1964 年的東京奧運（首度在亞洲舉行的奧運）、1972 年的慕尼黑奧運（首次有官方吉祥物的奧運）。
+                            <h2 style="font-size: 25px;" class="youtube-text-title2">國際奧委會今年與nWayPlay 合作推出一系列 紀念 NFT 胸章
+                            </h2>
+                            <div class="youtube-text-hr"
+                                style="border-top:1px dashed #cccccc;height: 1px;overflow:hidden"></div>
+                            <p>此次發行的有1896年的雅典奧運、1924年的巴黎奧運、1924 年的霞慕尼冬奧（首屆冬季奧運）、1932 年的普萊西德湖冬奧（首屆在美國舉行的冬奧）、1964
+                                年的東京奧運（首度在亞洲舉行的奧運）、1972 年的慕尼黑奧運（首次有官方吉祥物的奧運）。
                             </p>
                         </div>
                         <div class="col-12  order-1 col-lg-7 order-lg-2 ">
-                            <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//p4ma3rmPY2E?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>                           
+                            <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//p4ma3rmPY2E?autoplay=1&mute=1' frameborder='0'
+                                    allowfullscreen></iframe></div>
                         </div>
                     </div>
 
@@ -293,15 +326,15 @@
             <!-- 電腦版按鈕 -->
             <form class="contact-form-destop">
                 <h1>歡迎訂閱掌握最新活動資訊</h1>
-                <input type="email" name="email" id="email" placeholder="請在此輸入email" required><input class="btn" type="submit"
-                    value="立即訂閱">
+                <input type="email" name="email" id="email" placeholder="請在此輸入email" required><input class="btn"
+                    type="submit" value="立即訂閱">
             </form>
             <!-- 手機板按鈕 -->
             <form class="contact-form-mobile">
                 <h1>歡迎訂閱掌握最新活動資訊</h1>
                 <div style="text-align: center;">
-                    <input type="email" name="email" id="email-moblie" placeholder="請在此輸入email" required ><input id="email-arrow"
-                    value=""  type="submit">
+                    <input type="email" name="email" id="email-moblie" placeholder="請在此輸入email" required><input
+                        id="email-arrow" value="" type="submit">
                 </div>
 
             </form>
@@ -314,23 +347,24 @@
         <div class="NEWS">
             <h1>NEWS</h1>
         </div>
-        <div id="sec01-container" class="container-fluid">
+        <div id="sec01-container" class="container-fluid mx-0 px-0">
             <div id="sec01-container-card" class="row"></div>
         </div>
     </section>
-   
-    
+
+
     <!-- 廣告區塊 -->
     <section id="sec-adv">
         <div id="sec-adv-container" class="container-fluid py-5">
             <div id="sec01-container-card" class="row">
 
                 <div class="col-12 py-3 col-lg-6">
-                    <a target="_blank" href="https://www.mustard.org.tw/desktop.php?tid=547&id=164"><img class="img-fluid" src="./img/adv/adv1.webp" alt=""> </a>
+                    <a target="_blank" href="https://www.mustard.org.tw/desktop.php?tid=547&id=164"><img
+                            class="img-fluid" src="./img/adv/adv1.webp" alt=""> </a>
                 </div>
                 <div class="col-12 py-3 col-lg-6">
                     <a target="_blank" href="https://www.mustard.org.tw/desktop.php?tid=547&id=164"><img
-                        class="img-fluid" src="./img/adv/adv2.jpg" alt=""></a>
+                            class="img-fluid" src="./img/adv/adv2.jpg" alt=""></a>
                 </div>
 
             </div>
@@ -339,57 +373,65 @@
     <!-- <section id="video" class="container-fluid" style="padding:1vw 0;">
         <video   type="video/mp4" src="./img/video1.mp4" controls></video>
     </section> -->
-     <!-- 影片區塊 -->
-    <div class="wrap container-fluid" style="padding:1vw 0;">
+    <!-- 影片區塊 -->
+    <div class="wrap container-fluid px-0 mx-0" style="padding:1vw 0;">
         <div class="adv-banner">
-          <video autoplay muted loop playsinline>
-            <source src="./img/video1_x264.mp4" type="video/mp4">
-          </video>
+            <video autoplay muted loop playsinline>
+                <source src="./img/video1_x264.mp4" type="video/mp4">
+            </video>
         </div>
-      </div>
-   
+    </div>
 
+    <!-- <section id="sec-img-adv" class="pb-5 px-0 mx-0 w-100">
+        <img class="img-fluid" src="./img/sec01/S__17211410.jpg" alt="">
+    </section> -->
     <!-- 作品集活動區塊 -->
     <section id="sec-works" class="container-fluid pb-5">
         <div class="sec-work-title">
             <h1>NFTBoard Portfolio</h1>
         </div>
-        <div id="sec-work-container" class="container-fluid">
+        <div id="sec-work-container" class="container-fluid px-0 mx-0">
             <div id="sec-work-box" class="row"></div>
         </div>
     </section>
+
     <!-- sec02-Top-box- 電腦版-->
     <section id="sec02">
         <div id="sec02-container" class="container-fluid">
             <div id="sec02-top-box" class="row">
                 <div class="col-lg-3">
                     <h1>TOP NFT</h1>
-                 
+
                 </div>
                 <div id="sec02-content" class="col-lg-9">
                     <div class="row">
                         <div class="sec02-box1   col-lg-2">
-                            <a target="_blank" href="https://www.beeple-crap.com/"><img src="./img/sec02/top1webp.webp" alt=""></a>
+                            <a target="_blank" href="https://www.beeple-crap.com/"><img src="./img/sec02/top1webp.webp"
+                                    alt=""></a>
                             <div class="sec02-top-text"><span>1</span>Beeple</div>
                             <div>（邁克•溫克爾曼）</div>
                         </div>
                         <div class="sec02-box1   col-lg-2">
-                            <a target="_blank" href="https://www.trevorjonesart.com/"><img src="./img/sec02/top2webp.webp" alt=""></a>
+                            <a target="_blank" href="https://www.trevorjonesart.com/"><img
+                                    src="./img/sec02/top2webp.webp" alt=""></a>
                             <div class="sec02-top-text"><span>2</span>Trevorjonesart</div>
                             <div>（特雷弗瓊斯）</div>
                         </div>
                         <div class="sec02-box1   col-lg-2">
-                            <a target="_blank" href="https://fewocious.com/"><img src="./img/sec02/sec02-top3webp.webp" alt=""></a>
+                            <a target="_blank" href="https://fewocious.com/"><img src="./img/sec02/sec02-top3webp.webp"
+                                    alt=""></a>
                             <div class="sec02-top-text"><span>3</span>FEWOCIOUS</div>
                             <div>(霏沃休斯)</div>
                         </div>
                         <div class="sec02-box1   col-lg-2">
-                            <a target="_blank" href="https://niftygateway.com/collections/pak"><img src="./img/sec02/top4webp.webp" alt=""></a>
+                            <a target="_blank" href="https://niftygateway.com/collections/pak"><img
+                                    src="./img/sec02/top4webp.webp" alt=""></a>
                             <div class="sec02-top-text"><span>4</span>muratpak</div>
                             <div>(派克)</div>
                         </div>
                         <div class="sec02-box1  col-lg-2">
-                            <a target="_blank" href="https://www.maddogjones.com/"><img src="./img/sec02/top5webp.webp" alt=""></a>
+                            <a target="_blank" href="https://www.maddogjones.com/"><img src="./img/sec02/top5webp.webp"
+                                    alt=""></a>
                             <div class="sec02-top-text"><span>5</span>Maddogjones</div>
                             <div>(麥道瓊斯)</div>
                         </div>
@@ -411,17 +453,20 @@
             <div id="sec02-content" class="col-12">
                 <div id="sec02-top-box" class="row">
                     <div class="sec02-box1 col-4 order-2" style="padding: 0;">
-                        <a target="_blank" href="https://www.beeple-crap.com/"><img id="top1" src="./img/sec02/top1webp.webp" alt=""></a>
+                        <a target="_blank" href="https://www.beeple-crap.com/"><img id="top1"
+                                src="./img/sec02/top1webp.webp" alt=""></a>
                         <div class="sec02-top-text"><span>1</span>Beeple</div>
                         <div class="sec02-top-text">（邁克溫克爾曼）</div>
                     </div>
                     <div class="sec02-box1 col-4 order-1 " style=" padding-left: 0;">
-                       <a target="_blank" href="https://www.trevorjonesart.com/"><img src="./img/sec02/top2webp.webp" alt=""></a> 
+                        <a target="_blank" href="https://www.trevorjonesart.com/"><img src="./img/sec02/top2webp.webp"
+                                alt=""></a>
                         <div class="sec02-top-text"><span>2</span>Trevorjonesart</div>
                         <div class="sec02-top-text" style="display: block;">（特雷弗瓊斯）</div>
                     </div>
                     <div class="sec02-box1 col-4  order-3 " style="padding: 0;">
-                        <a target="_blank" href="https://fewocious.com/"><img src="./img/sec02/sec02-top3webp.webp" alt=""></a>
+                        <a target="_blank" href="https://fewocious.com/"><img src="./img/sec02/sec02-top3webp.webp"
+                                alt=""></a>
                         <div class="sec02-top-text"><span>3</span>FEWOCIOUS</div>
                         <div class="sec02-top-text" style="display: block;">(霏沃休斯)</div>
                     </div>
@@ -529,7 +574,9 @@
                             <tr>
                                 <th scope="row">4</th>
                                 <td>
-                                    <a target="_blank" href="https://opensea.io/assets/0xce5e90533d9dbc30eac8a3610a681fc7aaa23193/43100040225"><img src="./img/sec03/top5webp.webp" alt=""></a>
+                                    <a target="_blank"
+                                        href="https://opensea.io/assets/0xce5e90533d9dbc30eac8a3610a681fc7aaa23193/43100040225"><img
+                                            src="./img/sec03/top5webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
                                             <a target="https://opensea.io/nifty-gateway-omnibus"
@@ -589,10 +636,11 @@
                                             src="./img/sec03/sec04-top-11.jpg" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                           
+
                                             <h1 style="opacity: 0;">beeple</h1>
-                                            <a target="https://twitter.com/beeple"
-                                            href="https://twitter.com/beeple"> <h1>beeple</h1></a>
+                                            <a target="https://twitter.com/beeple" href="https://twitter.com/beeple">
+                                                <h1>beeple</h1>
+                                            </a>
                                             <h1 style="opacity: 0;">beeple</h1>
                                         </div>
                                         <div>
@@ -700,11 +748,12 @@
     <div id="sec-adv2-container" class="container-fluid pb-5">
         <div id="sec-adv2-card" class="row">
             <div class="col-12 py-3 col-lg-6">
-                <a target="_blank" href="https://www.facebook.com/ARK.TPE/"><img style="object-fit: cover;" class="img-fluid" src="./img/adv/adv3.webp" alt=""> </a>
+                <a target="_blank" href="https://www.facebook.com/ARK.TPE/"><img style="object-fit: cover;"
+                        class="img-fluid" src="./img/adv/adv3.webp" alt=""> </a>
             </div>
             <div class="col-12 py-3 col-lg-6">
-                <a target="_blank" href="https://tw.puma.com/v2/official/SalePageCategory/351855?sortMode=Curator"><img  
-                    class="img-fluid" src="./img/adv/adv2-2.webp" alt=""></a>
+                <a target="_blank" href="https://tw.puma.com/v2/official/SalePageCategory/351855?sortMode=Curator"><img
+                        class="img-fluid" src="./img/adv/adv2-2.webp" alt=""></a>
             </div>
 
         </div>
@@ -729,19 +778,16 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <a target="https://www.instagram.com/p/CO0otBGjnFm/"
-                                        href="https://www.instagram.com/p/CO0otBGjnFm/"><img
+                                    <a target="_blank" href="https://www.instagram.com/p/CO0otBGjnFm/"><img
                                             src="./img/sec03/sec03top1.gif" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="https://www.instagram.com/iammaskarade/"
-                                                href="https://www.instagram.com/iammaskarade/">
+                                            <a target="_blank" href="https://www.instagram.com/iammaskarade/">
                                                 <h1>iammaskarade</h1>
                                             </a>
                                         </div>
                                         <div>
-                                            <a target="https://www.instagram.com/p/CO0otBGjnFm/"
-                                                href="https://www.instagram.com/p/CO0otBGjnFm/">
+                                            <a target="_blank" href="https://www.instagram.com/p/CO0otBGjnFm/">
                                                 <p>Backdated NFT/Ethereum Stamp</p>
                                             </a>
                                         </div>
@@ -762,7 +808,7 @@
                                             </a>
                                         </div>
                                         <div>
-                                            <a target="https://opensea.io/assets/0xd92e44ac213b9ebda0178e1523cc0ce177b7fa96/100010115"
+                                            <a target="_blank"
                                                 href="https://opensea.io/assets/0xd92e44ac213b9ebda0178e1523cc0ce177b7fa96/100010115">
                                                 <p>The Eternal Cloudsitter</p>
                                                 <p>BULL RUN #115/271</p>
@@ -785,7 +831,7 @@
                                             </a>
                                         </div>
                                         <div>
-                                            <a target="https://opensea.io/assets/0x495f947276749ce646f68ac8c248420045cb7b5e/17695285328414013321162775223300201078905627004348366341411776174679266426881"
+                                            <a target="_blank"
                                                 href="https://opensea.io/assets/0x495f947276749ce646f68ac8c248420045cb7b5e/17695285328414013321162775223300201078905627004348366341411776174679266426881">
                                                 <p>The Eternal Cloudsitter</p>
                                             </a>
@@ -800,17 +846,16 @@
                                 <td>
                                     <a target="_blank"
                                         href="https://opensea.io/assets/0xce5e90533d9dbc30eac8a3610a681fc7aaa23193/43100040225"><img
-                                        src="./img/sec03/top5webp.webp" alt=""></a>
+                                            src="./img/sec03/top5webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a target="https://opensea.io/nifty-gateway-omnibus"
-                                                href="https://opensea.io/nifty-gateway-omnibus">
+                                            <a target="_blank" href="https://opensea.io/nifty-gateway-omnibus">
                                                 <h1>nifty-gateway-omnibus</h1>
                                             </a>
 
                                         </div>
                                         <div>
-                                            <a target="https://opensea.io/assets/0xce5e90533d9dbc30eac8a3610a681fc7aaa23193/43100040225"
+                                            <a target="_blank"
                                                 href="https://opensea.io/assets/0xce5e90533d9dbc30eac8a3610a681fc7aaa23193/43100040225">
                                                 <p>Seven Nation Army Remix</p>
                                                 <p> 004 #225/333(MUSIC)</p>
@@ -824,7 +869,9 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                   <a target="_blank" href="https://www.oursong.com/project/dprnydqw/song-share-card"><img src="./img/sec03/top3webp.webp" alt=""></a> 
+                                    <a target="_blank"
+                                        href="https://www.oursong.com/project/dprnydqw/song-share-card"><img
+                                            src="./img/sec03/top3webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
                                             <a target="_blank" href="https://www.youtube.com/watch?v=uZtX_3TRdiE">
@@ -832,7 +879,7 @@
                                             </a>
                                         </div>
                                         <div>
-                                            <a target="https://www.oursong.com/project/dprnydqw/song-share-card"
+                                            <a target="_blank"
                                                 href="https://www.oursong.com/project/dprnydqw/song-share-card">
                                                 <p>1970Marlboro</p>
                                             </a>
@@ -853,7 +900,7 @@
                             <tr>
                                 <th scope="row">1</th>
                                 <td>
-                                    <a target="https://twitter.com/beeple" href="https://twitter.com/beeple"><img
+                                    <a target="_blank" href="https://twitter.com/beeple"><img
                                             src="./img/sec03/sec04-top-11.jpg" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
@@ -872,8 +919,7 @@
                             <tr>
                                 <th scope="row">2</th>
                                 <td>
-                                    <a target="https://twitter.com/A_Giant_Swan/photo"
-                                        href="https://twitter.com/A_Giant_Swan/photo"> <img
+                                    <a target="_blank" href="https://twitter.com/A_Giant_Swan/photo"> <img
                                             src="./img/sec03/sec04-top-12webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
@@ -893,7 +939,7 @@
                             <tr>
                                 <th scope="row">3</th>
                                 <td>
-                                    <a target="https://www.thehashmasks.com/" href="https://www.thehashmasks.com/"><img
+                                    <a target="_blank" href="https://www.thehashmasks.com/"><img
                                             src="./img/sec03/sec04-top-13webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
@@ -912,7 +958,7 @@
                             <tr>
                                 <th scope="row">4</th>
                                 <td>
-                                    <a target="https://twitter.com/fewocious" href="https://twitter.com/fewocious"><img
+                                    <a target="_blank" href="https://twitter.com/fewocious"><img
                                             src="./img/sec03/sec04-top-14webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
@@ -931,8 +977,7 @@
                             <tr>
                                 <th scope="row">5</th>
                                 <td>
-                                    <a target="https://twitter.com/pplpleasr1?lang=fr"
-                                        href="https://twitter.com/pplpleasr1?lang=fr"> <img
+                                    <a target="_blank" href="https://twitter.com/pplpleasr1?lang=fr"> <img
                                             src="./img/sec03/11webp.webp" alt=""></a>
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
@@ -968,12 +1013,13 @@
                         <img src="./img/sec04/safe_image.jpg" class="card-img-top" alt="...">
                         <div style="height: 280px;" class="card-body mb-2">
                             <h5 class="card-title">區塊鏈可以幫助出版商提高受眾信任度，46% 的受訪者表示他們願意為準確的新聞付費</h5>
-                            <p class="card-text">"區塊鏈如何增加信任?艾米·惠特克在《華爾街日報》上寫道。“什麼可以防止篡改歷史記錄——是否有可能為子孫後代保護這些信息？” Haber 和 Stornetta 的解決方案：........。
+                            <p class="card-text">"區塊鏈如何增加信任?艾米·惠特克在《華爾街日報》上寫道。“什麼可以防止篡改歷史記錄——是否有可能為子孫後代保護這些信息？” Haber 和
+                                Stornetta 的解決方案：........。
                             </p>
                         </div>
                         <a class="px-3 py-5 my-5" target="_blank"
-                        href="https://www.facebook.com/nftboard/posts/121145806877121"><button
-                            class="learn-more">LearnMore</button></a>
+                            href="https://www.facebook.com/nftboard/posts/121145806877121"><button
+                                class="learn-more">LearnMore</button></a>
                     </div>
                 </div>
                 <div class="col">
@@ -988,9 +1034,9 @@
                                 這表明很大一部分新用戶在 2021 年炒作之初就對 NFT 感興趣，然後在接下來的幾個月中保持活躍。
                             </p>
                         </div>
-                        <a  class="px-3 py-5 my-5" target="_blank"
-                        href="https://www.facebook.com/nftboard/posts/121061626885539"><button
-                            class="learn-more">LearnMore</button></a>
+                        <a class="px-3 py-5 my-5" target="_blank"
+                            href="https://www.facebook.com/nftboard/posts/121061626885539"><button
+                                class="learn-more">LearnMore</button></a>
                     </div>
                 </div>
                 <div class="col">
@@ -1001,8 +1047,9 @@
                             <p class="card-text">借助 NFT、DeFi 和 VR，我們可以顛覆現有的剝削創作者的模式，而是推動一場革命，引領下一次復興。
                             </p>
                         </div>
-                        <a  class="p-3" target="_blank" href="https://www.facebook.com/nftboard/posts/120000610324974"><button
-                            class="learn-more">LearnMore</button></a>
+                        <a class="p-3" target="_blank"
+                            href="https://www.facebook.com/nftboard/posts/120000610324974"><button
+                                class="learn-more">LearnMore</button></a>
                     </div>
                 </div>
                 <!-- <div class="col">
@@ -1023,7 +1070,7 @@
         </div>
     </section>
 
-    
+
     <!-- 洞察報告-手機板 -->
     <section id="sec04-moblie">
         <!-- <img id="sec04-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png" alt=""> -->
@@ -1036,10 +1083,10 @@
                         <img src="./img/sec04/safe_image.jpg" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">區塊鏈可以幫助出版商提高受眾信任度，46% 的受訪者表示他們願意為準確的新聞付費</h5>
-                            <p class="card-text">"區塊鏈如何增加信任?艾米·惠特克在《華爾街日報》上寫道。“什麼可以防止篡改歷史記錄——是否有可能為子孫後代保護這些信息？” Haber 和 Stornetta 的解決方案：........。
+                            <p class="card-text">"區塊鏈如何增加信任?艾米·惠特克在《華爾街日報》上寫道。“什麼可以防止篡改歷史記錄——是否有可能為子孫後代保護這些信息？” Haber 和
+                                Stornetta 的解決方案：........。
                             </p>
-                            <a target="_blank"
-                                href="https://www.facebook.com/nftboard/posts/121145806877121"><button
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/121145806877121"><button
                                     class="learn-more">LearnMore</button></a>
 
                         </div>
@@ -1057,8 +1104,7 @@
                                 這表明很大一部分新用戶在 2021 年炒作之初就對 NFT 感興趣，然後在接下來的幾個月中保持活躍。
                             </p>
 
-                            <a target="_blank"
-                                href="https://www.facebook.com/nftboard/posts/121061626885539"><button
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/121061626885539"><button
                                     class="learn-more">LearnMore</button></a>
                         </div>
                     </div>
@@ -2324,18 +2370,19 @@
     <div id="sec-adv3-container" class="container-fluid pb-5">
         <div id="sec-adv3-card" class="row">
             <div class="col-12 py-3 col-lg-4">
-                <a target="_blank" href="https://superrare.com/artwork-v2/cavity-25934"><img style="object-fit: cover;" class="img-fluid" src="./img/adv/adv3-1.webp" alt=""> </a>
+                <a target="_blank" href="https://superrare.com/artwork-v2/cavity-25934"><img style="object-fit: cover;"
+                        class="img-fluid" src="./img/adv/adv3-1.webp" alt=""> </a>
                 <p class="text-center fs-4 fw-bolder py-3">Cavity</p>
             </div>
             <div class="col-12 py-3 col-lg-4">
-                <a target="_blank" href="https://superrare.com/artwork-v2/paparazzi-princess-25976"><img  
-                    class="img-fluid" src="./img/adv/adv3-2.webp" alt=""></a>
-                    <p class="text-center fs-4 fw-bolder py-3">Paparazzi Princess</p>
+                <a target="_blank" href="https://superrare.com/artwork-v2/paparazzi-princess-25976"><img
+                        class="img-fluid" src="./img/adv/adv3-2.webp" alt=""></a>
+                <p class="text-center fs-4 fw-bolder py-3">Paparazzi Princess</p>
             </div>
             <div class="col-12 py-3 col-lg-4">
-                <a target="_blank" href="https://superrare.com/artwork-v2/smoking-hero-25987"><img  
-                    class="img-fluid" src="./img/adv/adv3-3.webp" alt=""></a>
-                  <p class="text-center fs-4 fw-bolder py-3">Smoking Hero</p>  
+                <a target="_blank" href="https://superrare.com/artwork-v2/smoking-hero-25987"><img class="img-fluid"
+                        src="./img/adv/adv3-3.webp" alt=""></a>
+                <p class="text-center fs-4 fw-bolder py-3">Smoking Hero</p>
             </div>
 
         </div>
@@ -3557,7 +3604,7 @@
         </div>
     </section>
     <!-- NFT資訊 -->
-    <section id="sec06" class="container-fluid">
+    <section id="sec06" class="">
         <div class="container-fluid">
             <div class="sec06-title">
                 <h1>NFT資訊</h1>
@@ -3570,7 +3617,8 @@
                             <img src="./img/sec06/sec06-9.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">一起在虛擬土地上建設自己的新身分</h5>
-                                <p class="card-text">電腦遊戲早已變成了虛擬空間，您可以在其中構建自己的世界。在本文中，我們將討論 Decentraland 虛擬土地上的建設、參與其中的公司以及構建這一切的團隊。</p>
+                                <p class="card-text">電腦遊戲早已變成了虛擬空間，您可以在其中構建自己的世界。在本文中，我們將討論 Decentraland
+                                    虛擬土地上的建設、參與其中的公司以及構建這一切的團隊。</p>
                                 <div>
 
                                     <a target="_blank"
@@ -3726,99 +3774,17 @@
                 </div>
             </div>
 
-            <!-- <div class="container-fluid">
-                <div class="row">
-                    <div class="col-lg-6">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-01.webp" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <h5 class="card-title">誰要買這個啦！推特執行長賣推文「加密熱潮」新標的，NFT是什麼？</h5>
-                                <p class="card-text">如果果你還沒聽過NFT，應該也快聽說了。NFT正在攻佔網路，並被認為是區塊鏈技術 （blockchain technology）
-                                    的最佳應用實例。</p>
-                                <div>
-
-                                    <a target="https://www.facebook.com/nftboard/posts/105110191814016"
-                                        href="https://www.facebook.com/nftboard/posts/105110191814016"><button
-                                            class="learn-more">LearnMore</button></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-lg-6">
-                        <div id="sec06-2-slider">
-                            <div class="card">
-                            <img src="./img/sec06/sec06-02.webp" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <h5 class="card-title">聊一聊NFT應用場景~門票/體育、活動門票系列</h5>
-                                <p class="card-text">目前，門票偽造和大量囤票是一個亟需解決的大問題。NFT
-                                    在分佈式賬本上保存的記錄具有不可更改性，使得票據可以在區塊鏈上進行獨立驗證和認證，避免了作弊方法。</p>
-
-                                <div>
-                                    <a target="https://www.facebook.com/nftboard/posts/115143380810697"
-                                        href="https://www.facebook.com/nftboard/posts/115143380810697"><button
-                                            class="learn-more">LearnMore</button></a>
-                                </div>
-
-                            </div>
-                        </div>
-                        <div class="card">
-                            <img src="./img/sec06/sec06-02.webp" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <h5 class="card-title">聊一聊NFT應用場景~門票/體育、活動門票系列</h5>
-                                <p class="card-text">目前，門票偽造和大量囤票是一個亟需解決的大問題。NFT
-                                    在分佈式賬本上保存的記錄具有不可更改性，使得票據可以在區塊鏈上進行獨立驗證和認證，避免了作弊方法。</p>
-
-                                <div>
-                                    <a target="https://www.facebook.com/nftboard/posts/115143380810697"
-                                        href="https://www.facebook.com/nftboard/posts/115143380810697"><button
-                                            class="learn-more">LearnMore</button></a>
-                                </div>
-
-                            </div>
-                        </div>
-                        <div class="card">
-                            <img src="./img/sec06/sec06-02.webp" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <h5 class="card-title">聊一聊NFT應用場景~門票/體育、活動門票系列</h5>
-                                <p class="card-text">目前，門票偽造和大量囤票是一個亟需解決的大問題。NFT
-                                    在分佈式賬本上保存的記錄具有不可更改性，使得票據可以在區塊鏈上進行獨立驗證和認證，避免了作弊方法。</p>
-
-                                <div>
-                                    <a target="https://www.facebook.com/nftboard/posts/115143380810697"
-                                        href="https://www.facebook.com/nftboard/posts/115143380810697"><button
-                                            class="learn-more">LearnMore</button></a>
-                                </div>
-
-                            </div>
-                        </div>
-                        <div class="card">
-                            <img src="./img/sec06/sec06-02.webp" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <h5 class="card-title">聊一聊NFT應用場景~門票/體育、活動門票系列</h5>
-                                <p class="card-text">目前，門票偽造和大量囤票是一個亟需解決的大問題。NFT
-                                    在分佈式賬本上保存的記錄具有不可更改性，使得票據可以在區塊鏈上進行獨立驗證和認證，避免了作弊方法。</p>
-
-                                <div>
-                                    <a target="https://www.facebook.com/nftboard/posts/115143380810697"
-                                        href="https://www.facebook.com/nftboard/posts/115143380810697"><button
-                                            class="learn-more">LearnMore</button></a>
-                                </div>
-
-                            </div>
-                        </div>
-                        </div>
-                    </div>
-                </div>
-            </div> -->
         </div>
     </section>
 
 
     <!--sec07 table -電腦版 -->
     <section id="sec07">
-        <a style="text-decoration: none;" target="_blank" href="./atricle.html"><div  class="NFT-Collections-Sales-Volume">
-            <h1>NFT COLLECTIONS SALES VOLUME</h1>
-        </div></a>
+        <a style="text-decoration: none;" target="_blank" href="./atricle.html">
+            <div class="NFT-Collections-Sales-Volume">
+                <h1>NFT COLLECTIONS SALES VOLUME</h1>
+            </div>
+        </a>
         <div class="container-fluid">
             <table id="mytab" class="table">
                 <thead class="llll">
@@ -3873,16 +3839,16 @@
 
     <!-- 合作夥伴 -->
     <section id="sec08">
-        
+
         <div id="sec08-container-box">
             <div id="sec08-container" class="container-fluid" style="padding: 0;">
-                <div id="sec08-title" >
+                <div id="sec08-title">
                     <div class="row">
                         <div class="col-6 col-lg-3">
                             <h1>合作夥伴</h1>
                         </div>
                         <div class="col-6 col-lg-9">
-                            <div  id="OUR-PARTNER">
+                            <div id="OUR-PARTNER">
                                 <h5>OUR PARTNER</h5>
                             </div>
                         </div>
@@ -3914,8 +3880,9 @@
                         <div class="col-3"><a target="_blank" href="https://opentalk.center/"><img
                                     class="sec08-1 img-fluid" src="./img/sec08/logo01_jpg.jpg" alt=""></a></div>
 
-                        <div class="col-3 d-flex align-items-center justfy-content-center"><a target="_blank" href="http://www.choozmo.com/"><img
-                            class="img-fluid" src="./img/choozmo.png" alt=""></a></div>  
+                        <div class="col-3 d-flex align-items-center justfy-content-center"><a target="_blank"
+                                href="http://www.choozmo.com/"><img class="img-fluid" src="./img/choozmo.png"
+                                    alt=""></a></div>
                     </div>
                 </div>
             </div>
@@ -3932,7 +3899,7 @@
                         <div class="col-6 col-lg-3">
                             <h1>交易平台</h1>
                         </div>
-                        <div  class="col-6 col-lg-9">
+                        <div class="col-6 col-lg-9">
                             <div id="TRADING">
 
                                 <h5>TRADING</h5>
@@ -3952,7 +3919,8 @@
                                     src="./img/sec09/sec09-adv-2.png" alt=""></a></div>
 
                         <div class="col-3 py-3"><a target="_blank" href="https://www.binance.com/zh-TW/nft"><img
-                                    class="img-fluid" src="./img/sec09/sec09-adv-3-removebg-preview.png" alt=""></a></div>
+                                    class="img-fluid" src="./img/sec09/sec09-adv-3-removebg-preview.png" alt=""></a>
+                        </div>
 
                         <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img
                                     class="img-fluid" src="./img/sec09/aec09-adv-4rev.png" alt=""></a></div>
@@ -3960,22 +3928,23 @@
                         <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://makersplace.com/"><img
                                     class="img-fluid" src="./img/sec09/sec09-5.png" alt=""></a></div>
 
-                        <div class="col-3 py-3"><a target="_blank" href="https://knownorigin.io/"><img
-                            class="img-fluid" src="./img/sec09/sec09-6.webp" alt=""></a></div>    
-                        
-                            <div style="text-align: center;" class="col-3 py-3"><a target="_blank" href="https://zora.co/"><img
-                                class="sec09-7 img-fluid" src="./img/sec09/sec09-7.webp" alt=""></a></div>    
-                       
-                        
+                        <div class="col-3 py-3"><a target="_blank" href="https://knownorigin.io/"><img class="img-fluid"
+                                    src="./img/sec09/sec09-6.webp" alt=""></a></div>
+
+                        <div style="text-align: center;" class="col-3 py-3"><a target="_blank"
+                                href="https://zora.co/"><img class="sec09-7 img-fluid" src="./img/sec09/sec09-7.webp"
+                                    alt=""></a></div>
+
+
 
                         <div class="sec09-1 col-3 py-3"><a target="_blank" href=" https://superrare.com/"><img
-                            class="img-fluid" src="./img/sec09/sec09-8-removebg-preview.png" alt=""></a></div>                            
+                                    class="img-fluid" src="./img/sec09/sec09-8-removebg-preview.png" alt=""></a></div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-   
+
     <!-- footer -->
     <footer id="footer" class="container-fluid" style="padding:0;margin:0">
         <div class="text" style="padding-right:0;">
@@ -3985,7 +3954,8 @@
             <h2>公司名稱：微生活知識科技公司</h2>
             <a target="_blank" href="https://www.facebook.com/nftboard">
                 <img src="./img/facebook (2).png" alt=""></a>
-            <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png" alt=""></a>    
+            <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
+                    alt=""></a>
             <p>NFTBoard &copy; All Rights Reserved.</p>
         </div>
     </footer>
@@ -4054,7 +4024,7 @@
         });
     </script>
     <!-- sec01-viedeo -->
-   
+
     <!-- sec01news -->
     <script>
         $(document).ready(function () {
@@ -4070,7 +4040,7 @@
                     console.log(msg);
                     const limit = 6;
                     for (var i = 0; i < limit; i++) {
-                        var numb=i+1;
+                        var numb = i + 1;
                         sec01News += ' \
                             <div class="card col-lg-6"> \
                                 <a href="' + msg[i].website + '" " target="_blank"><img class="data-line" src="' + msg[i].newsimg + '" alt=""></a> \
@@ -4087,7 +4057,7 @@
                                 </div> \
                             </div>';
 
-                    }3
+                    } 3
                     $('#sec01-container-card').html(sec01News);
                     // var test = msg[0].newstext1;
 
@@ -4127,7 +4097,7 @@
                     }
                     $('#sec-work-box').html(secwork);
                     $('#sec-work-box').slick({
-                        arrows: true,
+                        arrows: false,
                         slidesToShow: 3,
                         slidesToScroll: 1,
                         infinite: true,

index2.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ip代理服務介紹</title>
+
+
+
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <link rel="stylesheet" href="./style.css">
+    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
+</head>
+
+<body>
+    <section id="sec-works" class="container-fluid pb-5">
+        <div class="sec-work-title">
+            <h1>NFTBoard 成功案例</h1>
+        </div>
+        <div id="sec-work-container" class="container-fluid px-0 mx-0">
+            <div id="sec-work-box" class="row"></div>
+        </div>
+    </section>
+    <section id="sec13">      
+        <form class="ip-service" action="">
+            <img  src="./img/LOGO.png" alt="">
+            <h1 class="my-4">聯繫我們</h1>
+            <label for="name">您的國家區域</label>
+            <input type="text" id="loc" placeholder="請留下您的所在區域" required>
+        
+            <label for="name">姓名</label>
+            <input type="text" id="name" placeholder="請留下您的姓名" required>
+        
+            <label for="eamil">聯絡Email</label>
+            <input type="email" id="email" placeholder="請留下您的Email" required>
+        
+            <label  for="name">聯絡手機</label>
+            <input type="phone" id="phone" placeholder="請留下您的聯繫方式" required>
+        
+            <label for="name">合作方式</label>
+        
+           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">異業合作</label>
+           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">廣告刊登</label>
+           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT代理發行(將您的音樂、美術、攝影、3D等作品對接到全球NFT平台)</label>
+           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT知識產權聯動行銷(透過IP授權與營銷聯動，創造版權新收入)</label>
+        
+           <label class="mt-4" for="name">您的作品網址:(無則免填)</label>
+           <input type="text" id="work" placeholder="請留下您的作品網址" required>
+        
+           <input class="btn" style="opacity: 1;" type="submit" value="提交">
+        </form>
+    </section>
+   
+
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+        crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="./goto.js"></script>
+    <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
+    <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.js"></script>
+
+    <script>
+        $(document).ready(function () {
+            console.log(1)
+            $.ajax({
+                method: "GET",
+                url: "work-box.json",
+                dataType: "json",
+            })
+
+                .done(function (msg) {
+                    var secwork = '';
+                    console.log(msg);
+                    const limit = 7;
+                    for (var i = 0; i < limit; i++) {
+                        secwork += ' \
+                            <div  class="work-box col-12 col-lg-4 p-3  h-100 d-inline-block">\
+                                <div class="card">\
+                                    <a href="' + msg[i].website + '" " target="_blank"><img class="img-fluid" src="' + msg[i].workimg + '" alt=""></a> \
+                                    <div class="card-body">\
+                                        <p style="font-weight: 900; font-size: 20px; ">'+ msg[i].worktext1 + '</p> \
+                                        <p>'+ msg[i].worktext2 + '</p> \
+                                    </div> \
+                                </div> \
+                            </div>';
+
+                    }
+                    $('#sec-work-box').html(secwork);
+                    $('#sec-work-box').slick({
+                        arrows: false,
+                        slidesToShow: 3,
+                        slidesToScroll: 1,
+                        infinite: true,
+                        dots: true,
+
+                        responsive: [
+                            {
+                                breakpoint: 600, // RWD在1024寬度時切換顯示數量
+                                settings: {
+                                    arrows: false,
+                                    slidesToShow: 1, //一次顯示3個
+                                    slidesToScroll: 1,//切換下一頁時移動3個
+                                    infinite: true,
+
+                                }
+                            },
+                        ]
+                    });
+                    // var test = msg[0].newstext1;
+
+                    // $('#jsontest').append(test);
+                });
+
+
+
+        });
+    </script>
+</body>
+
+</html>

style.css

@@ -76,17 +76,20 @@ body .learn-more:hover {
   }
 }
 
-#Navigation #link {
+#Navigation #link,
+#Navigation .link2 {
   padding: 4vw 1vw 2vw 1vw;
 }
 
 @media screen and (max-width: 767px) {
-  #Navigation #link {
+  #Navigation #link,
+  #Navigation .link2 {
     display: none;
   }
 }
 
-#Navigation #link a {
+#Navigation #link a,
+#Navigation .link2 a {
   text-decoration: none;
   color: #fff;
   letter-spacing: 1px;
@@ -97,11 +100,13 @@ body .learn-more:hover {
   position: relative;
 }
 
-#Navigation #link a :hover {
+#Navigation #link a :hover,
+#Navigation .link2 a :hover {
   opacity: 0.8;
 }
 
-#Navigation #link a:after {
+#Navigation #link a:after,
+#Navigation .link2 a:after {
   content: "";
   display: block;
   width: 80%;
@@ -115,18 +120,37 @@ body .learn-more:hover {
   opacity: 0;
 }
 
-#Navigation #link a:hover:after {
+@media screen and (max-width: 767px) {
+  #Navigation #link a:after,
+  #Navigation .link2 a:after {
+    display: none;
+  }
+}
+
+#Navigation #link a:hover:after,
+#Navigation .link2 a:hover:after {
   width: 80%;
   opacity: 1;
 }
 
 @media screen and (max-width: 1024px) {
-  #Navigation #link a {
+  #Navigation #link a,
+  #Navigation .link2 a {
     padding: 5px;
     padding-top: 2vw;
   }
 }
 
+#Navigation .link2 {
+  padding: 2vw 1vw 2vw 1vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation .link2 {
+    display: inline;
+  }
+}
+
 #Navigation #socail-link {
   padding: 4vw 5vw 2vw 1vw;
   text-align: right;
@@ -809,6 +833,10 @@ body .learn-more:hover {
   margin: 0 auto;
 }
 
+#sec-img-adv {
+  width: 100vw;
+}
+
 .wrap {
   text-align: center;
   width: 100vw;
@@ -851,7 +879,7 @@ body .learn-more:hover {
 }
 
 #sec-works #sec-work-box .work-box .card {
-  height: 780px;
+  height: 800px;
   text-align: center;
   display: inline-block !important;
   -webkit-transition: 0.3s;
@@ -2588,6 +2616,12 @@ body .learn-more:hover {
   width: 85vw;
 }
 
+#sec10 hr {
+  height: 1px;
+  background: #525252;
+  opacity: 1;
+}
+
 #sec10 p {
   line-height: 2;
   font-size: 16px;
@@ -2637,4 +2671,62 @@ body .learn-more:hover {
   font-weight: 900;
   font-size: 24px;
 }
+
+.ip-service {
+  width: 50vw;
+  padding: 30px;
+  margin: 30px auto 0;
+  background: #252628;
+  -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
+          box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 10px;
+  font-size: 16px;
+}
+
+@media screen and (max-width: 767px) {
+  .ip-service {
+    width: 100vw;
+  }
+}
+
+.ip-service img {
+  width: 200px;
+}
+
+.ip-service #name,
+.ip-service #email,
+.ip-service #phone,
+.ip-service #loc,
+.ip-service #selector1, .ip-service #work {
+  width: 100%;
+  height: 35px;
+  margin: 10px 0;
+  padding: 20px 5px;
+  background: #1B1C1E;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
+}
+
+.ip-service #selector1 {
+  padding: 10px 5px;
+  background: none;
+  border: none;
+}
+
+.ip-service .btn {
+  width: 200px;
+  margin: 30px 0px;
+  padding: 15px 0;
+  background-color: #93000a;
+  /*   邊框：寬度 樣式 顏色  */
+  border: 0 solid #000;
+  color: #fff;
+}
+
+.ip-service .btn:hover {
+  color: #93000a;
+  background: #fff;
+  border: 1px solid #93000a;
+}
 /*# sourceMappingURL=style.css.map */

style.scss

@@ -60,7 +60,9 @@ body {
             }
         }
     }
-    #link {
+
+    #link,
+    .link2 {
         padding: 4vw 1vw 2vw 1vw;
         @media screen and(max-width:$moblie) {
             display: none;
@@ -74,6 +76,7 @@ body {
             cursor: pointer;
             padding: 15px;
             position: relative;
+
             :hover {
                 opacity: 0.8;
             }
@@ -88,6 +91,9 @@ body {
                 bottom: 0;
                 transition: all 0.3s;
                 opacity: 0;
+                @media screen and(max-width:$moblie) {
+                    display: none;
+                }
             }
             &:hover:after {
                 width: 80%;
@@ -99,6 +105,12 @@ body {
             }
         }
     }
+    .link2 {
+        padding: 2vw 1vw 2vw 1vw;
+        @media screen and(max-width:$moblie) {
+            display: inline;
+        }
+    }
     #socail-link {
         padding: 4vw 5vw 2vw 1vw;
         text-align: right;
@@ -624,6 +636,10 @@ body {
         margin: 0 auto;
     }
 }
+
+#sec-img-adv {
+    width: 100vw;
+}
 .wrap {
     text-align: center;
     width: 100vw;
@@ -656,7 +672,7 @@ body {
     #sec-work-box {
         .work-box {
             .card {
-                height: 780px;
+                height: 800px;
                 text-align: center;
                 display: inline-block !important;
                 transition: 0.3s;
@@ -983,10 +999,9 @@ body {
         padding-bottom: 50px;
         .card {
             border: none;
-         
 
             border-radius: 0%;
-            
+
             .card-title {
                 font-weight: 900;
             }
@@ -2290,40 +2305,43 @@ body {
         }
     }
 }
-#adv01{
-    .adv01-1{
+#adv01 {
+    .adv01-1 {
         @media screen and(max-width:$moblie) {
             width: 100vw;
             margin: 0;
-          }
+        }
 
-        img{
+        img {
             @media screen and(max-width:$moblie) {
-              width: 100vw;
+                width: 100vw;
             }
         }
     }
-    
 }
-#adv02{
-    .adv01-1{
+#adv02 {
+    .adv01-1 {
         width: 90vw;
         @media screen and(max-width:$moblie) {
             width: 100vw;
             margin: 0;
-          }
+        }
 
-        img{
+        img {
             @media screen and(max-width:$moblie) {
-              width: 100vw;
+                width: 100vw;
             }
         }
     }
-    
 }
 // 第二層文章
 #sec10 {
     width: 85vw;
+    hr {
+        height: 1px;
+        background: #525252;
+        opacity: 1;
+    }
     p {
         line-height: 2;
         font-size: 16px;
@@ -2332,37 +2350,89 @@ body {
 
 #sec11 {
     #sec11-container {
-        h1{
+        h1 {
             font-weight: 900;
             font-size: 28px;
-          
         }
         width: 85vw;
-        .sec11-01{
+        .sec11-01 {
             @media screen and(max-width:$moblie) {
                 display: block;
             }
         }
-        .col{
+        .col {
             overflow: hidden;
         }
-       .sec11-img{
-         width: 550px;
-         height: 350px;
-           object-fit: cover;
-           transition: 0.3s;
+        .sec11-img {
+            width: 550px;
+            height: 350px;
+            object-fit: cover;
+            transition: 0.3s;
             cursor: pointer;
-           &:hover{
-            transform: scale(1.02);
-           }
-           @media screen and(max-width:$moblie) {
-            height: 250px;
-        }
-           
-       }
+            &:hover {
+                transform: scale(1.02);
+            }
+            @media screen and(max-width:$moblie) {
+                height: 250px;
+            }
+        }
         h2 {
             font-weight: 900;
             font-size: 24px;
         }
     }
 }
+
+// ip代理服務
+.ip-service {
+    width: 50vw;
+    padding: 30px;
+    margin: 30px auto 0;
+    background: #252628;
+    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
+    color: white;
+    border-radius: 10px;
+    font-size: 16px;
+    @media screen and(max-width:$moblie) {
+        width: 100vw;
+    }
+    img{
+        width: 200px;
+    }
+    #name,
+    #email,
+    #phone,
+    #loc,
+    #selector1,#work {
+        width: 100%;
+        height: 35px;
+        margin: 10px 0;
+        padding: 20px 5px;
+        background:#1B1C1E;
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+    }
+   
+    #selector1{
+        padding: 10px 5px;
+        background:none;
+        border:none;
+    }
+
+    .btn{
+        width: 200px;
+        margin:30px 0px ;
+        padding:15px 0;
+        background-color:#93000a;
+        /*   邊框：寬度 樣式 顏色  */
+        border:0 solid #000;
+        color: #fff;
+        &:hover {
+            color: #93000a;
+            background: #fff;
+            border: 1px solid #93000a;
+        }
+      }
+      
+     
+}