將圖片壓縮後替換圖片

.vscode/settings.json

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

desktop11/goto.js

@@ -0,0 +1,6 @@
+$(".banner-slider").slick({
+    dots:true,
+    dotsClass:'slick-dots',
+    speed:1000, 
+   
+  });

desktop11/index.html

@@ -5,8 +5,10 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>幸福空間</title>
+    <title>HHH_Home_Decoration</title>
 
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
     <link rel="stylesheet" href="./style.css">
 </head>
 
@@ -14,7 +16,7 @@
     <section id="banner">
         <div class="Navigation">
             <div class="logo">
-                <img src="./img/logo-main-1-1.png" alt="">
+                <img src="./img/logo-main-1-1_结果.webp" alt="">
             </div>
             <div class="link">
                 <a href="">首頁</a>
@@ -22,12 +24,23 @@
                 <a href="">屋主都說好</a>
                 <a href="">服務流程</a>
             </div>
-
         </div>
         <hr>
         <div id="text">
-            <h1>北歐風</h1>
-            <button class="btn-main">預約免費裝修諮詢</button>
+            <div class="banner-slider">
+                <div class="banner1">
+                    <h1>北歐風</h1>
+                    <button class="btn-main">預約免費裝修諮詢</button>
+                </div>
+                <div class="banner2">
+                    <h1>次代風</h1>
+                    <button class="btn-main">預約免費裝修諮詢</button>
+                </div>
+                <div class="banner3">
+                    <h1>美式風</h1>
+                    <button class="btn-main">預約免費裝修諮詢</button>
+                </div>
+            </div>
         </div>
     </section>
 
@@ -53,24 +66,24 @@
             <hr>
             <div class="left">
                 <h2 class="title1">o3</h2>
-                    <div class="text">
-                        <p>不了解工程預算行情</p>
-                        <p>害怕被騙嗎? </p>
-                    </div>
+                <div class="text">
+                    <p>不了解工程預算行情</p>
+                    <p>害怕被騙嗎? </p>
+                </div>
             </div>
         </div>
-        <div class="content1-right"><img src="./img/content/02.jpg" alt=""></div>
+        <div class="content1-right"><img src="./img/content/02.webp" alt=""></div>
 
     </section>
     <section id="service">
         <h1 class="title">我們提供的服務</h1>
         <div id="service-img">
-            <div id="img-right"><img src="./img/service/service01.jpg" alt=""></div>
-            <div id="img-left"><img src="./img/service/service02.jpg" alt=""></div>
+            <div id="img-right"><img src="./img/service/service01_结果.webp" alt=""></div>
+            <div id="img-left"><img src="./img/service/service02_结果.webp" alt=""></div>
         </div>
         <div id="service-text">
             <div id="text-left">
-                <img src="./img/icon1.png" alt="">
+                <img src="./img/process/icon1_结果.webp" alt="">
                 <div class="icon-text">
                     <p>推薦合法立案</p>
                     <p>無裝修司法糾紛紀錄的專業設計師</p>
@@ -79,7 +92,7 @@
                 </div>
             </div>
             <div id="text-right">
-                <img src="./img/icon2.png" alt="">
+                <img src="./img/process/icon2_结果.webp" alt="">
                 <div class="icon-text">
                     <p>13年經驗安心把關</p>
                     <p>不懂預算行情</p>
@@ -99,33 +112,33 @@
         <h1 class="title">最嚴謹的服務流程</h1>
         <div id="process-box">
             <div class="box">
-                <img src="./img/process/box1.png" alt="">
+                <img src="./img/process/box1_结果.webp" alt="">
                 <p>填寫需求表單</p>
             </div>
             <div class="box">
-                <img src="./img/process/box2.png" alt="">
+                <img src="./img/process/box2_结果.webp" alt="">
                 <p>專人聯繫</p>
                 <p>進行裝修前諮詢</p>
             </div>
             <div class="box">
-                <img src="./img/process/box3.png" alt="">
+                <img src="./img/process/box3_结果.webp" alt="">
                 <p>依照屋主的需求</p>
                 <p>推薦合法立案的</p>
                 <p>設計公司</p>
             </div>
             <div class="box">
-                <img src="./img/process/box4.png" alt="">
+                <img src="./img/process/box4_结果.webp" alt="">
                 <p>設計公司會</p>
                 <p>主動與屋主聯繫</p>
             </div>
             <div class="box">
-                <img src="./img/process/box5.png" alt="">
+                <img src="./img/process/box5_结果.webp" alt="">
                 <p>選擇是否使用</p>
                 <p>幸福經紀人制度</p>
                 <p>來保障裝修權益</p>
             </div>
             <div class="box">
