Home Verkennen Help
Inloggen
choozmo
/
HHH_Home_Decoration_2
2
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

細部調整

jeter20131220 4 jaren geleden
bovenliggende
b30df65b3a
commit
595d89a5da
17 gewijzigde bestanden met toevoegingen van 564 en 350 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 3 2
      desktop11/goto.js
  2. BIN
      desktop11/img/content/01.webp
  3. BIN
      desktop11/img/content/0111.webp
  4. BIN
      desktop11/img/content/02.webp
  5. BIN
      desktop11/img/content/0211.webp
  6. BIN
      desktop11/img/content/02211.webp
  7. BIN
      desktop11/img/feedback-img/feedback0411.webp
  8. 127 117
      desktop11/index.html
  9. 113 75
      desktop11/style.css
  10. 0 0
      desktop11/style.css.map
  11. 121 87
      desktop11/style.scss
  12. BIN
      mobile/img/play (1).png
  13. 37 34
      mobile/index.html
  14. 45 0
      mobile/script/goto.js
  15. 65 20
      mobile/style.css
  16. 0 0
      mobile/style.css.map
  17. 53 15
      mobile/style.scss

+ 3 - 2
desktop11/goto.js
Bestand weergeven 

@@ -1,13 +1,15 @@
 
 $(".banner-slider").slick({
 
   speed: 1000,
 
   swipe: true,
 
+  arrows:false,
 
 });
 
 
 $(".content1-right").slick({
 
   dotsClass: 'slick-dots',
 
   dots: true,
 
   speed: 1000,
 
-  swipe: true,
 
+
 
+  arrows:false,
 
 
 });
 
 
