Accueil Explorer Aide
S'inscrire Connexion
choozmo
/
HHH_Home_Decoration_2
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

電腦版版面優化(未完成)

jeter20131220 il y a 3 ans
Parent
692e420ff1
commit
58456f2518
23 fichiers modifiés avec 743 ajouts et 433 suppressions
Vue séparée Afficher les stats Diff
  1. 79 5
      desktop11/goto.js
  2. BIN
      desktop11/img/content/01.webp
  3. BIN
      desktop11/img/content/03.webp
  4. BIN
      desktop11/img/process/box1.png
  5. BIN
      desktop11/img/process/box1.webp
  6. BIN
      desktop11/img/process/box2.png
  7. BIN
      desktop11/img/process/box2.webp
  8. BIN
      desktop11/img/process/box3.png
  9. BIN
      desktop11/img/process/box3.webp
  10. BIN
      desktop11/img/process/box4.png
  11. BIN
      desktop11/img/process/box4.webp
  12. BIN
      desktop11/img/process/box5.png
  13. BIN
      desktop11/img/process/box5.webp
  14. BIN
      desktop11/img/process/box6.png
  15. BIN
      desktop11/img/process/box6.webp
  16. BIN
      desktop11/img/totop.png
  17. 310 201
      desktop11/index.html
  18. 157 98
      desktop11/style.css
  19. 0 0
      desktop11/style.css.map
  20. 190 125
      desktop11/style.scss
  21. 4 4
      mobile/style.css
  22. 0 0
      mobile/style.css.map
  23. 3 0
      mobile/style.scss

+ 79 - 5
desktop11/goto.js
Voir le fichier 

@@ -1,6 +1,80 @@
 
 $(".banner-slider").slick({
 
-    dots:true,
 
-    dotsClass:'slick-dots',
 
-    speed:1000, 
-    swipe:true,
 
-  });
 
+  speed: 1000,
 
+  swipe: true,
 
+});
 
+
 
+$(".content1-right").slick({
 
+  dotsClass: 'slick-dots',
 
+  dots: true,
 
+  speed: 1000,
 
+  swipe: true,
 
+
 
+});
 
+
 
+
 
+$(".text-1").addClass("contant-toggle");
 
+
 
+$(".content1-right").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
 
+  console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
 
+  var nextSlide;
 
+  if (nextSlide=1) {
 
+    $(".text-1").removeClass("contant-toggle");
 
+    $(".text-2").toggleClass("contant-toggle");
 
+  }else if (nextSlide=2) {
 
+    $(".text-3").addClass("contant-toggle");
 
+
 
+  }else if(nextSlide=0){
 
+    $(".text-2").removeClass("contant-toggle");
 
+    $(".text-1").addClass("contant-toggle");
 
+    $(".text-3").removeClass("contant-toggle");
 
+  }
 
+
 
+});
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+$("*").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();
 
+});
 
+
 
+
 
+

BIN
desktop11/img/content/01.webp
Voir le fichier


BIN
desktop11/img/content/03.webp
Voir le fichier


BIN
desktop11/img/process/box1.png
Voir le fichier


BIN
desktop11/img/process/box1.webp
Voir le fichier


BIN
desktop11/img/process/box2.png
Voir le fichier


BIN
desktop11/img/process/box2.webp
Voir le fichier


BIN
desktop11/img/process/box3.png
Voir le fichier


BIN
desktop11/img/process/box3.webp
Voir le fichier


BIN
desktop11/img/process/box4.png
Voir le fichier


BIN
desktop11/img/process/box4.webp
Voir le fichier


BIN
desktop11/img/process/box5.png
Voir le fichier


BIN
desktop11/img/process/box5.webp
Voir le fichier


BIN
desktop11/img/process/box6.png
Voir le fichier


BIN
desktop11/img/process/box6.webp
Voir le fichier


BIN
desktop11/img/totop.png
Voir le fichier


+ 310 - 201
desktop11/index.html
Voir le fichier 

@@ -8,241 +8,348 @@
 
     <title>HHH_Home_Decoration2</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 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>
 
-    <section id="banner">
 
-        <div class="Navigation">
 
-            <div class="logo">
 
-                <img src="./img/logo-main-1-1.webp" alt="">
 
-            </div>
 
-            <div class="link">
 
-                <a href="">首頁</a>
 
-                <a href="">我有裝修需求</a>
 
-                <a href="">屋主都說好</a>
 
-                <a href="">服務流程</a>
 
-            </div>
 
-        </div>
 
-        <hr>
 
-        <div id="text">
 
-            <div class="banner-slider">
 
-                <div class="banner1">
 
-                    <h1>北歐風</h1>
 
-                    <button class="btn-main">預約免費裝修諮詢</button>
 
+<body id="top">
 
+    <div class="container-fluid" style="padding:0;">
 
+        <div class="container-fluid" style="padding:0;">
 
+            <section id="banner">
 
+                <div class="Navigation">
 
+                    <div class="logo">
 
+                        <img src="./img/logo-main-1-1.webp" alt="">
 
+                    </div>
 
+                    <div class="link">
 
+                        <a href="">首頁</a>
 
+                        <a data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a>
 
+                        <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>
 
-                <div class="banner2">
 
-                    <h1>次代風</h1>
 
-                    <button class="btn-main">預約免費裝修諮詢</button>
 
+                <hr class="hr  bg-white" style="opacity:1">
 
+                <div id="text">
 
+                    <div class="banner-slider">
 
+                        <div class="banner1">
 
+                            <h1>北歐風</h1>
 
+                            <button i class="btn-main">預約免費裝修諮詢</button>
 
+                        </div>
 
+                        <div class="banner2">
 
+                            <h1>次代風</h1>
 
+                            <button class="btn-main">預約免費裝修諮詢</button>
 
+                        </div>
 
+                        <div class="banner3">
 
+                            <h1>美式風</h1>
 
+                            <button class="btn-main">預約免費裝修諮詢</button>
 
+                        </div>
 
+                    </div>
 
                 </div>
 
-                <div class="banner3">
 
-                    <h1>美式風</h1>
 
-                    <button class="btn-main">預約免費裝修諮詢</button>
 
-                </div>
 
-            </div>
 
+            </section>
 
+            <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/totop.png"
 
+                alt="">
 
         </div>
 
-    </section>
 
 
-    <section id="content1">
 
+        <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 class="content1-left">
 
-            <h1 id="left-title">你有以這些下困擾嗎</h1>
 
-            <div class="left">
 