-                <img src="./img/process/box6.png" alt="">
+                <img src="./img/process/box6_结果.webp" alt="">
                 <p>媒合成功</p>
             </div>
 
@@ -137,27 +150,27 @@
         <h1 class="title">客戶真實見證</h1>
         <div id="feedback-box">
             <div class="box">
-                <img src="./img/feedback-img/feedback01.jpeg" alt="">
+                <img src="./img/feedback-img/feedback01_结果.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback02.jpg" alt="">
+                <img src="./img/feedback-img/feedback02_结果.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback03.jpeg" alt="">
+                <img src="./img/feedback-img/feedback03_结果.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback04.jpg" alt="">
+                <img src="./img/feedback-img/feedback04_结果.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback05.jpeg" alt="">
+                <img src="./img/feedback-img/feedback05_结果.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
             <div class="box">
-                <img src="./img/feedback-img/feedback06.jpg" alt="">
+                <img src="./img/feedback-img/feedback06_结果.webp" alt="">
                 <p>嚮往仁文街處的溫度-文響</p>
             </div>
 
@@ -206,8 +219,8 @@
 
             <div id="form-right">
                 <div id="facebook">
-                    <img src="./img/feedback-img/facebook.png" alt="">
-                    使用FB填入信箱與姓名 
+                    <img src="./img/logo/facebook_结果.webp" alt="">
+                    使用FB填入信箱與姓名
                 </div>
                 <input type="text" id="email" placeholder="請輸入信箱" required>
                 <input type="text" id="name" placeholder="請輸入姓名" required>
@@ -224,7 +237,7 @@
 
     </section>
     <div id="footer">
-        <p>幸福空間 版權所有 &copy;Gorgeous Space  Go.Ltd.  All Rights Reserved.</p>
+        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
         <a href="x">｜聯絡我們｜</a>
         <a href="">｜關於本站｜</a>
     </div>
@@ -246,14 +259,10 @@
 
 
 
-    <!-- Bootstrap CDN js -->
-
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
-        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
-        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
-        crossorigin="anonymous"></script>
+    
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="./goto.js"></script>
 </body>
 
 </html>

desktop11/style.css

@@ -51,16 +51,33 @@ body .title {
 #banner {
   width: 100vw;
   height: 100vh;
-  background-image: url(./img/001.jpg);
+  position: relative;
+}
+
+#banner #text {
+  text-align: center;
+}
+
+#banner #text .banner-slider .banner1,
+#banner #text .banner-slider .banner2,
+#banner #text .banner-slider .banner3 {
+  width: 100vw;
+  height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
-  margin-bottom: 150px;
 }
 
-#banner #text {
-  text-align: center;
-  margin-top: 260px;
+#banner #text .banner-slider .banner1 {
+  background-image: url(./img/banner/00.webp);
+}
+
+#banner #text .banner-slider .banner2 {
+  background-image: url(./img/banner/002.webp);
+}
+
+#banner #text .banner-slider .banner3 {
+  background-image: url(./img/banner/003.webp);
 }
 
 #banner #text h1 {
@@ -68,6 +85,7 @@ body .title {
   color: #fff;
   font-family: 追奇手寫體;
   font-size: 72px;
+  margin-top: 300px;
 }
 
 #banner #text .btn-main {
@@ -94,6 +112,9 @@ body .title {
 #banner .Navigation {
   width: 100vw;
   height: 50px;
+  position: absolute;
+  top: 0;
+  z-index: 5;
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 2fr 4fr;
@@ -127,11 +148,11 @@ body .title {
 }
 
 #banner hr {
-  margin-top: 30px;
-  margin-left: 100px;
-  background: #fff;
-  height: 2px;
-  width: 1390px;
+  width: 85vw;
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  z-index: 5;
 }
 
 #content1 {
@@ -139,7 +160,7 @@ body .title {
   display: grid;
   -ms-grid-columns: 1fr 1fr;
       grid-template-columns: 1fr 1fr;
-  margin: 50px 120px;
+  margin: 100px 120px;
   width: 80vw;
 }
 
@@ -203,7 +224,9 @@ body .title {
 
 #service {
   width: 100vw;
+  height: 100vh;
   margin: 0 auto;
+  background: #eee;
 }
 
 #service h1 {
@@ -218,7 +241,7 @@ body .title {
   -ms-grid-columns: 1fr 1fr;
       grid-template-columns: 1fr 1fr;
   width: 80vw;
-  height: 200px;
+  height: 150px;
   grid-gap: 50px;
   margin: 20px 250px;
 }
@@ -283,7 +306,7 @@ body .title {
 #service-process {
   width: 100vw;
   height: 80vh;
-  background-color: #eee;
+  background-color: #fff;
 }
 
 #service-process h1 {
