頁面問題修正

index.html

@@ -171,7 +171,8 @@
                     </div>
                     <div id="teacher-name1"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box11.png" style="padding-top:1.9vw ;" alt="">
+                        <img src="./img/Course-list/box11.png" alt="">
+                        <div class="more">了解更多</div>
                     </div>
                 </div>
                 <div class="box2 col-12 col-md-4">
@@ -182,7 +183,8 @@
                     </div>
                     <div id="teacher-name2"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box12.png" style="padding-top:0.5vw" alt="">
+                        <img src="./img/Course-list/box12.png"  alt="">
+                        <div class="more">了解更多</div>
                     </div>
                 </div>
                 <div class="box3 col-12 col-md-4">
@@ -193,7 +195,8 @@
                     </div>
                     <div id="teacher-name3"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
+                        <img src="./img/Course-list/box13.png"  alt="">
+                        <div class="more">了解更多</div>
                     </div>
                 </div>
 
@@ -402,6 +405,8 @@
                 <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
                 <div class="box-img2" style="padding: 0;">
                     <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
+                    <div class="more">了解更多</div>
+                    
                 </div>
             </div>
             <div class="card ">
@@ -413,6 +418,7 @@
                 <h1 class="name" style="font-family:追奇手寫體;">John</h1>
                 <div class="box-img2">
                     <img src="./img/Course-list/box12.png" style="padding-top:1vw" alt="">
+                    <div class="more">了解更多</div>
                 </div>
             </div>
             <div class="card ">
@@ -424,6 +430,7 @@
                 <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
                 <div class="box-img2">
                     <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
+                    <div class="more">了解更多</div>
                 </div>
             </div>
         </div>

style.css

@@ -120,6 +120,7 @@ body #btn-a #mobile-btn {
 
 #Navigation {
   background: #a9d0c5;
+  opacity: 0.9;
   height: 4.5vw;
   width: 100vw !important;
   position: fixed;
@@ -830,10 +831,11 @@ body #btn-a #mobile-btn {
 #Course-list #Course-content .box1:hover .box-img,
 #Course-list #Course-content .box2:hover .box-img,
 #Course-list #Course-content .box3:hover .box-img {
-  padding-top: 0.95vw;
+  text-align: center;
   background-image: url(./img/people.png);
-  background-size: contain;
+  background-size: 15vw 15vw;
   background-repeat: no-repeat;
+  background-position: center center;
 }
 
 #Course-list #Course-content .box1:hover .box-img img,
@@ -842,25 +844,42 @@ body #btn-a #mobile-btn {
   opacity: 0;
 }
 
-#Course-list #Course-content .box1 .box-img,
-#Course-list #Course-content .box2 .box-img,
-#Course-list #Course-content .box3 .box-img {
-  margin: 20px;
+#Course-list #Course-content .box1:hover .box-img2,
+#Course-list #Course-content .box2:hover .box-img2,
+#Course-list #Course-content .box3:hover .box-img2 {
+  padding-top: 2.9vw;
 }
 
 #Course-list #Course-content .box1 .box-img img,
 #Course-list #Course-content .box2 .box-img img,
 #Course-list #Course-content .box3 .box-img img {
-  padding: 3vw 0px;
-  width: 10vw;
+  padding: 3vw 1.6vw;
+  width: 12.5vw;
+  height: 15vw;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+#Course-list #Course-content .box1 .box-img2,
+#Course-list #Course-content .box2 .box-img2,
+#Course-list #Course-content .box3 .box-img2 {
+  padding-top: 2vw;
+  text-align: center;
+}
+
 #Course-list #Course-content .box1 .box-img2 img,
 #Course-list #Course-content .box2 .box-img2 img,
 #Course-list #Course-content .box3 .box-img2 img {
-  width: 10vw;
+  width: 11vw;
+  height: 2vw;
+}
+
+#Course-list #Course-content .box1 .box-img2 .more,
+#Course-list #Course-content .box2 .box-img2 .more,
+#Course-list #Course-content .box3 .box-img2 .more {
+  margin-top: -25px;
+  font-weight: 900;
+  color: #fff;
 }
 
 #Course-list #Course-content .box1 h1,
@@ -1169,6 +1188,12 @@ body #btn-a #mobile-btn {
   z-index: 2;
 }
 
+.sec04 #card-box .card .box-img2 .more {
+  font-weight: 900;
+  color: #fff;
+  margin-top: -25px;
+}
+
 .sec04 #card-box .card .card-title {
   padding-top: 2rem;
   color: #646464;
