頁面修正

goto.js

@@ -9,11 +9,13 @@ function parallaxScroll() {
     $('#circle3').css('top', (1000- (scrolled * .2)) + 'px');
     $('#circle1').css('top', (650 - (scrolled * .2)) + 'px');
   // 課程大綱
-    $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
-    $('#act2').css('top', (800 - (scrolled * .2)) + 'px');
-    $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
+    // $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
+    $('#act2').css('top', (900 - (scrolled * .2)) + 'px');
+    // $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
     $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
-    $('#act5').css('top', (800 - (scrolled * .2)) + 'px');
+    $('#act5').css('top', (900 - (scrolled * .2)) + 'px');
+  }else{
+    
   }
 
 

index.html

@@ -102,8 +102,7 @@
             <div class="container" style="margin: 0; padding: 0;">
                 <div id="countdown">
                     <ul>
-                        <li><span id="days"></span><span id="unit0" style="padding-left: 5vw;" class="unit">DAYS</span>
-                        </li>
+                        <li><span id="days"></span><span id="unit0" style="padding-left: 5vw;" class="unit">DAYS</span></li>
                         <li><span id="hours"></span><span id="unit1" class="unit">HOURS</span></li>
                         <li><span id="minutes"></span><span id="unit2" class="unit">MINUTES</span></li>
                         <li><span id="seconds" style="border:none; padding-right: 0px;"></span><span
@@ -120,8 +119,8 @@
     <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
 
     <section id="trouble" class="container-fluid">
-        <div id="content" class="row">
-            <div id="trouble-img" class="col-12 order-2 col-md-7 order-md-2 col-lg-7 order-lg-1"
+        <div id="content" class="row" style="padding-right: 0;" >
+            <div id="trouble-img" class="col-12 order-2 col-md-6 order-md-2 col-lg-7 order-lg-1"
                 style="padding:0;margin: 0;">
                 <img id="img01" src="./img/91899837_L11.webp" alt="">
                 <img id="circle2" src="./img/circle2.png" alt="">
@@ -131,7 +130,7 @@
                 <img class="circle3" src="./img/circle3.png" alt="">
                 <img class="circle1" src="./img/circle1.png" alt="">
             </div>
-            <div id="trouble-text" class="col-12 order-1 col-md-5 order-md-2 col-lg-5 order-lg-2" style="margin: 0;">
+            <div id="trouble-text" class="col-12 order-1 col-md-6 order-md-2 col-lg-5 order-lg-2" style="margin: 0;">
                 <img id="circle1" src="./img/circle1.png" alt="">
                 <div class="text-box">
                     <p>Do You Have the following Problems</p>

style.css

@@ -39,6 +39,12 @@ body .title-main {
   font-size: 2.5rem;
 }
 
+@media screen and (max-width: 1024px) {
+  body .title-main {
+    font-size: 2rem;
+  }
+}
+
 @media screen and (max-width: 350px) {
   body .title-main {
     font-size: 2rem;
@@ -94,7 +100,7 @@ body #btn-a #mobile-btn {
   font-weight: 900;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 768px) {
   body #btn-a {
     display: none;
   }
@@ -218,7 +224,7 @@ body #btn-a #mobile-btn {
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 768px) {
   #Navigation #menu-btn1 {
     display: none;
   }
@@ -542,7 +548,7 @@ body #btn-a #mobile-btn {
 
 @media screen and (max-width: 1024px) {
   #trouble #img01 {
-    width: 60vw;
+    width: 55vw;
   }
 }
 
@@ -565,6 +571,12 @@ body #btn-a #mobile-btn {
   z-index: 0;
 }
 
+@media screen and (max-width: 1024px) {
+  #trouble #trouble-text #circle1 {
+    top: 45vw;
+  }
+}
+
 @media screen and (max-width: 767px) {
   #trouble #trouble-text #circle1 {
     display: none;
@@ -647,6 +659,13 @@ body #btn-a #mobile-btn {
   transition: 0.5s;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list .parallax #act5 {
+    width: 18vw;
+    top: 35vw;
+  }
+}
+
 #Course-list .parallax #act4 {
   left: 13vw;
   top: 13vw;