@@ -94,7 +96,6 @@ $("#contact-form").submit(function (e) {
 
 
 
 
-
 
 $("*").each(function (index, element) {
 
   // 此元素被點選後執行
 
   $(this).click(function (e) {

BIN
desktop11/img/content/01.webp
Bestand weergeven


BIN
desktop11/img/content/0111.webp
Bestand weergeven


BIN
desktop11/img/content/02.webp
Bestand weergeven


BIN
desktop11/img/content/0211.webp
Bestand weergeven


BIN
desktop11/img/content/02211.webp
Bestand weergeven


BIN
desktop11/img/feedback-img/feedback0411.webp
Bestand weergeven


+ 127 - 117
desktop11/index.html
Bestand weergeven 

@@ -16,12 +16,12 @@
 
 </head>
 
 
 <body id="top">
 
-    <div class="container-fluid" style="padding:0;">
 
-        <div class="container-fluid" style="padding:0;">
 
-            <section id="banner">
 
+    <div class="container-fluid" style="padding:0;margin:0 ">
 
+        <div class="banner container-fluid" style="padding:0; margin:0 ">
 
+            <!-- <section id="banner"> -->
 
                 <div class="Navigation">
 
-                    <div class="logo">
 
-                        <img src="./img/logo-main-1-1.webp" alt="">
 
+                    <div class="logo" >
 
+                       <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp"   alt=""></a>
 
                     </div>
 
                     <div class="link">
 
                         <a href="">首頁</a>
 
@@ -34,112 +34,117 @@
 
                 <div id="text">
 
                     <div class="banner-slider d-flex align-items-center justify-content-center">
 
                         <div class="banner1">
 
-                            <div style="padding-top:250px;">
 
+                            <div style="padding-top:16vw;padding-right:0; margin:0; width: 100vw">
 
                                 <h1 id="animation1"> 北歐風</h1>
 
                                 <button id="btn-animation1" class="btn-main">預約免費裝修諮詢</button>
 
                             </div>
 
                         </div>
 
                         <div class="banner2">
 
-                            <div style="padding-top:250px;">
 
+                            <div style="padding-top:16vw;width: 100vw">
 
                                 <h1 id="animation2">次代風</h1>
 
                                 <button id="btn-animation2" class="btn-main">預約免費裝修諮詢</button>
 
                             </div>
 
                         </div>
 
                         <div class="banner3">
 
-                            <div style="padding-top:250px;">
 
+                            <div style="padding-top:16vw; width: 100vw ">
 
                                 <h1 id="animation3">美式風</h1>
 
                                 <button id="btn-animation3" class="btn-main">預約免費裝修諮詢</button>
 
                             </div>
 
                         </div>
 
                     </div>
 
                 </div>
 
-            </section>
 
+            <!-- </section> -->
 
             <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/totop.png"
 
                 alt="">
 
         </div>
 
 
-        <section id="content1">
 
+        <div class="container-fluid" style="padding:0;margin: 0; ">
 
 
-            <div class="content1-left">
 
-                <h1 class="title">你有以這些下困擾嗎</h1>
 
-                <div class="left">
 
-                    <h1 class="title1">o1</h1>
 
-                    <div class="text1">
 
-                        <div class="text-1">裝修公司眾多</div>
 
-                        <div class="text-1">不知道如何邀選最適合的設計師?</div>
 
+            <section id="content1">
 
+                <div class="content1-left">
 
+                    <h1 class="title">你有以這些下困擾嗎</h1>
 
+                    <div class="left">
 
+                        <h1 class="title1">o1</h1>
 
+                        <div class="text1">
 
+                            <div class="text-1">裝修公司眾多</div>
 
+                            <div class="text-1">不知道如何邀選最適合的設計師?</div>
 
+                        </div>
 
                     </div>
 
-                </div>
 
-                <hr class="hr2 bg-dark" style="margin:0; opacity:1">
 
-                <div class="left">
 
-                    <h2 class="title1">o2</h2>
 
-                    <div class="text2">
 
-                        <div class="text-2">擔心遇到不良裝修公司</div>
 
-                        <div class="text-2">容易產生裝修糾紛?</div>
 
+                    <hr class="hr2 bg-dark" style="margin:0; opacity:1">
 
+                    <div class="left">
 
+                        <h2 class="title1">o2</h2>
 
+                        <div class="text2">
 
+                            <div class="text-2">擔心遇到不良裝修公司</div>
 
+                            <div class="text-2">容易產生裝修糾紛?</div>
 
+                        </div>
 
                     </div>
 
-                </div>
 
-                <hr class="hr2 bg-dark" style="margin:0; opacity:1">
 
-                <div class="left">
 
-                    <h2 class="title1">o3</h2>
 
-                    <div class="text3">
 
-                        <div class="text-3">不了解工程預算行情</div>
 
-                        <div class="text-3">害怕被騙嗎?</div>
 
+                    <hr class="hr2 bg-dark" style="margin:0; opacity:1">
 
+                    <div class="left">
 
+                        <h2 class="title1">o3</h2>
 
+                        <div class="text3">
 
+                            <div class="text-3">不了解工程預算行情</div>
 
+                            <div class="text-3">害怕被騙嗎?</div>
 
+                        </div>
 
                     </div>
 
                 </div>
 
-            </div>
 
-            <div class="content1-right">
 
-                <div class="containg-img1">
 
-                    <img src="./img/content/01.webp" alt="">
 
-                </div>
 
-                <div class="containg-img2">
 
-                    <img src="./img/content/02.webp" alt="">
 
-                </div>
 
-                <div class="containg-img3">
 
-                    <img src="./img/content/03.webp" alt="">
 
+                <div class="content1-right">
 
+                    <div class="containg-img1">
 
+                        <img src="./img/content/0111.webp" alt="">
 
+                    </div>
 
+                    <div class="containg-img2">
 
+                        <img src="./img/content/02211.webp" alt="">
 
+                    </div>
 
+                    <div class="containg-img3">
 
+                        <img src="./img/content/03.webp" alt="">
 
+                    </div>
 
                 </div>
 
-            </div>
 
 
-        </section>
 
-        <section id="service">
 
-            <h1 class="title">我們提供的服務</h1>
 
-            <div class="service-box">
 
-                <div id="service-img">
 
-                    <div id="img-right"><img src="./img/service/service01.webp" alt=""></div>
 
-                    <div id="img-left"><img src="./img/service/service02.webp" alt=""></div>
 
-                </div>
 
-                <div id="service-text">
 
-                    <div id="text-left">
 
-                        <div class="img-icon">
 
-                            <img src="./img/process/icon1.webp" alt="">
 
-                        </div>
 
-                        <div class="icon-text">
 
-                            <div class="text-p">推薦合法立案</div>
 
-                            <div class="text-p">無裝修司法糾紛紀錄的專業設計師</div>
 
-                            <div class="text-p">輕鬆找到合適人選</div>
 
-                            <div class="text-p">不再大海撈針</div>
 
-                        </div>
 
+            </section>
 
+        </div>
 
+        <div class="container-fluid" style="padding:0; margin: 0; ">
 
+            <section id="service">
 
+                <h1 class="title">我們提供的服務</h1>
 
+                <div class="service-box">
 
+                    <div id="service-img">
 
+                        <div id="img-right"><img src="./img/service/service01.webp" alt=""></div>
 
+                        <div id="img-left"><img src="./img/service/service02.webp" alt=""></div>
 
                     </div>
 
-                    <div id="text-right">
 
-                        <div class="img-icon">
 
-
 
-                            <img src="./img/process/icon2.webp" alt="">
 
+                    <div id="service-text">
 
+                        <div id="text-left">
 
+                            <div class="img-icon">
 
+                                <img src="./img/process/icon1.webp" alt="">
 
+                            </div>
 
+                            <div class="icon-text">
 
+                                <div class="text-p">推薦合法立案</div>
 
+                                <div class="text-p">無裝修司法糾紛紀錄的專業設計師</div>
 
+                                <div class="text-p">輕鬆找到合適人選</div>
 
+                                <div class="text-p">不再大海撈針</div>
 
+                            </div>
 
                         </div>
 
-                        <div class="icon-text">
 
-                            <div class="text-p">13年經驗安心把關</div>
 
-                            <div class="text-p">不懂預算行情</div>
 
-                            <div class="text-p">也不用擔心受騙</div>
 
+                        <div id="text-right">
 
+                            <div class="img-icon">
 
+    
+                                <img src="./img/process/icon2.webp" alt="">
 
+                            </div>
 
+                            <div class="icon-text">
 
+                                <div class="text-p">13年經驗安心把關</div>
 
+                                <div class="text-p">不懂預算行情</div>
 
+                                <div class="text-p">也不用擔心受騙</div>
 
+                            </div>
 
+    
                         </div>
 
-
 
                     </div>
 
                 </div>
 
-            </div>
 
-
 
-
 
+    
+    
+    
+                <div class="btn">
 
+                    <button class="btn-main">預約免費裝修諮詢</button>
 
+                </div>
 
+            </section>
 
 
-            <div class="btn">
 
-                <button class="btn-main">預約免費裝修諮詢</button>
 
-            </div>
 
-        </section>
 
-        <div class="container-fluid">
 
+        </div>
 
+        <div class="container-fluid" style="padding:0; margin: 0;">
 
 
             <section id="service-process">
 
                 <h1 class="title">最嚴謹的服務流程</h1>
 
@@ -181,37 +186,40 @@
 
 
             </section>
 
         </div>
 
-        <section id="feedback">
 
-            <h1 class="title">客戶真實見證</h1>
 
-            <div id="feedback-box">
 
-                <div class="box">
 
-                    <img src="./img/feedback-img/feedback01.webp" alt="">
 
-                    <p>嚮往仁文街處的溫度-文響</p>
 
-                </div>
 
-                <div class="box">
 
-                    <img src="./img/feedback-img/feedback02.webp" alt="">
 
-                    <p>緞帶般曲線 譜出家的律動與甜蜜</p>
 
-                </div>
 
-                <div class="box">
 
-                    <img src="./img/feedback-img/feedback03.webp" alt="">
 
-                    <p>系統設計的變革 前衛科技宅</p>
 
-                </div>
 
-                <div class="box">
 
-                    <img src="./img/feedback-img/feedback04.webp" alt="">
 
-                    <p>用系統設計 實現歐洲皇室城堡夢</p>
 
-                </div>
 
-                <div class="box">
 
-                    <img src="./img/feedback-img/feedback05.webp" alt="">
 
-                    <p>不良格局變身 3米6日光鄉村宅</p>
 
-                </div>
 
-                <div class="box">
 
-                    <img src="./img/feedback-img/feedback06.webp" alt="">
 
-                    <p>雙拼豪宅古典、日式一次擁有</p>
 
+        <div class="container-fluid" style="padding:0; margin: 0;">
 
+            <section id="feedback">
 
+                <h1 class="title">客戶真實見證</h1>
 
+                <div id="feedback-box">
 
+                    <div class="box">
 
+                        <img src="./img/feedback-img/feedback01.webp" alt="">
 
+                        <p>嚮往人文接觸處的溫度-文響</p>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/feedback-img/feedback02.webp" alt="">
 
+                        <p>緞帶般曲線 譜出家的律動與甜蜜</p>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/feedback-img/feedback03.webp" alt="">
 
+                        <p>系統設計的變革 前衛科技宅</p>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/feedback-img/feedback0411.webp" alt="">
 
+                        <p>用系統設計 實現歐洲皇室城堡夢</p>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/feedback-img/feedback05.webp" alt="">
 
+                        <p>不良格局變身 3米6日光鄉村宅</p>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/feedback-img/feedback06.webp" alt="">
 
+                        <p>雙拼豪宅古典、日式一次擁有</p>
 
+                    </div>
 
+    
                 </div>
 
+    
+            </section>
 
 
-            </div>
 
-
 
-        </section>
 
+        </div>
 
         <section id="contact-us">
 
             <div class="form-title">
 
                 <h1>已經服務超過14392個生活</h1>
 
@@ -220,11 +228,12 @@
 
             </div>
 
             <!-- <hr> -->
 
             <div class="contact-text">
 
-                <div class="text-p">請撥打全台付費專線<span id="phone" style="color: #ffaf60; font-weight: bolder;">0800-336-086</span></div>
 
+                <div class="text-p">請撥打全台付費專線<span style="opacity: 0;">11</span><span id="phone"
 
+                        style="color: #ee751b; font-weight:900;"> 0800-336-086</span></div>
 
                 <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
 
             </div>
 
 
-            <div class="container-fluid" style="padding:0">
 
+            <div class="container-fluid" style="padding:0; margin:0;">
 
                 <form class="contact-form1">
 
                     <div id="contact-form">
 
                         <div id="form-left">
 
@@ -239,6 +248,7 @@
 
                                 <option class="option">苗栗縣</option>
 
                                 <option class="option">台中市</option>
 
                                 <option class="option">彰化縣</option>
 
+                                <option class="option">南投縣</option>
 
                                 <option class="option">雲林縣</option>
 
                                 <option class="option">嘉義縣</option>
 
                                 <option class="option">嘉義市</option>
 
@@ -277,9 +287,9 @@
 
                                 <option class="option">400~500萬</option>
 
                                 <option class="option">500萬以上</option>
 
                             </select>
 
-                            <input type="text" id="square" placeholder="請輸入坪數" required>
 
-                            <select name="rooms" id="rooms" required>
 
-                                <option value="幾房" disabled selected="selected">幾房</option>
 
+                            <input name="square" type="text" id="square" placeholder="請輸入坪數" required>
 
+                            <select name="rooms" id="rooms" required style="margin-right:1.5vw">
 
+                                <option value="幾房" disabled selected="selected" >幾房</option>
 
                                 <option class="option">1房</option>
 
                                 <option class="option">2房</option>
 
                                 <option class="option">3房</option>
 
@@ -289,13 +299,13 @@
 
                                 <option class="option">7房</option>
 
                                 <option class="option">8房</option>
 
                             </select>
 
-                            <select name="living room" id="livingroom" required>
 
-                                <option value="幾廳" disabled selected="selected">幾廳</option>
 
+                            <select name="living room" id="livingroom" required style="margin-right:1.5vw">
 
+                                <option value="幾廳" disabled selected="selected" style="margin-right:25px">幾廳</option>
 
                                 <option class="option">1廳</option>
 
                                 <option class="option">2廳</option>
 
                             </select>
 
                             <select name="bathroom" id="bathroom" required>
 
-                                <option value="地區" disabled selected="selected">幾衛</option>
 
+                                <option value="地區" disabled selected="selected" >幾衛</option>
 
                                 <option class="option">1衛</option>
 
                                 <option class="option">2衛</option>
 
                                 <option class="option">3衛</option>
 
@@ -339,12 +349,12 @@
 
                                 <option class="option">女</option>
 
                             </select>
 
                             <input type="checkbox" id="checkbox" required> <label for="agree">同意</label><a
 
-                                href="">免責聲明與隱私使用政策</a>
 
+                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
                         </div>
 
 
                     </div>
 
                     <div class="form-btn">
 
-                        <input class="btn" type="submit" value="送出">
 
+                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
 
                     </div>
 
                 </form>

+ 113 - 75
desktop11/style.css
Bestand weergeven 

@@ -1,9 +1,5 @@
 
 @charset "UTF-8";
 
 * {
 
-  margin: 0;
 
-  padding: 0;
 
-  -webkit-box-sizing: border-box;
 
-          box-sizing: border-box;
 
   font-family: 微軟正黑體;
 
 }
 
 
@@ -15,6 +11,7 @@
 
 
 body {
 
   height: 5000px;
 
+  width: 100vw;
 
 }
 
 
 body .btn {
 
@@ -38,19 +35,18 @@ body .btn .btn-main {
 
 }
 
 
 body .btn .btn-main:hover {
 
-  background-color: #9C857B;
 
+  background-color: #9c857b;
 
   width: 285px;
 
   font-size: 17px;
 
 }
 
 
 body .title {
 
   font-weight: bolder;
 
-  padding: 15px;
 
   font-family: "Times New Roman", Times, serif;
 
   padding: 15px;
 
-  margin-left: 190px;
 
-  font-size: 49px;
 
+  font-size: 45px;
 
   color: #4b515e;
 
+  padding-left: 10vw;
 
 }
 
 
 body .arrow {
 
@@ -61,45 +57,50 @@ body .arrow {
 
   z-index: 10;
 
 }
 
 
-#banner {
 
+.banner {
 
   width: 100vw;
 
   position: relative;
 
 }
 
 
-#banner #text {
 
+.banner #text {
 
   text-align: center;
 
 }
 
 
-#banner #text .banner-slider .banner1,
 
-#banner #text .banner-slider .banner2,
 
-#banner #text .banner-slider .banner3 {
 
-  width: 100vw;
 
+.banner #text .banner-slider {
 
+  margin: 0 !important;
 
+  padding: 0 !important;
 
+}
 
+
 
+.banner #text .banner-slider .banner1,
 
+.banner #text .banner-slider .banner2,
 
+.banner #text .banner-slider .banner3 {
 
   height: 100vh;
 
   background-size: cover;
 
   background-repeat: no-repeat;
 
   background-position: center;
 
+  padding-right: 0 !important;
 
 }
 
 
-#banner #text .banner-slider .banner1 {
 
+.banner #text .banner-slider .banner1 {
 
   background-image: url(./img/banner/00.webp);
 
 }
 
 
-#banner #text .banner-slider .banner2 {
 
+.banner #text .banner-slider .banner2 {
 
   background-image: url(./img/banner/002.webp);
 
 }
 
 
-#banner #text .banner-slider .banner3 {
 
+.banner #text .banner-slider .banner3 {
 
   background-image: url(./img/banner/003.webp);
 
 }
 
 
-#banner #text h1 {
 
+.banner #text h1 {
 
   padding: 15px;
 
   color: #fff;
 
   font-family: 追奇手寫體;
 
   font-size: 72px;
 
 }
 
 
-#banner #text .btn-main {
 
+.banner #text .btn-main {
 
   -webkit-box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
 
           box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
 
   border: none;
 
@@ -114,16 +115,16 @@ body .arrow {
 
   transition: 0.3s;
 
 }
 
 
-#banner #text .btn-main:hover {
 
-  background-color: #927368;
 
+.banner #text .btn-main:hover {
 
+  background-color: #9c857b;
 
   width: 285px;
 
   font-size: 17px;
 
 }
 
 
