頁面優化

index.html

@@ -209,7 +209,7 @@
         </div>
     </section>
     <!-- 作品集活動區塊 -->
-    <section id="sec-works" class="container-fluid py-3">
+    <section id="sec-works" class="container-fluid pb-5">
         <div class="sec-work-title">
             <h1>NFTBoard Protfolio</h1>
         </div>
@@ -3718,14 +3718,14 @@
     <!-- 合作夥伴 -->
     <section id="sec08">
         
-        <div id="sec08-container-box" class="container-fluid">
-            <div id="sec08-container" class="container-fluid">
-                <div id="sec08-title" class="container-fluid">
+        <div id="sec08-container-box">
+            <div id="sec08-container" class="container-fluid" style="padding: 0;">
+                <div id="sec08-title" >
                     <div class="row">
-                        <div class="col-12 col-lg-3">
+                        <div class="col-6 col-lg-3">
                             <h1>合作夥伴</h1>
                         </div>
-                        <div class="col-12 col-lg-9">
+                        <div class="col-6 col-lg-9">
                             <div  id="OUR-PARTNER">
                                 <h5>OUR PARTNER</h5>
                             </div>
@@ -3769,13 +3769,13 @@
 
         <div id="sec09-container-box">
 
-            <div id="sec09-container" class="container-fluid">
+            <div id="sec09-container" class="container-fluid" style="padding: 0;">
                 <div id="sec09-title">
                     <div class="row">
-                        <div class="col-12 col-lg-3">
+                        <div class="col-6 col-lg-3">
                             <h1>交易平台</h1>
                         </div>
-                        <div  class="col-12 col-lg-9">
+                        <div  class="col-6 col-lg-9">
                             <div id="TRADING">
 
                                 <h5>TRADING</h5>

style.css

@@ -1968,8 +1968,9 @@ body .learn-more:hover {
 
 @media screen and (max-width: 767px) {
   #sec08 {
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(55%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
-    background: linear-gradient(180deg, #414141 55%, transparent 30%, #fff 55%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
+    background: linear-gradient(180deg, #414141 100%, transparent 30%, #fff 55%);
+    padding-top: 10vw;
   }
 }
 
@@ -1994,6 +1995,12 @@ body .learn-more:hover {
   right: 0vw;
 }
 
+@media screen and (max-width: 767px) {
+  #sec08 #sec08-title .col-lg-9 #OUR-PARTNER {
+    top: 0px;
+  }
+}
+
 #sec08 #sec08-title .col-lg-9 #OUR-PARTNER h5 {
   font-size: 5em;
   opacity: 0.8;
@@ -2002,16 +2009,14 @@ body .learn-more:hover {
   text-align: center;
   letter-spacing: 10px;
   font-weight: 900;
-  padding-left: 30px;
   color: #f5f5f5;
 }
 
 @media screen and (max-width: 767px) {
   #sec08 #sec08-title .col-lg-9 #OUR-PARTNER h5 {
-    top: 200px;
-    font-size: 3rem;
+    font-size: 20px;
     letter-spacing: 5px;
-    display: none;
+    text-align: left;
   }
 }
 
@@ -2026,6 +2031,7 @@ body .learn-more:hover {
   #sec08 #sec08-title h1 {
     font-weight: 900;
     font-size: 32px;
+    padding: 0px;
   }
 }
 
@@ -2049,6 +2055,13 @@ body .learn-more:hover {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 }
 
+@media screen and (max-width: 767px) {
+  #sec08 #sec08-container .card {
+    padding-top: 5vw;
+    padding-bottom: 5vw;
+  }
+}
+
 #sec08 #sec08-container .card .adv4 {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -2078,7 +2091,7 @@ body .learn-more:hover {
 
 @media screen and (max-width: 767px) {
   #sec08 #sec08-container .col-3 img {
-    padding: 0;
+    padding: 3px;
   }
 }
 
@@ -2094,7 +2107,20 @@ body .learn-more:hover {
 #sec09 .col-lg-9 #TRADING {
   position: absolute;
   right: -10px;
-  top: -150px;
+  top: -180px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec09 .col-lg-9 #TRADING {
+    top: 5px;
+    right: 30px;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #sec09 .col-lg-9 #TRADING {
+    right: 20px;
+  }
 }
 
 #sec09 .col-lg-9 #TRADING h5 {
