初版

.vscode/settings.json

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

about.json

@@ -0,0 +1,267 @@
+[
+    {
+        "id": 0,
+        "workBannerImg":"./img/banner/banner-m.png",
+        "WorkName": "張馨&瀚觀室內設計",
+        "DesignerName": "張馨",
+        "Designerimg": "../img/banner/28.png",
+        "WorkLoc": "北部",
+        "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新",
+        "WorkStyle": "現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風",
+        "WorkBudget": "100萬以上",
+        "WorkSize": "不限",
+        "WorkSoho": "接受局部裝修工程；接受設計委託",
+        "DesignIdea1": "恆星設計，用愛陪伴生活",
+        "DesignIdea2": "三大特點為你帶來最高品質的室內設計",
+        "DesignTeam": "設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事",
+        "DesignerFeature": "同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。",
+        "DesignerEngineering": "3D與實景零誤差，設計師同步了解工程難點，深入工程執行。",
+        "TollFreeCall": "0809-000123#24939",
+        "Telephone": "03-355-1922",
+        "Address": "桃園市桃園區新埔六街48號",
+        "Fax": "03-355-7122",
+        "Email": "sdesign107@gmail.com",
+        "Web": "https://www.star-interiordesign.com",
+        "Facebook": "https://www.facebook.com/Sdesign2018",
+        "workimg": [
+            {
+                "img": "../img/about/sec01/sec02-1.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-2.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-3.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-4.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-5.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-6.webp"
+            }
+        ]
+    },
+    {
+        "id": 1,
+        "WorkName": "張馨&瀚觀室內設計2",
+        "DesignerName": "張馨",
+        "Designerimg": "../img/banner/89.png",
+        "WorkLoc": "北部",
+        "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新",
+        "WorkStyle": "現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風",
+        "WorkBudget": "100萬以上",
+        "WorkSize": "不限",
+        "WorkSoho": "接受局部裝修工程；接受設計委託",
+        "DesignIdea1": "恆星設計，用愛陪伴生活",
+        "DesignIdea2": "三大特點為你帶來最高品質的室內設計",
+        "DesignTeam": "設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事",
+        "DesignerFeature": "同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。",
+        "DesignerEngineering": "3D與實景零誤差，設計師同步了解工程難點，深入工程執行。",
+        "TollFreeCall": "0809-000123#24939",
+        "Telephone": "03-355-1922",
+        "Address": "桃園市桃園區新埔六街48號",
+        "Fax": "03-355-7122",
+        "Email": "sdesign107@gmail.com",
+        "Web": "https://www.star-interiordesign.com",
+        "Facebook": "https://www.facebook.com/Sdesign2018",
+        "workimg": [
+            {
+                "img": "../img/about/sec01/sec02-1.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-2.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-3.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-4.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-5.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-6.webp"
+            }
+        ]
+    },
+    {
+        "id": 2,
+        "WorkName": "張馨&瀚觀室內設計3",
+        "DesignerName": "張馨",
+        "Designerimg": "../img/banner/88.png",
+        "WorkLoc": "北部",
+        "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新",
+        "WorkStyle": "現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風",
+        "WorkBudget": "100萬以上",
+        "WorkSize": "不限",
+        "WorkSoho": "接受局部裝修工程；接受設計委託",
+        "DesignIdea1": "恆星設計，用愛陪伴生活",
+        "DesignIdea2": "三大特點為你帶來最高品質的室內設計",
+        "DesignTeam": "設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事",
+        "DesignerFeature": "同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。",
+        "DesignerEngineering": "3D與實景零誤差，設計師同步了解工程難點，深入工程執行。",
+        "TollFreeCall": "0809-000123#24939",
+        "Telephone": "03-355-1922",
+        "Address": "桃園市桃園區新埔六街48號",
+        "Fax": "03-355-7122",
+        "Email": "sdesign107@gmail.com",
+        "Web": "https://www.star-interiordesign.com",
+        "Facebook": "https://www.facebook.com/Sdesign2018",
+        "workimg": [
+            {
+                "img": "../img/about/sec01/sec02-1.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-2.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-3.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-4.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-5.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-6.webp"
+            }
+        ]
+    },
+    {
+        "id": 3,
+        "WorkName": "張馨&瀚觀室內設計4",
+        "DesignerName": "張馨",
+        "Designerimg": "../img/banner/85.png",
+        "WorkLoc": "北部",
+        "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新",
+        "WorkStyle": "現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風",
+        "WorkBudget": "100萬以上",
+        "WorkSize": "不限",
+        "WorkSoho": "接受局部裝修工程；接受設計委託",
+        "DesignIdea1": "恆星設計，用愛陪伴生活",
+        "DesignIdea2": "三大特點為你帶來最高品質的室內設計",
+        "DesignTeam": "設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事",
+        "DesignerFeature": "同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。",
+        "DesignerEngineering": "3D與實景零誤差，設計師同步了解工程難點，深入工程執行。",
+        "TollFreeCall": "0809-000123#24939",
+        "Telephone": "03-355-1922",
+        "Address": "桃園市桃園區新埔六街48號",
+        "Fax": "03-355-7122",
+        "Email": "sdesign107@gmail.com",
+        "Web": "https://www.star-interiordesign.com",
+        "Facebook": "https://www.facebook.com/Sdesign2018",
+        "workimg": [
+            {
+                "img": "../img/about/sec01/sec02-1.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-2.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-3.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-4.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-5.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-6.webp"
+            }
+        ]
+    },
+    {
+        "id": 4,
+        "WorkName": "張馨&瀚觀室內設計5",
+        "DesignerName": "張馨",
+        "Designerimg": "../img/banner/87.png",
+        "WorkLoc": "北部",
+        "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新",
+        "WorkStyle": "現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風",
+        "WorkBudget": "100萬以上",
+        "WorkSize": "不限",
+        "WorkSoho": "接受局部裝修工程；接受設計委託",
+        "DesignIdea1": "恆星設計，用愛陪伴生活",
+        "DesignIdea2": "三大特點為你帶來最高品質的室內設計",
+        "DesignTeam": "設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事",
+        "DesignerFeature": "同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。",
+        "DesignerEngineering": "3D與實景零誤差，設計師同步了解工程難點，深入工程執行。",
+        "TollFreeCall": "0809-000123#24939",
+        "Telephone": "03-355-1922",
+        "Address": "桃園市桃園區新埔六街48號",
+        "Fax": "03-355-7122",
+        "Email": "sdesign107@gmail.com",
+        "Web": "https://www.star-interiordesign.com",
+        "Facebook": "https://www.facebook.com/Sdesign2018",
+        "workimg": [
+            {
+                "img": "../img/about/sec01/sec02-1.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-2.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-3.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-4.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-5.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-6.webp"
+            }
+        ]
+    },
+    {
+        "id": 5,
+        "WorkName": "張馨&瀚觀室內設計6",
+        "DesignerName": "張馨",
+        "Designerimg": "../img/banner/84.png",
+        "WorkLoc": "北部",
+        "WorkType": "小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新",
+        "WorkStyle": "現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風",
+        "WorkBudget": "100萬以上",
+        "WorkSize": "不限",
+        "WorkSoho": "接受局部裝修工程；接受設計委託",
+        "DesignIdea1": "恆星設計，用愛陪伴生活",
+        "DesignIdea2": "三大特點為你帶來最高品質的室內設計",
+        "DesignTeam": "設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事",
+        "DesignerFeature": "同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。",
+        "DesignerEngineering": "3D與實景零誤差，設計師同步了解工程難點，深入工程執行。",
+        "TollFreeCall": "0809-000123#24939",
+        "Telephone": "03-355-1922",
+        "Address": "桃園市桃園區新埔六街48號",
+        "Fax": "03-355-7122",
+        "Email": "sdesign107@gmail.com",
+        "Web": "https://www.star-interiordesign.com",
+        "Facebook": "https://www.facebook.com/Sdesign2018",
+        "workimg": [
+            {
+                "img": "../img/about/sec01/sec02-1.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-2.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-3.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-4.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-5.webp"
+            },
+            {
+                "img": "../img/about/sec01/sec02-6.webp"
+            }
+        ]
+    }
+]