-#banner .Navigation {
 
-  width: 100vw;
 
-  height: 50px;
 
+.banner .Navigation {
 
+  width: 90vw;
 
   position: absolute;
 
+  margin: 0 auto;
 
   top: 20px;
 
   z-index: 5;
 
   display: -ms-grid;
 
@@ -132,38 +133,56 @@ body .arrow {
 
       grid-template-columns: 2fr 4fr;
 
 }
 
 
-#banner .Navigation .logo {
 
+.banner .Navigation .logo {
 
   padding-top: 1.5vw;
 
   padding-left: 12vw;
 
 }
 
 
-#banner .Navigation .logo img {
 
+.banner .Navigation .logo img {
 
   width: 120px;
 
 }
 
 
-#banner .Navigation .link {
 
+.banner .Navigation .link {
 
   text-align: right;
 
   padding: 30px;
 
-  padding-right: 150px;
 
 }
 
 
-#banner .Navigation .link a {
 
+.banner .Navigation .link a {
 
+  display: inline-block;
 
   text-decoration: none;
 
   color: #fff;
 
-  padding-right: 35px;
 
   letter-spacing: 1px;
 
   font-size: 0.9rem;
 
   font-weight: 600;
 
   cursor: pointer;
 
+  padding: 15px;
 
+  position: relative;
 
+}
 
+
 
+.banner .Navigation .link a :hover {
 
+  opacity: 0.8;
 
 }
 
 
-#banner .Navigation .link hr {
 
-  width: 100px;
 
-  background: #fff;
 
+.banner .Navigation .link a:after {
 
+  content: "";
 
+  display: block;
 
+  width: 80%;
 
   height: 3px;
 
+  background-color: #fff;
 
+  position: absolute;
 
+  left: 12%;
 
+  bottom: 0;
 
+  -webkit-transition: all 0.3s;
 
+  transition: all 0.3s;
 
+  opacity: 0;
 
 }
 
 
-#banner hr {
 
+.banner .Navigation .link a:hover:after {
 
+  width: 80%;
 
+  opacity: 1;
 
+}
 
+
 
+.banner hr {
 
   width: 85vw;
 
   position: absolute;
 
   top: 90px;
 
@@ -177,23 +196,25 @@ body .arrow {
 
   display: grid;
 
   -ms-grid-columns: 1fr 1fr;
 
       grid-template-columns: 1fr 1fr;
 
-  margin: 150px auto;
 
-  padding-top: 30px;
 
-  width: 85vw;
 
+  margin: 0 auto;
 
+  padding-top: 150px;
 
+  width: 90vw;
 
   position: relative;
 
+  grid-gap: 30px;
 
 }
 
 
 #content1 .hr2 {
 
   position: absolute;
 
-  width: 34vw;
 
+  width: 32vw;
 
   height: 1px !important;
 
-  left: 6vw;
 
+  left: 5vw;
 
 }
 
 
 #content1 .content1-left {
 
-  width: 35vw;
 
+  width: 45vw;
 
   text-align: left;
 
-  margin: 30px auto;
 
+  margin: 0px auto;
 
+  padding-right: 50px;
 
 }
 
 
 #content1 .content1-left .contant-toggle {
 
@@ -206,13 +227,13 @@ body .arrow {
 
 
 #content1 .content1-left .title {
 
   margin: 0;
 
-  margin-top: -10px;
 
   padding: 10px;
 
   margin-bottom: 50px;
 
-  font-weight: bolder;
 
-  font-size: 50px;
 
+  font-weight: 900;
 
+  font-size: 45px;
 
   font-family: "Times New Roman", Times, serif;
 
-  color: #8593A4;
 
+  color: #4b515e;
 
+  padding-left: 5vw;
 
 }
 
 
 #content1 .content1-left .left {
 
@@ -220,8 +241,7 @@ body .arrow {
 
   display: grid;
 
   -ms-grid-columns: 1.5fr 3fr;
 
       grid-template-columns: 1.5fr 3fr;
 
-  grid-gap: 30px;
 
-  width: 35vw;
 
+  width: 37vw;
 
 }
 
 
 #content1 .content1-left .left .title1 {
 
@@ -229,9 +249,8 @@ body .arrow {
 
   font-size: 90px;
 
   font-weight: 400;
 
   font-family: "Times New Roman", Times, serif;
 
-  color: #4b515e;
 
-  padding: -10px;
 
-  display: inline;
 
+  color: #8593a4;
 
+  padding-left: 3vw;
 
 }
 
 
 #content1 .content1-left .left .text1,
 
@@ -250,14 +269,14 @@ body .arrow {
 
 #content1 .content1-left .left .text3 .text-1,
 
 #content1 .content1-left .left .text3 .text-2,
 
 #content1 .content1-left .left .text3 .text-3 {
 
-  font-size: 24px;
 
+  font-size: 23px;
 
   font-weight: bolder;
 
   color: #4b515e;
 
 }
 
 
 #content1 .content1-right {
 
