頁面修正

index.html

@@ -769,7 +769,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/197261231_115136084144760_7228421096070991603_n.png?_nc_cat=109&ccb=1-3&_nc_sid=730e14&_nc_ohc=X3OJOaoolioAX96GsF0&_nc_ht=scontent.ftpe13-2.fna&oh=19d08354444bb8629451b616bb69d1a3&oe=60DEBBF5"
+                        <img src="./img/sec04box2.png"
                             class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
@@ -798,7 +798,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/197261231_115136084144760_7228421096070991603_n.png?_nc_cat=109&ccb=1-3&_nc_sid=730e14&_nc_ohc=X3OJOaoolioAX96GsF0&_nc_ht=scontent.ftpe13-2.fna&oh=19d08354444bb8629451b616bb69d1a3&oe=60DEBBF5"
+                        <img src="./img/sec04box2.png"
                             class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
@@ -839,7 +839,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/197261231_115136084144760_7228421096070991603_n.png?_nc_cat=109&ccb=1-3&_nc_sid=730e14&_nc_ohc=X3OJOaoolioAX96GsF0&_nc_ht=scontent.ftpe13-2.fna&oh=19d08354444bb8629451b616bb69d1a3&oe=60DEBBF5"
+                        <img src="./img/sec04box2.png"
                             class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">APENFT項目是致力於將世界級的藝術品註冊為NFTs。</h5>
@@ -855,7 +855,7 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQHOgMWQbkyqPm6B&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202106%2Farticle-60b598d06e107.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGlZiYPWM75RYW0"
+                        <img src="./img/sec04box2.png"
                             class="card-img-top" alt="...">
                         <div class="card-body">
                             <h5 class="card-title">馬斯克比特幣購車喊卡，真是因為耗能？還是在炒幣？</h5>
@@ -3326,136 +3326,138 @@
         </div>
     </section>
     <!-- NFT資訊 -->
-    <section id="sec06">
+    <section id="sec06"  class="container-fluid">
         <div class="container-fluid">
             <div class="sec06-title">
                 <h1>NFT資訊</h1>
                 <hr>
             </div>
+            <div class="container-fluid">
 