-                <h1 class="title1">o1</h1>
 
-                <div class="text">
 
-                    <p>裝修公司眾多</p>
 
-                    <p>不知道如何邀選最適合的設計師? </p>
 
+                    </div>
 
                 </div>
 
-            </div>
 
-            <hr>
 
-            <div class="left">
 
-                <h2 class="title1">o2</h2>
 
-                <div class="text">
 
-                    <p>擔心遇到不良裝修公司</p>
 
-                    <p>容易產生裝修糾紛?</p>
 
+                <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>
 
-            <div class="left">
 
-                <h2 class="title1">o3</h2>
 
-                <div class="text">
 
-                    <p>不了解工程預算行情</p>
 
-                    <p>害怕被騙嗎? </p>
 
+                <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"><img src="./img/content/02.webp" alt=""></div>
 
-
 
-    </section>
 
-    <section id="service">
 
-        <h1 class="title">我們提供的服務</h1>
 
-        <div id="service-img">
 
-            <div id="img-right"><img src="./img/service/service01.webp" alt=""></div>
 
-            <div id="img-left"><img src="./img/service/service02.webp" alt=""></div>
 
-        </div>
 
-        <div id="service-text">
 
-            <div id="text-left">
 
-                <img src="./img/process/icon1.webp" alt="">
 
-                <div class="icon-text">
 
-                    <p>推薦合法立案</p>
 
-                    <p>無裝修司法糾紛紀錄的專業設計師</p>
 
-                    <p>輕鬆找到合適人選</p>
 
-                    <p>不再大海撈針</p>
 
+            <div class="content1-right">
 
+                <div class="containg-img1">
 
+                    <img src="./img/content/01.webp" alt="">
 
                 </div>
 
-            </div>
 
-            <div id="text-right">
 
-                <img src="./img/process/icon2.webp" alt="">
 
-                <div class="icon-text">
 
-                    <p>13年經驗安心把關</p>
 
-                    <p>不懂預算行情</p>
 
-                    <p>也不用擔心受騙</p>
 
+                <div class="containg-img2">
 
+                    <img src="./img/content/02.webp" alt="">
 
+                </div>
 
+                <div class="containg-img3">
 
+                    <img src="./img/content/03.webp" alt="">
 
                 </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>
 
+                    </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>
 
-    <section id="service-process">
 
-        <h1 class="title">最嚴謹的服務流程</h1>
 
-        <div id="process-box">
 
-            <div class="box">
 
-                <img src="./img/process/box1.webp" alt="">
 
-                <p>填寫需求表單</p>
 
-            </div>
 
-            <div class="box">
 
-                <img src="./img/process/box2.webp" alt="">
 
-                <p>專人聯繫</p>
 
-                <p>進行裝修前諮詢</p>
 
-            </div>
 
-            <div class="box">
 
-                <img src="./img/process/box3.webp" alt="">
 
-                <p>依照屋主的需求</p>
 
-                <p>推薦合法立案的</p>
 
-                <p>設計公司</p>
 
-            </div>
 
-            <div class="box">
 
-                <img src="./img/process/box4.webp" alt="">
 
-                <p>設計公司會</p>
 
-                <p>主動與屋主聯繫</p>
 
-            </div>
 
-            <div class="box">
 
-                <img src="./img/process/box5.webp" alt="">
 
-                <p>選擇是否使用</p>
 
-                <p>幸福經紀人制度</p>
 
-                <p>來保障裝修權益</p>
 
-            </div>
 
-            <div class="box">
 
-                <img src="./img/process/box6.webp" alt="">
 
-                <p>媒合成功</p>
 
+            <div class="btn">
 
+                <button class="btn-main">預約免費裝修諮詢</button>
 
             </div>
 
+        </section>
 
+        <div class="container-fluid">
 
+
 
+            <section id="service-process">
 
+                <h1 class="title">最嚴謹的服務流程</h1>
 
+                <div id="process-box">
 
+                    <div class="box">
 
+                        <img src="./img/process/box1.png" alt="">
 
+                        <div class="box-text">填寫需求表單</div>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/process/box2.png" alt="">
 
+                        <div class="box-text">專人聯繫</div>
 
+                        <div class="box-text">進行裝修前諮詢</div>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/process/box3.png" alt="">
 
+                        <div class="box-text">依照屋主的需求</div>
 
+                        <div class="box-text">推薦合法立案的</div>
 
+                        <div class="box-text">設計公司</div>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/process/box4.png" alt="">
 
+                        <div class="box-text">設計公司會</div>
 
+                        <div class="box-text"> 主動與屋主</div>
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/process/box5.png" alt="">
 
+                        <div class="box-text">選擇是否使用</div>
 
+                        <div class="box-text">幸福經紀人制度</div>
 
+                        <div class="box-text">來保障裝修權益</div>
 
+
 
+                    </div>
 
+                    <div class="box">
 
+                        <img src="./img/process/box6.png" alt="">
 
+                        <div class="box-text">媒合成功</div>
 
+                    </div>
 
+
 
 
+                </div>
 
 
+            </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>嚮往仁文街處的溫度-文響</p>
 
+                </div>
 
+                <div class="box">
 
+                    <img src="./img/feedback-img/feedback06.webp" alt="">
 
+                    <p>嚮往仁文街處的溫度-文響</p>
 
+                </div>
 
 
-    </section>
 
-    <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>嚮往仁文街處的溫度-文響</p>
 
+
 
+        </section>
 
+        <section id="contact-us">
 
+            <div class="form-title">
 
+                <h1>已經服務超過14392個生活</h1>
 
+                <h1>打造夢想中的完美居家生活</h1>
 
+                <h1>即刻啟動!</h1>
 
             </div>
 
-            <div class="box">
 
-                <img src="./img/feedback-img/feedback06.webp" alt="">
 
-                <p>嚮往仁文街處的溫度-文響</p>
 
+            <!-- <hr> -->
 
+            <div class="contact-text">
 
+                <div class="text-p">請撥打全台付費專線<span id="phone" style="color: #ffaf60">0800-336-086</span></div>
 
+                <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
 
             </div>
 
 
-        </div>
 
-
 
-    </section>
 
-
 
-    <section id="contact-us">
 
-        <div id="form-title">
 
-            <h1>已經服務超過14392個生活</h1>
 
-            <h1>打造夢想中的完美居家生活</h1>
 
-            <h1>即刻啟動!</h1>
 
-        </div>
 
-        <p>請撥打全台付費專線<span id="phone" style="color: #ffaf60">0800-336-086</span></p>
 
