修正

index.html

@@ -64,6 +64,7 @@
             <hr>
             <a href="https://www.facebook.com/nftboard">粉絲專頁</a>
             <hr>
+            <a class="link" data-gt-target="#sec08" data-gt-duration="500" data-gt-offset="" href="https://www.facebook.com/nftboard">合作夥伴</a>
         </div>
 
     </div>
@@ -190,6 +191,57 @@
             <div id="sec01-container-card" class="row"></div>
         </div>
     </section>
+    <!-- 廣告區塊 -->
+    <section id="sec-adv" >
+        <div id="sec-adv-container" class="container-fluid w-auto py-5">
+            <div id="sec01-container-card" class="row" >
+               
+                <div class="col-12 py-3 col-lg-6">
+                    <a target="" href=""><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"></a><img class="img-fluid" src="./img/adv/adv2.jpg" alt="">
+                </div>
+                                
+            </div>
+        </div>
+    </section>
+    <section id="sec-works" class="container-fluid py-3" >
+        <div class="sec-work-title">
+            <h1>作品</h1>
+        </div>
+        <div id="sec-work-container" class="container-fluid">
+            <div id="sec-work-box" class="row" >
+                <!-- <div class="col-lg-4">
+                    <div class="card">
+                        <a href=""><img src="./img/work/work1webp.webp" class="card-img-top" alt="..."></a>
+                        <div class="card-body">
+                            <h1>標題</h1>
+                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        </div>
+                      </div>
+                </div>
+                <div class="col-lg-4">
+                    <div class="card">
+                        <img src="./img/work/work2webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h1>標題</h1>
+                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        </div>
+                      </div>
+                </div>
+                <div class="col-lg-4">
+                    <div class="card">
+                        <img src="./img/work/work3webp.webp" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h1>標題</h1>
+                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        </div>
+                      </div>
+                </div> -->
+            </div>
+        </div>
+    </section>
     <!-- sec02-Top-box- 電腦版-->
     <section id="sec02">
         <div id="sec02-container" class="container-fluid">
@@ -386,7 +438,7 @@
                                     <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 href="">
+                                            <a target="_blank"   href="https://www.youtube.com/watch?v=uZtX_3TRdiE">
                                                 <h1>楊夏蕙</h1>
                                             </a>
                                         </div>
@@ -527,15 +579,15 @@
     </section>
     <!-- 排名區塊-手機板 -->
     <section id="sec03-moblie">
-        <div id="sec03-table" class="container-fluid" style="padding:0;">
-            <div class="row" style="padding:0; margin: 0; width: 90vw;">
-                <div id="sec03-title-1" class="col-6" style="padding:0; margin: 0;">
-                    <h1 class="sec03-table-title">COMMUNITY PICKS</h1>
-                </div>
-                <div id="sec03-title-2" class="col-6" style="padding:0; margin: 0;">
-                    <h1 class="sec03-table-title2">PROMOTED CREATIONS</h1>
-                </div>
+        <div class="row" style="padding:0; margin: 0 auto; width: 95vw;">
+            <div id="sec03-title-1" class="col-6" style="padding:0; margin: 0;">
+                <h1 class="sec03-table-title">COMMUNITY PICKS</h1>
+            </div>
+            <div id="sec03-title-2" class="col-6" style="padding:0; margin: 0;">
+                <h1 class="sec03-table-title2">PROMOTED CREATIONS</h1>
             </div>
+        </div>
+        <div id="sec03-table" class="container-fluid" style="padding:0;">
             <img id="sec03-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png"
                 alt="">
             <div id="sec03-slider" class="row">
@@ -639,7 +691,7 @@
                                     <img src="./img/sec03/top3webp.webp" alt="">
                                     <div class="sec03-table-text" style="display: inline-block ;">
                                         <div>
-                                            <a href="">
+                                            <a  target="_blank" href="https://www.youtube.com/watch?v=uZtX_3TRdiE">
                                                 <h1>楊夏蕙</h1>
                                             </a>
                                         </div>
@@ -775,7 +827,7 @@
             </div>
             <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
                 <div class="col">
-                    <div class="card">
+                    <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/sec04-img-01.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
@@ -790,7 +842,7 @@
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card">
+                    <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/sec04-img02.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
@@ -804,7 +856,7 @@
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card">
+                    <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/sec04-img-01.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
@@ -817,7 +869,7 @@
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card">
+                    <div class="card h-100 d-inline-block">
                         <img src="./img/sec04/sec04-img02.webp" class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
@@ -3366,11 +3418,10 @@
                 <hr>
             </div>
             <div class="container-fluid">
-
-                <div style="height: 480px" id="sec06-container" class="row">
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-01.webp" class="card-img-top" alt="...">
+                <div  id="sec06-container" class="row">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <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）
@@ -3385,9 +3436,9 @@
                         </div>
 
                     </div>
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-02.webp" class="card-img-top" alt="...">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <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
@@ -3402,9 +3453,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-03.png" class="card-img-top" alt="...">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <img  src="./img/sec06/sec06-03.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~紀錄/身分驗證、實體資產和文件記錄</h5>
                                 <p class="card-text">NFT
