內容修正

NFTContent.json

@@ -1,7 +1,7 @@
 [
     {
       
-        "newsimg": "img/sec10/S__43253764.webp",
+        "newsimg": "img/sec10/sec10-01.webp",
         "newstext1": "NFTBoard 與akaswap 即將於2021/8/7(六) 晚上舉辦一場精緻的「NFT 方舟加密藝術X akaSwap跨界直播」活動",
         "newstext2": "這次活動特邀大家熟知的北科大助理教授葛如鈞(寶博士)擔任主持人，活動分為三階段，第一階段：主持人與科文双融暨文化科技發展聯盟執行長黃宛華、台大資訊網媒所教授洪一平，對談『數位內容產業與NFT結合發展趨勢』。第二階段：主持人與 akaswap 共同創辦人、NFT新媒體藝術家王新仁、洪司丞，對談『akaswap創辦理念與構想』。第三階段：主持人與 新媒體藝術家姚仲涵、聲音藝術家許雁婷，對談『NFT創作』。",
         "website": "atricle.html"

atricle.html

@@ -23,74 +23,7 @@
                 <a href="./index.html"><img src="./img/LOGO.png" alt=""></a>
             </div>
             <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">
                     相關新聞
@@ -140,6 +73,21 @@
             </div>
         </div>
     </section>
+    <div class="menu-box" class="container-fluid" style="padding:0;margin:0 ">
+        <div class="menu-box2">
+            <div style="text-align: right;">
+                <img class="close" src="./img/close.png" alt="">
+            </div>
+            <a class="link" target="_blank" href="./index.html">首頁</a>
+            <hr>
+            <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>
+        </div>
+
+    </div>
 
     <section class="py-5 bg-white mb-5"></section>
     <section id="adv01" class="py-5 bg-light">
@@ -149,7 +97,7 @@
             </a>
         </div>
     </section>
-
+   
     <section id="sec10" class="container-fluid pt-3">
         <div class="row">
             <div class="content col-lg-7">
@@ -159,7 +107,7 @@
                 <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>2021/8/5</span>
                 <hr>
-                <img class="img-fluid" src="./img/sec10/S__43253764.webp" alt="">
+                <img class="img-fluid" src="./img/sec10/sec10-01.webp" alt="">
                 <div class="sec11-content mt-3">
                     <p> 這次活動特邀大家熟知的北科大助理教授葛如鈞(寶博士)擔任主持人，活動分為三階段，</p>
                     <p>  第一階段：主持人與科文双融暨文化科技發展聯盟執行長黃宛華、台大資訊網媒所教授洪一平，對談『數位內容產業與NFT結合發展趨勢』。</p>

goto.js

@@ -133,8 +133,8 @@ $('#sec04-moblie-container').slick({
 // });
 
 // 手機板menu彈跳視窗
-$("#menu-box2").hide();
-$("#menu-box").hide();
+$(".menu-box2").hide();
+$(".menu-box").hide();
 
 $(".link").click(function () {
   $("#menu-box").fadeOut("slow", function () {
@@ -144,14 +144,14 @@ $(".link").click(function () {
 });
 
 $("#menu-btn1").click(function () {
-  $("#menu-box").fadeIn();
-  $("#menu-box2").fadeIn();
+  $(".menu-box").fadeIn();
+  $(".menu-box2").fadeIn();
 
 });
 
 $(".close").click(function () {
-  $("#menu-box").fadeOut();
-  $("#menu-box2").fadeOut();
+  $(".menu-box").fadeOut();
+  $(".menu-box2").fadeOut();
 
 });
 

index.html

@@ -93,8 +93,8 @@
         </div>
     </section>
     <!-- 手機板行動選單 -->
-    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
-        <div id="menu-box2">
+    <div class="menu-box" class="container-fluid" style="padding:0;margin:0 ">
+        <div class="menu-box2">
             <div style="text-align: right;">
                 <img class="close" src="./img/close.png" alt="">
             </div>

style.css

@@ -208,7 +208,7 @@ body .learn-more:hover {
   }
 }
 
-#menu-box {
+.menu-box {
   width: 40vw;
   right: 0px;
   position: fixed;
@@ -218,19 +218,19 @@ body .learn-more:hover {
 }
 
 @media screen and (min-width: 1025px) {
-  #menu-box {
+  .menu-box {
     display: none;
   }
 }
 
-#menu-box hr {
+.menu-box hr {
   margin: 5px auto !important;
   width: 25vw;
   background: #fff;
   opacity: 1 !important;
 }
 
-#menu-box #menu-box2 {
+.menu-box .menu-box2 {
   padding-bottom: 5vw;
   position: relative;
   width: 40vw;
@@ -239,11 +239,11 @@ body .learn-more:hover {
   text-align: center;
 }
 
-#menu-box #menu-box2 .close {
+.menu-box .menu-box2 .close {
   padding: 30px 15px 15px 15px;
 }
 
-#menu-box #menu-box2 a {
+.menu-box .menu-box2 a {
   display: inline-block;
   text-decoration: none;
   color: #fff;
@@ -779,6 +779,12 @@ body .learn-more:hover {
   color: #9b9b9b;
 }
 
+@media screen and (max-width: 767px) {
+  #sec01 #sec01-container #sec01-container-card .card h1 {
+    padding: 5px;
+  }
+}
+
 #sec01 #sec01-container #sec01-container-card .card p {
   padding: 5px;
   font-size: 18px;
@@ -2658,6 +2664,12 @@ body .learn-more:hover {
   font-size: 43px;
 }
 
+@media screen and (max-width: 767px) {
+  #sec10 .sec10-title {
+    font-size: 26px;
+  }
+}
+
 #sec10 hr {
   height: 1px;
   background: #525252;

style.scss

@@ -149,7 +149,7 @@ body {
 }
 
 // 行動版彈跳式選單
-#menu-box {
+.menu-box {
     width: 40vw;
     right: 0px;
     position: fixed;
@@ -166,7 +166,7 @@ body {
         background: #fff;
         opacity: 1 !important;
     }
-    #menu-box2 {
+    .menu-box2 {
         padding-bottom: 5vw;
         position: relative;
         width: 40vw;
@@ -586,6 +586,9 @@ body {
                     font-size: 48px;
                     font-weight: 900;
                     color: #9b9b9b;
+                    @media screen and(max-width:$moblie) {
+                        padding: 5px;
+                    }
                 }
                 p {
                     padding: 5px;
@@ -2354,6 +2357,9 @@ body {
     width: 85vw;
     .sec10-title{
         font-size: 43px;
+        @media screen and(max-width:$moblie) {
+            font-size: 26px;
+        }
     }
     hr {
         height: 1px;