about/about.css

@@ -0,0 +1,458 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: 微軟正黑體;
+}
+
+body {
+  position: relative;
+  background: url(../img/about/banner/banner.webp), -webkit-gradient(linear, left top, left bottom, color-stop(10%, transparent), color-stop(49%, #363636));
+  background: url(../img/about/banner/banner.webp), linear-gradient(180deg, transparent 10%, #363636 49%);
+  background-size: 120vw;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 767px) {
+  body {
+    background: #363636;
+  }
+}
+
+body .arrow {
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  width: 45px;
+  height: 40px;
+  z-index: 10;
+  background-color: #e06649;
+}
+
+body .arrow:hover {
+  -webkit-box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+          box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+}
+
+@media screen and (max-width: 767px) {
+  body .arrow {
+    position: absolute;
+    bottom: 80px;
+  }
+}
+
+#Navigation {
+  background: rgba(112, 112, 112, 0.5);
+  height: 4.5vw;
+  width: 100vw !important;
+  z-index: 10;
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation {
+    height: 8vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation {
+    height: 15vw;
+    position: fixed;
+    z-index: 5;
+    background: rgba(0, 0, 0, 0.8);
+  }
+}
+
+#Navigation #nav {
+  width: 100vw;
+  margin: 0 auto;
+}
+
+#Navigation #logo {
+  padding-top: 0.5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #logo {
+    padding-top: 0;
+  }
+}
+
+#Navigation #logo img {
+  width: 120px;
+}
+
+#Navigation #link {
+  text-align: right;
+  padding: 1.5vw 3vw;
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation #link {
+    padding-top: 2vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #link {
+    display: none;
+  }
+}
+
+#Navigation #link a {
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 5px;
+  position: relative;
+}
+
+#Navigation #link a img {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#Navigation #menu-btn1 {
+  position: absolute;
+  right: 1vw;
+  top: 1vw;
+  width: 18vw;
+  z-index: 6;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation #menu-btn1 {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  #Navigation #menu-btn1 {
+    display: none;
+  }
+}
+
+#Navigation2 {
+  background: rgba(112, 112, 112, 0.75);
+  height: 4.5vw;
+  width: 100vw !important;
+  position: fixed;
+  bottom: 0px;
+  z-index: 10;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation2 {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation2 {
+    height: 8vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation2 {
+    height: 15vw;
+    position: fixed;
+    z-index: 5;
+    background: rgba(0, 0, 0, 0.8);
+  }
+}
+
+#Navigation2 #nav {
+  width: 90vw;
+  margin: 0 auto;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[5];
+      grid-template-columns: repeat(5, 1fr);
+  text-align: center;
+}
+
+#Navigation2 #nav a {
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  position: relative;
+}
+
+#Navigation2 #nav a img {
+  margin: 10px auto;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #banner {
+    background-image: url(../img/about/banner/banner-m2.png);
+    background-size: 110vw;
+    background-repeat: no-repeat;
+  }
+}
+
+#banner #banner-container {
+  width: 85vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container {
+    width: 95vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-des-about {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-des-about .banner-2 img {
+    display: none;
+  }
+}
+
+#banner #banner-container .banner-m {
+  padding-top: 80vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container .banner-m {
+    display: none;
+  }
+}
+
+#banner #banner-container .banner-m .bannerm-1 {
+  background: rgba(141, 194, 31, 0.8);
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-m .bannerm-1 {
+    margin: 0;
+  }
+}
+
+#banner #banner-container .banner-m .bannerm-1 .banner1-1 {
+  font-size: 18px;
+}
+
+#banner #banner-container ul {
+  text-align: center;
+  background: rgba(141, 194, 31, 0.8);
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container ul {
+    margin-top: 5vw;
+  }
+}
+
+#banner #banner-container ul .nav-item {
+  padding: 10px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container ul .nav-item {
+    padding: 6px;
+  }
+}
+
+#banner #banner-container ul .nav-item .nav-item2 {
+  position: relative;
+}
+
+#banner #banner-container ul .nav-item .nav-item2:after {
+  content: url(../img/about/sec01/item-arrow.png);
+  display: block;
+  width: 80%;
+  height: 5px;
+  position: absolute;
+  left: 12%;
+  bottom: 0;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  opacity: 0;
+}
+
+#banner #banner-container ul .nav-item .nav-item2 .after-nav {
+  opacity: 1;
+}
+
+#banner #banner-container ul .nav-item .nav-item2:focus:after {
+  width: 80%;
+  opacity: 1;
+}
+
+#banner #banner-container .tab-content .condition {
+  padding: 24px;
+  font-size: 13px;
+  padding-bottom: 10vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .condition {
+    padding: 18px;
+  }
+}
+
+#banner #banner-container .tab-content .idea {
+  padding: 24px;
+  font-size: 12px;
+  padding-bottom: 10vw;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-blend-mode: overlay;
+}
+
+#banner #banner-container .tab-content .contact {
+  padding-bottom: 10vw;
+  padding: 24px;
+  font-size: 13px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-blend-mode: overlay;
+}
+
+#banner #banner-container .tab-content .contact a {
+  text-decoration: none;
+  color: #fff;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .contact {
+    padding: 18px;
+  }
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4,
+#banner #banner-container .tab-content .sec03 .col-lg-4,
+#banner #banner-container .tab-content .sec04 .col-lg-4 {
+  position: relative;
+  background: #80ab29;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4 .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-p-m,
+#banner #banner-container .tab-content .sec03 .col-lg-4 .sec02-p-m,
+#banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-p-m {
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4 .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-p-m,
+  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec02-p-m,
+  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec02-p-m,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-p-m {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    font-size: 16px;
+    opacity: 0;
+  }
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4 .sec03-p-m,
+  #banner #banner-container .tab-content .sec03 .col-lg-4 .sec03-p-m,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 .sec03-p-m {
+    position: absolute;
+    top: 50px;
+    left: 10px;
+    opacity: 0;
+  }
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec02-p-m, #banner #banner-container .tab-content .sec02 .col-lg-4:hover .sec03-p-m,
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec02-p-m,
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover .sec03-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec02-p-m,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover .sec03-p-m {
+  opacity: 1;
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4:hover img,
+#banner #banner-container .tab-content .sec03 .col-lg-4:hover img,
+#banner #banner-container .tab-content .sec04 .col-lg-4:hover img {
+  opacity: 0.2;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4:hover img,
+  #banner #banner-container .tab-content .sec03 .col-lg-4:hover img,
+  #banner #banner-container .tab-content .sec04 .col-lg-4:hover img {
+    opacity: 1;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec02 .col-lg-4,
+  #banner #banner-container .tab-content .sec03 .col-lg-4,
+  #banner #banner-container .tab-content .sec04 .col-lg-4 {
+    background: none;
+  }
+}
+
+#banner #banner-container .tab-content .sec02 .col-lg-4 img,
+#banner #banner-container .tab-content .sec03 .col-lg-4 img,
+#banner #banner-container .tab-content .sec04 .col-lg-4 img {
+  opacity: 1;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+#banner #banner-container .tab-content .sec04 {
+  background: rgba(0, 0, 0, 0.8);
+  text-align: center;
+  height: 600px;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .tab-content .sec04 {
+    height: 300px;
+  }
+}
+
+#banner #banner-container .tab-content .sec04 p {
+  letter-spacing: 5px;
+}
+
+#footer {
+  background: #363636;
+  text-align: center;
+  width: 80vw;
+  margin: 0 auto !important;
+}
+
+@media screen and (max-width: 767px) {
+  #footer {
+    width: 95vw;
+    padding-bottom: 30vw;
+  }
+}
+
+#footer p {
+  color: #fff;
+}
+/*# sourceMappingURL=about.css.map */

