頁面問題修正

index.html

@@ -745,13 +745,13 @@
         <hr class="line" style="opacity: 1;">
         <img id="bg3" src="./img/information/bg3.png" alt="">
         <div class="information">
-            <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59</div>
+            <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59 (逾時不候!)</div>
             <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
             <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
-            <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80000</div>
-            <div><span style="font-weight: 900;">報名流程:請點擊<a
-                        target="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"
-                        href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d">繳費連結</a>(可刷卡/ATM匯款)完成付款後,填寫底下報名表並送出,將有專人與您聯繫!</span>
+            <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80,000</div>
+            <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;"
+                        target="https://payment.ecpay.com.tw/QuickCollect/PayData?0LCQIcYJJX54sUNQp9AxpBV%2bDwngYA%2bx28W9tmoY3Vc%3d"
+                        href="https://payment.ecpay.com.tw/QuickCollect/PayData?0LCQIcYJJX54sUNQp9AxpBV%2bDwngYA%2bx28W9tmoY3Vc%3d">繳費連結</a>(可刷卡/ATM匯款)完成付款後，填寫底下報名表並送出，將有專人與您聯繫!</span>
             </div>
         </div>
 
@@ -798,15 +798,15 @@
         <p>Collection Information + Customer Service Information</p>
         <h1 class="title-main">報名資訊</h1>
         <hr class="line" style="opacity: 1;">
-        <div class="information   container-fluid" style="padding: 0; margin: 0;">
+        <div class="information   container-fluid" style="margin: 0;">
             <div id="information-01">
-                <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59</div>
+                <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59 (逾時不候!)</div>
                 <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
                 <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
                 <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80000</div>
-                <div><span style="font-weight: 900;">報名流程:請點擊<a
-                            target="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"
-                            href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d">繳費連結</a>(可刷卡/ATM匯款)完成付款後,填寫底下報名表並送出,將有專人與您聯繫!</span>
+                <div><span style="font-weight: 900;">報名流程:請點擊<a style="color:#70b2a0;"
+                            target="https://payment.ecpay.com.tw/QuickCollect/PayData?0LCQIcYJJX54sUNQp9AxpBV%2bDwngYA%2bx28W9tmoY3Vc%3d"
+                            href="https://payment.ecpay.com.tw/QuickCollect/PayData?0LCQIcYJJX54sUNQp9AxpBV%2bDwngYA%2bx28W9tmoY3Vc%3d">繳費連結</a>(可刷卡/ATM匯款)完成付款後，填寫底下報名表並送出，將有專人與您聯繫!</span>
                 </div>
             </div>
 

style.css

@@ -98,6 +98,13 @@ body #btn-a #mobile-btn {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   border: 3px solid #a9d0c5;
   font-weight: 900;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+body #btn-a #mobile-btn:hover {
+  background: #a9d0c5;
+  color: #fff;
 }
 
 @media screen and (min-height: 800px) {
@@ -374,6 +381,13 @@ body #btn-a #mobile-btn {
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   border: 3px solid #a9d0c5;
   font-weight: 900;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+#banner .banner1 .btn:hover {
+  background: #a9d0c5;
+  color: #fff;
 }
 
 @media screen and (max-width: 1024px) {
@@ -2500,19 +2514,25 @@ body #btn-a #mobile-btn {
   }
 }
 
+#information-mobile .title-main {
+  margin: 20px;
+}
+
 #information-mobile .information {
   background-image: url(./img/information/bg3.png);
-  background-size: 175%;
+  background-size: 140%;
   background-repeat: no-repeat;
-  background-position: bottom center;
+  background-position: top center;
   text-align: left;
   color: #646464;
+  padding-bottom: 20vw;
   font-size: 1rem;
 }
 
 @media screen and (max-width: 350px) {
   #information-mobile .information {
     font-size: 0.9rem;
+    padding-bottom: 0;
   }
 }
 
@@ -2522,7 +2542,7 @@ body #btn-a #mobile-btn {
 
 #information-mobile .information #information-01 {
   width: 90vw;
-  padding: 30vw 0px !important;
+  padding: 10vw 0px;
   margin: auto;
   line-height: 8vw;
   padding-right: 0px !important;
@@ -2530,8 +2550,8 @@ body #btn-a #mobile-btn {
 
 @media screen and (max-width: 350px) {
   #information-mobile .information #information-01 {
+    width: 95vw;
     padding-left: 1vw;
-    padding-top: 0.8vw;
   }
 }
 

style.scss

@@ -88,6 +88,11 @@ body {
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             border: 3px solid #a9d0c5;
             font-weight: 900;
+            transition: 0.3s;
+            &:hover {
+                background: #a9d0c5;
+                color: #fff;
+            }
             @media screen and(min-height:800px) {
                 margin-top: 5vw;
             }
@@ -289,6 +294,11 @@ body {
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             border: 3px solid #a9d0c5;
             font-weight: 900;
+            transition: 0.3s;
+            &:hover {
+                background: #a9d0c5;
+                color: #fff;
+            }
             @media screen and(max-width:$table) {
                 width: 20vw;
             }
@@ -823,10 +833,10 @@ body {
             margin: 0px 10px;
             position: relative;
             z-index: 2;
-            .box-img2{
+            .box-img2 {
                 .more {
                     font-weight: 900;
-                    color:#fff;
+                    color: #fff;
                     margin-top: -25px;
                 }
             }
@@ -859,7 +869,6 @@ body {
             .box-img01,
             .box-img02,
             .box-img03 {
-               
                 img {
                     @media screen and(min-width:768px) {
                         width: 20vw;
@@ -1488,30 +1497,35 @@ body {
     @media screen and(min-width:768px) {
         display: none;
     }
+    .title-main {
+        margin: 20px;
+    }
     .information {
         background-image: url(./img/information/bg3.png);
-        background-size: 175%;
+        background-size: 140%;
         background-repeat: no-repeat;
-        background-position: bottom center;
+        background-position: top center;
         text-align: left;
         color: $title-color;
-
+        padding-bottom: 20vw;
         font-size: 1rem;
         @media screen and(max-width:350px) {
             font-size: 0.9rem;
+            padding-bottom: 0;
         }
         a {
             color: $title-color;
         }
         #information-01 {
             width: 90vw;
-            padding: 30vw 0px !important;
+            padding: 10vw 0px;
+
             margin: auto;
             line-height: 8vw;
             padding-right: 0px !important;
             @media screen and(max-width:350px) {
+                width: 95vw;
                 padding-left: 1vw;
-                padding-top: 0.8vw;
             }
         }
     }