版面修正

index.html

@@ -3685,11 +3685,11 @@
 
     <!-- 合作夥伴 -->
     <section id="sec08">
+        <div id="sec08-title">
+            <h1>合作夥伴</h1>
+        </div>
+        
         <div id="sec08-container-box">
-            <div id="sec08-title">
-                <h1>合作夥伴</h1>
-              
-            </div>
             <div id="sec08-container" class="container-fluid">
                 <div class="card">
 
@@ -3705,9 +3705,9 @@
                         <div class="col-3"><a target="_blank" href="https://www.ampaimusic.com/"><img class="img-fluid" src="./img/sec08/sec06-01.jpg" alt=""></a>
                         </div>
                         <div class="col-3"><a target="_blank"
-                                href="https://www.oursong.com/party/vbloqxgl?redeem_code=XJBONRDL"></a><img
-                                class="img-fluid" src="./img/sec08/oursong.jpg" alt=""></div>
-                                
+                                href="https://www.oursong.com/party/vbloqxgl?redeem_code=XJBONRDL"><img
+                                class="img-fluid" src="./img/sec08/oursong.jpg" alt=""></a></div>
+
                         <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>
 

style.css

@@ -1960,7 +1960,9 @@ body .learn-more:hover {
 }
 
 #sec08 {
-  padding-top: 5vw;
+  padding-bottom: 5vw;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
+  background: linear-gradient(180deg, #414141 35%, transparent 30%, #fff 55%);
 }
 
 #sec08 #sec08-container-box {
@@ -1970,11 +1972,12 @@ body .learn-more:hover {
 }
 
 #sec08 #sec08-title {
-  padding: 5vw;
   background: #414141;
+  padding: 3vw 0;
 }
 
 #sec08 #sec08-title h1 {
+  text-align: center;
   padding: 15px;
   color: #fff;
   font-size: 45px;
@@ -2007,9 +2010,9 @@ body .learn-more:hover {
 }
 
 #sec08 #sec08-container .card {
-  padding-top: 5vw;
-  padding-bottom: 5vw;
   border: none;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 }
 
 #sec08 #sec08-container .card .adv4 {
@@ -2061,6 +2064,7 @@ body .learn-more:hover {
 }
 
 #sec09 #sec09-title h1 {
+  text-align: center;
   color: #fff;
   font-size: 45px;
   font-weight: 900;
@@ -2113,21 +2117,44 @@ body .learn-more:hover {
           align-items: center;
 }
 
-#sec09 #sec09-container .sec09-1 {
-  padding: 70px;
+#sec09 #sec09-container .col-3 {
+  margin: 10px 0;
 }
 
-#sec09 #sec09-container .col-4 {
-  margin: 10px 0;
-  padding: 15px;
+@media screen and (max-width: 1025px) {
+  #sec09 #sec09-container .col-3 {
+    padding: 15px;
+  }
 }
 
-#sec09 #sec09-container .col-4 img {
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-container .col-3 {
+    padding: 5px;
+  }
+}
+
+#sec09 #sec09-container .col-3 img {
   padding: 50px;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-container .col-3 img {
+    padding: 0px;
+  }
+}
+
+#sec09 #sec09-container .sec09-1 {
+  padding: 70px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec09 #sec09-container .sec09-1 {
+    padding: 20px;
+  }
+}
+
 #footer {
   width: 100vw;
   text-align: center;

style.scss

@@ -1850,17 +1850,20 @@ body {
 }
 
 #sec08 {
-    padding-top: 5vw;
-
+    
+    padding-bottom: 5vw;
+    background: linear-gradient(180deg, #414141 35%, transparent 30%, #fff 55%);
     #sec08-container-box {
         background-size: contain;
         background-repeat: no-repeat;
         background-blend-mode: overlay;
     }
     #sec08-title {
-        padding: 5vw;
         background: #414141;
+        padding:3vw 0;
+
         h1 {
+            text-align: center;
             padding: 15px;
             color: #fff;
             font-size: 45px;
@@ -1887,10 +1890,9 @@ body {
         text-align: center;
         
         .card {
-            padding-top: 5vw;
-            padding-bottom: 5vw;
+            
             border: none;
-
+            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             .adv4 {
                 display: flex;
                 align-items: center;
@@ -1930,7 +1932,7 @@ body {
         background: #414141;
 
         h1 {
-           
+           text-align: center;
             color: #fff;
             font-size: 45px;
             font-weight: 900;
@@ -1968,15 +1970,30 @@ body {
             }
         }
 
-        .sec09-1{
-            padding: 70px;
-        }
-        .col-4 {
+        
+        .col-3 {
             margin: 10px 0;
-            padding: 15px;
+            @media screen and(max-width:$desktop) {
+                padding: 15px;
+            }
+
+            @media screen and(max-width:$moblie) {
+                padding: 5px;
+           
+            }
             img {
                padding: 50px;
                 object-fit: cover;
+                @media screen and(max-width:$moblie) {
+                    padding: 0px;
+                }
+            }
+        }
+        .sec09-1{
+            padding: 70px;
+            
+            @media screen and(max-width:$moblie) {
+                padding: 20px;
             }
         }
     }