@@ -2104,16 +2130,14 @@ body .learn-more:hover {
   /*  通常搭配內距左邊  */
   letter-spacing: 10px;
   font-weight: 900;
-  padding-left: 30px;
   color: #414141;
 }
 
 @media screen and (max-width: 767px) {
   #sec09 .col-lg-9 #TRADING h5 {
-    top: 200px;
-    font-size: 3rem;
+    font-size: 20px;
     letter-spacing: 5px;
-    display: none;
+    text-align: left;
   }
 }
 
@@ -2138,6 +2162,7 @@ body .learn-more:hover {
   #sec09 #sec09-title h1 {
     font-weight: 900;
     font-size: 32px;
+    padding: 5px 0px;
   }
 }
 

style.scss

@@ -481,6 +481,7 @@ body {
 
 // 活動作品集
 #sec-works {
+    
     .sec-work-container {
         width: 85vw;
     }
@@ -1853,7 +1854,8 @@ body {
     background: linear-gradient(180deg, #414141 35%, transparent 30%, #fff 55%);
     position: relative;
     @media screen and(max-width:$moblie) {
-        background: linear-gradient(180deg, #414141 55%, transparent 30%, #fff 55%);
+        background: linear-gradient(180deg, #414141 100%, transparent 30%, #fff 55%);
+        padding-top:10vw;
     }
 
     #sec08-container-box {
@@ -1870,6 +1872,10 @@ body {
                 position: absolute;
                     top: -10px;
                     right: 0vw;
+                    @media screen and(max-width:$moblie) {
+                        top: 0px;
+                         
+                      }
                 h5 {
                     font-size: 5em;
                     opacity: 0.8;
@@ -1878,13 +1884,13 @@ body {
                     text-align: center;
                     letter-spacing: 10px;
                     font-weight: 900;
-                    padding-left: 30px;
+                   
                     color: #f5f5f5;
                     @media screen and(max-width:$moblie) {
-                        top: 200px;
-                        font-size: 3rem;
+                      font-size: 20px;
                         letter-spacing: 5px;
-                        display:none;
+                        text-align: left;
+                       
                     }
                 }
             }
@@ -1899,6 +1905,7 @@ body {
             @media screen and(max-width:$moblie) {
                 font-weight: 900;
                 font-size: 32px;
+                padding: 0px;
             }
         }
         hr {
@@ -1916,6 +1923,10 @@ body {
         .card {
             border: none;
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+            @media screen and(max-width:$moblie) {
+                padding-top: 5vw;
+            padding-bottom: 5vw;
+            }
             .adv4 {
                 display: flex;
                 align-items: center;
@@ -1933,7 +1944,7 @@ body {
                 padding: 40px;
                 object-fit: cover;
                 @media screen and(max-width:$moblie) {
-                    padding: 0;
+                    padding: 3px;
                 }
             }
         }
@@ -1949,7 +1960,14 @@ body {
         #TRADING {
             position: absolute;
             right: -10px;
-            top: -150px;
+            top: -180px;
+            @media screen and(max-width:$moblie) {
+                top:5px;
+                right: 30px;
+            }
+            @media screen and(max-width:350px) {
+                right: 20px;
+            }
             h5 {
                 font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
                 opacity: 0.8;
@@ -1958,13 +1976,12 @@ body {
 
                 letter-spacing: 10px;
                 font-weight: 900;
-                padding-left: 30px;
                 color: #414141;
                 @media screen and(max-width:$moblie) {
-                    top: 200px;
-                    font-size: 3rem;
-                    letter-spacing: 5px;
-                    display:none;
+                    font-size: 20px;
+                      letter-spacing: 5px;
+                      text-align: left;
+                  
                 }
             }
         }
@@ -1987,6 +2004,7 @@ body {
             @media screen and(max-width:$moblie) {
                 font-weight: 900;
                 font-size: 32px;
+                padding: 5px 0px;
             }
         }
         hr {