頁面修正

mobile/index.html

@@ -211,56 +211,58 @@
                 data-gt-offset="-300">預約免費裝修諮詢</button>
         </div>
     </section>
-    <section id="service-process">
-        <h1 class="title">最嚴謹的服務流程</h1>
-        <div class="process-box">
-            <img src="./img/process/box1.webp" alt="">
-            <div style="margin-top: 70px;" class="process-title">
-                <div class="p-text">填寫裝修需求表單</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+    <div style="width: 100vw; background:#f7f7f7;margin-top: 100px; padding: 50px 0;">
+        <section id="service-process">
+            <h1 class="title">最嚴謹的服務流程</h1>
+            <div class="process-box">
+                <img src="./img/process/box1.webp" alt="">
+                <div style="margin-top: 70px;" class="process-title">
+                    <div class="p-text">填寫裝修需求表單</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box2.webp" alt="">
-            <div style="margin-top: 50px;" class="process-title">
-                <div class="p-text">專人聯繫</div>
-                <div class="p-text">進行裝修前諮詢</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box2.webp" alt="">
+                <div style="margin-top: 50px;" class="process-title">
+                    <div class="p-text">專人聯繫</div>
+                    <div class="p-text">進行裝修前諮詢</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box3.webp" alt="">
-            <div style="margin-top: 30px;" class="process-title">
-                <div class="p-text">依照屋主的需求</div>
-                <div class="p-text">推薦合法立案的</div>
-                <div class="p-text">設計公司</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box3.webp" alt="">
+                <div style="margin-top: 30px;" class="process-title">
+                    <div class="p-text">依照屋主的需求</div>
+                    <div class="p-text">推薦合法立案的</div>
+                    <div class="p-text">設計公司</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box4.webp" alt="">
-            <div style="margin-top: 50px;" class="process-title">
-                <div class="p-text">設計公司會</div>
-                <div class="p-text">主動與屋主聯繫聯繫</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box4.webp" alt="">
+                <div style="margin-top: 50px;" class="process-title">
+                    <div class="p-text">設計公司會</div>
+                    <div class="p-text">主動與屋主聯繫聯繫</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box5.webp" alt="">
-            <div style="margin-top: 30px;" class="process-title">
-                <div class="p-text">選擇是否使用</div>
-                <div class="p-text">幸福經紀人制度</div>
-                <div class="p-text">來保障裝修權益</div>
-                <img src="./img/process/arrowdown.webp" alt="">
+            <div class="process-box">
+                <img src="./img/process/box5.webp" alt="">
+                <div style="margin-top: 30px;" class="process-title">
+                    <div class="p-text">選擇是否使用</div>
+                    <div class="p-text">幸福經紀人制度</div>
+                    <div class="p-text">來保障裝修權益</div>
+                    <img src="./img/process/arrowdown.webp" alt="">
+                </div>
             </div>
-        </div>
-        <div class="process-box">
-            <img src="./img/process/box6.webp" alt="">
-            <div style="margin-top: 50px;" class="process-title">
-                <div class="p-text">媒合成功</div>
+            <div class="process-box">
+                <img src="./img/process/box6.webp" alt="">
+                <div style="margin-top: 50px;" class="process-title">
+                    <div class="p-text">媒合成功</div>
+                </div>
             </div>
-        </div>
-    </section>
+        </section>
+    </div>
 
     <section id="feedback">
         <h1 class="title">客戶真實見證</h1>
@@ -305,7 +307,7 @@
         </div>
     </section>
 
-    <section id="contact-us">
+    <section id="contact-us" style="width: 100vw; background: #f7f7f7;">
         <div id="form-title">
             <h1>已經服務超過<span style="font-size: 28px;">14392</span>個家庭</h1>
             <h1>打造夢想中的完美居家生活</h1>

mobile/style.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -14,7 +14,7 @@
 }
 
 body .title {
-  font-weight: 600;
+  font-weight: bolder;
   padding: 15px;
   font-family: 'Noto Serif TC', serif !important;
   color: #4b515e;
@@ -371,6 +371,7 @@ body .btn-main:hover {
 #service-process {
   margin: 0 auto;
   width: 60vw;
+  background-color: #f7f7f7;
 }
 
 @media screen and (max-width: 767px) {
@@ -379,10 +380,6 @@ body .btn-main:hover {
   }
 }
 
-#service-process h1 {
-  margin-top: 150px;
-}
-
 @media screen and (max-width: 1024px) {
   #service-process h1 {
     margin-bottom: 150px;
@@ -488,6 +485,7 @@ body .btn-main:hover {
 #feedback {
   margin: auto;
   width: 70vw;
+  padding-top: 50px;
 }
 
 @media screen and (max-width: 767px) {
@@ -507,7 +505,6 @@ body .btn-main:hover {
 }
 
 #feedback h1 {
-  margin-top: 150px;
   margin-bottom: 50px;
 }
 
@@ -552,6 +549,10 @@ body .btn-main:hover {
   z-index: 10;
 }
 
+#contact-us {
+  margin-top: 100px;
+}
+
 #contact-us p {
   font-size: 16px;
   font-weight: 600;
@@ -754,7 +755,6 @@ body .btn-main:hover {
 }
 
 #footer {
-  margin-top: 50px;
   padding-top: 50px;
   width: 100vw;
   height: 150px;

mobile/style.scss

@@ -6,7 +6,7 @@
 $table: 1024px;
 $moblie: 767px;
 
-@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap');
 $process: #6f645a;
 // 行動裝置
 @font-face {
@@ -20,7 +20,7 @@ $title-color: #4b515e;
 body {
    
     .title {
-        font-weight: 600;
+        font-weight: bolder;
         padding: 15px;
         font-family: 'Noto Serif TC', serif !important;
         color:$title-color;
@@ -273,14 +273,15 @@ body {
     
 }
 #service-process {
+   
     margin: 0 auto;
     width: 60vw;
+    background-color: #f7f7f7;
     @media screen and(max-width:$moblie) {
         width: 80vw;
     }
     h1 {
-        margin-top: 150px;
-       
+        
         @media screen and(max-width:$table) {
             margin-bottom: 150px;
         }
@@ -354,6 +355,8 @@ body {
 #feedback {
     margin: auto;
     width: 70vw;
+    padding-top: 50px;
+   
     @media screen and(max-width:$moblie) {
         width: 90vw;
     }
@@ -365,7 +368,7 @@ body {
         }
     }
     h1 {
-        margin-top: 150px;
+       
         margin-bottom: 50px;
     }
     .box {
@@ -402,6 +405,8 @@ body {
     }
 }
 #contact-us {
+    margin-top: 100px;
+  
     p {
         font-size: 16px;
         font-weight: 600;
@@ -570,7 +575,7 @@ body {
 }
 
 #footer {
-    margin-top: 50px;
+  
     padding-top: 50px;
     width: 100vw;
     height: 150px;