@@ -655,6 +674,13 @@ body #btn-a #mobile-btn {
   transition: 0.5s;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list .parallax #act4 {
+    width: 20vw;
+    top: 15vw;
+  }
+}
+
 #Course-list .parallax #act3 {
   left: 22vw;
   top: 8vw;
@@ -663,6 +689,13 @@ body #btn-a #mobile-btn {
   transition: 0.5s;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list .parallax #act3 {
+    width: 15vw;
+    top: 10vw;
+  }
+}
+
 #Course-list .parallax #act2 {
   right: 9vw;
   top: 32vw;
@@ -671,6 +704,13 @@ body #btn-a #mobile-btn {
   transition: 0.5s;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list .parallax #act2 {
+    width: 20vw;
+    top: 35vw;
+  }
+}
+
 #Course-list .parallax #act6 {
   left: 25vw;
   top: 13vw;
@@ -679,6 +719,13 @@ body #btn-a #mobile-btn {
   transition: 0.5s;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list .parallax #act6 {
+    width: 40vw;
+    top: 15vw;
+  }
+}
+
 #Course-list .parallax #act1 {
   right: 14vw;
   top: 20vw;
@@ -687,10 +734,24 @@ body #btn-a #mobile-btn {
   transition: 0.5s;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list .parallax #act1 {
+    width: 18vw;
+    right: 10vw;
+    top: 23vw;
+  }
+}
+
 #Course-list #bg {
   width: 80vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list #bg {
+    width: 90vw;
+  }
+}
+
 #Course-list .title-main {
   font-family: 微軟正黑體;
   font-weight: 900;
@@ -706,6 +767,12 @@ body #btn-a #mobile-btn {
   left: 20vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #Course-list #Course-content {
+    top: 22vw;
+  }
+}
+
 #Course-list #Course-content .box1,
 #Course-list #Course-content .box2,
 #Course-list #Course-content .box3 {
@@ -1338,6 +1405,7 @@ body #btn-a #mobile-btn {
   text-align: center;
   padding-bottom: 12vw !important;
   position: relative;
+  overflow: hidden;
 }
 
 #course-schedule #arrow-right {
@@ -1347,6 +1415,13 @@ body #btn-a #mobile-btn {
   width: 45px;
 }
 
+@media screen and (max-width: 1024px) {
+  #course-schedule #arrow-right {
+    width: 40px;
+    right: 20vw;
+  }
+}
+
 #course-schedule #arrow-left {
   position: absolute;
   top: 12vw;
@@ -1354,6 +1429,12 @@ body #btn-a #mobile-btn {
   width: 45px;
 }
 
+@media screen and (max-width: 1024px) {
+  #course-schedule #arrow-left {
+    width: 40px;
+  }
+}
+
 #course-schedule #element1 {
   position: absolute;
   top: 0vw;
@@ -1379,6 +1460,12 @@ body #btn-a #mobile-btn {
   width: 80vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #course-schedule #bg2 {
+    width: 90vw;
+  }
+}
+
 #course-schedule #schedule-content {
   position: absolute;
   width: 70vw;
@@ -1386,6 +1473,12 @@ body #btn-a #mobile-btn {
   left: 15vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #course-schedule #schedule-content {
+    top: 25vw;
+  }
+}
+
 #course-schedule #schedule-content .schedule-box {
   text-align: center;
 }
@@ -1396,6 +1489,12 @@ body #btn-a #mobile-btn {
   color: #fff;
 }
 
+@media screen and (max-width: 1024px) {
+  #course-schedule #schedule-content .schedule-box h1 {
+    font-size: 20px;
+  }
+}
+
 #course-schedule #schedule-content .schedule-box .content-box {
   width: 18vw;
   height: 10vw;
@@ -1606,6 +1705,12 @@ body #btn-a #mobile-btn {
   width: 80vw;
 }
 
+@media screen and (max-width: 1024px) {
+  #information #bg3 {
+    width: 90vw;
+  }
+}
+
 #information .information {
   position: absolute;
   text-align: left;
@@ -1985,7 +2090,7 @@ li #seconds {
   li #hours,
   li #minutes,
   li #seconds {
-    font-size: 4rem;
+    font-size: 3rem;
     padding: 0 25px;
   }
 }