@@ -456,7 +479,7 @@ body .title {
 }
 
 #contact-us #contact-form #form-right #facebook:hover {
-  background-color: #2A4F91;
+  background-color: #2a4f91;
   color: #fff;
 }
 

desktop11/style.scss

@@ -47,19 +47,36 @@ body {
 #banner {
     width: 100vw;
     height: 100vh;
-    background-image: url(./img/001.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    margin-bottom: 150px;
+    position: relative;
     #text {
         text-align: center;
-        margin-top: 260px;
+ 
+        .banner-slider {
+            .banner1,
+            .banner2,
+            .banner3 {
+                width: 100vw;
+                height: 100vh;
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+            }
+            .banner1 {
+                background-image: url(./img/banner/00.webp);
+            }
+            .banner2 {
+                background-image: url(./img/banner/002.webp);
+            }
+            .banner3 {
+                background-image: url(./img/banner/003.webp);
+            }
+        }
         h1 {
             padding: 15px;
             color: $Font-color;
             font-family: 追奇手寫體;
             font-size: 72px;
+            margin-top: 300px;
         }
         .btn-main {
             box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
@@ -83,16 +100,17 @@ body {
     .Navigation {
         width: 100vw;
         height: 50px;
+        position: absolute;
+        top: 0;
+        z-index: 5;
         display: grid;
         grid-template-columns: 2fr 4fr;
 
         .logo {
             padding-left: 100px;
-           img{
-               width: 200px;
-               
-           }
-            
+            img {
+                width: 200px;
+            }
         }
         .link {
             text-align: right;
@@ -111,11 +129,11 @@ body {
         }
     }
     hr {
-        margin-top: 30px;
-        margin-left: 100px;
-        background: $Font-color;
-        height: 2px;
-        width: 1390px;
+        width: 85vw;
+        position:absolute;
+        top: 100px;
+        left: 100px;
+        z-index: 5;
     }
 }
 
@@ -123,7 +141,7 @@ body {
 #content1 {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    margin: 50px 120px;
+    margin: 100px 120px;
     width: 80vw;
     .content1-left {
         width: 510x;
@@ -180,7 +198,9 @@ body {
 // service
 #service {
     width: 100vw;
-    margin: 0 auto; 
+    height: 100vh;
+    margin: 0 auto;
+    background: #eee;
     h1 {
         padding: 15px;
         margin-left: 190px;
@@ -190,7 +210,7 @@ body {
         display: grid;
         grid-template-columns: 1fr 1fr;
         width: 80vw;
-        height: 200px;
+        height: 150px;
         grid-gap: 50px;
         margin: 20px 250px;
 
@@ -224,18 +244,17 @@ body {
         }
     }
     #service-img {
-        width: 80vw;  
-       margin: 0 auto;
+        width: 80vw;
+        margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10px;
-        
+
         img {
             width: 40vw;
             height: 40vh;
             object-fit: cover;
         }
-
     }
     .btn {
         text-align: center;
@@ -246,7 +265,7 @@ body {
 #service-process {
     width: 100vw;
     height: 80vh;
-    background-color: #eee;
+    background-color: #fff;
     h1 {
         padding: 15px;
         margin-left: 190px;
@@ -329,7 +348,7 @@ body {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         margin-top: 10px;
- 
+
         #location,
         #type,
         #modal,
@@ -357,7 +376,6 @@ body {
             #rooms,
             #livingroom,
             #bathroom {
-            
                 width: 32.5%;
                 height: 50px;
                 margin: 15px 0;
@@ -384,23 +402,20 @@ body {
                 background-color: #fff;
                 transition: 0.3s;
                 position: relative;
-                img{
+                img {
                     position: absolute;
-                    left:50px;
-                    top:7px;
+                    left: 50px;
+                    top: 7px;
                     width: 32px;
                     height: 32px;
                 }
-                &:hover{
-                    background-color: #2A4F91;
-                    color:#fff;
-                    img{
-                        filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
+                &:hover {
+                    background-color: #2a4f91;
+                    color: #fff;
+                    img {
+                        filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%)
+                            contrast(106%);
                     }
-                
-                       
-                        
-
                 }
             }
             a {
@@ -452,7 +467,7 @@ body {
     text-align: center;
     font-size: 18px;
     line-height: 130px;
-    
+
     a {
         text-decoration: none;
         color: #9f5000;

index1.html

@@ -15,7 +15,7 @@ window.onload=function(){
     
     if(screen.width>1024)
     {
-        window.location.href = "./desktop/index.html";   
+        window.location.href = "./desktop11/index.html";   
     }
     else
     {