-        <p>或填寫以下資料，專人將盡速與您聯繫</p>
 
-        <div id="contact-form">
 
-            <div id="form-left">
 
-                <select name="location" id="location">
 
-                    <option value="地區" disabled selected="selected">地區</option>
 
-                </select>
 
-                <select name="type" id="type">
 
-                    <option value="房屋類型" disabled selected="selected">房屋類型</option>
 
-                </select>
 
-                <select name="modal" id="modal">
 
-                    <option value="房屋型態" disabled selected="selected">房屋型態</option>
 
-                </select>
 
-                <select name="budget" id="budget">
 
-                    <option value="裝修預算" disabled selected="selected">裝修預算</option>
 
-                </select>
 
-                <input type="text" id="square" placeholder="請輸入坪數" required>
 
-                <select name="rooms" id="rooms">
 
-                    <option value="幾房" disabled selected="selected">幾房</option>
 
-                </select>
 
-                <select name="living room" id="livingroom">
 
-                    <option value="幾廳" disabled selected="selected">幾廳</option>
 
-                </select>
 
-                <select name="bathroom" id="bathroom">
 
-                    <option value="地區" disabled selected="selected">幾衛</option>
 
-                </select>
 
-                <select name="cars" id="style">
 
-                    <option value="風格類型" disabled selected="selected">風格類型</option>
 
-                </select>
 
-                <input type="text" id="date" placeholder="預選裝修日期" required>
 
-
 
+            <div class="container-fluid" style="padding:0">
 
+                <div id="contact-form">
 
+                    <div id="form-left">
 
+                        <select name="location" id="location">
 
+                            <option value="地區" disabled selected="selected">地區</option>
 
+                            <option class="option" value="type">基隆市</option>
 
+                            <option class="option" value="type">台北市</option>
 
+                            <option class="option" value="type">新北市</option>
 
+                            <option class="option" value="type">桃園市</option>
 
+                            <option class="option" value="type">新竹縣</option>
 
+                            <option class="option" value="type">新竹市</option>
 
+                            <option class="option" value="type">苗栗縣</option>
 
+                            <option class="option" value="type">台中市</option>
 
+                            <option class="option" value="type">彰化縣</option>
 
+                            <option class="option" value="type">雲林縣</option>
 
+                            <option class="option" value="type">嘉義縣</option>
 
+                            <option class="option" value="type">嘉義市</option>
 
+                            <option class="option" value="type">台南市</option>
 
+                            <option class="option" value="type">高雄市</option>
 
+                            <option class="option" value="type">屏東縣</option>
 
+                            <option class="option" value="type">宜蘭縣</option>
 
+                            <option class="option" value="type">花蓮縣</option>
 
+                            <option class="option" value="type">台東縣</option>
 
+                            <option class="option" value="type">澎湖縣</option>
 
+                        </select>
 
+                        <select name="type" id="type">
 
+                            <option value="房屋類型" disabled selected="selected">房屋類型</option>
 
+                            <option class="option" value="type">預售屋</option>
 
+                            <option class="option" value="type">中古屋</option>
 
+                            <option class="option" value="type">新成屋</option>
 
+                            <option class="option" value="type">毛胚屋</option>
 
+                            <option class="option" value="type">自地自建</option>
 
+                        </select>
 
+                        <select name="modal" id="modal">
 
+                            <option value="房屋型態" disabled selected="selected">房屋型態</option>
 
+                            <option class="option" value="type">透天</option>
 
+                            <option class="option" value="type">電梯華廈</option>
 
+                            <option class="option" value="type">公寓</option>
 
+                            <option class="option" value="type">平房</option>
 
+                            <option class="option" value="type">民宿</option>
 
+                            <option class="option" value="type">商空</option>
 
+                            <option class="option" value="type">其他</option>
 
+                        </select>
 
+                        <select name="budget" id="budget">
 
+                            <option value="裝修預算" disabled selected="selected">裝修預算</option>
 
+                            <option class="option" value="type">50~100萬</option>
 
+                            <option class="option" value="type">100~200萬</option>
 
+                            <option class="option" value="type">200~300萬</option>
 
+                            <option class="option" value="type">300萬~400萬</option>
 
+                            <option class="option" value="type">400~500萬</option>
 
+                            <option class="option" value="type">500萬以上</option>
 
+                        </select>
 
+                        <input type="text" id="square" placeholder="請輸入坪數" required>
 
+                        <select name="rooms" id="rooms">
 
+                            <option value="幾房" disabled selected="selected">幾房</option>
 
+                            <option class="option" value="type">1房</option>
 
+                            <option class="option" value="type">2房</option>
 
+                            <option class="option" value="type">3房</option>
 
+                            <option class="option" value="type">4房</option>
 
+                            <option class="option" value="type">5房</option>
 
+                            <option class="option" value="type">6房</option>
 
+                            <option class="option" value="type">7房</option>
 
+                            <option class="option" value="type">8房</option>
 
+                        </select>
 
+                        <select name="living room" id="livingroom">
 
+                            <option value="幾廳" disabled selected="selected">幾廳</option>
 
+                            <option class="option" value="type">1廳</option>
 
+                            <option class="option" value="type">2廳</option>
 
+                        </select>
 
+                        <select name="bathroom" id="bathroom">
 
+                            <option value="地區" disabled selected="selected">幾衛</option>
 
+                            <option class="option" value="type">1衛</option>
 
+                            <option class="option" value="type">2衛</option>
 
+                            <option class="option" value="type">3衛</option>
 
+                            <option class="option" value="type">4衛</option>
 
+                            <option class="option" value="type">5衛</option>
 
+                            <option class="option" value="type">6衛</option>
 
+                            <option class="option" value="type">7衛</option>
 
+                            <option class="option" value="type">8衛</option>
 
+                        </select>
 
+                        <select name="cars" id="style">
 
+                            <option value="風格類型" disabled selected="selected">風格類型</option>
 
+                            <option class="option" value="type">現代風</option>
 
+                            <option class="option" value="type">鄉村風</option>
 
+                            <option class="option" value="type">古典風</option>
 
+                            <option class="option" value="type">休閒多元</option>
 
+                            <option class="option" value="type">美式風</option>
 
+                            <option class="option" value="type">奢華風</option>
 
+                            <option class="option" value="type">新古典</option>
 
+                            <option class="option" value="type">日式禪風</option>
 
+                            <option class="option" value="type">東方風</option>
 
+                            <option class="option" value="type">混搭風</option>
 