-  margin: auto 10px;
 
-  width: 39vw;
 
+  width: 35vw;
 
+  text-align: center;
 
 }
 
 
 #content1 .content1-right .slick-dots {
 
@@ -269,8 +288,7 @@ body .arrow {
 
 }
 
 
 #content1 .content1-right img {
 
-  margin-left: 70px;
 
-  width: 32vw;
 
+  width: 35vw;
 
   height: 40vw;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
@@ -282,7 +300,7 @@ body .arrow {
 
 
 #service h1 {
 
   padding: 15px;
 
-  margin-left: 10vw;
 
+  padding-left: 10vw;
 
   margin-bottom: 80px;
 
   padding-top: 5vw;
 
 }
 
@@ -316,6 +334,10 @@ body .arrow {
 
   width: 12vw;
 
 }
 
 
+#service .service-box #service-text #text-right {
 
+  padding-left: 1vw;
 
+}
 
+
 
 #service .service-box #service-text .icon-text {
 
   width: 25vw;
 
   margin-top: 15px;
 
@@ -329,6 +351,7 @@ body .arrow {
 
 
 #service .service-box #service-text .text-p {
 
   font-size: 18px;
 
+  color: #4b515e;
 
 }
 
 
 #service .service-box #service-img {
 
@@ -370,31 +393,34 @@ body .arrow {
 
   display: grid;
 
   -ms-grid-columns: (1fr)[6];
 
       grid-template-columns: repeat(6, 1fr);
 
-  width: 80vw;
 
+  width: 78vw;
 
   margin: auto;
 
 }
 
 
 #service-process #process-box .box-text {
 
+  font-family: 微軟正黑體;
 
   text-align: center;
 
   font-size: 18px;
 
-  font-weight: 600;
 
-  padding-right: 30px;
 
+  font-weight: 900;
 
+  padding-right: 3vw;
 
+  color: #6f645a;
 
 }
 
 
 #service-process #process-box img {
 
   width: 180px;
 
   height: 180px;
 
+  -webkit-filter: invert(42%) sepia(12%) saturate(490%) hue-rotate(347deg) brightness(89%) contrast(86%);
 
+          filter: invert(42%) sepia(12%) saturate(490%) hue-rotate(347deg) brightness(89%) contrast(86%);
 
 }
 
 
 #feedback {
 
   width: 100vw;
 
-  margin-bottom: 200px;
 
+  padding-bottom: 200px;
 
 }
 
 
 #feedback h1 {
 
   margin-top: 50px;
 
   margin-bottom: 50px;
 
-  margin-left: 10vw;
 
 }
 
 
 #feedback #feedback-box {
 
@@ -408,16 +434,15 @@ body .arrow {
 
 
 #feedback #feedback-box .box {
 
   width: 25vw;
 
-  height: 30vh;
 
   -webkit-transition: 0.5s;
 
   transition: 0.5s;
 
   text-align: center;
 
+  padding-bottom: 1vw;
 
 }
 
 
 #feedback #feedback-box .box img {
 
   width: 25vw;
 
   margin: 0 auto;
 
-  height: 24vh;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
   -webkit-transition: 0.5s;
 
@@ -449,7 +474,7 @@ body .arrow {
 
 
 #contact-us .contact-text {
 
   margin: 0 auto;
 
-  width: 65vw;
 
+  width: 68vw;
 
 }
 
 
 #contact-us .contact-text .text-p {
 
@@ -468,6 +493,7 @@ body .arrow {
 
 #contact-us .form-title h1 {
 
   text-align: center;
 
   font-size: 32px;
 
+  font-weight: 900;
 
 }
 
 
 #contact-us #contact-form {
 
@@ -496,7 +522,9 @@ body .arrow {
 
   margin: 10px 0;
 
   padding-left: 10px;
 
   border: 1px solid rgba(0, 0, 0, 0.3);
 
-  font-size: 18px;
 
+  padding: 10px 15px;
 
+  font-size: 16px;
 
+  border-radius: 3px;
 
   -webkit-appearance: none;
 
      -moz-appearance: none;
 
           appearance: none;
 
@@ -507,17 +535,20 @@ body .arrow {
 
 
 #contact-us #contact-form #form-left {
 
   width: 28vw;
 
-  margin-left: 5vw;
 
+  margin-left: 3vw;
 
 }
 
 
 #contact-us #contact-form #form-left #rooms,
 
 #contact-us #contact-form #form-left #livingroom,
 
 #contact-us #contact-form #form-left #bathroom {
 
-  width: 32.5%;
 
+  width: 28.5%;
 
+  border: 1px solid rgba(0, 0, 0, 0.3);
 
   height: 50px;
 
   margin: 15px 0;
 
-  padding: 5px;
 
-  font-size: 18px;
 
+  padding-right: 50px;
 
+  padding: 10px 15px;
 
+  font-size: 16px;
 
+  border-radius: 3px;
 
   -webkit-appearance: none;
 
      -moz-appearance: none;
 
           appearance: none;
 
@@ -526,14 +557,20 @@ body .arrow {
 
   background-color: #fff;
 
 }
 
 
+#contact-us #contact-form #form-left #square,
 
+#contact-us #contact-form #form-left #date {
 
+  background: none;
 
+  background-color: #fff;
 
+}
 
+
 
 #contact-us #contact-form #form-right {
 
-  width: 28vw;
 
+  width: 29vw;
 
   margin-left: 5vw;
 
 }
 
 
 #contact-us #contact-form #form-right #facebook {
 
   margin-top: 12px;
 
-  width: 28vw;
 
+  width: 29vw;
 
   height: 50px;
 
   border: 1px solid #000093;
 
   text-align: right;
 
@@ -565,7 +602,8 @@ body .arrow {
 
 
 #contact-us #contact-form #form-right a {
 
   text-decoration: none;
 
-  color: #ff8000;
 
+  color: #ee751b;
 
+  font-weight: 900;
 
 }
 
 
 #contact-us #contact-form #form-right #checkbox {
 