@@ -3417,9 +3468,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-04.webp" class="card-img-top" alt="...">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <img  src="./img/sec06/sec06-04.webp" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~遊戲/藝術</h5>
                                 <p class="card-text">NFT 主要應用場景之一就是遊戲。基於區塊鏈技術的NFT
@@ -3431,8 +3482,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
                             <img src="./img/sec06/sec06-05.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~音樂/虛擬世界</h5>
@@ -3446,9 +3497,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-06.png" class="card-img-top" alt="...">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <img  src="./img/sec06/sec06-06.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景~域名/技能</h5>
                                 <p class="card-text">NFT 正是線上與線下對象銜接過程中真正缺失的環節，未來NFT
@@ -3461,9 +3512,9 @@
                         </div>
                     </div>
 
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-07.png" class="card-img-top" alt="...">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <img  src="./img/sec06/sec06-07.png" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">當下火熱的NFT有沒投資價值？一般人如何通過參與NFT獲得收益？</h5>
                                 <p class="card-text">
@@ -3476,9 +3527,9 @@
                         </div>
                     </div>
 
-                    <div class="col-lg-3 h-100">
-                        <div class="card">
-                            <img src="./img/sec06/sec06-08.jpg" class="card-img-top" alt="...">
+                    <div class="col-lg-3 py-3">
+                        <div class="card h-100 d-inline-block">
+                            <img  src="./img/sec06/sec06-08.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
                                 <h5 class="card-title">聊一聊NFT應用場景時尚/娛樂</h5>
                                 <p class="card-text">與時尚行業相關的NFT 也可以在以太坊區塊鍊網絡上投入使用，推出項目。現在，越來越多的NFT
@@ -3694,17 +3745,17 @@
                 <div class="card">
 
                     <div class="row">
-                        <div class="col-4"><a href="https://mintable.app/browse"><img src="./img/sec09/sec09-adv-1.jpeg"
+                        <div class="col-4"><a target="_blank" href="https://mintable.app/browse"><img src="./img/sec09/sec09-adv-1.jpeg"
                                     alt=""></a></div>
-                        <div class="col-4"><a href="https://opensea.io/"><img src="./img/sec09/sec09-adv-2.png"
+                        <div class="col-4"><a target="_blank" href="https://opensea.io/"><img src="./img/sec09/sec09-adv-2.png"
                                     alt=""></a></div>
-                        <div class="col-4"><a href="https://www.binance.com/zh-TW/nft"><img
+                        <div class="col-4"><a target="_blank" href="https://www.binance.com/zh-TW/nft"><img
                                     src="./img/sec09/sec09-adv-3.jpg" alt=""></a></div>
-                        <div class="col-4"><a href="https://mintable.app/browse"><img src="./img/sec09/sec09-adv-4.png"
+                        <div class="col-4"><a target="_blank" href="https://mintable.app/browse"><img src="./img/sec09/sec09-adv-4.png"
                                     alt=""></a></div>
-                        <div class="col-4" style="opacity: 0;"><a href="https://mintable.app/browse"><img
+                        <div class="col-4" style="opacity: 0;"><a target="_blank" href="https://mintable.app/browse"><img
                                     src="./img/sec09/sec09-adv-4.png" alt=""></a></div>
-                        <div class="col-4 adv4"><a href="https://makersplace.com/"><img
+                        <div class="col-4 adv4"><a target="_blank"  href="https://makersplace.com/"><img 
                                     src="./img/sec09/sec09-adv-5.png" alt=""></a></div>
                     </div>
                 </div>
@@ -3815,7 +3866,7 @@
                                     </div> \
                                         <div class="col-10"> \
                                             <a href="' + msg[i].website + '" " target="_blank"> \
-                                                <p style="font-weight: 900; font-size: 22px;">'+ msg[i].newstext1 +'</p> \
+                                                <p style=" font-weight: 900; font-size: 22px;">'+ msg[i].newstext1 +'</p> \
                                             </a> \
                                             <p>'+ msg[i].newstext2 +'</p> \
                                         </div> \
@@ -3833,7 +3884,43 @@
 
         });
     </script>
-   
+   <!-- 作品集區域 -->
+   <script>
+    $(document).ready(function () {
+        
+        $.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-lg-4  p-3">\
+                                <div class="card h-100 d-inline-block">\
+                                    <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);
+                // var test = msg[0].newstext1;
+
+                // $('#jsontest').append(test);
+            });
+
+
+
+    });
+</script>
 </body>
 
 </html>

style.css

@@ -18,12 +18,12 @@
 }
 
 body {
+  width: 100vw;
   background: #fff;
 }
 
 body .learn-more {
   color: #fff;
-  width: 30%;
   height: 50px;
   margin: 10px 0px;
   font-size: 16px;
@@ -616,6 +616,27 @@ body .learn-more:hover {
   }
 }
 