about/about.scss

@@ -0,0 +1,362 @@
+// 關於我頁面
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 微軟正黑體;
+}
+$desktop: 1025px;
+$table: 1024px;
+$moblie: 767px;
+$Font-color: #fff;
+$title-color: #646464;
+$bgcolor: #f4fffc;
+$navbgcolor: #a9d0c5;
+body {
+    position: relative;
+    background: url(../img/about/banner/banner.webp), linear-gradient(180deg, transparent 10%, #363636 49%);
+    background-size: 120vw;
+    background-repeat: no-repeat;
+
+    @media screen and(max-width:$moblie) {
+        background: #363636;
+    }
+    .arrow {
+        position: fixed;
+        right: 30px;
+        bottom: 30px;
+        width: 45px;
+        height: 40px;
+        z-index: 10;
+        background-color: #e06649;
+        &:hover {
+            box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+        }
+        @media screen and(max-width:$moblie) {
+            position: absolute;
+            bottom: 80px;
+        }
+    }
+}
+#Navigation {
+    background: rgba(112, 112, 112, 0.5);
+
+    height: 4.5vw;
+    width: 100vw !important;
+    // position: fixed;
+    z-index: 10;
+    @media screen and(max-width:$table) {
+        height: 8vw;
+    }
+    @media screen and(max-width:$moblie) {
+        height: 15vw;
+        position: fixed;
+        z-index: 5;
+
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    #nav {
+        width: 100vw;
+        margin: 0 auto;
+    }
+
+    //    rwd要注意高度
+    #logo {
+        padding-top: 0.5vw;
+        @media screen and(max-width:$moblie) {
+            padding-top: 0;
+        }
+
+        img {
+            width: 120px;
+        }
+    }
+    #link {
+        text-align: right;
+        padding: 1.5vw 3vw;
+        @media screen and(max-width:$table) {
+            padding-top: 2vw;
+        }
+        @media screen and(max-width:$moblie) {
+            display: none;
+        }
+
+        a {
+            text-decoration: none;
+            color: $Font-color;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+            padding: 5px;
+            position: relative;
+            img {
+                object-fit: cover;
+            }
+        }
+    }
+
+    #menu-btn1 {
+        position: absolute;
+        right: 1vw;
+        top: 1vw;
+        width: 18vw;
+        z-index: 6;
+
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        @media screen and(min-width:768px) {
+            display: none;
+        }
+    }
+}
+#Navigation2 {
+    background: rgba(112, 112, 112, 0.75);
+    height: 4.5vw;
+    width: 100vw !important;
+    position: fixed;
+    bottom: 0px;
+    z-index: 10;
+
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    @media screen and(max-width:$table) {
+        height: 8vw;
+    }
+    @media screen and(max-width:$moblie) {
+        height: 15vw;
+        position: fixed;
+        z-index: 5;
+
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    #nav {
+        width: 90vw;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        text-align: center;
+        a {
+            text-decoration: none;
+            color: $Font-color;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+
+            position: relative;
+            img {
+                margin: 10px auto;
+                object-fit: cover;
+            }
+        }
+    }
+
+    //    rwd要注意高度
+}
+#banner {
+    @media screen and(max-width:$moblie) {
+        background-image: url(../img/about/banner/banner-m2.png);
+        background-size: 110vw;
+        background-repeat: no-repeat;
+    }
+    #banner-container {
+        width: 85vw;
+        @media screen and(max-width:$moblie) {
+            width: 95vw;
+        }
+        .banner-des-about {
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+            .banner-2 {
+                img {
+                    @media screen and(max-width:$moblie) {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        .banner-m {
+            padding-top: 80vw;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+            .bannerm-1 {
+                @media screen and(max-width:$moblie) {
+                    margin: 0;
+                }
+                background: rgba(141, 194, 31, 0.8);
+                .banner1-1 {
+                    font-size: 18px;
+                }
+            }
+        }
+
+        ul {
+            text-align: center;
+            background: rgba(141, 194, 31, 0.8);
+            @media screen and(max-width:$moblie) {
+                margin-top: 5vw;
+            }
+            .nav-item {
+                padding: 10px;
+               
+                @media screen and(max-width:$moblie) {
+                    padding: 6px;
+                }
+                .nav-item2{
+                    position: relative;
+                    &:after {
+                        content:url(../img/about/sec01/item-arrow.png);
+                        display: block;
+                        width: 80%;
+                        height: 5px;
+                        position: absolute;
+                        left: 12%;
+                        bottom: 0;
+                        transition: all 0.3s;
+                        opacity: 0;
+                       
+                    }
+                   
+                    // &:active:after,
+                    // &:focus:after{
+                    //     opacity: 1;
+                    // }
+                    .after-nav{
+                        opacity: 1;
+                    }
+                    &:focus:after
+                   {
+                        width: 80%;
+                        opacity: 1;
+                       
+                }
+                }
+            }
+        }
+        // 公司簡介
+        .tab-content {
+            // 公司簡介
+            .condition {
+                padding: 24px;
+                font-size: 13px;
+                padding-bottom: 10vw;
+                @media screen and(max-width:$moblie) {
+                    padding: 18px;
+                }
+            }
+            .idea {
+                padding: 24px;
+                font-size: 12px;
+                padding-bottom: 10vw;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-blend-mode: overlay;
+            }
+            .contact {
+                padding-bottom: 10vw;
+                padding: 24px;
+                font-size: 13px;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-blend-mode: overlay;
+                a{
+                    text-decoration: none;
+                    color:#fff;
+                }
+                @media screen and(max-width:$moblie) {
+                    padding: 18px;
+                }
+            }
+            // 個案賞析
+            .sec02,
+            .sec03,
+            .sec04 {
+                
+                .col-lg-4 {
+                    position: relative;
+                    background: rgb(128, 171, 41);
+                    transition: 0.3s ease-in-out;
+                    cursor: pointer;
+                    .sec02-p-m,.sec03-p-m{
+                        color:#fff;
+                        text-align: center;
+                        font-size: 14px;
+                        transition: 0.3s;
+                        transition: 0.3s ease-in-out;
+                        @media screen and(min-width:$desktop) {
+                            position: absolute;
+                            top:100px;
+                            left:20px;
+                            font-size: 16px;
+                           opacity: 0;
+                        }
+                    }
+
+                    .sec03-p-m{
+                        @media screen and(min-width:$desktop) {
+                            position: absolute;
+                            top:50px;
+                            left:10px;
+                           
+                           opacity: 0;
+                        }
+                    }          
+                    &:hover{
+                        .sec02-p-m,.sec03-p-m{
+                            opacity: 1;
+                        }
+                        img{
+                            opacity: 0.2;
+                            @media screen and(max-width:$moblie) {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                    @media screen and(max-width:$moblie) {
+                        background: none;
+                    }
+                   
+                    img {
+                        opacity: 1;
+                        transition: 0.3s ease-in-out;
+                       
+                    }
+                }
+            }
+            .sec04 {
+                background: rgba(0, 0, 0, 0.8);
+                text-align: center;
+                height: 600px;
+                @media screen and(max-width:$moblie) {
+                    height: 300px;
+                }
+                p {
+                    letter-spacing: 5px;
+                }
+            }
+        }
+    }
+}
+
+// 頁尾 footer
+#footer {
+    background: #363636;
+    text-align: center;
+    width: 80vw;
+    margin: 0 auto !important;
+    @media screen and(max-width:$moblie) {
+        width: 95vw;
+        padding-bottom: 30vw;
+    }
+    p {
+        color: #fff;
+    }
+}

about/goto2.js

@@ -0,0 +1,207 @@
+function get_id(){
+    var id =getParameterByName('id');
+    console.log(id);
+   
+}
+
+function getParameterByName(name, url = window.location.href) {
+    name = name.replace(/[\[\]]/g, '\\$&');
+    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+     results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, ' '));
+   }
+$(document).ready(function () {
+    function get_data(i=0) {
+      $.ajax({
+        method: "GET",
+        url: "../about.json",
+        dataType: "json",
+  
+      })
+        .done(function (msg) {
+          var aboutContent = '';
+          var aboutInt = '';
+          var aboutImg = '';
+          var aboutViedeo = '';
+          console.log(msg[i]);
+  
+          // var res = msg.length;
+          // console.log(res);
+          // const limit = res;
+          // 公司簡介
+          aboutContent += ' \
+                <div class="row px-0 mx-0">\
+                    <div class="condition col-12 col-lg-4 bg-white">\
+                        <h1 class="fs-3">接案條件 condition</h1>\
+                        <table class="table">\
+                            <tbody>\
+                                <tr>\
+                                    <th class="w-25" scope="row">接案區域</th>\
+                                    <td>\
+                                        '+ msg[i].WorkLoc + '\
+                                    </td>\
+                                </tr>\
+                    <tr>\
+                        <th scope="row">接案類型</th>\
+                        <td>\
+                            '+ msg[i].WorkType + '\
+                        </td>\
+                    </tr>\
+                    <tr>\
+                        <th scope="row">接案風格</th>\
+                        <td>\
+                            '+ msg[i].WorkStyle + '\
+                        </td>\
+                    </tr>\
+                    <tr>\
+                        <th scope="row">接案預算</th>\
+                        <td>\
+                            '+ msg[i].WorkBudget + '\
+                        </td>\
+                    </tr>\
+                    <tr>\
+                        <th scope="row">接案坪數</th>\
+                        <td>\
+                            '+ msg[i].WorkSize + '\
+                        </td>\
+                    </tr>\
+                    <tr>\
+                        <th scope="row">特殊接案</th>\
+                        <td>\
+                            '+ msg[i].WorkSoho + '\
+                        </td>\
+                    </tr>\
+                            </tbody >\
+                        </table >\
+                    </div >\
+                    <div style="background: url(../img/about/sec01/idea.webp);"\
+                        class="idea col-12 col-lg-4 text-white">\
+                        <h1 class="fs-3">設計理念 idea</h1>\
+                        <table class="table table-borderless text-white">\
+                            <tbody>\
+                                <tr>\
+                                    <td>\
+                                        '+ msg[i].DesignIdea1 + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        '+ msg[i].DesignIdea2 + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <p class="mb-2">｜擁有工程團隊｜</p>\
+                                        '+ msg[i].DesignTeam + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <p class="mb-2">｜設計師個人特質｜</p>\
+                                        '+ msg[i].DesignerFeature + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <p class="mb-2">｜設計與工程融合｜ </p>\
+                                        '+ msg[i].DesignerEngineering + '\
+                                    </td>\
+                                </tr>\
+                            </tbody>\
+                        </table>\
+                    </div>\
+                    <div style="background: url(../img/about/sec01/contact.webp);"\
+                        class="contact col-12 col-lg-4 text-white">\
+                        <h1 class="fs-3">聯絡設計師 contact</h1>\
+                        <table class="table text-white">\
+                            <tbody>\
+                                <tr>\
+                                    <td class="w-75">\
+                                        <span>免付費電話／</span>  '+ msg[i].TollFreeCall + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <span>電話／</span>'+ msg[i].Telephone + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <span>地址／</span>'+ msg[i].Address + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <span>傳真／</span>'+ msg[i].Fax + '\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <span>電子郵件／</span><a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <span>網站／</span><a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
+                                    </td>\
+                                </tr>\
+                                <tr>\
+                                    <td>\
+                                        <span>Facebook:</span><a target="_blank" href="'+ msg[i].Facebook + '">' + msg[i].Facebook + '</a>\
+                                    </td>\
+                                </tr>\
+                            </tbody>\
+                        </table>\
+                    </div>\
+                </div >';
+  
+          aboutInt += ' \
+                        <div class="banner-des row vertical align-items-end">\
+                            <div class="col-3 pe-0">\
+                                <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
+                            </div>\
+                            <div class="banner-0 col-9 text-white">\
+                                <div class="row">\
+                                    <div class="banner-1 col-8 align-self-end">\
+                                        <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
+                                        <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
+                                    </div>\
+                                    <div class="banner-2 col-4">\
+                                        <img src="../img/about/banner/title.png" alt="">\
+                                    </div>\
+                                </div>\
+                            </div> \
+                        </div>';
+          console.log(msg[i].workimg.length)
+          for (var j = 0; j < msg[i].workimg.length; j++) {
+            aboutImg += ' \
+                            <div class="secimg col-lg-4 mx-0 px-0">\
+                                <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
+                                <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>\
+                            </div>';
+  
+            aboutViedeo += ' \
+                            <div class="secimg col-lg-4 mx-0 px-0">\
+                                <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
+                                <p class="sec03-p-m p-1 mt-1 "> 渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...</p>\
+                            </div>';
+          }
+          
+  
+          $('.sec03-1').html(aboutViedeo);
+          $('.sec02-1').html(aboutImg);
+          $('.banner-des-about').html(aboutInt)
+          $('.sec01').html(aboutContent);      
+      });
+    }
+  
+    get_data(0);
+  
+ 
+  
+  
+
+  
+  });

about/index.html

@@ -0,0 +1,572 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <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>about</title>
+
+
+
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <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="./about.css">
+</head>
+
+<body id="top">
+    <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
+        <div id="nav" class="row">
+            <div id="logo" class=" col-md-2 col-lg-3">
+                <a href="https://hhh.com.tw/"> <img src="../img/nav/logo-main-1-1.webp" alt=""></a>
+            </div>
+            <div id="link" class="col-md-10 col-lg-9">
+                <a href="https://line.me/ti/p/%40ovs4341s">
+                    <img src="../img/nav/line.png" alt="幸福空間Line" class="" width="20" height="20">
+                </a>
+                <a href="https://www.facebook.com/hhhfb">
+                    <img src="../img/nav/facebook.png" width="20" height="20" alt="幸福空間FB">
+                </a>
+                <a href="https://www.instagram.com/gorgeous_space/">
+                    <img src="../img/nav/ig.png" width="20" height="20" alt="幸福空間IG">
+                </a>
+                <a href="https://www.youtube.com/user/gorgeousspace">
+                    <img src="../img/nav/youtube.png" width="25" height="20" alt="幸福空間YT">
+                </a>
+            </div>
+        </div>
+    </section>
+    <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="../img/gotop.png" alt="">
+    <section id="Navigation2" class="container-fluid" style="padding:0;margin: 0; ">
+        <div id="nav" class="nav2">
+            <div class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="../img/nav-bottom/find.png" alt=""></a>
+            </div>
+            <div class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="../img/nav-bottom/budget.png" alt=""></a>
+            </div>
+            <div class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="../img/nav-bottom/line.png" alt=""></a>
+            </div>
+            <div class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="../img/nav-bottom/facebook.png" alt=""></a>
+            </div>
+            <div class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="../img/nav-bottom/Icon simple-wechat.png"
+                        alt=""></a>
+            </div>
+            <div style="display: none;" class="col-0">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="../img/nav/logo-main-1-1.webp" alt=""></a>
+            </div>
+        </div>
+
+        </div>
+    </section>
+    <section id="banner">
+        <div id="banner-container" class="container-fluid px-0">
+            <!-- 電腦版 -->
+            <div class="banner-des-about row vertical align-items-end">
+                <div class="col-3 pe-0">
+                    <!-- <img class="img-fluid" src="../img/banner/28.png" alt=""> -->
+                </div>
+                <div class="banner-0 col-9 text-white">
+                    <div class="row">
+                        <div class="banner-1 col-8 align-self-end">
+                            <!-- <div style="font-weight: 900;" class="fs-2">張馨&瀚觀室內設計</div>
+                            <p><span class="fs-5">張馨</span>設計師</p> -->
+                        </div>
+                        <div class="banner-2 col-4">
+                            <img src="../img/about/banner/title.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 手機板 -->
+            <div class="banner-m row vertical align-items-end px-0 mx-0">
+
+                <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
+                    <img class="img-fluid" src="../img/banner/28.png" alt="">
+                </div>
+                <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">
+                    <div class="banner1-1" style="font-weight: 900;">張馨&瀚觀室內設計</div>
+                    <p><span class="fs-5">張馨</span>設計師</p>
+                </div>
+            </div>
+            <ul class="nav row nav-pills mb-3 justify-content-md-center rounded-pill" id="pills-tab" role="tablist">
+                <li class="nav-item col-3 col-lg-1" role="presentation">
+                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-home-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab"
+                        aria-controls="pills-home" aria-selected="true">公司簡介</button>
+                </li>
+                <li class="nav-item col-3 col-lg-1" role="presentation">
+                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-profile-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab"
+                        aria-controls="pills-profile" aria-selected="false">個案賞析</button>
+                </li>
+                <li class="nav-item col-3 col-lg-1" role="presentation">
+                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab"
+                        aria-controls="pills-contact" aria-selected="false">精彩影音</button>
+                </li>
+                <li class="nav-item col-3 col-lg-1" role="presentation">
+                    <button class="nav-item2 border-0 bg-transparent text-white" id="pills-contact2-tab"
+                        data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab"
+                        aria-controls="pills-contact" aria-selected="false">秘技分享</button>
+                </li>
+            </ul>
+            <div class="tab-content" id="pills-tabContent">
+                <div class="sec01 tab-pane fade show active" id="pills-home" role="tabpanel"
+                    aria-labelledby="pills-home-tab">
+                    <!-- <div class="row px-0 mx-0">
+                        <div class="condition col-12 col-lg-4 bg-white">
+                            <h1 class="fs-3">接案條件 condition</h1>
+                            <table class="table">
+                                <tbody>
+                                    <tr>
+                                        <th class="w-25" scope="row">接案區域</th>
+                                        <td>
+                                            北部
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <th scope="row">接案類型</th>
+                                        <td>
+                                            小坪數,標準格局,別墅,大坪數,樓中樓,實品／樣品屋,商業空間,挑高樓層,工作空間,餐飲空間,民宿旅館,公共空間,老屋翻新
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <th scope="row">接案風格</th>
+                                        <td>
+                                            現代風,古典風,休閒多元,美式風,奢華風,新古典,北歐風,工業風
+                                        </td>
+
+                                    </tr>
+
+                                    <tr>
+                                        <th scope="row">接案預算</th>
+                                        <td>
+                                            100萬以上
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <th scope="row">接案坪數</th>
+                                        <td>
+                                            不限
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <th scope="row">特殊接案</th>
+                                        <td>
+                                            接受局部裝修工程；接受設計委託
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div style="background: url(../img/about/sec01/idea.webp);"
+                            class="idea col-12 col-lg-4 text-white">
+                            <h1 class="fs-3">設計理念 idea</h1>
+                            <table class="table table-borderless text-white">
+                                <tbody>
+                                    <tr>
+                                        <td>
+                                            恆星設計，用愛陪伴生活
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            三大特點為你帶來最高品質的室內設計
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+
+                                        <td>
+                                            <p class="mb-2">｜擁有工程團隊｜</p>
+                                            設計與工程搭配良好，三次工程檢驗點，一同為屋主把關工程大小事！
+                                        </td>
+
+                                    </tr>
+
+                                    <tr>
+
+                                        <td>
+                                            <p class="mb-2">｜設計師個人特質｜</p>
+                                            同時身為現代女性、妻子及新時代媽媽三個角色的女性設計師，能夠為不同的家庭提供更合適的設計。
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+
+                                        <td>
+                                            <p class="mb-2">｜設計與工程融合｜ </p>
+                                            3D與實景零誤差，設計師同步了解工程難點，深入工程執行。
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div style="background: url(../img/about/sec01/contact.webp);"
+                            class="contact col-12 col-lg-4 text-white">
+                            <h1 class="fs-3">聯絡設計師 contact</h1>
+                            <table class="table text-white">
+                                <tbody>
+                                    <tr>
+                                        <td class="w-75">
+                                            <span>免付費電話／</span>0809-000123#24939
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <span>電話／</span>03-355-1922
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+
+                                        <td>
+                                            <span>地址／</span>桃園市桃園區新埔六街48號
+                                        </td>
+
+                                    </tr>
+
+                                    <tr>
+
+                                        <td>
+                                            <span>傳真／</span>03-355-7122
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+
+                                        <td>
+                                            <span>電子郵件／</span><a target="_blank" href="mailto:sdesign107@gmail.com">sdesign107@gmail.com</a>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <span>網站／</span><a target="_blank" href="https://www.star-interiordesign.com/">https://www.star-interiordesign.com/</a>                                          
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>
+                                            <span>Facebook:</span> <a target="_blank" href="https://www.facebook.com/Sdesign2018">https://www.facebook.com/Sdesign2018</a>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="sec02 tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+                    <div class="sec02-1 row px-0 mx-0">
+                        <!-- <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-1.webp" alt="">
+                            <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-2.webp" alt="">
+                            <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-3.webp" alt="">
+                            <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-4.webp" alt="">
+                            <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-5.webp" alt="">
+                            <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-6.webp" alt="">
+                            <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>
+                        </div> -->
+                    </div>
+                </div>
+                <div class="sec03 tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
+                    <div class="sec03-1 row px-0 mx-0">
+                        <!-- <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-1.webp" alt="">
+                            <p class="sec03-p-m p-1 mt-1 ">
+                                渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...
+                            </p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-2.webp" alt="">
+                            <p class="sec03-p-m p-1 mt-1 ">
+                                渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...
+                            </p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-3.webp" alt="">
+                            <p class="sec03-p-m p-1 mt-1 ">
+                                渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...
+                            </p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-4.webp" alt="">
+                            <p class="sec03-p-m p-1 mt-1 ">
+                                渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...
+                            </p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-5.webp" alt="">
+                            <p class="sec03-p-m p-1 mt-1">
+                                渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...
+                            </p>
+                        </div>
+                        <div class="secimg col-lg-4 mx-0 px-0">
+                            <img class="img-fluid" src="../img/about/sec01/sec02-6.webp" alt="">
+                            <p class="sec03-p-m p-1 mt-1 ">
+                                渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...
+                            </p>
+                        </div> -->
+                    </div>
+                </div>
+                <div class="sec04 tab-pane fade container" id="pills-contact2" role="tabpanel"
+                    aria-labelledby="pills-contact2-tab">
+                    <div class="sec04-row row align-items-center h-100">
+                        <div>
+                            <h1 class="align-self-center" style="color:#86B81D;">Stay tuned !</h1>
+                            <p class="align-self-center" style="color:#fff;">...敬請期待...</p>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </section>
+    <section style="text-align: center;" class="py-4">
+        <img src="../img/about/banner/return.png" alt="">
+    </section>
+    <footer id="footer" class="container-fluid px-0 mx-0">
+        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
+    </footer>
+
+
+
+
+
+
+
+
+
+
+
+
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
+    <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 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+
+    <script src="./goto2.js"></script>
+    <script>
+        // $(document).ready(function () {
+        //     $.ajax({
+        //         method: "GET",
+        //         url: "about.json",
+        //         dataType: "json",
+
+        //     })
+        //         .done(function (msg) {
+        //             var aboutContent = '';
+        //             var aboutInt = '';
+        //             var aboutImg = '';
+        //             var aboutViedeo = '';
+        //             console.log(msg);
+        //             function get_data(i = 0) {
+        //                 // var res = msg.length;
+        //                 // console.log(res);
+        //                 // const limit = res;
+        //                 // 公司簡介
+        //                 aboutContent += ' \
+        //                 <div class="row px-0 mx-0">\
+        //                     <div class="condition col-12 col-lg-4 bg-white">\
+        //                         <h1 class="fs-3">接案條件 condition</h1>\
+        //                         <table class="table">\
+        //                             <tbody>\
+        //                                 <tr>\
+        //                                     <th class="w-25" scope="row">接案區域</th>\
+        //                                     <td>\
+        //                                         '+ msg[i].WorkLoc + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                     <tr>\
+        //                         <th scope="row">接案類型</th>\
+        //                         <td>\
+        //                             '+ msg[i].WorkType + '\
+        //                         </td>\
+        //                     </tr>\
+        //                     <tr>\
+        //                         <th scope="row">接案風格</th>\
+        //                         <td>\
+        //                             '+ msg[i].WorkStyle + '\
+        //                         </td>\
+        //                     </tr>\
+        //                     <tr>\
+        //                         <th scope="row">接案預算</th>\
+        //                         <td>\
+        //                             '+ msg[i].WorkBudget + '\
+        //                         </td>\
+        //                     </tr>\
+        //                     <tr>\
+        //                         <th scope="row">接案坪數</th>\
+        //                         <td>\
+        //                             '+ msg[i].WorkSize + '\
+        //                         </td>\
+        //                     </tr>\
+        //                     <tr>\
+        //                         <th scope="row">特殊接案</th>\
+        //                         <td>\
+        //                             '+ msg[i].WorkSoho + '\
+        //                         </td>\
+        //                     </tr>\
+        //                             </tbody >\
+        //                         </table >\
+        //                     </div >\
+        //                     <div style="background: url(../img/about/sec01/idea.webp);"\
+        //                         class="idea col-12 col-lg-4 text-white">\
+        //                         <h1 class="fs-3">設計理念 idea</h1>\
+        //                         <table class="table table-borderless text-white">\
+        //                             <tbody>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         '+ msg[i].DesignIdea1 + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         '+ msg[i].DesignIdea2 + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <p class="mb-2">｜擁有工程團隊｜</p>\
+        //                                         '+ msg[i].DesignTeam + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <p class="mb-2">｜設計師個人特質｜</p>\
+        //                                         '+ msg[i].DesignerFeature + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <p class="mb-2">｜設計與工程融合｜ </p>\
+        //                                         '+ msg[i].DesignerEngineering + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                             </tbody>\
+        //                         </table>\
+        //                     </div>\
+        //                     <div style="background: url(../img/about/sec01/contact.webp);"\
+        //                         class="contact col-12 col-lg-4 text-white">\
+        //                         <h1 class="fs-3">聯絡設計師 contact</h1>\
+        //                         <table class="table text-white">\
+        //                             <tbody>\
+        //                                 <tr>\
+        //                                     <td class="w-75">\
+        //                                         <span>免付費電話／</span>  '+ msg[i].TollFreeCall + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <span>電話／</span>'+ msg[i].Telephone + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <span>地址／</span>'+ msg[i].Address + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <span>傳真／</span>'+ msg[i].Fax + '\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <span>電子郵件／</span><a target="_blank" href="mailto:'+ msg[i].Email + '">' + msg[i].Email + '</a>\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <span>網站／</span><a target="_blank" href="'+ msg[i].Web + '">' + msg[i].Web + '</a>\
+        //                                     </td>\
+        //                                 </tr>\
+        //                                 <tr>\
+        //                                     <td>\
+        //                                         <span>Facebook:</span><a target="_blank" href="'+ msg[i].Facebook + '">' + msg[i].Facebook + '</a>\
+        //                                     </td>\
+        //                                 </tr>\
+        //                             </tbody>\
+        //                         </table>\
+        //                     </div>\
+        //                 </div >';
+
+        //                 aboutInt += ' \
+        //                         <div class="banner-des row vertical align-items-end">\
+        //                             <div class="col-3 pe-0">\
+        //                                 <img class="img-fluid" src="'+ msg[i].Designerimg + '" alt="">\
+        //                             </div>\
+        //                             <div class="banner-0 col-9 text-white">\
+        //                                 <div class="row">\
+        //                                     <div class="banner-1 col-8 align-self-end">\
+        //                                         <div style="font-weight: 900;" class="fs-2">'+ msg[i].WorkName + '</div>\
+        //                                         <p><span class="fs-5">'+ msg[i].DesignerName + '</span>設計師</p>\
+        //                                     </div>\
+        //                                     <div class="banner-2 col-4">\
+        //                                         <img src="../img/about/banner/title.png" alt="">\
+        //                                     </div>\
+        //                                 </div>\
+        //                             </div> \
+        //                         </div>';
+        //                 console.log(msg[i].workimg.length)
+        //                 for (var j = 0; j < msg[i].workimg.length; j++) {
+        //                     aboutImg += ' \
+        //                             <div class="secimg col-lg-4 mx-0 px-0">\
+        //                                 <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
+        //                                 <p class="sec02-p-m p-1 mt-1 ">一起展開我們的浪漫混搭生活｜現代風｜28坪</p>\
+        //                             </div>';
+
+        //                     aboutViedeo += ' \
+        //                             <div class="secimg col-lg-4 mx-0 px-0">\
+        //                                 <img class="img-fluid" src="'+ msg[i].workimg[j].img + '" alt="">\
+        //                                 <p class="sec03-p-m p-1 mt-1 "> 渲染一室輕快寫意！紓壓水彩畫變成真實生活場景,室內設計其實與作畫有些許相似，透過室內設計師的手筆，衍生出千變萬化的居家風貌，有些宛若鮮豔渾厚的油畫，有些猶如輕簡優雅的水...</p>\
+        //                             </div>';
+        //                 }
+
+
+        //                 $('.sec03-1').html(aboutViedeo);
+        //                 $('.sec02-1').html(aboutImg);
+        //                 $('.banner-des').html(aboutInt)
+        //                 $('.sec01').html(aboutContent);
+        //             }
+        //             get_data();
+        //         });
+
+
+        // });
+    </script>
+</body>
+
+</html>

goto.js

@@ -0,0 +1,67 @@
+$("*").each(function (index, element) {
+  // 此元素被點選後執行
+  $(this).click(function (e) {
+    // 取得被點選元素的屬性：data-gt-target
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    // JS 語法：判斷式
+    // if (條件) {程式區塊}
+    // 當條件成立，會執行程式區塊
+
+    // 如果 目標有資料 才會執行 { } 內的程式
+    // 避免出現 undefine (未定義 - 不存在的資料)
+    if (target) {
+      //console.log("目標：" + target);
+      //console.log("時間：" + duration);
+      //console.log("位移：" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+      //console.log("要前往元素的上方位置：" + top);
+
+      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+      // parseInt() 將文字轉為數字
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
+  });
+});
+
+// 避免動畫與使用者滾輪衝突
+// html 在滾動滾輪時 停止 html 所有效果
+$("html").on("mousewheel", function () {
+  $("html").stop();
+});
+
+// gotop下滑效果
+$(".arrow").hide();
+$(window).scroll(function () {
+  var y = window.scrollY;
+
+  if (y > 10) {
+    $(".arrow").show();
+  } else {
+    $(".arrow").hide();
+  }
+
+});
+
+//  $('.nav-item2').click(function(){
+// $(this).toggleClass('after-nav')
+//  })
+
+$('#28').click(function () { console.log(28);
+  window.location.href =`./about/index.html?id=${msg[0].id}`;
+ });
+
+$('#89').click(function () { console.log(89);get_data(1); });
+
+$('#88').click(function () { console.log(88); get_data(2);});
+
+$('#85').click(function () { console.log(85); get_data(3);});
+$('#87').click(function () { console.log(87); get_data(4);});
+$('#84').click(function () { console.log(84); get_data(5);});

index.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <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>
+
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <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>
+
+<body id="top">
+    <section id="Navigation" class="container-fluid" style="padding:0;margin: 0; ">
+        <div id="nav" class="row">
+            <div id="logo" class=" col-md-2 col-lg-3">
+                <a href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
+            </div>
+            <div id="link" class="col-md-10 col-lg-9">
+                <a target="_blank" href="https://line.me/ti/p/%40ovs4341s">
+                    <img src="./img/nav/line.png" alt="幸福空間Line" class="" width="20" height="20">
+                </a>
+                <a target="_blank" href="https://www.facebook.com/hhhfb">
+                    <img src="./img/nav/facebook.png" width="20" height="20" alt="幸福空間FB">
+                </a>
+                <a target="_blank" href="https://www.instagram.com/gorgeous_space/">
+                    <img src="./img/nav/ig.png" width="20" height="20" alt="幸福空間IG">
+                </a>
+                <a target="_blank" href="https://www.youtube.com/user/gorgeousspace">
+                    <img src="./img/nav/youtube.png" width="25" height="20" alt="幸福空間YT">
+                </a>
+            </div>
+        </div>
+    </section>
+    <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
+    <section id="Navigation2" class="container-fluid" style="padding:0;margin: 0; ">
+        <div id="nav" class="nav2">
+            <div  class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav-bottom/find.png" alt=""></a>
+            </div>
+            <div  class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav-bottom/budget.png" alt=""></a>
+            </div>
+            <div  class="nav-1">
+                <a target="_blank" href="https://line.me/ti/p/%40ovs4341s"> <img src="./img/nav-bottom/line.png" alt=""></a>
+            </div>
+            <div class="nav-1">
+                <a target="_blank" href="https://www.facebook.com/hhhfb"> <img src="./img/nav-bottom/facebook.png" alt=""></a>
+            </div> <div  class="nav-1">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav-bottom/Icon simple-wechat.png" alt=""></a>
+            </div>
+            <div style="display: none;" class="col-0">
+                <a target="_blank" href="https://hhh.com.tw/"> <img src="./img/nav/logo-main-1-1.webp" alt=""></a>
+            </div>
+        </div> 
+        
+        </div>
+    </section>
+    <section id="banner">
+        <div id="banner-container" class="container-fluid px-0">
+            <!-- 電腦版 -->
+            <div  class="banner-des row vertical align-items-end px-0 mx-0">
+                <div class="banner-0 col-0 order-1 col-lg-5 order-1 pe-0">
+
+                </div>
+                <div class="banner-1 col-5 order-3 col-lg-5 order-2 text-white text-end py-3">
+                    <div class="banner1-1" style="font-weight: 900;" >張馨&瀚觀室內設計</div>
+                    <p><span class="fs-5">張馨</span>設計師</p>
+                </div>
+                <div class="banner-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
+                    <img class="img-fluid" src="./img/banner/28.png" alt="">
+                </div>
+            </div>
+            <!-- 手機板 -->
+            <div  class="banner-m row vertical align-items-end px-0 mx-0">
+               
+                <div class="bannerm-2 col-7 order-2 col-lg-2 order-3 px-0 mx-0">
+                    <img class="img-fluid" src="./img/banner/28.png" alt="">
+                </div>
+                <div class="bannerm-1 col-5 order-3 col-lg-5 order-2 text-white text-start py-3">
+                    <div class="banner1-1" style="font-weight: 900;" >張馨&瀚觀室內設計</div>
+                    <p><span class="fs-5">張馨</span>設計師</p>
+                </div>
+            </div>
+            <div id="sec01" class="container-fluid px-0 mx-0">
+                <div class="row px-0 mx-0">
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a target="_blank" href="./about/index.html" ><img id="28" class="img-fluid" src="./img/banner/28.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a  target="_blank" href="./about/index.html" ><img  id="89" class="img-fluid" src="./img/banner/89.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a ><img id="88" class="img-fluid" src="./img/banner/88.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a ><img id="85" class="img-fluid" src="./img/banner/85.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a ><img id="87" class="img-fluid" src="./img/banner/87.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a ><img id="84" class="img-fluid" src="./img/banner/84.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/84.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/89.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><a href="./about/index.html"><img class="img-fluid" src="./img/banner/28.png" alt=""></a></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/94.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/93.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/94.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/87.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/85.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/88.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/93.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/28.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/85.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/84.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/93.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/84.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/88.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/84.png" alt=""></div>
+                    <div class="secimg col-4  col-lg-2 mx-0 px-0"><img class="img-fluid" src="./img/banner/85.png" alt=""></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer id="footer" class="container-fluid" style="padding:0;margin: 0; ">
+        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
+    </footer>
+
+
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
+    <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 src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>

style.css

@@ -0,0 +1,295 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-family: 微軟正黑體;
+}
+
+body {
+  position: relative;
+  background: url(./img/banner/banner-m.png), -webkit-gradient(linear, left top, left bottom, color-stop(10%, transparent), color-stop(49%, #363636));
+  background: url(./img/banner/banner-m.png), linear-gradient(180deg, transparent 10%, #363636 49%);
+  background-size: 100vw;
+  background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 767px) {
+  body {
+    background: #363636;
+  }
+}
+
+body .arrow {
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  width: 45px;
+  height: 40px;
+  z-index: 10;
+  background-color: #e06649;
+}
+
+body .arrow:hover {
+  -webkit-box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+          box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+}
+
+@media screen and (max-width: 767px) {
+  body .arrow {
+    position: absolute;
+    bottom: 200px;
+  }
+}
+
+#Navigation {
+  background: rgba(112, 112, 112, 0.75);
+  height: 4.5vw;
+  width: 100vw !important;
+  position: fixed;
+  z-index: 10;
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation {
+    height: 8vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation {
+    height: 15vw;
+    position: fixed;
+    z-index: 5;
+    background: rgba(0, 0, 0, 0.8);
+  }
+}
+
+#Navigation #nav {
+  width: 100vw;
+  margin: 0 auto;
+}
+
+#Navigation #logo {
+  padding-top: 0.5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #logo {
+    padding-top: 0;
+  }
+}
+
+#Navigation #logo img {
+  width: 120px;
+}
+
+#Navigation #link {
+  text-align: right;
+  padding: 1.5vw 3vw;
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation #link {
+    padding-top: 2vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation #link {
+    display: none;
+  }
+}
+
+#Navigation #link a {
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 5px;
+  position: relative;
+}
+
+#Navigation #link a img {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+#Navigation #menu-btn1 {
+  position: absolute;
+  right: 1vw;
+  top: 1vw;
+  width: 18vw;
+  z-index: 6;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation #menu-btn1 {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  #Navigation #menu-btn1 {
+    display: none;
+  }
+}
+
+#Navigation2 {
+  background: rgba(112, 112, 112, 0.75);
+  height: 4.5vw;
+  width: 100vw !important;
+  position: fixed;
+  bottom: 0px;
+  z-index: 10;
+}
+
+@media screen and (min-width: 1025px) {
+  #Navigation2 {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #Navigation2 {
+    height: 8vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #Navigation2 {
+    height: 15vw;
+    position: fixed;
+    z-index: 5;
+    background: rgba(0, 0, 0, 0.8);
+  }
+}
+
+#Navigation2 #nav {
+  width: 90vw;
+  margin: 0 auto;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[5];
+      grid-template-columns: repeat(5, 1fr);
+  text-align: center;
+}
+
+#Navigation2 #nav a {
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  position: relative;
+}
+
+#Navigation2 #nav a img {
+  margin: 10px auto;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+@media screen and (max-width: 767px) {
+  #banner {
+    background-image: url(../img/about/banner/banner-m2.png);
+    background-size: 115vw;
+    background-repeat: no-repeat;
+  }
+}
+
+#banner #banner-container {
+  width: 90vw;
+  padding-top: 30vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container {
+    width: 95vw;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-des {
+    display: none;
+  }
+}
+
+#banner #banner-container .banner-des .banner-1 {
+  background: rgba(141, 194, 31, 0.8);
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-des .banner-1 {
+    margin: 0;
+  }
+}
+
+#banner #banner-container .banner-des .banner-1 .banner1-1 {
+  font-size: 24px;
+}
+
+#banner #banner-container .banner-m {
+  padding-top: 80vw;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner #banner-container .banner-m {
+    display: none;
+  }
+}
+
+#banner #banner-container .banner-m .bannerm-1 {
+  background: rgba(141, 194, 31, 0.8);
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container .banner-m .bannerm-1 {
+    margin: 0;
+  }
+}
+
+#banner #banner-container .banner-m .bannerm-1 .banner1-1 {
+  font-size: 18px;
+}
+
+#banner #banner-container #sec01 {
+  padding-top: 5vw;
+}
+
+@media screen and (max-width: 767px) {
+  #banner #banner-container #sec01 {
+    padding-top: 0;
+  }
+}
+
+#banner #banner-container #sec01 .col-lg-2 {
+  background: #80ab29;
+}
+
+#banner #banner-container #sec01 .col-lg-2 img {
+  opacity: 1;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+}
+
+#banner #banner-container #sec01 .col-lg-2 img:hover {
+  opacity: 0.2;
+}
+
+#footer {
+  background: #363636;
+  text-align: center;
+  width: 80vw;
+  margin: 0 auto !important;
+}
+
+#footer p {
+  padding: 15px;
+  color: #fff;
+}
+/*# sourceMappingURL=style.css.map */

