頁面優化修正

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -697,7 +697,7 @@
                         <div>社群營造(一)</div>
                     </div>
                 </div>
-                <div class="boxs-chedule1" style="padding-bottom:5vw;">
+                <div class="boxs-chedule1"  style="padding-top: 15vw;">
                     <h1>Day1下午</h1>
                     <div class="card"  style="padding: 54px 42px;">
                         <div>社群營造(二)</div>
@@ -712,7 +712,7 @@
                         <div>文案撰寫(一)</div>
                     </div>
                 </div>
-                <div class="boxs-chedule1">
+                <div class="boxs-chedule1" style="padding-top: 15vw;">
                     <h1>Day2下午</h1>
                     <div class="card"  style="padding: 54px 42px;">
                         <div>文案撰寫(二)</div>
@@ -721,13 +721,13 @@
                 <img class="arrow-right" src="./img/course-schedule/arrow-right.png" alt="">
             </div>
             <div class="box col-10">
-                <div class="boxs-chedule1">
+                <div class="boxs-chedule1" >
                     <h1>Day3上午</h1>
                     <div class="card" style="padding: 54px 42px;">
                         <div>手機拍片(一)</div>
                     </div>
                 </div>
-                <div class="boxs-chedule1">
+                <div class="boxs-chedule1"  style="padding-top: 15vw;">
                     <h1>Day3下午</h1>
                     <div class="card" style="padding: 54px 42px;">
                         <div>手機拍片(二)</div>

style.css

@@ -1978,7 +1978,7 @@ body #btn-a #mobile-btn:hover {
 
 @media screen and (max-width: 767px) {
   .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
-    padding-top: 5vw;
+    padding-top: 20vw;
   }
 }
 
@@ -2025,6 +2025,16 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
+.mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots {
+  width: 85%;
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots {
+    width: 95%;
+  }
+}
+
 @media screen and (min-width: 1024px) {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 {
     height: 691px;
@@ -2056,7 +2066,7 @@ body #btn-a #mobile-btn:hover {
 
 @media screen and (max-width: 767px) {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
-    padding-top: 10vw;
+    padding-top: 20vw;
   }
 }
 
@@ -2233,7 +2243,7 @@ body #btn-a #mobile-btn:hover {
   text-align: center;
   padding-top: 4.5rem;
   color: #646464;
-  padding-bottom: 8rem !important;
+  padding-bottom: 1rem !important;
   overflow: hidden;
   position: relative;
 }
@@ -2280,10 +2290,6 @@ body #btn-a #mobile-btn:hover {
   outline: none !important;
 }
 
-.sec05 #card-box2 .slick-dots {
-  margin-top: 10px;
-}
-
 .sec05 #card-box2 .slick-dots li {
   margin: 0 10px;
 }
@@ -2335,12 +2341,8 @@ body #btn-a #mobile-btn:hover {
   }
 }
 
-.sec05 #card-box2 .box {
-  padding-bottom: 5vw !important;
-}
-
 .sec05 #card-box2 .box .boxs-chedule1 {
-  padding-bottom: 20vw;
+  padding-bottom: 5vw;
 }
 
 .sec05 #card-box2 .box .boxs-chedule1 h1 {
@@ -2348,11 +2350,6 @@ body #btn-a #mobile-btn:hover {
   text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 }
 
-.sec05 #card-box2 .box .boxs-chedule2 h1 {
-  color: #fff;
-  text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
-}
-
 .sec05 #card-box2 .box .boxs-chedule1,
 .sec05 #card-box2 .box .boxs-chedule2 {
   margin: 0px 30px;

style.scss

@@ -1070,7 +1070,7 @@ body {
                                 padding-top: 5vw;
                             }
                             @media screen and(max-width:$moblie) {
-                                padding-top: 5vw;
+                                padding-top: 20vw;
                             }
                             @media screen and(max-width:350px) {
                                 padding-top: 15vw;
@@ -1112,6 +1112,12 @@ body {
 .mobile01-3 {
     .mobile-box3 {
         .Course-mobile01 {
+            .slick-dots {
+                width: 85%;
+                @media screen and(max-width:350px) {
+                    width: 95%;
+                }
+            }
             .card-box-3 {
                 @media screen and(min-width:$table) {
                     height: 691px;
@@ -1135,7 +1141,7 @@ body {
                                 padding-top: 4vw;
                             }
                             @media screen and(max-width:$moblie) {
-                                padding-top: 10vw;
+                                padding-top: 20vw;
                             }
 
                             @media screen and(max-width:350px) {
@@ -1270,9 +1276,8 @@ body {
 .sec05 {
     text-align: center;
     padding-top: 4.5rem;
-
     color: $title-color;
-    padding-bottom: 8rem !important;
+    padding-bottom: 1rem !important;
     overflow: hidden;
     position: relative;
 
@@ -1307,7 +1312,7 @@ body {
             outline: none !important;
         }
         .slick-dots {
-            margin-top: 10px;
+     
 
             li {
                 margin: 0 10px;
@@ -1354,20 +1359,15 @@ body {
             }
         }
         .box {
-            padding-bottom: 5vw !important;
+         
             .boxs-chedule1 {
-                padding-bottom: 20vw;
+              padding-bottom: 5vw;
                 h1 {
                     color: #70b2a0;
                     text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
                 }
             }
-            .boxs-chedule2 {
-                h1 {
-                    color: #fff;
-                    text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
-                }
-            }
+          
             .boxs-chedule1,
             .boxs-chedule2 {
                 margin: 0px 30px;