@@ -1208,7 +1233,9 @@ body #btn-a #mobile-btn {
 }
 
 @media screen and (min-width: 768px) {
-  .sec04 #card-box .card .box-img01 img, .sec04 #card-box .card .box-img02 img, .sec04 #card-box .card .box-img03 img {
+  .sec04 #card-box .card .box-img01 img,
+  .sec04 #card-box .card .box-img02 img,
+  .sec04 #card-box .card .box-img03 img {
     width: 20vw;
   }
 }
@@ -2593,6 +2620,8 @@ body #btn-a #mobile-btn {
 #footer {
   background: #b0d4ca;
   text-align: center;
+  width: 96vw;
+  margin: 0 auto !important;
 }
 
 #footer p {
@@ -2819,7 +2848,7 @@ li #seconds {
   }
   li {
     font-size: 1.125rem;
-    padding: .75rem;
+    padding: 0.75rem;
   }
   li span {
     font-size: 3.375rem;

style.scss

@@ -103,6 +103,7 @@ body {
 // 主選單
 #Navigation {
     background: $navbgcolor;
+    opacity: 0.9;
     height: 4.5vw;
     width: 100vw !important;
     position: fixed;
@@ -209,7 +210,6 @@ body {
         height: 95vh;
         padding-bottom: 30vw;
     }
-   
 
     @media screen and(min-height:750px) {
         height: 85vh;
@@ -218,7 +218,6 @@ body {
         height: 100vh;
     }
 
-
     .banner1 {
         width: 85vw;
         padding-top: 10vw;
@@ -607,26 +606,39 @@ body {
                 }
 
                 .box-img {
-                    padding-top: 0.95vw;
+                    text-align: center;
                     img {
                         opacity: 0;
                     }
                     background-image: url(./img/people.png);
-                    background-size: contain;
+                    background-size: 15vw 15vw;
                     background-repeat: no-repeat;
+                    background-position: center center;
+                }
+                .box-img2 {
+                    padding-top: 2.9vw;
                 }
             }
             .box-img {
-                margin: 20px;
                 img {
-                    padding: 3vw 0px;
-                    width: 10vw;
+                    padding: 3vw 1.6vw;
+                    width: 12.5vw;
+                    height: 15vw;
                     object-fit: cover;
                 }
             }
             .box-img2 {
+                padding-top: 2vw;
+                text-align: center;
+
                 img {
-                    width: 10vw;
+                    width: 11vw;
+                    height: 2vw;
+                }
+                .more {
+                    margin-top: -25px;
+                    font-weight: 900;
+                    color: #fff;
                 }
             }
             h1 {
@@ -663,7 +675,6 @@ body {
     display: none;
     @media screen and(max-width:$table) {
         padding: 50px 20px 100px 20px;
-       
     }
     .close {
         position: absolute;
@@ -676,7 +687,6 @@ body {
         margin: 0 auto;
         @media screen and(max-width:$table) {
             width: 95vw;
-           
         }
         h1 {
             padding-top: 50px;
@@ -704,7 +714,6 @@ body {
                 padding-right: 0 !important;
                 @media screen and(max-width:$table) {
                     margin: 10px 3px;
-                   
                 }
                 .card-title {
                     padding: 30px 0px 20px 0px;
@@ -714,7 +723,6 @@ body {
                     @media screen and(max-width:$table) {
                         width: 18vw;
                         font-size: 1rem;
-                       
                     }
                 }
 
@@ -734,9 +742,10 @@ body {
                     img {
                         padding: 90px 30px 0px 30px;
                         width: 12vw;
+
                         @media screen and(max-width:$table) {
                             width: 15vw;
-                           
+
                             padding: 90px 15px 0px 15px;
                         }
                     }
@@ -780,11 +789,10 @@ body {
         background-position: 40% 50%;
         @media screen and(min-width:767px) {
             padding-top: 15vw;
-       
         }
-          
-        .slick-slide{ 
-            outline: none !important; 
+
+        .slick-slide {
+            outline: none !important;
         }
         .slick-dots {
             margin-top: 50px;
@@ -815,28 +823,31 @@ body {
             margin: 0px 10px;
             position: relative;
             z-index: 2;
+            .box-img2{
+                .more {
+                    font-weight: 900;
+                    color:#fff;
+                    margin-top: -25px;
+                }
+            }
             @media screen and(max-width:$table) {
-              
-               
             }
             .card-title {
                 padding-top: 2rem;
                 color: $title-color;
                 @media screen and(max-width:$table) {
                     font-size: 1.5rem;
-               
                 }
                 @media screen and(max-width:350px) {
                     font-size: 1.8rem;
                 }
             }
-           
+
             h2 {
                 color: $title-color;
                 font-size: 1.3rem;
                 @media screen and(max-width:$table) {
                     font-size: 1rem;
-               
                 }
                 @media screen and(max-width:350px) {
                     font-size: 1rem;
@@ -845,26 +856,23 @@ body {
             img {
                 margin: 0 auto;
             }
-            .box-img01, .box-img02,.box-img03{
-
-                img{
+            .box-img01,
+            .box-img02,
+            .box-img03 {
+               
+                img {
                     @media screen and(min-width:768px) {
                         width: 20vw;
-                   
                     }
-                  
                 }
-                
             }
-
         }
     }
-   .name{
-    @media screen and(max-width:$table) {
-        font-size: 3rem;
-       
+    .name {
+        @media screen and(max-width:$table) {
+            font-size: 3rem;
+        }
     }
-   }
 
     @media screen and(min-width:1000px) {
         display: none;
@@ -874,7 +882,6 @@ body {
         .name {
             padding-bottom: 2rem;
             font-size: 4rem;
-            
         }
     }
     @media screen and(max-width:400px) {
@@ -905,7 +912,7 @@ body {
     .mobile-box2,
     .mobile-box3 {
         height: 80vh;
-        
+
         .close {
             position: absolute;
             right: 5vw;
@@ -919,7 +926,7 @@ body {
             margin: 0 auto;
             border-radius: 5px;
             font-size: 0.9rem;
-          
+
             .slick-dots {
                 width: 80%;
                 @media screen and(max-width:350px) {
@@ -928,7 +935,7 @@ body {
                 li {
                     margin: 0 10px;
                 }
-    
+
                 button {
                     margin-top: 10px;
                     display: block;
@@ -938,11 +945,10 @@ body {
                     border: none;
                     border-radius: 0%;
                     background-color: #d9d9d9;
-    
+
                     text-indent: -9999px;
-                   
                 }
-    
+
                 li.slick-active button {
                     background-color: #fce49d;
                 }
@@ -955,7 +961,6 @@ body {
                 color: #414346;
                 @media screen and(max-width:$table) {
                     font-size: 3rem;
-           
                 }
                 @media screen and(max-width:400px) {
                     font-size: 2rem;
@@ -965,18 +970,15 @@ body {
             .card-box-1,
             .card-box-2,
             .card-box-3 {
-                
                 padding: 1vw 20px 1vw 20px;
                 @media screen and(max-width:350px) {
                     padding: 1vw 0px 1vw 0px;
                 }
                 .card {
-                   
                     text-align: center;
                     margin: 0px 10px;
                     @media screen and(max-width:$table) {
                         font-size: 1.5rem;
-               
                     }
                     @media screen and(max-width:$moblie) {
                         font-size: 0.9rem;
@@ -992,7 +994,6 @@ body {
                         font-size: 1.3rem;
                         @media screen and(max-width:$table) {
                             font-size: 2rem;
-                   
                         }
                         @media screen and(max-width:$moblie) {
                             font-size: 1.3rem;
@@ -1010,12 +1011,11 @@ body {
                             width: 43vw;
                             height: 53vw;
                             padding: 15vw 12vw;
-                          
+
                             @media screen and(max-width:400px) {
                                 padding: 13vw 10vw;
                                 height: 51vw;
                             }
-                           
                         }
                     }
                     .box-img2 {
@@ -1024,9 +1024,7 @@ body {
                             width: 40vw;
                             @media screen and(min-width:767px) {
                                 padding-top: 5vw;
-                           
                             }
-                            
                         }
                     }
                 }
@@ -1038,13 +1036,11 @@ body {
     .mobile-box2 {
         .Course-mobile01 {
             .card-box-2 {
-                
                 .card {
                     margin: 0px 10px;
                     font-size: 1rem;
                     @media screen and(max-width:$table) {
                         font-size: 1.5rem;
-               
                     }
                     @media screen and(max-width:$moblie) {
                         font-size: 1rem;
@@ -1055,7 +1051,6 @@ body {
                     }
                     @media screen and(max-width:350px) {
                         font-size: 0.7rem;
-                        
                     }
 
                     .box-img2 {
@@ -1064,13 +1059,11 @@ body {
                             width: 40vw;
                             @media screen and(min-width:767px) {
                                 padding-top: 5vw;
-                           
                             }
                             @media screen and(max-width:$moblie) {
                                 padding-top: 5vw;
                             }
                             @media screen and(max-width:350px) {
-                               
                                 padding-top: 15vw;
                             }
                         }
@@ -1082,7 +1075,6 @@ body {
                             padding: 15vw 12vw;
                             @media screen and(max-width:350px) {
                                 padding: 12vw 10vw;
-                                
                             }
                         }
                     }
@@ -1093,17 +1085,14 @@ body {
                         font-size: 1.3rem;
                         @media screen and(max-width:$table) {
                             font-size: 2rem;
-                   
                         }
                         @media screen and(max-width:$moblie) {
                             font-size: 1rem;
                         }
-                        
 
                         @media screen and(max-width:400px) {
                             font-size: 1rem;
                         }
-                        
                     }
                 }
             }
@@ -1117,10 +1106,8 @@ body {
             .card-box-3 {
                 @media screen and(min-width:$table) {
                     height: 691px;
-           
                 }
                 .card {
-                   
                     .box-img {
                         img {
                             width: 43vw;
@@ -1128,7 +1115,6 @@ body {
                             padding: 15vw 12vw;
                             @media screen and(max-width:350px) {
                                 padding: 10vw 10vw;
-                                
                             }
                         }
                     }
@@ -1138,14 +1124,12 @@ body {
                             width: 40vw;
                             @media screen and(max-width:$table) {
                                 padding-top: 4vw;
-                           
                             }
                             @media screen and(max-width:$moblie) {
                                 padding-top: 10vw;
                             }
-                            
+
                             @media screen and(max-width:350px) {
-                               
                                 padding-top: 5vw;
                             }
                         }
@@ -1157,7 +1141,6 @@ body {
                         font-size: 1.3rem;
                         @media screen and(max-width:$table) {
                             font-size: 2rem;
-                   
                         }
                         @media screen and(max-width:$moblie) {
                             font-size: 1.3rem;
@@ -1283,11 +1266,11 @@ body {
     padding-bottom: 8rem !important;
     overflow: hidden;
     position: relative;
-    
+
     @media screen and(min-width:768px) {
         display: none;
     }
-    
+
     .element2 {
         position: absolute;
         width: 70vw;
@@ -1311,8 +1294,8 @@ body {
         background-repeat: no-repeat;
         background-position: 50% 50%;
         position: relative;
-        .slick-slide{ 
-            outline: none !important; 
+        .slick-slide {
+            outline: none !important;
         }
         .slick-dots {
             margin-top: 10px;
@@ -1459,7 +1442,7 @@ body {
                 #message,
                 #message1,
                 #profession,
-                #line{
+                #line {
                     width: 100%;
                     padding: 10px 15px;
                     font-size: 16px;
@@ -1477,9 +1460,9 @@ body {
                     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                     border: 2px solid #a9d0c5;
                     font-weight: 900;
-                    &:hover{
+                    &:hover {
                         background: #a9d0c5;
-                        color:#fff;
+                        color: #fff;
                     }
                 }
             }
@@ -1523,7 +1506,7 @@ body {
         #information-01 {
             width: 90vw;
             padding: 30vw 0px !important;
-            margin:auto;
+            margin: auto;
             line-height: 8vw;
             padding-right: 0px !important;
             @media screen and(max-width:350px) {
@@ -1564,7 +1547,6 @@ body {
                     margin: 10px 0px;
                     border: 1px solid rgba(0, 0, 0, 0.3);
                 }
-                
 
                 #profession {
                     height: 50px;
@@ -1587,9 +1569,9 @@ body {
                     font-size: 1.2rem;
                     letter-spacing: 1px;
                     transition: 0.3s;
-                    &:hover{
+                    &:hover {
                         background: #a9d0c5;
-                        color:#fff;
+                        color: #fff;
                     }
                 }
             }
@@ -1609,7 +1591,8 @@ body {
 #footer {
     background: #b0d4ca;
     text-align: center;
-   
+    width: 96vw;
+    margin: 0 auto !important;
 
     p {
         padding: 15px;
@@ -1716,9 +1699,7 @@ body {
             width: 100vw;
         }
         ul {
-            
         }
-        
     }
     li {
         display: inline-block;
@@ -1729,22 +1710,18 @@ body {
         @media screen and(max-width:$table) {
             font-size: 16px;
             text-align: center;
-            
         }
         @media screen and(max-width:400px) {
             font-size: 12px;
-            
         }
-      }
-      
-      li span {
+    }
+
+    li span {
         display: block;
         font-size: 4.5rem;
-      }
+    }
 }
 
-
-
 li {
     display: inline-block;
     list-style-type: none;
@@ -1782,15 +1759,15 @@ li {
 
 @media all and (max-width: 768px) {
     h1 {
-      font-size: 1.5rem;
+        font-size: 1.5rem;
     }
-    
+
     li {
-      font-size: 1.125rem;
-      padding: .75rem;
+        font-size: 1.125rem;
+        padding: 0.75rem;
     }
-    
+
     li span {
-      font-size: 3.375rem;
+        font-size: 3.375rem;
     }
-  }
+}