update

index.html

@@ -45,24 +45,24 @@
                         <div class="row px-0 mx-0">
                             <div style="background:rgba(2,15,51,0.8)" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
-                                    <a style="text-decoration: none;" href="./about.html">
-                                        <img width="100" src="./img/ICON_簡介.png" alt="">
+                                    <a style="text-decoration: none;" class="homebtn-icon" href="./about.html">
+                                        <img  src="./img/ICON_簡介.png" alt="">
                                         <h1 class="text-white" set-lan="html:index-about">簡介</h1>
                                     </a>
                                 </div>
                             </div>
                             <div style="background: rgba(4,25,89,0.8);" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
-                                    <a style="text-decoration: none;" href="./features.html">
-                                        <img width="100" src="./img/ICON_特色.png" alt="">
+                                    <a style="text-decoration: none;" class="homebtn-icon" href="./features.html">
+                                        <img  src="./img/ICON_特色.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-features">特色</h1>
                                     </a>
                                 </div>
                             </div>
                             <div style="background:rgba(2,15,51,0.8)" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
-                                    <a style="text-decoration: none;" href="./video.html">
-                                        <img width="100" src="./img/ICON_影片導覽.png" alt="">
+                                    <a style="text-decoration: none;" class="homebtn-icon" href="./video.html">
+                                        <img  src="./img/ICON_影片導覽.png" alt="">
 
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-videos">影片導覽</h1>
                                     </a>
@@ -70,8 +70,8 @@
                             </div>
                             <div style="background: rgba(4,25,89,0.8);" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
-                                    <a style="text-decoration: none;" href="./steps.html">
-                                        <img width="100" src="./img/ICON_使用流程.png" alt="">
+                                    <a style="text-decoration: none;" class="homebtn-icon" href="./steps.html">
+                                        <img  src="./img/ICON_使用流程.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-steps">使用流程</h1>
                                     </a>
                                 </div>
@@ -79,8 +79,8 @@
                             </div>
                             <div style="background:rgba(2,15,51,0.8)" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
-                                    <a style="text-decoration: none;" href="./usecases.html">
-                                        <img width="100" src="./img/ICON_應用情境.png" alt="">
+                                    <a style="text-decoration: none;" class="homebtn-icon" href="./usecases.html">
+                                        <img  src="./img/ICON_應用情境.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-usecases">應用情境</h1>
                                     </a>
                                 </div>
@@ -88,8 +88,8 @@
                             </div>
                             <div style="background: rgba(4,25,89,0.8);" class="home-box col-4 py-5 d-flex align-items-center justify-content-center">
                                 <div class="p-3 text-center">
-                                    <a style="text-decoration: none;" href="./demo.html">
-                                        <img width="100" src="./img/ICON_即時展示.png" alt="">
+                                    <a style="text-decoration: none;" class="homebtn-icon" href="./demo.html">
+                                        <img  src="./img/ICON_即時展示.png" alt="">
                                         <h1 class="text-white" class="home-btn" set-lan="html:index-demo">即時展示</h1>
                                     </a>
                                 </div>
@@ -159,6 +159,8 @@
     </script> -->
     <script src="js/lan.js"></script>
     <script>
+        var width =  window.screen.width
+        console.log(width)
         // Using JavaScript to open the page in fullscreen mode
         var elem = document.documentElement;
         function openFullscreen() {

style.css

@@ -765,25 +765,50 @@ p {
   }
 }
 
+@media screen and (max-width: 1080px) {
+  .home-page {
+    height: 100vh;
+  }
+}
+
+.home-page .home-box {
+  height: 33vh;
+}
+
 .home-page .homebutton-box {
   background-image: url(./img/BG_3png.png);
   background-size: cover;
   background-repeat: no-repeat;
 }
 
-.home-page .homebutton-box h1 {
+.home-page .homebutton-box .homebtn-icon h1 {
   font-size: 32px;
   text-align: center;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
 }
 
-.home-page .homebutton-box img {
+.home-page .homebutton-box .homebtn-icon img {
+  width: 100px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
   -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
           filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
 }
 
+.home-page .homebutton-box .homebtn-icon:hover h1 {
+  font-size: 26px;
+}
+
+.home-page .homebutton-box .homebtn-icon:hover img {
+  -webkit-transform: scale(0.75);
+          transform: scale(0.75);
+}
+
 .home-page .homepage-title h1 {
   color: #e95412;
   font-weight: 900;
+  font-size: 48px;
 }
 
 .home-page .homepage-line {

style.scss

@@ -654,19 +654,18 @@ p {
     }
   }
 }
-:fullscreen{
-  .home-page{
+:fullscreen {
+  .home-page {
     @media screen and(max-width:1280px) {
       height: 100vh;
     }
   }
-  .home-box{
+  .home-box {
     height: 350px;
     @media screen and(max-width:1280px) {
       height: 250px;
     }
   }
- 
 }
 // 首頁
 .home-page {
@@ -675,24 +674,45 @@ p {
   @media screen and(max-width:1280px) {
     height: 130vh;
   }
+  @media screen and(max-width:1080px) {
+    height: 100vh;
+  }
+  .home-box {
+    height: 33vh;
+  }
   .homebutton-box {
     background-image: url(./img/BG_3png.png);
     background-size: cover;
     background-repeat: no-repeat;
     // height: 65vh;
-    h1 {
-      font-size: 32px;
-      text-align: center;
-    }
-    img {
-      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
+    .homebtn-icon {
+      h1 {
+        font-size: 32px;
+        text-align: center;
+        transition: 0.5s;
+
+      }
+      img {
+        width: 100px;
+        transition: 0.5s;
+
+        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
+      }
+      &:hover {
+        h1{
+          font-size: 26px;
+        }
+        img {
+          transform: scale(0.75);
+        }
+      }
     }
   }
   .homepage-title {
- 
     h1 {
       color: #e95412;
       font-weight: 900;
+      font-size: 48px;
     }
   }
   .homepage-line {