@@ -2003,7 +2108,6 @@ li #seconds {
 li .unit {
   position: absolute;
   text-align: center;
-  top: 4.5vw;
   display: block;
   font-size: 1rem;
   color: #000;
@@ -2012,10 +2116,18 @@ li .unit {
   padding-left: 4vw;
 }
 
+@media screen and (min-width: 1025px) {
+  li .unit {
+    font-size: 1rem;
+    top: 4.5vw;
+  }
+}
+
 @media screen and (max-width: 1024px) {
   li .unit {
+    font-size: 0.8rem;
     right: 2vw;
-    top: 6vw;
+    top: 5vw;
   }
 }
 
@@ -2041,14 +2153,46 @@ li .unit {
   }
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 1025px) {
+  li #unit2 {
+    left: 1vw;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  li #unit2 {
+    right: 3vw;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  li #unit1 {
+    left: 1vw;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  li #unit1 {
+    right: 3vw;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  li #unit3 {
+    right: 0vw;
+  }
+}
+
+@media screen and (min-width: 768px) {
   li #unit3 {
     left: -2vw;
   }
 }
 
-li #unit0 {
-  right: 5vw;
+@media screen and (min-width: 1025px) {
+  li #unit0 {
+    right: 6vw;
+  }
 }
 
 @media screen and (max-width: 767px) {

style.scss

@@ -40,6 +40,9 @@ body {
         font-weight: 600;
         color: $title-color;
         font-size: 2.5rem;
+        @media screen and(max-width:$table) {
+            font-size: 2rem;
+        }
         @media screen and(max-width:350px) {
             font-size: 2rem;
         }
@@ -72,6 +75,7 @@ body {
     // 手機板按鈕
     #btn-a {
         text-decoration: none;
+        
         #mobile-btn {
             display: block;
             margin: 0 auto;
@@ -84,8 +88,9 @@ body {
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             border: 3px solid #a9d0c5;
             font-weight: 900;
+            
         }
-        @media screen and(max-width:$table) {
+        @media screen and(min-width:768px) {
             display: none;
         }
         @media screen and(min-width:$desktop) {
@@ -180,7 +185,7 @@ body {
         @media screen and(min-width:$desktop) {
             display: none;
         }
-        @media screen and(max-width:$table) {
+        @media screen and(min-width:768px) {
             display: none;
         }
     }
@@ -411,7 +416,7 @@ body {
         width: 60vw;
         padding: 10vw 0px;
         @media screen and(max-width:$table) {
-            width: 60vw;
+            width: 55vw;
         }
         @media screen and(max-width:$moblie) {
             width: 95vw;
@@ -426,6 +431,9 @@ body {
             top: 35vw;
             right: 5vw;
             z-index: 0;
+            @media screen and(max-width:$table) {
+                top: 45vw;
+            }
             @media screen and(max-width:$moblie) {
                 display: none;
             }
@@ -434,6 +442,8 @@ body {
             position: relative;
             margin-left: 5vw;
             z-index: 1;
+            @media screen and(max-width:$table) {
+            }
             h1 {
                 padding-bottom: 3vw !important;
                 @media screen and(max-width:$moblie) {
@@ -483,40 +493,69 @@ body {
             top: 33vw;
             width: 15vw;
             transition: 0.5s;
+            @media screen and(max-width:$table) {
+                width: 18vw;
+                top: 35vw;
+            }
         }
         #act4 {
             left: 13vw;
             top: 13vw;
             width: 18vw;
             transition: 0.5s;
+            @media screen and(max-width:$table) {
+                width: 20vw;
+                top: 15vw;
+            }
         }
         #act3 {
             left: 22vw;
             top: 8vw;
             width: 10vw;
             transition: 0.5s;
+            @media screen and(max-width:$table) {
+                width: 15vw;
+                top: 10vw;
+            }
         }
         #act2 {
             right: 9vw;
             top: 32vw;
             width: 19vw;
             transition: 0.5s;
+            @media screen and(max-width:$table) {
+                width: 20vw;
+                top: 35vw;
+            }
         }
         #act6 {
             left: 25vw;
             top: 13vw;
             width: 35vw;
             transition: 0.5s;
+            @media screen and(max-width:$table) {
+                width: 40vw;
+                top:15vw;
+            }
         }
         #act1 {
             right: 14vw;
             top: 20vw;
             width: 15vw;
             transition: 0.5s;
+            @media screen and(max-width:$table) {
+                width: 18vw;
+                right: 10vw;
+                top: 23vw;
+            }
+            
         }
     }
     #bg {
         width: 80vw;
+        @media screen and(max-width:$table) {
+            width: 90vw;
+        }
     }
     .title-main {
         font-family: 微軟正黑體;
@@ -531,6 +570,9 @@ body {
         position: absolute;
         top: 15vw;
         left: 20vw;
+        @media screen and(max-width:$table) {
+            top: 22vw;
+        }
         .box1,
         .box2,
         .box3 {
@@ -854,17 +896,25 @@ body {
     text-align: center;
     padding-bottom: 12vw !important;
     position: relative;
+    overflow: hidden;
     #arrow-right {
         position: absolute;
         top: 12vw;
         right: 21vw;
         width: 45px;
+        @media screen and(max-width:$table) {
+            width: 40px;
+            right: 20vw;
+        }
     }
     #arrow-left {
         position: absolute;
         top: 12vw;
         left: 21vw;
         width: 45px;
+        @media screen and(max-width:$table) {
+            width: 40px;
+        }
     }
     #element1 {
         position: absolute;
@@ -885,18 +935,28 @@ body {
 
     #bg2 {
         width: 80vw;
+        @media screen and(max-width:$table) {
+            width: 90vw;
+        }
     }
     #schedule-content {
         position: absolute;
         width: 70vw;
         top: 20vw;
         left: 15vw;
+        @media screen and(max-width:$table) {
+            top: 25vw;
+        }
         .schedule-box {
             text-align: center;
             h1 {
                 font-size: 24px;
                 font-weight: 900;
                 color: #fff;
+                @media screen and(max-width:$table) {
+                    font-size: 20px;
+                }
+                
             }
             .content-box {
                 width: 18vw;
@@ -1065,6 +1125,9 @@ body {
     }
     #bg3 {
         width: 80vw;
+        @media screen and(max-width:$table) {
+           width: 90vw;
+        }
     }
     .information {
         position: absolute;
@@ -1370,7 +1433,7 @@ li {
         border-right: 2px solid #fff;
         padding: 0 45px;
         @media screen and(max-width:$table) {
-            font-size: 4rem;
+            font-size: 3rem;
             padding: 0 25px;
         }
         @media screen and(max-width:$moblie) {
@@ -1381,16 +1444,21 @@ li {
     .unit {
         position: absolute;
         text-align: center;
-        top: 4.5vw;
         display: block;
         font-size: 1rem;
         color: #000;
         font-weight: 600;
         letter-spacing: 3px;
         padding-left: 4vw;
+        @media screen and(min-width:$desktop) {
+            font-size: 1rem;
+            top: 4.5vw;
+
+        }
         @media screen and(max-width:$table) {
+            font-size: 0.8rem;
             right: 2vw;
-            top: 6vw;
+            top: 5vw;
         }
         @media screen and(max-width:$moblie) {
             letter-spacing: 1px;
@@ -1407,13 +1475,40 @@ li {
             font-size: 12px;
         }
     }
+
+    #unit2 {
+        @media screen and(min-width:$desktop) {
+           left:1vw;
+            
+        }
+        @media screen and(min-width:768px) {
+            right: 3vw;
+        }
+    }
+    #unit1 {
+        @media screen and(min-width:$desktop) {
+           left:1vw;
+            
+        }
+        @media screen and(min-width:768px) {
+            right: 3vw;
+        }
+    }
     #unit3 {
-        @media screen and(max-width:$table) {
+        @media screen and(min-width:$desktop) {
+            right: 0vw;
+             
+         }
+        @media screen and(min-width:768px) {
             left: -2vw;
         }
     }
     #unit0 {
-        right: 5vw;
+        @media screen and(min-width:$desktop) {
+            right: 6vw;
+             
+         }
+    
         @media screen and(max-width:$moblie) {
             right: 9vw;
         }