+                            <option class="option" value="type">前衛風</option>
 
+                            <option class="option" value="type">北歐風</option>
 
+                            <option class="option" value="type">工業風</option>
 
+                            <option class="option" value="type">異國風</option>
 
+                        </select>
 
+                        <input type="text" id="date" placeholder="預選裝修日期" required>
 
+
 
+                    </div>
 
+
 
+                    <div id="form-right">
 
+                        <div id="facebook">
 
+                            <img src="./img/logo/facebook.webp" alt="">
 
+                            使用FB填入信箱與姓名
 
+                        </div>
 
+                        <input type="text" id="email" placeholder="請輸入信箱" required>
 
+                        <input type="text" id="name" placeholder="請輸入姓名" required>
 
+                        <input type="text" id="phone" placeholder="請輸入電話" required>
 
+                        <select name="cars" id="gender">
 
+                            <option value="性格" disabled selected="selected">性別</option>
 
+                            <option class="option" value="type">男</option>
 
+                            <option class="option" value="type">女</option>
 
+                        </select>
 
+                        <input type="checkbox" id="checkbox"> <label for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
 
+                    </div>
 
+                </div>
 
+                <div id="form">
 
+                    <button id="btn">送出</button>
 
+                </div>
 
             </div>
 
+        </section>
 
 
-            <div id="form-right">
 
-                <div id="facebook">
 
-                    <img src="./img/logo/facebook.webp" alt="">
 
-                    使用FB填入信箱與姓名
 
-                </div>
 
-                <input type="text" id="email" placeholder="請輸入信箱" required>
 
-                <input type="text" id="name" placeholder="請輸入姓名" required>
 
-                <input type="text" id="phone" placeholder="請輸入電話" required>
 
-                <select name="cars" id="gender">
 
-                    <option value="性格" disabled selected="selected">性別</option>
 
-                </select>
 
-                <input type="checkbox" id="checkbox"> <label for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
 
+        <div class="container-fluid" style="padding:0; margin:0; ">
 
+
 
+            <div id="footer">
 
+                <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
 
+                <a href="x">｜聯絡我們｜</a>
 
+                <a href="">｜關於本站｜</a>
 
             </div>
 
         </div>
 
-        <div id="form">
 
-            <button id="btn">送出</button>
 
-        </div>
 
-
 
-    </section>
 
-    <div id="footer">
 
-        <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
 
-        <a href="x">｜聯絡我們｜</a>
 
-        <a href="">｜關於本站｜</a>
 
     </div>
 
 
 
@@ -268,8 +375,10 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
         integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
         crossorigin="anonymous"></script>
 
+
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
     <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
+
 
     <script src="./goto.js"></script>
 
 </body>

+ 157 - 98
desktop11/style.css
Voir le fichier 

@@ -14,10 +14,15 @@
 
 }
 
 
 body {
 
-  height: 5300px;
 
+  height: 5000px;
 
 }
 
 
-body .btn-main {
 
+body .btn {
 
+  width: 96vw;
 
+  margin: 0 auto;
 
+}
 
+
 
+body .btn .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;
 
@@ -32,7 +37,7 @@ body .btn-main {
 
   transition: 0.3s;
 
 }
 
 
-body .btn-main:hover {
 
+body .btn .btn-main:hover {
 
   background-color: #927368;
 
   width: 285px;
 
   font-size: 17px;
 
@@ -45,12 +50,19 @@ body .title {
 
   padding: 15px;
 
   margin-left: 190px;
 
   font-size: 50px;
 
-  color: #414854;
 
+  color: #4b515e;
 
+}
 
+
 
+body .arrow {
 
+  position: fixed;
 
+  right: 30px;
 
+  bottom: 30px;
 
+  width: 30px;
 
+  z-index: 10;
 
 }
 
 
 #banner {
 
   width: 100vw;
 
-  height: 100vh;
 
   position: relative;
 
 }
 
 
@@ -113,7 +125,7 @@ body .title {
 
   width: 100vw;
 
   height: 50px;
 
   position: absolute;
 
-  top: 0;
 
+  top: 20px;
 
   z-index: 5;
 
   display: -ms-grid;
 
   display: grid;
 
@@ -122,11 +134,12 @@ body .title {
 
 }
 
 
 #banner .Navigation .logo {
 
-  padding-left: 100px;
 
+  padding-top: 1.5vw;
 
+  padding-left: 12vw;
 
 }
 
 
 #banner .Navigation .logo img {
 
-  width: 200px;
 
+  width: 120px;
 
 }
 
 
 #banner .Navigation .link {
 
@@ -138,7 +151,11 @@ body .title {
 
 #banner .Navigation .link a {
 
   text-decoration: none;
 
   color: #fff;
 
-  padding-right: 40px;
 
+  padding-right: 35px;
 
+  letter-spacing: 1px;
 
+  font-size: 0.9rem;
 
+  font-weight: 600;
 
+  cursor: pointer;
 
 }
 
 
 #banner .Navigation .link hr {
 
@@ -150,8 +167,9 @@ body .title {
 
 #banner hr {
 
   width: 85vw;
 
   position: absolute;
 
-  top: 100px;
 
+  top: 90px;
 
   left: 100px;
 
+  height: 1px;
 
   z-index: 5;
 
 }
 
 
@@ -161,118 +179,115 @@ body .title {
 
   -ms-grid-columns: 1fr 1fr;
 
       grid-template-columns: 1fr 1fr;
 
   margin: 100px 120px;
 
-  width: 80vw;
 
+  width: 85vw;
 
+  grid-gap: 100px;
 
+}
 
+
 
+#content1 .hr {
 
+  width: 35vw;
 
 }
 
 
 #content1 .content1-left {
 
-  width: 510x;
 
-  height: 700px;
 
+  width: 35vw;
 
   text-align: left;
 
   margin: 30px auto;
 
   padding: 10px;
 
 }
 
 
-#content1 .content1-left #left-title {
 
+#content1 .content1-left .contant-toggle {
 
+  color: #9c857b !important;
 
+}
 
+
 
+#content1 .content1-left .contant-toggle2 {
 
+  color: #4b515e !important;
 
+}
 
+
 
+#content1 .content1-left .title {
 
+  margin: 0;
 
   margin-top: -10px;
 
   padding: 10px;
 
   margin-bottom: 50px;
 
   font-weight: bolder;
 
   font-size: 50px;
 
   font-family: "Times New Roman", Times, serif;
 
-  color: #414854;
 