+#sec-works .sec-work-container {
+  width: 85vw;
+}
+
+#sec-works #sec-work-box .work-box .card {
+  text-align: center;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+#sec-works #sec-work-box .work-box .card:hover {
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+}
+
+#sec-works .sec-work-title h1 {
+  font-size: 45px;
+  font-weight: 900;
+  padding: 15px;
+}
+
 #sec02 {
   background: #414141;
   padding: 3vw;
@@ -836,6 +857,13 @@ body .learn-more:hover {
   color: #9b9b9b;
 }
 
+@media screen and (max-width: 350px) {
+  #sec03-moblie .sec03-table-title,
+  #sec03-moblie .sec03-table-title2 {
+    font-size: 12px;
+  }
+}
+
 #sec03-moblie .contant-toggle {
   display: inline-block;
   color: #000;
@@ -977,7 +1005,7 @@ body .learn-more:hover {
 }
 
 #sec04 .learn-more {
-  width: 45%;
+  width: 120px;
 }
 
 #sec04 #sec04-container {
@@ -1745,14 +1773,14 @@ body .learn-more:hover {
 
 #sec06 #sec06-container .card {
   margin: 10px;
-  height: 480px;
+  display: inline-block !important;
+  height: 480px !important;
   border-radius: 0%;
   -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
           box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
 }
 
 #sec06 #sec06-container .card img {
-  padding: 5px;
   height: 150px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -1760,6 +1788,7 @@ body .learn-more:hover {
 
 #sec06 #sec06-container .card .card-title {
   font-weight: 900;
+  font-size: 18px;
 }
 
 #sec06 #sec06-container .card .learn-more {
@@ -1996,12 +2025,19 @@ body .learn-more:hover {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 #sec08 #sec08-container .col-3 {
   margin: 10px 0;
 }
 
+#sec08 #sec08-container .col-3 img {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 #sec09 #sec09-container-box {
   background-size: contain;
   background-repeat: no-repeat;

work-box.json

@@ -0,0 +1,18 @@
+[{"work":1,"workimg":"img/work/work1webp.webp","worktext1":"由77期DFUN封面集合而成的馬修",
+    "worktext2":"透過DFUN共77期雜誌裡可以看見這些人生故事，他們的作品如何影響時代，從中不僅可以看見受景仰的名家最貼近內心的聲音，也能看見我們走過的時代痕跡，從時代的細節裡看見心之所向。","website":"https://www.oursong.com/project/jdwppzvw/song-share-card"},
+
+{"work":2,"workimg":"img/work/work2webp.webp","worktext1":"1970 Marlboro香菸手繪廣告稿",
+    "worktext2":"1970年代萬寶路香菸創作一系列的關於西部牛仔抽萬寶路香菸的廣告，這些廣告的共同主題是“每個男人都能像他們一樣，歡迎來到萬寶路的世界”。","website":"https://www.oursong.com/project/dprnydqw/song-share-card"},
+
+{"work":3,"workimg":"img/work/work3webp.webp","worktext1":"胖叔的春天",
+    "worktext2":"這是一顆胖大的牙齒大叔，非常自得其樂，穿著粉紅小短裙，帶著墨鏡，享受人生，奮力追求屬於自己的愛情！","website":"https://www.oursong.com/project/jdrppvvr/song-share-card"},
+
+{"work":4,"workimg":"img/work/work4webp.webp","worktext1":"穿上建築台北101",
+    "worktext2":"『建築是生活的一部分，是我表達對於世界看法的一種載體，如同塗鴉，也如同書寫，我希望透過各種形式的作品來觀看自己。』","website":"https://www.oursong.com/song-share-card/pgleakwx"},
+{"work":5,"workimg":"img/work/work5webp.webp","worktext1":"科學與信仰",
+    "worktext2":"科學與信仰這幅圖的畫面隱喻科學的許多重疊的立體三角形中隱藏著一只眼，雖然我們的思想與言行可以躲避人類的眼睛，卻躲避不過此全視之眼。","website":"https://www.oursong.com/project/nxryxovw/song-share-card"},
+{"work":6,"workimg":"img/work/work6webp.webp","worktext1":"夫人的一天",
+    "worktext2":"『每一張照片都是故事，很有生命力，讓人有收藏的欲望』麥羨雲將意念灌注到照片裡，用他的攝影譜下時尚界的篇篇精采。","website":"https://www.oursong.com/song-share-card/vxdvwaax"},
+{"work":7,"workimg":"img/work/work7webp.webp","worktext1":"Tsz Reborn",
+    "worktext2":"胡峻豪Hu Chun Hao胡峻豪出生於台北市，大家都叫我刺刺。個性善良，幽默，悶騷。喜歡貓咪，陽光，健身，音樂。興趣是歌唱，鋼琴，攝影。街舞是我的專長。","website":"https://www.oursong.com/song-share-card/bgpbydlg"}
+]