@@ -583,8 +621,8 @@ body .arrow {
 
   margin: 50px auto;
 
   border: none;
 
   padding: 15px;
 
-  background: #EDBC96;
 
-  color: #404854;
 
+  background: #edbc96;
 
+  color: #4b515e;
 
   font-size: 20px;
 
   width: 450px;
 
   border-radius: 10px;
 
@@ -609,7 +647,7 @@ body .arrow {
 
 
 #footer {
 
   width: 100vw;
 
-  background-color: #ffe4ca;
 
+  background-color: #ebe6e2;
 
   color: #9f5000;
 
   text-align: center;
 
   font-size: 18px;

File diff suppressed because it is too large
+ 0 - 0
desktop11/style.css.map


+ 121 - 87
desktop11/style.scss
Bestand weergeven 

@@ -1,12 +1,11 @@
 
 * {
 
-    margin: 0;
 
-    padding: 0;
 
-    box-sizing: border-box;
 
+   
     font-family: 微軟正黑體;
 
 }
 
 $Font-color: #fff;
 
 $title-color: #4b515e;
 
 $toggle: #9c857b;
 
+$process: #6f645a;
 
 @font-face {
 
     font-family: 追奇手寫體;
 
     src: url(./drechifont-proportional.ttf);
 
@@ -17,6 +16,7 @@ $destop: 1025px;
 
 
 body {
 
     height: 5000px;
 
+    width: 100vw;
 
 
     .btn {
 
         width: 96vw;
 
@@ -34,7 +34,7 @@ body {
 
             transition: 0.3s;
 
 
             &:hover {
 
-                background-color: #9C857B;
 
+                background-color: $toggle;
 
                 width: 285px;
 
                 font-size: 17px;
 
             }
 
@@ -42,12 +42,11 @@ body {
 
     }
 
     .title {
 
         font-weight: bolder;
 
-        padding: 15px;
 
         font-family: "Times New Roman", Times, serif;
 
         padding: 15px;
 
-        margin-left: 190px;
 
-        font-size: 49px;
 
+        font-size: 45px;
 
         color: $title-color;
 
+        padding-left: 10vw;
 
     }
 
     .arrow {
 
         position: fixed;
 
@@ -60,22 +59,23 @@ body {
 
 
 // banner
 
 
-#banner {
 
+.banner {
 
     width: 100vw;
 
-    // height: 100vh;
 
     position: relative;
 
     #text {
 
         text-align: center;
 
 
         .banner-slider {
 
+            margin: 0 !important;
 
+            padding: 0 !important;
 
             .banner1,
 
             .banner2,
 
             .banner3 {
 
-                width: 100vw;
 
                 height: 100vh;
 
                 background-size: cover;
 
                 background-repeat: no-repeat;
 
                 background-position: center;
 
+                padding-right:0 !important;
 
             }
 
             .banner1 {
 
                 background-image: url(./img/banner/00.webp);
 
@@ -106,16 +106,16 @@ body {
 
             transition: 0.3s;
 
 
             &:hover {
 
-                background-color: #927368;
 
+                background-color: #9c857b;
 
                 width: 285px;
 
                 font-size: 17px;
 
             }
 
         }
 
     }
 
     .Navigation {
 
-        width: 100vw;
 
-        height: 50px;
 
+        width: 90vw;
 
         position: absolute;
 
+        margin: 0 auto;
 
         top: 20px;
 
         z-index: 5;
 
         display: grid;
 
@@ -131,21 +131,38 @@ body {
 
         .link {
 
             text-align: right;
 
             padding: 30px;
 
-            padding-right: 150px;
 
+            // padding-right: 150px;
 
 
             a {
 
+                display: inline-block;
 
                 text-decoration: none;
 
                 color: $Font-color;
 
-                padding-right: 35px;
 
+                // padding-right: 35px;
 
                 letter-spacing: 1px;
 
                 font-size: 0.9rem;
 
                 font-weight: 600;
 
                 cursor: pointer;
 
-            }
 
-            hr {
 
-                width: 100px;
 
-                background: #fff;
 
-                height: 3px;
 
+                padding: 15px;
 
+                position: relative;
 
+                :hover {
 
+                    opacity: 0.8;
 
+                  }
 
+                   &:after {
 
+                    content: "";
 
+                    display: block;
 
+                    width: 80%;
 
+                    height: 3px;
 
+                    background-color: #fff;
 
+                    position: absolute;
 
+                    left: 12%;
 
+                    bottom: 0;
 
+                    transition: all 0.3s;
 
+                    opacity:0;
 
+                  }
 
+                    &:hover:after {
 
+                    width: 80%;
 
+                    opacity: 1;
 
+                  }
 
             }
 
         }
 
     }
 
@@ -163,22 +180,23 @@ body {
 
 #content1 {
 
     display: grid;
 
     grid-template-columns: 1fr 1fr;
 
-    margin: 150px auto;
 
-    padding-top: 30px;
 
-    width: 85vw;
 
-position: relative;
 
-  
+    margin:  0 auto;
 
+    padding-top: 150px;
 
+    width: 90vw;
 
+    position: relative;
 
+    grid-gap: 30px;
 
+
 
     .hr2 {
 
         position: absolute;
 
-        width: 34vw;
 
+        width: 32vw;
 
         height: 1px !important;
 
-        left:6vw;
 
+        left: 5vw;
 
     }
 
     .content1-left {
 
-        width: 35vw;
 
-        // height: 700px;
 
+        width: 45vw;
 
         text-align: left;
 
-        margin: 30px auto;
 
+        margin: 0px auto;
 
+        padding-right: 50px;
 
         .contant-toggle {
 
             color: $toggle !important;
 
         }
 
@@ -188,30 +206,29 @@ position: relative;
 
 
         .title {
 
             margin: 0;
 
-            margin-top: -10px;
 
             padding: 10px;
 
             margin-bottom: 50px;
 
-            font-weight: bolder;
 
-            font-size: 50px;
 
+            font-weight: 900;
 
+            font-size: 45px;
 
             font-family: "Times New Roman", Times, serif;
 
-            color: 	#8593A4;
 
+            color: $title-color;
 
+            padding-left: 5vw;
 
         }
 
 
         .left {
 
             display: grid;
 
             grid-template-columns: 1.5fr 3fr;
 
-            grid-gap: 30px;
 
-            width: 35vw;
 
-
 
+            width: 37vw;
 
 
             .title1 {
 
                 text-align: center;
 
                 font-size: 90px;
 
                 font-weight: 400;
 
                 font-family: "Times New Roman", Times, serif;
 
-                color: $title-color;
 
-                padding: -10px;
 
-                display: inline;
 
+                color: #8593a4;
 
+        padding-left: 3vw;
 
+               
+
 
             }
 
 
             .text1,
 
@@ -223,7 +240,7 @@ position: relative;
 
                 .text-1,
 
                 .text-2,
 
                 .text-3 {
 
-                    font-size: 24px;
 
+                    font-size: 23px;
 
                     font-weight: bolder;
 
                     color: $title-color;
 
                 }
 
@@ -231,10 +248,9 @@ position: relative;
 
         }
 
     }
 
     .content1-right {
 
-        margin: auto 10px;
 
-        width: 39vw;
 
-        
-      
+        width: 35vw;
 
+        text-align: center;
 
+  
         .slick-dots {
 
             margin-bottom: 50px;
 
             ::before {
 
@@ -242,10 +258,8 @@ position: relative;
 
             }
 
         }
 
         img {
 
-          margin-left: 70px;
 
-            width: 32vw;
 
+          width: 35vw;
 
             height: 40vw;
 
-           
             object-fit: cover;
 
         }
 
     }
 
@@ -254,9 +268,10 @@ position: relative;
 
 // service
 
 #service {
 
     width: 100vw;
 
+  
     h1 {
 
         padding: 15px;
 
-        margin-left: 10vw;
 
+        padding-left: 10vw;
 
         margin-bottom: 80px;
 
         padding-top: 5vw;
 
     }
 
@@ -278,6 +293,9 @@ position: relative;
 
                     width: 12vw;
 
                 }
 
             }
 
+            #text-right {
 
+                padding-left: 1vw;
 
+            }
 
             .icon-text {
 
                 width: 25vw;
 
                 margin-top: 15px;
 
@@ -286,9 +304,11 @@ position: relative;
 
             img {
 
                 width: 128px;
 
                 height: 128px;
 
+                // filter: invert(69%) sepia(15%) saturate(301%) hue-rotate(175deg) brightness(90%) contrast(85%);
 
             }
 
             .text-p {
 
                 font-size: 18px;
 
+                color: $title-color;
 
             }
 
         }
 
         #service-img {
 
@@ -324,18 +344,21 @@ position: relative;
 
     #process-box {
 
         display: grid;
 
         grid-template-columns: repeat(6, 1fr);
 
-        width: 80vw;
 
+        width: 78vw;
 
         margin: auto;
 
 
         .box-text {
 
+            font-family: 微軟正黑體;
 
             text-align: center;
 
             font-size: 18px;
 
-            font-weight: 600;
 
-            padding-right: 30px;
 
+            font-weight: 900;
 
+            padding-right: 3vw;
 
+            color: $process;
 
         }
 
         img {
 
             width: 180px;
 
             height: 180px;
 
+            filter: invert(42%) sepia(12%) saturate(490%) hue-rotate(347deg) brightness(89%) contrast(86%);
 
         }
 
     }
 
 }
 
@@ -343,11 +366,11 @@ position: relative;
 
 // feedback
 
 #feedback {
 
     width: 100vw;
 
-    margin-bottom: 200px;
 
+    padding-bottom: 200px;
 
+
 
     h1 {
 
         margin-top: 50px;
 
         margin-bottom: 50px;
 
-        margin-left: 10vw;
 
     }
 
     #feedback-box {
 
         width: 80vw;
 
@@ -357,13 +380,12 @@ position: relative;
 
 
         .box {
 
             width: 25vw;
 
-            height: 30vh;
 
             transition: 0.5s;
 
             text-align: center;
 
+            padding-bottom: 1vw;
 
             img {
 
                 width: 25vw;
 
                 margin: 0 auto;
 
-                height: 24vh;
 
                 object-fit: cover;
 
                 transition: 0.5s;
 
                 // &:hover {
 
@@ -396,7 +418,7 @@ position: relative;
 
     }
 
     .contact-text {
 
         margin: 0 auto;
 
-        width: 65vw;
 
+        width: 68vw;
 
 
         .text-p {
 
             font-size: 16px;
 
@@ -414,6 +436,7 @@ position: relative;
 
         h1 {
 
             text-align: center;
 
             font-size: 32px;
 
+            font-weight: 900;
 
         }
 
     }
 
     #contact-form {
 
@@ -438,7 +461,9 @@ position: relative;
 
             margin: 10px 0;
 
             padding-left: 10px;
 
             border: 1px solid rgba(0, 0, 0, 0.3);
 
-            font-size: 18px;
 
+            padding: 10px 15px;
 
+            font-size: 16px;
 
+            border-radius: 3px;
 
             appearance: none;
 
             background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
 
             background-size: 10px 10px;
 
@@ -446,29 +471,38 @@ position: relative;
 
         }
 
         #form-left {
 
             width: 28vw;
 
-            margin-left: 5vw;
 
+            margin-left: 3vw;
 
 
             #rooms,
 
             #livingroom,
 
             #bathroom {
 
-                width: 32.5%;
 
+                width: 28.5%;
 
+                border: 1px solid rgba(0, 0, 0, 0.3);
 
                 height: 50px;
 
                 margin: 15px 0;
 
-                padding: 5px;
 
-                font-size: 18px;
 
+                padding-right: 50px;
 
+                padding: 10px 15px;
 
+                font-size: 16px;
 
+                border-radius: 3px;
 
                 appearance: none;
 
                 background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
 
                 background-size: 10px 10px;
 
                 background-color: #fff;
 
             }
 
+            #square,
 
+            #date{
 
+                background:none;
 
+                background-color: #fff;
 
+
 
+            }
 
         }
 
         #form-right {
 
-            width: 28vw;
 
+            width: 29vw;
 
             margin-left: 5vw;
 
 
             #facebook {
 
                 margin-top: 12px;
 
-                width: 28vw;
 
+                width: 29vw;
 
                 height: 50px;
 
                 border: 1px solid #000093;
 
                 text-align: right;
 
@@ -497,14 +531,15 @@ position: relative;
 
             }
 
             a {
 
                 text-decoration: none;
 
-                color: #ff8000;
 
+                color: #ee751b;
 
+                 font-weight:900;
 
             }
 
             #checkbox {
 
                 margin: 15px;
 
             }
 
             #email,
 
             #name,
 
-            #phone {
 
+            #phone{
 
                 background: none;
 
                 background-color: #fff;
 
             }
 
@@ -514,8 +549,8 @@ position: relative;
 
         margin: 50px auto;
 
         border: none;
 
         padding: 15px;
 
-        background: #EDBC96;
 
-        color: rgb(64, 72, 84);
 
+        background: #edbc96;
 
+        color: #4b515e;
 
         font-size: 20px;
 
         width: 450px;
 
         border-radius: 10px;
 
@@ -539,7 +574,7 @@ position: relative;
 
 
 #footer {
 
     width: 100vw;
 
-    background-color: #ffe4ca;
 
+    background-color: #ebe6e2;
 
     color: #9f5000;
 
     text-align: center;
 
     font-size: 18px;
 
@@ -554,8 +589,8 @@ position: relative;
 
     }
 
 }
 
 