style.scss

@@ -0,0 +1,243 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 微軟正黑體;
+}
+$desktop: 1025px;
+$table: 1024px;
+$moblie: 767px;
+$Font-color: #fff;
+$title-color: #646464;
+$bgcolor: #f4fffc;
+$navbgcolor: #a9d0c5;
+body {
+    position: relative;
+    background: url(./img/banner/banner-m.png), linear-gradient(180deg, transparent 10%, #363636 49%);
+    background-size: 100vw;
+    background-repeat: no-repeat;
+    // background-blend-mode: overlay;
+
+    @media screen and(max-width:$moblie) {
+        background: #363636;
+    }
+    .arrow {
+        position: fixed;
+        right: 30px;
+        bottom: 30px;
+        width: 45px;
+        height: 40px;
+        z-index: 10;
+        background-color: #e06649;
+        &:hover {
+            box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
+        }
+        @media screen and(max-width:$moblie) {
+            position: absolute;
+            bottom: 200px;
+        }
+    }
+}
+// 主選單
+#Navigation {
+    background: rgba(112, 112, 112, 0.75);
+
+    height: 4.5vw;
+    width: 100vw !important;
+    position: fixed;
+    z-index: 10;
+    @media screen and(max-width:$table) {
+        height: 8vw;
+    }
+    @media screen and(max-width:$moblie) {
+        height: 15vw;
+        position: fixed;
+        z-index: 5;
+     
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    #nav {
+        width: 100vw;
+        margin: 0 auto;
+    }
+
+    //    rwd要注意高度
+    #logo {
+        padding-top: 0.5vw;
+        @media screen and(max-width:$moblie) {
+            padding-top: 0;
+        }
+
+        img {
+            width: 120px;
+        }
+    }
+    #link {
+        text-align: right;
+        padding: 1.5vw 3vw;
+        @media screen and(max-width:$table) {
+            padding-top: 2vw;
+        }
+        @media screen and(max-width:$moblie) {
+            display: none;
+        }
+
+        a {
+            text-decoration: none;
+            color: $Font-color;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+            padding: 5px;
+            position: relative;
+            img {
+                object-fit: cover;
+            }
+        }
+    }
+
+    #menu-btn1 {
+        position: absolute;
+        right: 1vw;
+        top: 1vw;
+        width: 18vw;
+        z-index: 6;
+
+        @media screen and(min-width:$desktop) {
+            display: none;
+        }
+        @media screen and(min-width:768px) {
+            display: none;
+        }
+    }
+}
+// 行動版-預約選單
+#Navigation2{
+    
+    background: rgba(112, 112, 112, 0.75);
+    height: 4.5vw;
+    width: 100vw !important;
+    position: fixed;
+    bottom:0px;
+    z-index: 10;
+   
+    @media screen and(min-width:$desktop) {
+        display: none;
+    }
+    @media screen and(max-width:$table) {
+        height: 8vw;
+    }
+    @media screen and(max-width:$moblie) {
+        height: 15vw;
+        position: fixed;
+        z-index: 5;
+     
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    #nav {
+        width: 90vw;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(5,1fr);
+        text-align: center;
+        a {
+            text-decoration: none;
+            color: $Font-color;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+        
+            position: relative;
+            img {
+                margin: 10px auto;
+                object-fit: cover;
+            }
+        }
+    }
+
+    //    rwd要注意高度
+   
+
+   
+}
+#banner {
+    @media screen and(max-width:$moblie) {
+        background-image: url(../img/about/banner/banner-m2.png);
+        background-size: 115vw;
+        background-repeat: no-repeat;
+    
+    }
+    #banner-container {
+        width: 90vw;
+        padding-top: 30vw;
+        @media screen and(max-width:$moblie) {
+            width: 95vw;
+        
+        }
+        // 電腦版
+        .banner-des {
+            @media screen and(max-width:$moblie) {
+                display: none;
+            }
+            .banner-1 {
+                
+                @media screen and(max-width:$moblie) {
+                    margin: 0;
+                }
+                background: rgba(141, 194, 31, 0.8);
+                .banner1-1 {
+                    font-size: 24px;
+                }
+            }
+        }
+        // 手機板
+        .banner-m {
+            padding-top: 80vw;
+            @media screen and(min-width:$desktop) {
+                display: none;
+            }
+            .bannerm-1 {
+                @media screen and(max-width:$moblie) {
+                    margin: 0;
+                }
+                background: rgba(141, 194, 31, 0.8);
+                .banner1-1 {
+                    font-size: 18px;
+                }
+            }
+        }
+        #sec01 {
+            padding-top: 5vw;
+            @media screen and(max-width:$moblie) {
+                padding-top: 0;
+            }
+            .col-lg-2 {
+                background: rgb(128, 171, 41);
+                img {
+                    opacity: 1;
+                    transition: 0.3s ease-in-out;
+                    &:hover {
+                        opacity: 0.2;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 頁尾 footer
+#footer {
+    background: #363636;
+    text-align: center;
+    width: 80vw;
+    margin: 0 auto !important;
+
+    p {
+        padding: 15px;
+        color: #fff;
+    }
+}