-            <div id="sec06-container" class="row">
-                <div class="col">
-                    <div class="card">
-                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQEfCe0Wa6AbcoTq&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202103%2Farticle-6049c5a18f37c.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGy_UtwawoXrsPb"
-                            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 style="height: 480px" id="sec06-container" class="row">
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQEfCe0Wa6AbcoTq&w=1000&h=522&url=https%3A%2F%2Fstorage.googleapis.com%2Fwww-cw-com-tw%2Farticle%2F202103%2Farticle-6049c5a18f37c.jpg&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQGy_UtwawoXrsPb"
+                                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>
-                <div class="col">
-                    <div class="card">
-                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/201236812_115143364144032_8042637130702346240_n.png?_nc_cat=106&ccb=1-3&_nc_sid=730e14&_nc_ohc=wnzcy7cxZUEAX_BB-hm&_nc_ht=scontent.ftpe13-2.fna&oh=bb799ad063e1de0495c3fa4a220d4372&oe=60E1CE85"
-                            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 class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/201236812_115143364144032_8042637130702346240_n.png?_nc_cat=106&ccb=1-3&_nc_sid=730e14&_nc_ohc=wnzcy7cxZUEAX_BB-hm&_nc_ht=scontent.ftpe13-2.fna&oh=bb799ad063e1de0495c3fa4a220d4372&oe=60E1CE85"
+                                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 class="col">
-                    <div class="card">
-                        <img src="./img/sec06.png" class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">聊一聊NFT應用場景~紀錄/身分驗證、實體資產和文件記錄</h5>
-                            <p class="card-text">NFT
-                                可以將現實世界中的資產，如房產、股票或文件，如資質、執照、病歷、出生和死亡證明等，進行代幣化。NFT也可以應用於身份認證。提供完整記錄。</p>
-
-                            <a target="https://www.facebook.com/nftboard/posts/115144517477250"
-                                href="https://www.facebook.com/nftboard/posts/115144517477250"><button
-                                    class="learn-more">LearnMore</button></a>
-
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="./img/sec06.png" class="card-img-top" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">聊一聊NFT應用場景~紀錄/身分驗證、實體資產和文件記錄</h5>
+                                <p class="card-text">NFT
+                                    可以將現實世界中的資產，如房產、股票或文件，如資質、執照、病歷、出生和死亡證明等，進行代幣化。NFT也可以應用於身份認證。提供完整記錄。</p>
+    
+                                <a target="https://www.facebook.com/nftboard/posts/115144517477250"
+                                    href="https://www.facebook.com/nftboard/posts/115144517477250"><button
+                                        class="learn-more">LearnMore</button></a>
+    
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec06-02webp.webp" class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">聊一聊NFT應用場景~遊戲/藝術</h5>
-                            <p class="card-text">NFT 主要應用場景之一就是遊戲。基於區塊鏈技術的NFT
-                                能夠記錄玩家在遊戲內的狀態和成就，保存遊戲中獲得的物品清單，如武器、電源、車輛、角色等。</p>
-
-                            <a target="https://www.facebook.com/nftboard/posts/115141257477576"
-                                href="https://www.facebook.com/nftboard/posts/115141257477576"><button
-                                    class="learn-more">LearnMore</button></a>
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="./img/sec06-02webp.webp" class="card-img-top" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">聊一聊NFT應用場景~遊戲/藝術</h5>
+                                <p class="card-text">NFT 主要應用場景之一就是遊戲。基於區塊鏈技術的NFT
+                                    能夠記錄玩家在遊戲內的狀態和成就，保存遊戲中獲得的物品清單，如武器、電源、車輛、角色等。</p>
+    
+                                <a target="https://www.facebook.com/nftboard/posts/115141257477576"
+                                    href="https://www.facebook.com/nftboard/posts/115141257477576"><button
+                                        class="learn-more">LearnMore</button></a>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec06-03.png" class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">聊一聊NFT應用場景~音樂/虛擬世界</h5>
-                            <p class="card-text">NFT 市場有望為音樂迷們打開虛擬收藏品的世界。在K-pop 領域，許多歌迷已經接受了NFT 收藏品這種形式——獨立發行的專輯備受追捧。NFT
-                                另一個用例是創建虛擬世界。</p>
-
-                            <a target="https://www.facebook.com/nftboard/posts/115141780810857"
-                                href="https://www.facebook.com/nftboard/posts/115141780810857"><button
-                                    class="learn-more">LearnMore</button></a>
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="./img/sec06-03.png" class="card-img-top" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">聊一聊NFT應用場景~音樂/虛擬世界</h5>
+                                <p class="card-text">NFT 市場有望為音樂迷們打開虛擬收藏品的世界。在K-pop 領域，許多歌迷已經接受了NFT 收藏品這種形式——獨立發行的專輯備受追捧。NFT
+                                    另一個用例是創建虛擬世界。</p>
+    
+                                <a target="https://www.facebook.com/nftboard/posts/115141780810857"
+                                    href="https://www.facebook.com/nftboard/posts/115141780810857"><button
+                                        class="learn-more">LearnMore</button></a>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="col">
-                    <div class="card">
-                        <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/199736752_115142487477453_8806712894992115858_n.png?_nc_cat=108&ccb=1-3&_nc_sid=730e14&_nc_ohc=f632SfbRzKoAX_CCRNo&_nc_ht=scontent.ftpe13-2.fna&oh=d3e9a6af8aca9151d5b8f8cf13c86340&oe=60E22786"
-                            class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">聊一聊NFT應用場景~域名/技能</h5>
-                            <p class="card-text">NFT 正是線上與線下對象銜接過程中真正缺失的環節，未來NFT
-                                不僅會改變藝術，還將改變商業、金融、社會和文化。對於藝術和知識產權來說，免經審查的NFT 是一種寶貴財富和發展平台。</p>
-
-                            <a target="https://www.facebook.com/nftboard/posts/115142517477450"
-                                href="https://www.facebook.com/nftboard/posts/115142517477450"><button
-                                    class="learn-more">LearnMore</button></a>
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="https://scontent.ftpe13-2.fna.fbcdn.net/v/t1.6435-9/199736752_115142487477453_8806712894992115858_n.png?_nc_cat=108&ccb=1-3&_nc_sid=730e14&_nc_ohc=f632SfbRzKoAX_CCRNo&_nc_ht=scontent.ftpe13-2.fna&oh=d3e9a6af8aca9151d5b8f8cf13c86340&oe=60E22786"
+                                class="card-img-top" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">聊一聊NFT應用場景~域名/技能</h5>
+                                <p class="card-text">NFT 正是線上與線下對象銜接過程中真正缺失的環節，未來NFT
+                                    不僅會改變藝術，還將改變商業、金融、社會和文化。對於藝術和知識產權來說，免經審查的NFT 是一種寶貴財富和發展平台。</p>
+    
+                                <a target="https://www.facebook.com/nftboard/posts/115142517477450"
+                                    href="https://www.facebook.com/nftboard/posts/115142517477450"><button
+                                        class="learn-more">LearnMore</button></a>
+                            </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec06-04.png" class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">當下火熱的NFT有沒投資價值？一般人如何通過參與NFT獲得收益？</h5>
-                            <p class="card-text">
-                                NFT就是去中心化金融Defi世界當中的【藝術品投資收藏市場】，但不同於傳統的藝術品投資，經過互聯網加持下的文化產品已經不再僅僅局限於收藏實體的藝術品。</p>
-
-                            <a target="https://www.facebook.com/nftboard/posts/115135607478141"
-                                href="https://www.facebook.com/nftboard/posts/115135607478141"><button
-                                    class="learn-more">LearnMore</button></a>
+    
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="./img/sec06-04.png" class="card-img-top" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">當下火熱的NFT有沒投資價值？一般人如何通過參與NFT獲得收益？</h5>
+                                <p class="card-text">
+                                    NFT就是去中心化金融Defi世界當中的【藝術品投資收藏市場】，但不同於傳統的藝術品投資，經過互聯網加持下的文化產品已經不再僅僅局限於收藏實體的藝術品。</p>
+    
+                                <a target="https://www.facebook.com/nftboard/posts/115135607478141"
+                                    href="https://www.facebook.com/nftboard/posts/115135607478141"><button
+                                        class="learn-more">LearnMore</button></a>
+                            </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="col">
-                    <div class="card">
-                        <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQGPzKGLC4W9ZOtx&w=862&h=450&url=https%3A%2F%2Fwww.blockchainappfactory.com%2Fimages%2Fog_images%2Findex.png&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQE10mYSe0P8G-hh"
-                            class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">聊一聊NFT應用場景時尚/娛樂</h5>
-                            <p class="card-text">與時尚行業相關的NFT 也可以在以太坊區塊鍊網絡上投入使用，推出項目。現在，越來越多的NFT
-                                項目與全球的時尚設計師進行合作，為他們提供知識產權保護。</p>
-
-                            <a target="https://www.facebook.com/nftboard/posts/115144110810624"
-                                href="https://www.facebook.com/nftboard/posts/115144110810624"><button
-                                    class="learn-more">LearnMore</button></a>
+    
+                    <div class="col-lg-3 h-100">
+                        <div class="card">
+                            <img src="https://external.ftpe13-2.fna.fbcdn.net/safe_image.php?d=AQGPzKGLC4W9ZOtx&w=862&h=450&url=https%3A%2F%2Fwww.blockchainappfactory.com%2Fimages%2Fog_images%2Findex.png&cfs=1&ext=jpg&ccb=3-5&_nc_hash=AQE10mYSe0P8G-hh"
+                                class="card-img-top" alt="...">
+                            <div class="card-body">
+                                <h5 class="card-title">聊一聊NFT應用場景時尚/娛樂</h5>
+                                <p class="card-text">與時尚行業相關的NFT 也可以在以太坊區塊鍊網絡上投入使用，推出項目。現在，越來越多的NFT
+                                    項目與全球的時尚設計師進行合作，為他們提供知識產權保護。</p>
+    
+                                <a target="https://www.facebook.com/nftboard/posts/115144110810624"
+                                    href="https://www.facebook.com/nftboard/posts/115144110810624"><button
+                                        class="learn-more">LearnMore</button></a>
+                            </div>
                         </div>
                     </div>
                 </div>