-.animation-h1{
 
-    animation-name:fade;
 
+.animation-h1 {
 
+    animation-name: fade;
 
     animation-duration: 1s;
 
     animation-fill-mode: forwards;
 
     animation-delay: 0.5s;
 
@@ -571,21 +606,20 @@ position: relative;
 
         }
 
     }
 
 }
 
-.animation-btn{
 
-    animation-name:fade2;
 
-  animation-duration:1s;
 
- animation-fill-mode:forwards;
 
-animation-delay: 1s;
 
-   opacity: 0;
 
-         @keyframes fade2 {
 
-from {
 
- transform: translateY(0px); 
-  
-}
 
+.animation-btn {
 
+    animation-name: fade2;
 
+    animation-duration: 1s;
 
+    animation-fill-mode: forwards;
 
+    animation-delay: 1s;
 
+    opacity: 0;
 
+    @keyframes fade2 {
 
+        from {
 
+            transform: translateY(0px);
 
+        }
 
 
-to {
 
- transform: translateY(-10px);
 
-  opacity:1;
 
-}
 
+        to {
 
+            transform: translateY(-10px);
 
+            opacity: 1;
 
+        }
 
+    }
 
 }
 
- }

BIN
mobile/img/play (1).png
Bestand weergeven


+ 37 - 34
mobile/index.html
Bestand weergeven 

@@ -24,7 +24,7 @@
 
 <body>
 
     <nav class="navigation">
 
         <div class="logo">
 
-            <a href=""><img src="./img/logo/logomain-3.webp" alt=""></a>
 
+            <a href="https://hhh.com.tw/"><img src="./img/logo/logomain-3.webp" alt=""></a>
 
         </div>
 
         <img id="menu-btn1" src="./img/logo/menu.webp" alt="">
 
     </nav>
 
@@ -33,9 +33,9 @@
 
 
         <div id="menu-box2">
 
             <div id="menu1" class="menu-text"><a href="#!">首頁</a>
 
-                <div class="menu-text"><a href="#!">我有裝修需求</a></div>
 
-                <div class="menu-text"><a href="#!">屋主都說好</a></div>
 
-                <div class="menu-text"><a href="#!">服務流程</a></div>
 
+                <div class="menu-text"><a class="link" data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a></div>
 
+                <div class="menu-text"><a  class="link" data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a></div>
 
+                <div class="menu-text"><a class="link" data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a></div>
 
             </div>
 
             <hr>
 
             <div id="menu-link">
 
@@ -70,7 +70,7 @@
 
         <button class="btn-main">預約居家布置諮詢</button>
 
     </div>
 
     <section id="content1">
 
-        <h1 class="title">你有以這些下困擾嗎</h1>
 
+        <h1 class="title">你有以下這些下困擾嗎</h1>
 
         <div class="box">
 
 
             <div class="text">
 
@@ -118,7 +118,7 @@
 
             <div class="row">
 
                 <div class="text col-6  bg-light.bg-gradient  " style="background-color: #eee;">
 
                     <div class="left-box ">
 
-                        <img class="icon  " src="./img/process/icon2.webp" alt="">
 
+                        <img class="icon  " src="./img/process/icon1.webp" alt="">
 
                         <div class="left-text">
 
                             <div class="text-font  ">推薦合法立案</div>
 
                             <div class="text-font">無裝修司法糾紛紀錄的</div>
 
@@ -139,11 +139,9 @@
 
                     <div class="left-box ">
 
                         <img class="icon  " src="./img/process/icon2.webp" alt="">
 
                         <div class="left-text">
 
-                            <div class="text-font  ">推薦合法立案</div>
 
-                            <div class="text-font">無裝修司法糾紛紀錄的</div>
 
-                            <div class="text-font">專業設計師</div>
 
-                            <div class="text-font">輕鬆找到合適人選</div>
 
-                            <div class="text-font">不再大海撈針</div>
 
+                            <div class="text-font  "><span style="font-size: 20px;" >13</span>年經驗安心把關</div>
 
+                            <div class="text-font">不懂預算行情</div>
 
+                            <div class="text-font">也不用擔心受騙</div>
 
                         </div>
 
                     </div>
 
                 </div>
 
@@ -184,7 +182,7 @@
 
             </div>
 
         </div> -->
 
         <div class="btn">
 
-            <button class="btn-main">預約免費裝修諮詢</button>
 
+            <button class="btn-main">預約居家布置諮詢</button>
 
         </div>
 
     </section>
 
     <section id="service-process">
 
@@ -192,48 +190,48 @@
 
         <div class="process-box">
 
             <img src="./img/process/box1.webp" alt="">
 
             <div style="margin-top: 70px;" class="process-title">
 
-                <p>填寫需求表單</p>
 
+                <div class="p-text">填寫需求表單</div>
 
                 <img src="./img/process/arrowdown.webp" alt="">
 
             </div>
 
         </div>
 
         <div class="process-box">
 
             <img src="./img/process/box2.webp" alt="">
 
             <div style="margin-top: 50px;" class="process-title">
 
-                <p>專人聯繫</p>
 
-                <p>進行裝修前諮詢</p>
 
+                <div class="p-text">專人聯繫</div>
 
+                <div class="p-text">進行裝修前諮詢</div>
 
                 <img src="./img/process/arrowdown.webp" alt="">
 
             </div>
 
         </div>
 
         <div class="process-box">
 
             <img src="./img/process/box3.webp" alt="">
 
             <div style="margin-top: 30px;" class="process-title">
 
-                <p>依照屋主的需求</p>
 
-                <p>推薦合法立案的</p>
 
-                <p>設計公司</p>
 
+                <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 class="process-box">
 
             <img src="./img/process/box4.webp" alt="">
 
             <div style="margin-top: 50px;" class="process-title">
 
-                <p>設計公司會</p>
 
-                <p>主動與屋主聯繫</p>
 
+                <div class="p-text">設計公司會</div>
 
+                <div class="p-text">主動與屋主聯繫</div>
 
                 <img src="./img/process/arrowdown.webp" alt="">
 
             </div>
 
         </div>
 
         <div class="process-box">
 
             <img src="./img/process/box5.webp" alt="">
 
             <div style="margin-top: 30px;" class="process-title">
 
-                <p>選擇是否使用</p>
 
-                <p>幸福經紀人制度</p>
 
-                <p>來保障裝修權益</p>
 
+                <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 class="process-box">
 
             <img src="./img/process/box6.webp" alt="">
 
             <div style="margin-top: 50px;" class="process-title">
 
-                <p>媒合成功</p>
 
+                <div class="p-text">媒合成功</div>
 
             </div>
 
         </div>
 
     </section>
 
@@ -244,26 +242,31 @@
 
             <div class="box">
 
                 <img src="./img/feedback/feedback01.webp" alt="">
 
                 <p>嚮往仁文街處的溫度-文響</p>
 
-            </div>
 
-            <div class="box">
 
+                <a href="https://hhh.com.tw/video-post.php?id=2905"><img  class="play" src="./img/play (1).png" alt=""></a>
 
+            </div>            <div class="box">
 
                 <img src="./img/feedback/feedback02.webp" alt="">
 
-                <p>嚮往仁文街處的溫度-文響</p>
 
+                <p>緞帶般曲線 譜出家的律動與甜蜜</p>
 
+                <a href="https://hhh.com.tw/video-post.php?id=3782"><img  class="play" src="./img/play (1).png" alt=""></a>
 
             </div>
 
             <div class="box">
 
                 <img src="./img/feedback/feedback03.webp" alt="">
 
-                <p>嚮往仁文街處的溫度-文響</p>
 
+                <p>系統設計的變革 前衛科技宅</p>
 
+                <a href="https://hhh.com.tw/video-post.php?id=3549"><img  class="play" src="./img/play (1).png" alt=""></a>
 
             </div>
 
             <div class="box">
 
                 <img src="./img/feedback/feedback04.webp" alt="">
 
-                <p>嚮往仁文街處的溫度-文響</p>
 
+                <p>用系統設計 實現歐洲皇室城堡夢</p>
 
+                <a href="https://hhh.com.tw/video-post.php?id=2985"><img  class="play" src="./img/play (1).png" alt=""></a>
 
             </div>
 
             <div class="box">
 
                 <img src="./img/feedback/feedback05.webp" alt="">
 
-                <p>嚮往仁文街處的溫度-文響</p>
 
+                <p>不良格局變身 3米6日光鄉村宅</p>
 
+                <a href="https://hhh.com.tw/video-post.php?id=2122"><img  class="play" src="./img/play (1).png" alt=""></a>
 
             </div>
 
             <div class="box">
 
                 <img src="./img/feedback/feedback06.webp" alt="">
 
-                <p>嚮往仁文街處的溫度-文響</p>
 
+                <p>雙拼豪宅古典、日式一次擁有</p>
 
+                <a href="https://hhh.com.tw/video-post.php?id=3847"><img  class="play" src="./img/play (1).png" alt=""></a>
 
             </div>
 
 
         </div>
 
@@ -277,7 +280,7 @@
 
 
         </div>
 
         <div id="form-text">
 
-            <p>請撥打全台付費專線<span id="phone" style="color: #ffaf60">0800-336-086</span></p>
 
+            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone" style="color:  #ee751b;">0800-336-086</span></p>
 
             <p>或填寫以下資料，專人將盡速與您聯繫。</p>
 
         </div>
 
         <div id="contact-form">
 
@@ -390,7 +393,7 @@
 
                 <option class="option" value="type">男</option>
 
                 <option class="option" value="type">女</option>
 
             </select>
 
-            <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
 
+            <input type="checkbox" id="checkbox"> <label id="agree" for="agree">同意</label><a href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
         </div>
 
         <div id="form">
 
             <button id="btn">送出</button>
 
@@ -399,7 +402,7 @@
 
     <div id="footer">
 
         <p>幸福空間 版權所有 &copy; Gorgeous Space Co.Ltd.</p>
 
         <p>All Rights Reserved.</p>
 
-        <a href="x">｜聯絡我們｜</a>
 
+        <a href="x">｜聯絡我們</a>
 
         <a href="">｜關於本站｜</a>
 
     </div>

+ 45 - 0
mobile/script/goto.js
Bestand weergeven 

@@ -20,3 +20,48 @@ $(".feedback-slider1").slick({
 
    
   });
 
 
+  $( ".link" ).click(function() {
 
+    $( "#menu-box2" ).fadeOut( "slow", function() {
 
+      // Animation complete.
 
+    });
 
+  });
 
+
 
+  $("*").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();
 
+  });
 