+  color: #4b515e;
 
 }
 
 
 #content1 .content1-left .left {
 
   display: -ms-grid;
 
   display: grid;
 
-  -ms-grid-columns: 1fr 4fr;
 
-      grid-template-columns: 1fr 4fr;
 
+  -ms-grid-columns: 1.5fr 3fr;
 
+      grid-template-columns: 1.5fr 3fr;
 
   grid-gap: 10px;
 
-  padding: 5px;
 
-  width: 500px;
 
+  width: 35vw;
 
 }
 
 
 #content1 .content1-left .left .title1 {
 
-  padding: 10px;
 
   text-align: center;
 
   font-size: 96px;
 
   font-weight: 400;
 
   font-family: "Times New Roman", Times, serif;
 
-  color: #8593a4;
 
+  color: #4b515e;
 
 }
 
 
-#content1 .content1-left .left .text {
 
-  margin-top: 40px;
 
+#content1 .content1-left .left .text1, #content1 .content1-left .left .text2, #content1 .content1-left .left .text3 {
 
+  cursor: pointer;
 
+  margin: auto 0;
 
 }
 
 
-#content1 .content1-left .left .text p {
 
-  font-size: 24px;
 
+#content1 .content1-left .left .text1 .text-1, #content1 .content1-left .left .text1 .text-2, #content1 .content1-left .left .text1 .text-3, #content1 .content1-left .left .text2 .text-1, #content1 .content1-left .left .text2 .text-2, #content1 .content1-left .left .text2 .text-3, #content1 .content1-left .left .text3 .text-1, #content1 .content1-left .left .text3 .text-2, #content1 .content1-left .left .text3 .text-3 {
 
+  font-size: 20px;
 
   font-weight: bold;
 
-  color: #3f4654;
 
+  color: #4b515e;
 
 }
 
 
 #content1 .content1-right {
 
-  margin-left: 70px;
 
+  margin: auto 10px;
 
+  width: 35vw;
 
+}
 
+
 
+#content1 .content1-right .slick-dots {
 
+  margin-bottom: 50px;
 
+}
 
+
 
+#content1 .content1-right .slick-dots ::before {
 
+  color: #fff;
 
 }
 
 
 #content1 .content1-right img {
 
-  width: 550px;
 
-  height: 680px;
 
+  width: 32vw;
 
+  height: 40vw;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
 }
 
 
 #service {
 
   width: 100vw;
 
-  height: 100vh;
 
-  margin: 0 auto;
 
-  background: #eee;
 
 }
 
 
 #service h1 {
 
   padding: 15px;
 
-  margin-left: 190px;
 
+  margin-left: 10vw;
 
   margin-bottom: 80px;
 
+  padding-top: 5vw;
 
 }
 
 
-#service #service-text {
 
-  display: -ms-grid;
 
-  display: grid;
 
-  -ms-grid-columns: 1fr 1fr;
 
-      grid-template-columns: 1fr 1fr;
 
+#service .service-box {
 
   width: 80vw;
 
-  height: 150px;
 
-  grid-gap: 50px;
 
-  margin: 20px 250px;
 
-}
 
-
 
-#service #service-text .icon-text {
 
-  width: 450px;
 
-  margin-left: 50px;
 
-  margin-top: 15px;
 
-  font-weight: 600;
 
-}
 
-
 
-#service #service-text img {
 
-  width: 128px;
 
-  height: 128px;
 
-}
 
-
 
-#service #service-text p {
 
-  font-size: 18px;
 
-  line-height: 1.5;
 
+  margin: 0 auto;
 
 }
 
 
-#service #service-text #text-left {
 
-  width: 30vw;
 
-  text-align: left;
 
+#service .service-box #service-text {
 
   display: -ms-grid;
 
   display: grid;
 
   -ms-grid-columns: 1fr 1fr;
 
       grid-template-columns: 1fr 1fr;
 
+  margin: 3vw auto;
 
+  width: 70vw;
 
 }
 
 
-#service #service-text #text-right {
 
+#service .service-box #service-text #text-left,
 
+#service .service-box #service-text #text-right {
 
   width: 30vw;
 
   text-align: left;
 
   display: -ms-grid;
 
@@ -281,9 +296,28 @@ body .title {
 
       grid-template-columns: 1fr 1fr;
 
 }
 
 
-#service #service-img {
 
-  width: 80vw;
 
-  margin: 0 auto;
 
+#service .service-box #service-text #text-left .img-icon,
 
+#service .service-box #service-text #text-right .img-icon {
 
+  width: 12vw;
 
+}
 
+
 
+#service .service-box #service-text .icon-text {
 
+  width: 25vw;
 
+  margin-top: 15px;
 
+  font-weight: 600;
 
+}
 
+
 
+#service .service-box #service-text img {
 
+  width: 128px;
 
+  height: 128px;
 
+}
 
+
 
+#service .service-box #service-text .text-p {
 
+  font-size: 18px;
 
+}
 
+
 
+#service .service-box #service-img {
 
+  width: 75vw;
 
   display: -ms-grid;
 
   display: grid;
 
   -ms-grid-columns: 1fr 1fr;
 
@@ -291,9 +325,8 @@ body .title {
 
   grid-gap: 10px;
 
 }
 
 
-#service #service-img img {
 
-  width: 40vw;
 
-  height: 40vh;
 
+#service .service-box #service-img img {
 
+  width: 38vw;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
 }
 
@@ -301,17 +334,18 @@ body .title {
 
 #service .btn {
 
   text-align: center;
 
   margin-bottom: 100px;
 
+  margin-top: 50px;
 
 }
 
 
 #service-process {
 
   width: 100vw;
 
-  height: 80vh;
 
-  background-color: #fff;
 
+  background-color: #f7f7f7;
 
+  padding-bottom: 150px;
 
 }
 
 
 #service-process h1 {
 
   padding: 15px;
 
-  margin-left: 190px;
 
+  margin-left: 10vw;
 
   padding-top: 100px;
 
   margin-bottom: 80px;
 
 }
 
@@ -322,10 +356,10 @@ body .title {
 
   -ms-grid-columns: (1fr)[6];
 
       grid-template-columns: repeat(6, 1fr);
 
   width: 80vw;
 
-  margin: 0 auto;
 
+  margin: auto;
 
 }
 
 
-#service-process #process-box p {
 
+#service-process #process-box .box-text {
 
   text-align: center;
 
   font-size: 18px;
 
   font-weight: 600;
 
@@ -333,78 +367,102 @@ body .title {
 
 }
 
 
 #service-process #process-box img {
 