style.css

@@ -536,7 +536,7 @@ body .learn-more:hover {
 
 #sec01 #sec01-container #sec01-container-card .card img {
   text-align: center;
-  width: 38vw;
+  width: 35vw;
   height: 240px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -1278,8 +1278,9 @@ body .learn-more:hover {
 }
 
 #sec06 {
+  width: 100vw;
   padding-top: 5vw;
-  padding-bottom: 5vw;
+  padding-bottom: 10vw;
   background: #525252;
 }
 
@@ -1310,8 +1311,13 @@ body .learn-more:hover {
   }
 }
 
+#sec06 #sec06-container {
+  width: 80vw;
+}
+
 #sec06 #sec06-container .card {
   margin: 10px;
+  height: 480px;
   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);

style.scss

@@ -418,7 +418,7 @@ body {
                 }
                 img {
                     text-align: center;
-                    width: 38vw;
+                    width: 35vw;
                     height: 240px;
                     object-fit: cover;
                     @media screen and(max-width:$moblie) {
@@ -1114,8 +1114,9 @@ body {
 }
 // sec06 NFT資訊
 #sec06 {
+    width: 100vw;
     padding-top: 5vw;
-    padding-bottom: 5vw;
+    padding-bottom: 10vw;
     background: #525252;
     @media screen and(max-width:$moblie) {
         background: #313131;
@@ -1138,8 +1139,10 @@ body {
     }
 
     #sec06-container {
+        width: 80vw;
         .card {
             margin: 10px;
+            height: 480px;
             img {
                 padding: 5px;
                 height: 150px;