+

+ 65 - 20
mobile/style.css
Bestand weergeven 

@@ -17,11 +17,11 @@ body {
 
 }
 
 
 body .title {
 
-  font-weight: bolder;
 
+  font-weight: 900;
 
   padding: 15px;
 
   font-family: "Times New Roman", Times, serif;
 
   font-size: 36px;
 
-  color: #414854;
 
+  color: #4b515e;
 
   text-align: center;
 
 }
 
 
@@ -60,7 +60,7 @@ body .btn-main {
 
 }
 
 
 body .btn-main:hover {
 
-  background-color: #927368;
 
+  background-color: #9c857b;
 
   width: 285px;
 
   font-size: 16px;
 
 }
 
@@ -189,6 +189,12 @@ body .btn-main:hover {
 
   font-family: "Times New Roman", Times, serif;
 
 }
 
 
+@media screen and (max-width: 767px) {
 
+  #content1 .title {
 
+    font-size: 30px;
 
+  }
 
+}
 
+
 
 #content1 .text {
 
   position: relative;
 
 }
 
@@ -273,6 +279,18 @@ body .btn-main:hover {
 
   }
 
 }
 
 
+@media screen and (max-width: 769px) {
 
+  #service .text .left-box .left-text {
 
+    padding-top: 3vw;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 576px) {
 
+  #service .text .left-box .left-text {
 
+    padding-top: 5vw;
 
+  }
 
+}
 
+
 
 @media screen and (max-width: 769px) {
 
   #service .text .left-box {
 
     width: 45vw;
 
@@ -315,7 +333,6 @@ body .btn-main:hover {
 
 
 #service-process h1 {
 
   margin-top: 150px;
 
-  margin-bottom: 50px;
 
 }
 
 
 @media screen and (max-width: 1024px) {
 
@@ -327,6 +344,7 @@ body .btn-main:hover {
 
 @media screen and (max-width: 767px) {
 
   #service-process h1 {
 
     font-size: 32px;
 
+    margin-bottom: 30px;
 
   }
 
 }
 
 
@@ -334,7 +352,7 @@ body .btn-main:hover {
 
   width: 60vw;
 
   display: -ms-grid;
 
   display: grid;
 
-  margin: 10px auto;
 
+  margin: 0px auto;
 
   -ms-grid-columns: (1fr)[2];
 
       grid-template-columns: repeat(2, 1fr);
 
 }
 
@@ -383,34 +401,29 @@ body .btn-main:hover {
 
   }
 
 }
 
 
-#service-process .process-title p {
 
+#service-process .process-title .p-text {
 
   font-size: 20px;
 
   font-family: 微軟正黑體;
 
   font-weight: bolder;
 
+  color: #6f645a;
 
 }
 
 
 @media screen and (max-width: 1024px) {
 
-  #service-process .process-title p {
 
+  #service-process .process-title .p-text {
 
     width: 40vw;
 
     font-size: 38px;
 
   }
 
 }
 
 
 @media screen and (max-width: 767px) {
 
-  #service-process .process-title p {
 
+  #service-process .process-title .p-text {
 
     font-size: 18px;
 
   }
 
 }
 
 
-#service-process .process-title img {
 
-  margin: 20px;
 
-  width: 32px;
 
-  height: 32px;
 
-}
 
-
 
 @media screen and (max-width: 1024px) {
 
   #service-process .process-title img {
 
-    margin-top: 50px;
 
+    margin-top: 80px;
 
     width: 40px;
 
     height: 40px;
 
   }
 
@@ -418,6 +431,8 @@ body .btn-main:hover {
 
 
 @media screen and (max-width: 767px) {
 
   #service-process .process-title img {
 
+    width: 8vw;
 
+    height: 8vw;
 
     margin-top: 10px;
 
   }
 
 }
 
@@ -448,6 +463,10 @@ body .btn-main:hover {
 
   margin-bottom: 50px;
 
 }
 
 
+#feedback .box {
 
+  position: relative;
 
+}
 
+
 
 #feedback .box p {
 
   margin: 20px;
 
   text-align: center;
 
@@ -475,6 +494,16 @@ body .btn-main:hover {
 
   }
 
 }
 
 
+#feedback .box .play {
 
+  position: absolute;
 
+  left: 40vw;
 
+  top: 25vw;
 
+  width: 15vw;
 
+  height: 15vw;
 
+  opacity: 0.8;
 
+  z-index: 10;
 
+}
 
+
 
 #contact-us p {
 
   font-size: 16px;
 
   font-weight: 600;
 
@@ -501,8 +530,23 @@ body .btn-main:hover {
 
 }
 
 
 #contact-us #form-text {
 
+  width: 100vw;
 
   margin: 30px auto;
 
-  margin-left: 50px;
 
+}
 
+
 
+@media screen and (max-width: 1024px) {
 
+  #contact-us #form-text {
 
+    font-size: 24px;
 
+    text-align: center;
 
+    margin: 30px auto;
 
+  }
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #contact-us #form-text {
 
+    font-size: 16px;
 
+    margin: 30px auto;
 
+  }
 
 }
 
 
 #contact-us h1 {
 
@@ -620,7 +664,7 @@ body .btn-main:hover {
 
 
 #contact-us #contact-form a {
 
   text-decoration: none;
 
-  color: #ff8000;
 
+  color: #ee751b;
 
 }
 
 
 #contact-us #contact-form #checkbox {
 
@@ -672,16 +716,17 @@ body .btn-main:hover {
 
   padding-top: 50px;
 
   width: 100vw;
 
   height: 150px;
 
-  background-color: #ffe4ca;
 
-  color: #9f5000;
 
+  background-color: #ebe6e2;
 
+  color: #4b515e;
 
   text-align: center;
 
   font-size: 16px;
 
   line-height: 2;
 
+  font-weight: 900;
 
 }
 
 
 #footer a {
 
   text-decoration: none;
 
-  color: #9f5000;
 
+  color: #4b515e;
 
 }
 
 
 #footer p {

File diff suppressed because it is too large
+ 0 - 0
mobile/style.css.map


+ 53 - 15
mobile/style.scss
Bestand weergeven 

@@ -6,6 +6,7 @@
 
 $table: 1024px;
 
 $moblie: 767px;
 
 
+$process: #6f645a;
 
 // 行動裝置
 
 @font-face {
 
     font-family: 追奇手寫體;
 
@@ -13,15 +14,17 @@ $moblie: 767px;
 
     font-weight: 900;
 
 }
 
 $Font-color: #fff;
 
+$toggle: #9c857b;
 
+$title-color: #4b515e;
 
 body {
 
     height: 6000px;
 
 
     .title {
 
-        font-weight: bolder;
 
+        font-weight: 900;
 
         padding: 15px;
 
         font-family: "Times New Roman", Times, serif;
 
         font-size: 36px;
 
-        color: rgb(65, 72, 84);
 
+        color:$title-color;
 
         text-align: center;
 
         @media screen and(max-width:$table) {
 
             font-size: 48px;
 
@@ -48,7 +51,7 @@ body {
 
         transition: 0.3s;
 
         margin-top: 50px;
 
         &:hover {
 
-            background-color: #927368;
 
+            background-color: $toggle;
 
             width: 285px;
 
             font-size: 16px;
 
         }
 
@@ -143,6 +146,9 @@ body {
 
     .title {
 
         margin: 30px 0px;
 
         font-family: "Times New Roman", Times, serif;
 
+        @media screen and(max-width:$moblie) {
 
+            font-size: 30px;
 
+        }
 
     }
 
     .text {
 
         position: relative;
 
@@ -203,6 +209,15 @@ body {
 
         }
 
 
         .left-box {
 
+            .left-text{
 
+                @media screen and(max-width: 769px) {
 
+                    padding-top: 3vw;
 
+                }
 
+                @media screen and(max-width: 576px) {
 
+                   
+                    padding-top: 5vw;
 
+                }
 
+            }
 
             @media screen and(max-width: 769px) {
 
                 width: 45vw;
 
                 padding-left: 50px;
 
@@ -313,18 +328,19 @@ body {
 
     }
 
     h1 {
 
         margin-top: 150px;
 
-        margin-bottom: 50px;
 
+       
         @media screen and(max-width:$table) {
 
             margin-bottom: 150px;
 
         }
 
         @media screen and(max-width:$moblie) {
 
             font-size: 32px;
 
+            margin-bottom: 30px;
 
         }
 
     }
 
     .process-box {
 
         width: 60vw;
 
         display: grid;
 
-        margin: 10px auto;
 
+        margin: 0px auto;
 
         grid-template-columns: repeat(2, 1fr);
 
         @media screen and(max-width:$moblie) {
 
             width: 70vw;
 
@@ -354,10 +370,11 @@ body {
 
             width: 40vw;
 
         }
 
 
-        p {
 
+        .p-text{
 
             font-size: 20px;
 
             font-family: 微軟正黑體;
 
             font-weight: bolder;
 
+            color: $process;
 
             @media screen and(max-width:$table) {
 
                 width: 40vw;
 
                 font-size: 38px;
 
@@ -367,15 +384,15 @@ body {
 
             }
 
         }
 
         img {
 
-            margin: 20px;
 
-            width: 32px;
 
-            height: 32px;
 
+            
             @media screen and(max-width:$table) {
 
-                margin-top: 50px;
 
+                margin-top: 80px;
 
                 width: 40px;
 
                 height: 40px;
 
             }
 
             @media screen and(max-width:$moblie) {
 
+                width: 8vw;
 
+                height:8vw;
 
                 margin-top: 10px;
 
             }
 
         }
 
@@ -400,6 +417,7 @@ body {
 
         margin-bottom: 50px;
 
     }
 
     .box {
 
+        position: relative;
 
         p {
 
             margin: 20px;
 
             text-align: center;
 
@@ -419,6 +437,16 @@ body {
 
                 width: 90vw;
 
             }
 
         }
 
+        .play{
 
+            position: absolute;
 
+            left:40vw;
 
+            top:25vw;
 
+            width: 15vw;
 
+            height: 15vw;
 
+            opacity: 0.8;
 
+            z-index: 10;
 
+           
+        }
 
     }
 
 }
 
 #contact-us {
 
@@ -442,8 +470,17 @@ body {
 
         color: #5c5248;
 
     }
 
     #form-text {
 
+        width: 100vw;
 
         margin: 30px auto;
 
-        margin-left: 50px;
 
+        @media screen and(max-width:$table) {
 
+            font-size: 24px;
 
+            text-align: center;
 
+            margin: 30px auto;
 
+        }
 
+        @media screen and(max-width:$moblie) {
 
+            font-size: 16px;
 
+            margin: 30px auto;
 
+        }
 
     }
 
     h1 {
 
         text-align: center;
 
@@ -537,7 +574,7 @@ body {
 
         }
 
         a {
 
             text-decoration: none;
 
-            color: #ff8000;
 
+            color: #ee751b;
 
         }
 
         #checkbox {
 
             margin-top: 50px;
 
@@ -588,14 +625,15 @@ body {
 
     padding-top: 50px;
 
     width: 100vw;
 
     height: 150px;
 
-    background-color: #ffe4ca;
 
-    color: #9f5000;
 
+    background-color: #ebe6e2;
 
+    color: $title-color;
 
     text-align: center;
 
     font-size: 16px;
 
     line-height: 2;
 
+    font-weight: 900;
 
     a {
 
         text-decoration: none;
 
-        color: #9f5000;
 
+        color: $title-color;
 
     }
 
     p {
 
         margin-left: 5px;

Some files were not shown because too many files changed in this diff