-  width: 205px;
 
-  height: 205px;
 
+  width: 180px;
 
+  height: 180px;
 
 }
 
 
 #feedback {
 
+  width: 100vw;
 
   margin-bottom: 200px;
 
 }
 
 
 #feedback h1 {
 
   margin-top: 50px;
 
   margin-bottom: 50px;
 
+  margin-left: 10vw;
 
 }
 
 
 #feedback #feedback-box {
 
-  width: 1200px;
 
-  height: 400px;
 
+  width: 80vw;
 
   margin: 0 auto;
 
   display: -ms-grid;
 
   display: grid;
 
   -ms-grid-columns: (1fr)[3];
 
       grid-template-columns: repeat(3, 1fr);
 
-  grid-gap: 15px;
 
 }
 
 
-#feedback #feedback-box .box p {
 
+#feedback #feedback-box .box {
 
+  width: 25vw;
 
+  height: 30vh;
 
+  -webkit-transition: 0.5s;
 
+  transition: 0.5s;
 
   text-align: center;
 
-  font-size: 18px;
 
-  font-weight: 600;
 
 }
 
 
 #feedback #feedback-box .box img {
 
-  width: 390px;
 
-  height: 195px;
 
+  width: 25vw;
 
+  margin: 0 auto;
 
+  height: 24vh;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
+  -webkit-transition: 0.5s;
 
+  transition: 0.5s;
 
+}
 
+
 
+#feedback #feedback-box .box p {
 
+  text-align: center;
 
+  font-size: 18px;
 
+  font-weight: 600;
 
+  margin: 10px;
 
 }
 
 
 #contact-us {
 
   margin: 0 auto;
 
   width: 100vw;
 
-  height: 130vh;
 
   background: #eee;
 
+  position: relative;
 
+}
 
+
 
+#contact-us hr {
 
+  position: absolute;
 
+  width: 500px;
 
+  -webkit-transform: rotate(90deg);
 
+          transform: rotate(90deg);
 
+  top: 80vh;
 
+  left: 33vw;
 
 }
 
 
-#contact-us p {
 
+#contact-us .contact-text {
 
+  margin: 0 auto;
 
+  width: 65vw;
 
+}
 
+
 
+#contact-us .contact-text .text-p {
 
   font-size: 16px;
 
   font-weight: 600;
 
-  padding-left: 350px;
 
-  margin: 0px 10px;
 
-  line-height: 1.5;
 
 }
 
 
-#contact-us #form-title {
 
+#contact-us .form-title {
 
+  width: 70vw;
 
+  margin: 0 auto;
 
   padding-top: 100px;
 
-  margin-bottom: 50px;
 
+  margin-bottom: 120px;
 
   color: #5c5248;
 
 }
 
 
-#contact-us h1 {
 
+#contact-us .form-title h1 {
 
   text-align: center;
 
   font-size: 32px;
 
-  margin-right: 50px;
 
 }
 
 
 #contact-us #contact-form {
 
-  margin: 0 350px;
 
-  width: 1000px;
 
+  width: 75vw;
 
   display: -ms-grid;
 
   display: grid;
 
   -ms-grid-columns: (1fr)[2];
 
       grid-template-columns: repeat(2, 1fr);
 
   margin-top: 10px;
 
+  margin: 0 auto;
 
 }
 
 
 #contact-us #contact-form #location,
 
@@ -433,7 +491,8 @@ body .title {
 
 }
 
 
 #contact-us #contact-form #form-left {
 
-  width: 380px;
 
+  width: 28vw;
 
+  margin-left: 5vw;
 
 }
 
 
 #contact-us #contact-form #form-left #rooms,
 
@@ -453,12 +512,13 @@ body .title {
 
 }
 
 
 #contact-us #contact-form #form-right {
 
-  width: 380px;
 
+  width: 28vw;
 
+  margin-left: 5vw;
 
 }
 
 
 #contact-us #contact-form #form-right #facebook {
 
   margin-top: 12px;
 
-  width: 380px;
 
+  width: 28vw;
 
   height: 50px;
 
   border: 1px solid #000093;
 
   text-align: right;
 
@@ -532,7 +592,6 @@ body .title {
 
 
 #footer {
 
   width: 100vw;
 
-  height: 130px;
 
   background-color: #ffe4ca;
 
   color: #9f5000;
 
   text-align: center;

Fichier diff supprimé car celui-ci est trop grand
+ 0 - 0
desktop11/style.css.map


+ 190 - 125
desktop11/style.scss
Voir le fichier 

@@ -5,31 +5,39 @@
 
     font-family: 微軟正黑體;
 
 }
 
 $Font-color: #fff;
 
+$title-color: #4b515e;
 
+$toggle:#9c857b ;
 
 @font-face {
 
     font-family: 追奇手寫體;
 
     src: url(./drechifont-proportional.ttf);
 
     font-weight: 900;
 
 }
 
 
