頁面問題修正

desktop11/index.html

@@ -96,6 +96,10 @@
                     <a data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a>
                     <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a>
                 </div>
+                <div class="socail-link">
+                    <a href="https://www.facebook.com/hhhfb"><img src="./img/logo/facebook (3).webp" alt=""></a>
+                    <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/logo/line.webp" alt=""></a>
+                </div>
             </div>
             <hr class="hr  bg-white" style="opacity:1">
             <div id="text">

desktop11/style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap");
 * {
   font-family: 微軟正黑體;
 }
@@ -41,8 +42,8 @@ body .btn .btn-main:hover {
 }
 
 body .title {
-  font-weight: bolder;
-  font-family: "Times New Roman", Times, serif;
+  font-weight: 900;
+  font-family: 'Noto Serif TC', serif;
   padding: 15px;
   font-size: 45px;
   color: #4b515e;
@@ -136,8 +137,8 @@ body .arrow:hover {
   z-index: 5;
   display: -ms-grid;
   display: grid;
-  -ms-grid-columns: 2fr 4fr;
-      grid-template-columns: 2fr 4fr;
+  -ms-grid-columns: 2fr 4fr 2fr;
+      grid-template-columns: 2fr 4fr 2fr;
 }
 
 .banner .Navigation .logo {
@@ -150,8 +151,8 @@ body .arrow:hover {
 }
 
 .banner .Navigation .link {
-  text-align: right;
-  padding: 30px;
+  text-align: left;
+  padding: 1.5vw 30px;
 }
 
 .banner .Navigation .link a {
@@ -189,6 +190,36 @@ body .arrow:hover {
   opacity: 1;
 }
 
+.banner .Navigation .socail-link {
+  text-align: right;
+  padding: 1.5vw 30px;
+}
+
+.banner .Navigation .socail-link img {
+  width: 1.5vw;
+  -webkit-filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
+          filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.banner .Navigation .socail-link img:hover {
+  -webkit-filter: none;
+          filter: none;
+}
+
+.banner .Navigation .socail-link a {
+  display: inline-block;
+  text-decoration: none;
+  color: #fff;
+  letter-spacing: 1px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 15px;
+  position: relative;
+}
+
 .banner hr {
   width: 85vw;
   position: absolute;
@@ -238,7 +269,7 @@ body .arrow:hover {
   margin-bottom: 50px;
   font-weight: 900;
   font-size: 45px;
-  font-family: "Times New Roman", Times, serif;
+  font-family: 'Noto Serif TC', serif;
   color: #4b515e;
   padding-left: 5vw;
 }
@@ -633,10 +664,6 @@ body .arrow:hover {
   font-weight: 900;
 }
 
-#contact-us #contact-form #form-right #checkbox {
-  margin: 15px;
-}
-
 #contact-us #contact-form #form-right #email,
 #contact-us #contact-form #form-right #name,
 #contact-us #contact-form #form-right #phone {

desktop11/style.scss

@@ -5,6 +5,7 @@ $Font-color: #fff;
 $title-color: #4b515e;
 $toggle: #9c857b;
 $process: #6f645a;
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap');
 @font-face {
     font-family: 追奇手寫體;
     src: url(./drechifont-proportional.ttf);
@@ -40,8 +41,8 @@ body {
         }
     }
     .title {
-        font-weight: bolder;
-        font-family: "Times New Roman", Times, serif;
+        font-weight: 900;
+        font-family: 'Noto Serif TC', serif;
         padding: 15px;
         font-size: 45px;
         color: $title-color;
@@ -123,7 +124,7 @@ body {
         top: 20px;
         z-index: 5;
         display: grid;
-        grid-template-columns: 2fr 4fr;
+        grid-template-columns: 2fr 4fr 2fr;
 
         .logo {
             padding-top: 1.5vw;
@@ -133,8 +134,8 @@ body {
             }
         }
         .link {
-            text-align: right;
-            padding: 30px;
+            text-align: left;
+            padding: 1.5vw 30px;
             // padding-right: 150px;
 
             a {
@@ -168,6 +169,33 @@ body {
                     opacity: 1;
                 }
             }
+
+        }
+        .socail-link{
+            text-align: right;
+            padding: 1.5vw 30px;
+
+            img {
+                width: 1.5vw;
+                filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
+                transition: 0.3s;
+                &:hover {
+                    filter: none;
+                }
+            }
+
+            a {
+                display: inline-block;
+                text-decoration: none;
+                color: $Font-color;
+                // padding-right: 35px;
+                letter-spacing: 1px;
+                font-size: 0.9rem;
+                font-weight: 600;
+                cursor: pointer;
+                padding: 15px;
+                position: relative;
+            }
         }
     }
     hr {
@@ -214,7 +242,7 @@ body {
             margin-bottom: 50px;
             font-weight: 900;
             font-size: 45px;
-            font-family: "Times New Roman", Times, serif;
+            font-family: 'Noto Serif TC', serif;
             color: $title-color;
             padding-left: 5vw;
         }
@@ -556,7 +584,7 @@ body {
                 font-weight: 900;
             }
             #checkbox {
-                margin: 15px;
+              
             }
             #email,
             #name,

mobile/style.css

@@ -558,7 +558,7 @@ body .arrow:hover {
 #feedback .box .play {
   position: absolute;
   left: 40vw;
-  top: 25vw;
+  top: 20vw;
   width: 15vw;
   height: 15vw;
   opacity: 0.8;
@@ -749,6 +749,10 @@ body .arrow:hover {
   color: #ee751b;
 }
 
+#contact-us #contact-form #checkbox {
+  margin-top: 30px;
+}
+
 #contact-us #contact-form #email,
 #contact-us #contact-form #name,
 #contact-us #contact-form #phone {

mobile/style.scss

@@ -410,7 +410,7 @@ body {
         .play{
             position: absolute;
             left:40vw;
-            top:25vw;
+            top:20vw;
             width: 15vw;
             height: 15vw;
             opacity: 0.8;
@@ -564,6 +564,9 @@ body {
             text-decoration: none;
             color: #ee751b;
         }
+        #checkbox {
+            margin-top: 30px;
+        }
        
         #email,
         #name,