+$destop: 1025px;
 
 
 body {
 
-    height: 5300px;
 
-    .btn-main {
 
-        box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
 
-        border: none;
 
-        padding: 15px;
 
-        background: rgb(64, 72, 84);
 
-        color: $Font-color;
 
-        font-size: 16px;
 
-        font-weight: 600;
 
-        width: 280px;
 
-        border-radius: 30px;
 
-        transition: 0.3s;
 
-
 
-        &:hover {
 
-            background-color: #927368;
 
-            width: 285px;
 
-            font-size: 17px;
 
+    height: 5000px;
 
+    
+    .btn {
 
+        width: 96vw;
 
+        margin: 0 auto;
 
+        .btn-main {
 
+            box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
 
+            border: none;
 
+            padding: 15px;
 
+            background: rgb(64, 72, 84);
 
+            color: $Font-color;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            width: 280px;
 
+            border-radius: 30px;
 
+            transition: 0.3s;
 
+
 
+            &:hover {
 
+                background-color: #927368;
 
+                width: 285px;
 
+                font-size: 17px;
 
+            }
 
         }
 
     }
 
     .title {
 
@@ -39,7 +47,14 @@ body {
 
         padding: 15px;
 
         margin-left: 190px;
 
         font-size: 50px;
 
-        color: rgb(65, 72, 84);
 
+        color: $title-color;
 
+    }
 
+    .arrow {
 
+        position: fixed;
 
+        right: 30px;
 
+        bottom: 30px;
 
+        width: 30px;
 
+        z-index: 10;
 
     }
 
 }
 
 
@@ -47,11 +62,11 @@ body {
 
 
 #banner {
 
     width: 100vw;
 
-    height: 100vh;
 
+    // height: 100vh;
 
     position: relative;
 
     #text {
 
         text-align: center;
 
- 
+
 
         .banner-slider {
 
             .banner1,
 
             .banner2,
 
@@ -102,25 +117,31 @@ body {
 
         width: 100vw;
 
         height: 50px;
 
         position: absolute;
 
-        top: 0;
 
+        top: 20px;
 
         z-index: 5;
 
         display: grid;
 
         grid-template-columns: 2fr 4fr;
 
 
         .logo {
 
-            padding-left: 100px;
 
+            padding-top: 1.5vw;
 
+            padding-left: 12vw;
 
             img {
 
-                width: 200px;
 
+                width: 120px;
 
             }
 
         }
 
         .link {
 
             text-align: right;
 
             padding: 30px;
 
             padding-right: 150px;
 
+
 
             a {
 
                 text-decoration: none;
 
                 color: $Font-color;
 
-                padding-right: 40px;
 
+                padding-right: 35px;
 
+                letter-spacing: 1px;
 
+                font-size: 0.9rem;
 
+                font-weight: 600;
 
+                cursor: pointer;
 
             }
 
             hr {
 
                 width: 100px;
 
@@ -131,9 +152,10 @@ body {
 
     }
 
     hr {
 
         width: 85vw;
 
-        position:absolute;
 
-        top: 100px;
 
+        position: absolute;
 
+        top: 90px;
 
         left: 100px;
 
+        height: 1px;
 
         z-index: 5;
 
     }
 
 }
 
@@ -143,54 +165,77 @@ body {
 
     display: grid;
 
     grid-template-columns: 1fr 1fr;
 
     margin: 100px 120px;
 
-    width: 80vw;
 
+    width: 85vw;
 
+    grid-gap: 100px;
 
+    .hr{
 
+        width: 35vw;
 
+    }
 
     .content1-left {
 
-        width: 510x;
 
-        height: 700px;
 
+        width: 35vw;
 
+        // height: 700px;
 
         text-align: left;
 
         margin: 30px auto;
 
         padding: 10px;
 
-        #left-title {
 
+        .contant-toggle{
 
+            color:$toggle!important;
 
+        }
 
+        .contant-toggle2{
 
+            color:$title-color!important;
 
+        }
 
+
 
+        
+        .title {
 
+            margin: 0;
 
             margin-top: -10px;
 
             padding: 10px;
 
             margin-bottom: 50px;
 
             font-weight: bolder;
 
             font-size: 50px;
 
             font-family: "Times New Roman", Times, serif;
 
-            color: rgb(65, 72, 84);
 
+            color: $title-color;
 
         }
 
 
         .left {
 
             display: grid;
 
-            grid-template-columns: 1fr 4fr;
 
+            grid-template-columns: 1.5fr 3fr;
 
             grid-gap: 10px;
 
-            padding: 5px;
 
-            width: 500px;
 
+            width: 35vw;
 
+           
 
             .title1 {
 
-                padding: 10px;
 
                 text-align: center;
 
                 font-size: 96px;
 
                 font-weight: 400;
 
                 font-family: "Times New Roman", Times, serif;
 
-                color: rgb(133, 147, 164);
 
+                color: $title-color;
 
             }
 
 
-            .text {
 
-                margin-top: 40px;
 
-                p {
 
-                    font-size: 24px;
 
+            .text1,.text2,.text3 {
 
+                cursor: pointer;
 
+               margin: auto 0;
 
+               
+
 
+                .text-1, .text-2, .text-3 {
 
+                    font-size: 20px;
 
                     font-weight: bold;
 
-                    color: rgb(63, 70, 84);
 
+                    color:$title-color;
 
+                
                 }
 
             }
 
         }
 
     }
 
     .content1-right {
 
-        margin-left: 70px;
 
+        margin: auto 10px;
 
+        width: 35vw;
 
+        .slick-dots {
 
+            margin-bottom: 50px;
 
+            ::before{
 
+                color:#fff;
 
+            }
 
+        }
 
         img {
 
-            width: 550px;
 
-            height: 680px;
 
+            width: 32vw;
 
+            height: 40vw;
 
             object-fit: cover;
 
         }
 
     }
 
@@ -199,77 +244,70 @@ body {
 
 // service
 
 #service {
 
     width: 100vw;
 
-    height: 100vh;
 
-    margin: 0 auto;
 
-    background: #eee;
 
     h1 {
 
         padding: 15px;
 
-        margin-left: 190px;
 
+        margin-left: 10vw;
 
         margin-bottom: 80px;
 
+        padding-top: 5vw;
 
     }
 
-    #service-text {
 
-        display: grid;
 
-        grid-template-columns: 1fr 1fr;
 
+    .service-box {
 
         width: 80vw;
 
-        height: 150px;
 
-        grid-gap: 50px;
 
-        margin: 20px 250px;
 
-
 
-        .icon-text {
 
-            width: 450px;
 
-            margin-left: 50px;
 
-            margin-top: 15px;
 
-            font-weight: 600;
 
-        }
 
-        img {
 
-            width: 128px;
 
-            height: 128px;
 
-        }
 
-        p {
 
-            font-size: 18px;
 
-            line-height: 1.5;
 
-        }
 
-
 
-        #text-left {
 
-            width: 30vw;
 
-            text-align: left;
 
+        margin: 0 auto;
 
+        #service-text {
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
+            margin: 3vw auto;
 
+            width: 70vw;
 
+            #text-left,
 
+            #text-right {
 
+                width: 30vw;
 
+                text-align: left;
 
+                display: grid;
 
+                grid-template-columns: 1fr 1fr;
 
+                .img-icon {
 
+                    width: 12vw;
 
+                }
 
+            }
 
+            .icon-text {
 
+                width: 25vw;
 
+                margin-top: 15px;
 
+                font-weight: 600;
 
+            }
 
+            img {
 
+                width: 128px;
 
+                height: 128px;
 
+            }
 
+            .text-p {
 
+                font-size: 18px;
 
+            }
 
         }
 
-
 
-        #text-right {
 
-            width: 30vw;
 
-            text-align: left;
 
+        #service-img {
 
+            width: 75vw;
 
             display: grid;
 
             grid-template-columns: 1fr 1fr;
 
-        }
 
-    }
 
-    #service-img {
 
-        width: 80vw;
 
-        margin: 0 auto;
 
-        display: grid;
 
-        grid-template-columns: 1fr 1fr;
 
-        grid-gap: 10px;
 
+            grid-gap: 10px;
 
 
-        img {
 
-            width: 40vw;
 
-            height: 40vh;
 
-            object-fit: cover;
 
+            img {
 
+                width: 38vw;
 
+
 
+                object-fit: cover;
 
+            }
 
         }
 
     }
 
     .btn {
 
         text-align: center;
 
         margin-bottom: 100px;
 
+        margin-top: 50px;
 
     }
 
 }
 
 // service-process
 
 #service-process {
 
     width: 100vw;
 
-    height: 80vh;
 
-    background-color: #fff;
 
+    background-color: #f7f7f7;
 
+    padding-bottom: 150px;
 
     h1 {
 
         padding: 15px;
 
-        margin-left: 190px;
 
+        margin-left: 10vw;
 
         padding-top: 100px;
 
         margin-bottom: 80px;
 
     }
 
@@ -277,44 +315,57 @@ body {
 
         display: grid;
 
         grid-template-columns: repeat(6, 1fr);
 
         width: 80vw;
 
-        margin: 0 auto;
 
-        p {
 
+        margin: auto;
 
+
 
+        .box-text {
 
             text-align: center;
 
             font-size: 18px;
 
             font-weight: 600;
 
             padding-right: 30px;
 
         }
 
         img {
 
-            width: 205px;
 
-            height: 205px;
 
+            width: 180px;
 
+            height: 180px;
 
         }
 
     }
 
 }
 
 
 // feedback
 
 #feedback {
 
+    width: 100vw;
 
     margin-bottom: 200px;
 
     h1 {
 
         margin-top: 50px;
 
         margin-bottom: 50px;
 
+        margin-left: 10vw;
 
     }
 
     #feedback-box {
 
-        width: 1200px;
 
-        height: 400px;
 
+        width: 80vw;
 
         margin: 0 auto;
 
         display: grid;
 
         grid-template-columns: repeat(3, 1fr);
 
-        grid-gap: 15px;
 
+
 
         .box {
 
+            width: 25vw;
 
+            height: 30vh;
 
+            transition: 0.5s;
 
+            text-align: center;
 
+            img {
 
+                width: 25vw;
 
+                margin: 0 auto;
 
+                height: 24vh;
 
+                object-fit: cover;
 
+                transition: 0.5s;
 
+                // &:hover {
 
+                //     width: 400px;
 
+                //     height: 200px;
 
+                // }
 
+            }
 
             p {
 
                 text-align: center;
 
                 font-size: 18px;
 
                 font-weight: 600;
 
-            }
 
-            img {
 
-                width: 390px;
 
-                height: 195px;
 
-                object-fit: cover;
 
+                margin: 10px;
 
             }
 
         }
 
     }
 
@@ -323,33 +374,44 @@ body {
 
 #contact-us {
 
     margin: 0 auto;
 
     width: 100vw;
 
-    height: 130vh;
 
+
 
     background: #eee;
 
-    p {
 
-        font-size: 16px;
 
-        font-weight: 600;
 
-        padding-left: 350px;
 
-        margin: 0px 10px;
 
-        line-height: 1.5;
 
+    position: relative;
 
+    hr {
 
+        position: absolute;
 
+        width: 500px;
 
+        transform: rotate(90deg);
 
+        top: 80vh;
 
+        left: 33vw;
 
+    }
 
+    .contact-text {
 
+        margin: 0 auto;
 
+        width: 65vw;
 
+
 
+        .text-p {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+        }
 
     }
 
 
-    #form-title {
 
+    .form-title {
 
+        width: 70vw;
 
+        margin: 0 auto;
 
         padding-top: 100px;
 
-        margin-bottom: 50px;
 
+        margin-bottom: 120px;
 
         color: #5c5248;
 
-    }
 
-    h1 {
 
-        text-align: center;
 
-        font-size: 32px;
 
-        margin-right: 50px;
 
+
 
+        h1 {
 
+            text-align: center;
 
+            font-size: 32px;
 
+        }
 
     }
 
     #contact-form {
 
-        margin: 0 350px;
 
-        width: 1000px;
 
+        width: 75vw;
 
         display: grid;
 
         grid-template-columns: repeat(2, 1fr);
 
         margin-top: 10px;
 
-
 
+        margin: 0 auto;
 
         #location,
 
         #type,
 
         #modal,
 
@@ -373,7 +435,9 @@ body {
 
             background-color: #fff;
 
         }
 
         #form-left {
 
-            width: 380px;
 
+            width: 28vw;
 
+            margin-left: 5vw;
 
+
 
             #rooms,
 
             #livingroom,
 
             #bathroom {
 
@@ -389,10 +453,12 @@ body {
 
             }
 
         }
 
         #form-right {
 
-            width: 380px;
 
+            width: 28vw;
 
+            margin-left: 5vw;
 
+
 
             #facebook {
 
                 margin-top: 12px;
 
-                width: 380px;
 
+                width: 28vw;
 
                 height: 50px;
 
                 border: 1px solid #000093;
 
                 text-align: right;
 
@@ -462,7 +528,6 @@ body {
 
 
 #footer {
 
     width: 100vw;
 
-    height: 130px;
 
     background-color: #ffe4ca;
 
     color: #9f5000;
 
     text-align: center;

+ 4 - 4
mobile/style.css
Voir le fichier 

@@ -113,6 +113,10 @@ body .btn-main:hover {
 
   margin-bottom: 50px;
 
 }
 
 
+#banner-box .banner-slider .slick-dots ::before {
 
+  color: #fff;
 
+}
 
+
 
 @media screen and (max-width: 1024px) {
 
   #banner-box .banner-slider .slick-dots {
 
     font-size: 48px;
 
@@ -251,10 +255,6 @@ body .btn-main:hover {
 
   text-align: center;
 
 }
 
 
-#service .img-box img {
 
-  padding: 0 0 !important;
 
-}
 
-
 
 #service .text {
 
   font-size: 1.5rem;
 
   display: inline;

Fichier diff supprimé car celui-ci est trop grand
+ 0 - 0
mobile/style.css.map


+ 3 - 0
mobile/style.scss
Voir le fichier 

@@ -89,6 +89,9 @@ body {
 
     .banner-slider {
 
         .slick-dots {
 
             margin-bottom: 50px;
 
+            ::before{
 
+                color:#fff;
 
+            }
 
 
             @media screen and(max-width:$table) {
 
                 font-size: 48px;

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff