電腦版版面調整

desktop11/goto.js

@@ -11,7 +11,37 @@ $(".content1-right").slick({
 
 });
 
-
+// banner輪播效果
+// $(".banner-slider").on('beforeChange', function (event, slick, currentSlide, nextSlide) {
+//   console.log('beforeChangeEvent: currenSlide=' + currentSlide + ', nextSlide= ' + nextSlide);
+//   if (nextSlide == 1) {
+
+//     $("#animation2").addClass("animation-h1");
+//     $("#btn-animation2").addClass("animation-btn");
+//     $("#animation1").removeClass("animation-h1");
+//     $("#btn-animation1").removeClass("animation-btn");
+
+//     $("#animation3").removeClass("animation-h1");
+//     $("#btn-animation3").removeClass("animation-btn");
+//   }
+//   else if (nextSlide == 2) {
+//     $("#animation3").addClass("animation-h1");
+//     $("#btn-animation3").addClass("animation-btn");
+//     $("#animation1").removeClass("animation-h1");
+//     $("#btn-animation1").removeClass("animation-btn");
+//     $("#animation2").removeClass("animation-h1");
+//     $("#btn-animation2").removeClass("animation-btn");
+//   }else if (nextSlide == 0) {
+//     $("#animation1").addClass("animation-h1");
+//     $("#btn-animation1").addClass("animation-btn");
+//     $("#animation2").removeClass("animation-h1");
+//     $("#btn-animation2").removeClass("animation-btn");
+//     $("#animation3").removeClass("animation-h1");
+//     $("#btn-animation3").removeClass("animation-btn");
+// }
+  
+// });
+// content輪播圖片偵測效果
 $(".text-1").addClass("contant-toggle");
 
 $(".content1-right").on('beforeChange', function (event, slick, currentSlide, nextSlide) {

desktop11/index.html

@@ -35,17 +35,21 @@
                     <div class="banner-slider d-flex align-items-center justify-content-center">
                         <div class="banner1">
                             <div style="padding-top:250px;">
-                                <h1> 北歐風</h1>
-                                <button class="btn-main">預約免費裝修諮詢</button>
+                                <h1 id="animation1"> 北歐風</h1>
+                                <button id="btn-animation1" class="btn-main">預約免費裝修諮詢</button>
                             </div>
                         </div>
                         <div class="banner2">
-                            <h1>次代風</h1>
-                            <button class="btn-main">預約免費裝修諮詢</button>
+                            <div style="padding-top:250px;">
+                                <h1 id="animation2">次代風</h1>
+                                <button id="btn-animation2" class="btn-main">預約免費裝修諮詢</button>
+                            </div>
                         </div>
                         <div class="banner3">
-                            <h1>美式風</h1>
-                            <button class="btn-main">預約免費裝修諮詢</button>
+                            <div style="padding-top:250px;">
+                                <h1 id="animation3">美式風</h1>
+                                <button id="btn-animation3" class="btn-main">預約免費裝修諮詢</button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -63,10 +67,9 @@
                     <div class="text1">
                         <div class="text-1">裝修公司眾多</div>
                         <div class="text-1">不知道如何邀選最適合的設計師?</div>
-
                     </div>
                 </div>
-                <hr class="hr2 bg-dark " style="margin: 0;opacity:1">
+                <hr class="hr2 bg-dark" style="margin:0; opacity:1">
                 <div class="left">
                     <h2 class="title1">o2</h2>
                     <div class="text2">
@@ -74,7 +77,7 @@
                         <div class="text-2">容易產生裝修糾紛?</div>
                     </div>
                 </div>
-                <hr class="hr2 bg-dark " style="  margin: 0 ; opacity:1">
+                <hr class="hr2 bg-dark" style="margin:0; opacity:1">
                 <div class="left">
                     <h2 class="title1">o3</h2>
                     <div class="text3">
@@ -187,23 +190,23 @@
                 </div>
                 <div class="box">
                     <img src="./img/feedback-img/feedback02.webp" alt="">
-                    <p>嚮往仁文街處的溫度-文響</p>
+                    <p>緞帶般曲線 譜出家的律動與甜蜜</p>
                 </div>
                 <div class="box">
                     <img src="./img/feedback-img/feedback03.webp" alt="">
-                    <p>嚮往仁文街處的溫度-文響</p>
+                    <p>系統設計的變革 前衛科技宅</p>
                 </div>
                 <div class="box">
                     <img src="./img/feedback-img/feedback04.webp" alt="">
-                    <p>嚮往仁文街處的溫度-文響</p>
+                    <p>用系統設計 實現歐洲皇室城堡夢</p>
                 </div>
                 <div class="box">
                     <img src="./img/feedback-img/feedback05.webp" alt="">
-                    <p>嚮往仁文街處的溫度-文響</p>
+                    <p>不良格局變身 3米6日光鄉村宅</p>
                 </div>
                 <div class="box">
                     <img src="./img/feedback-img/feedback06.webp" alt="">
-                    <p>嚮往仁文街處的溫度-文響</p>
+                    <p>雙拼豪宅古典、日式一次擁有</p>
                 </div>
 
             </div>
@@ -217,131 +220,134 @@
             </div>
             <!-- <hr> -->
             <div class="contact-text">
-                <div class="text-p">請撥打全台付費專線<span id="phone" style="color: #ffaf60">0800-336-086</span></div>
+                <div class="text-p">請撥打全台付費專線<span id="phone" style="color: #ffaf60; font-weight: bolder;">0800-336-086</span></div>
                 <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
             </div>
 
             <div class="container-fluid" style="padding:0">
-                <form id="contact-form">
-                    <div id="form-left">
-                        <select name="location" id="location" required  >
-                            <option value="地區" disabled selected="selected">地區</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>
-                            <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>
-                            <option class="option">高雄市</option>
-                            <option class="option">屏東縣</option>
-                            <option class="option">宜蘭縣</option>
-                            <option class="option">花蓮縣</option>
-                            <option class="option">台東縣</option>
-                            <option class="option">澎湖縣</option>
-                        </select>
-                        <select name="type" id="type" required >
-                            <option value="房屋類型" disabled selected="selected">房屋類型</option>
-                            <option class="option">預售屋</option>
-                            <option class="option">中古屋</option>
-                            <option class="option">新成屋</option>
-                            <option class="option">毛胚屋</option>
-                            <option class="option">自地自建</option>
-                        </select>
-                        <select name="modal" id="modal" required  >
-                            <option value="房屋型態" disabled selected="selected">房屋型態</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>
-                            <option class="option">其他</option>
-                        </select>
-                        <select name="budget" id="budget" required  >
-                            <option value="裝修預算" disabled selected="selected">裝修預算</option>
-                            <option class="option">50~100萬</option>
-                            <option class="option">100~200萬</option>
-                            <option class="option">200~300萬</option>
-                            <option class="option">300萬~400萬</option>
-                            <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>
-                            <option class="option">1房</option>
-                            <option class="option">2房</option>
-                            <option class="option">3房</option>
-                            <option class="option">4房</option>
-                            <option class="option">5房</option>
-                            <option class="option">6房</option>
-                            <option class="option">7房</option>
-                            <option class="option">8房</option>
-                        </select>
-                        <select name="living room" id="livingroom" required >
-                            <option value="幾廳" disabled selected="selected">幾廳</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 class="option">1衛</option>
-                            <option class="option">2衛</option>
-                            <option class="option">3衛</option>
-                            <option class="option">4衛</option>
-                            <option class="option">5衛</option>
-                            <option class="option">6衛</option>
-                            <option class="option">7衛</option>
-                            <option class="option">8衛</option>
-                        </select>
-                        <select name="cars" id="style" required  >
-                            <option value="風格類型" disabled selected="selected" >風格類型</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>
-                            <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>
-                            <option class="option">異國風</option>
-                        </select>
-                        <input type="text" id="date" placeholder="預選裝修日期" required>
+                <form class="contact-form1">
+                    <div id="contact-form">
+                        <div id="form-left">
+                            <select name="location" id="location" required>
+                                <option value="地區" disabled selected="selected">地區</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>
+                                <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>
+                                <option class="option">高雄市</option>
+                                <option class="option">屏東縣</option>
+                                <option class="option">宜蘭縣</option>
+                                <option class="option">花蓮縣</option>
+                                <option class="option">台東縣</option>
+                                <option class="option">澎湖縣</option>
+                            </select>
+                            <select name="type" id="type" required>
+                                <option value="房屋類型" disabled selected="selected">房屋類型</option>
+                                <option class="option">預售屋</option>
+                                <option class="option">中古屋</option>
+                                <option class="option">新成屋</option>
+                                <option class="option">毛胚屋</option>
+                                <option class="option">自地自建</option>
+                            </select>
+                            <select name="modal" id="modal" required>
+                                <option value="房屋型態" disabled selected="selected">房屋型態</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>
+                                <option class="option">其他</option>
+                            </select>
+                            <select name="budget" id="budget" required>
+                                <option value="裝修預算" disabled selected="selected">裝修預算</option>
+                                <option class="option">50~100萬</option>
+                                <option class="option">100~200萬</option>
+                                <option class="option">200~300萬</option>
+                                <option class="option">300萬~400萬</option>
+                                <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>
+                                <option class="option">1房</option>
+                                <option class="option">2房</option>
+                                <option class="option">3房</option>
+                                <option class="option">4房</option>
+                                <option class="option">5房</option>
+                                <option class="option">6房</option>
+                                <option class="option">7房</option>
+                                <option class="option">8房</option>
+                            </select>
+                            <select name="living room" id="livingroom" required>
+                                <option value="幾廳" disabled selected="selected">幾廳</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 class="option">1衛</option>
+                                <option class="option">2衛</option>
+                                <option class="option">3衛</option>
+                                <option class="option">4衛</option>
+                                <option class="option">5衛</option>
+                                <option class="option">6衛</option>
+                                <option class="option">7衛</option>
+                                <option class="option">8衛</option>
+                            </select>
+                            <select name="cars" id="style" required>
+                                <option value="風格類型" disabled selected="selected">風格類型</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>
+                                <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>
+                                <option class="option">異國風</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">男</option>
+                                <option class="option">女</option>
+                            </select>
+                            <input type="checkbox" id="checkbox" required> <label for="agree">同意</label><a
+                                href="">免責聲明與隱私使用政策</a>
+                        </div>
 
                     </div>
+                    <div class="form-btn">
+                        <input class="btn" type="submit" value="送出">
 
-                    <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">男</option>
-                            <option class="option">女</option>
-                        </select>
-                        <input type="checkbox" id="checkbox" required > <label for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
                     </div>
-                    <input type="submit" value="確認送出">
                 </form>
-                <div id="form">
-                    <button id="btn">送出</button>
-                </div>
             </div>
         </section>
 

desktop11/style.css

@@ -38,7 +38,7 @@ body .btn .btn-main {
 }
 
 body .btn .btn-main:hover {
-  background-color: #927368;
+  background-color: #9C857B;
   width: 285px;
   font-size: 17px;
 }
@@ -49,7 +49,7 @@ body .title {
   font-family: "Times New Roman", Times, serif;
   padding: 15px;
   margin-left: 190px;
-  font-size: 50px;
+  font-size: 49px;
   color: #4b515e;
 }
 
@@ -177,20 +177,23 @@ body .arrow {
   display: grid;
   -ms-grid-columns: 1fr 1fr;
       grid-template-columns: 1fr 1fr;
-  margin: 100px 120px;
+  margin: 150px auto;
+  padding-top: 30px;
   width: 85vw;
-  grid-gap: 100px;
+  position: relative;
 }
 
-#content1 .hr {
-  width: 35vw;
+#content1 .hr2 {
+  position: absolute;
+  width: 34vw;
+  height: 1px !important;
+  left: 6vw;
 }
 
 #content1 .content1-left {
   width: 35vw;
   text-align: left;
   margin: 30px auto;
-  padding: 10px;
 }
 
 #content1 .content1-left .contant-toggle {
@@ -209,7 +212,7 @@ body .arrow {
   font-weight: bolder;
   font-size: 50px;
   font-family: "Times New Roman", Times, serif;
-  color: #4b515e;
+  color: #8593A4;
 }
 
 #content1 .content1-left .left {
@@ -217,32 +220,44 @@ body .arrow {
   display: grid;
   -ms-grid-columns: 1.5fr 3fr;
       grid-template-columns: 1.5fr 3fr;
-  grid-gap: 10px;
+  grid-gap: 30px;
   width: 35vw;
 }
 
 #content1 .content1-left .left .title1 {
   text-align: center;
-  font-size: 96px;
+  font-size: 90px;
   font-weight: 400;
   font-family: "Times New Roman", Times, serif;
   color: #4b515e;
+  padding: -10px;
+  display: inline;
 }
 
-#content1 .content1-left .left .text1, #content1 .content1-left .left .text2, #content1 .content1-left .left .text3 {
+#content1 .content1-left .left .text1,
+#content1 .content1-left .left .text2,
+#content1 .content1-left .left .text3 {
   cursor: pointer;
   margin: auto 0;
 }
 
-#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;
+#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: 24px;
+  font-weight: bolder;
   color: #4b515e;
 }
 
 #content1 .content1-right {
   margin: auto 10px;
-  width: 35vw;
+  width: 39vw;
 }
 
 #content1 .content1-right .slick-dots {
@@ -254,6 +269,7 @@ body .arrow {
 }
 
 #content1 .content1-right img {
+  margin-left: 70px;
   width: 32vw;
   height: 40vw;
   -o-object-fit: cover;
@@ -563,28 +579,30 @@ body .arrow {
   background-color: #fff;
 }
 
-#contact-us #form {
-  text-align: center;
-  position: relative;
-}
-
-#contact-us #form #btn {
+#contact-us .btn {
   margin: 50px auto;
   border: none;
   padding: 15px;
-  background: #ffaf60;
+  background: #EDBC96;
   color: #404854;
   font-size: 20px;
   width: 450px;
   border-radius: 10px;
 }
 
-#contact-us #form #btn:hover {
+#contact-us .btn:hover {
   color: #fff;
   background-color: #745c54;
 }
 
-#contact-us #form #phone {
+#contact-us .form-btn {
+  text-align: center;
+  position: relative;
+  width: 75vw;
+  margin: 0 auto;
+}
+
+#contact-us .form-btn #phone {
   position: absolute;
   left: 500px;
 }
@@ -606,4 +624,76 @@ body .arrow {
 #footer p {
   display: inline;
 }
+
+.animation-h1 {
+  -webkit-animation-name: fade;
+          animation-name: fade;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+  opacity: 0;
+}
+
+@-webkit-keyframes fade {
+  from {
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  to {
+    -webkit-transform: translateY(20px);
+            transform: translateY(20px);
+    opacity: 1;
+  }
+}
+
+@keyframes fade {
+  from {
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  to {
+    -webkit-transform: translateY(20px);
+            transform: translateY(20px);
+    opacity: 1;
+  }
+}
+
+.animation-btn {
+  -webkit-animation-name: fade2;
+          animation-name: fade2;
+  -webkit-animation-duration: 1s;
+          animation-duration: 1s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+  -webkit-animation-delay: 1s;
+          animation-delay: 1s;
+  opacity: 0;
+}
+
+@-webkit-keyframes fade2 {
+  from {
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  to {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    opacity: 1;
+  }
+}
+
+@keyframes fade2 {
+  from {
+    -webkit-transform: translateY(0px);
+            transform: translateY(0px);
+  }
+  to {
+    -webkit-transform: translateY(-10px);
+            transform: translateY(-10px);
+    opacity: 1;
+  }
+}
 /*# sourceMappingURL=style.css.map */

desktop11/style.scss

@@ -6,7 +6,7 @@
 }
 $Font-color: #fff;
 $title-color: #4b515e;
-$toggle:#9c857b ;
+$toggle: #9c857b;
 @font-face {
     font-family: 追奇手寫體;
     src: url(./drechifont-proportional.ttf);
@@ -17,7 +17,7 @@ $destop: 1025px;
 
 body {
     height: 5000px;
-    
+
     .btn {
         width: 96vw;
         margin: 0 auto;
@@ -34,7 +34,7 @@ body {
             transition: 0.3s;
 
             &:hover {
-                background-color: #927368;
+                background-color: #9C857B;
                 width: 285px;
                 font-size: 17px;
             }
@@ -46,7 +46,7 @@ body {
         font-family: "Times New Roman", Times, serif;
         padding: 15px;
         margin-left: 190px;
-        font-size: 50px;
+        font-size: 49px;
         color: $title-color;
     }
     .arrow {
@@ -88,7 +88,7 @@ body {
             }
         }
         h1 {
-            padding:15px;
+            padding: 15px;
             color: $Font-color;
             font-family: 追奇手寫體;
             font-size: 72px;
@@ -163,26 +163,29 @@ body {
 #content1 {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    margin: 100px 120px;
+    margin: 150px auto;
+    padding-top: 30px;
     width: 85vw;
-    grid-gap: 100px;
-    .hr{
-        width: 35vw;
+position: relative;
+  
+    .hr2 {
+        position: absolute;
+        width: 34vw;
+        height: 1px !important;
+        left:6vw;
     }
     .content1-left {
         width: 35vw;
         // height: 700px;
         text-align: left;
         margin: 30px auto;
-        padding: 10px;
-        .contant-toggle{
-            color:$toggle!important;
+        .contant-toggle {
+            color: $toggle !important;
         }
-        .contant-toggle2{
-            color:$title-color!important;
+        .contant-toggle2 {
+            color: $title-color !important;
         }
 
-        
         .title {
             margin: 0;
             margin-top: -10px;
@@ -191,50 +194,58 @@ body {
             font-weight: bolder;
             font-size: 50px;
             font-family: "Times New Roman", Times, serif;
-            color: $title-color;
+            color: 	#8593A4;
         }
 
         .left {
             display: grid;
             grid-template-columns: 1.5fr 3fr;
-            grid-gap: 10px;
+            grid-gap: 30px;
             width: 35vw;
-           
+
 
             .title1 {
                 text-align: center;
-                font-size: 96px;
+                font-size: 90px;
                 font-weight: 400;
                 font-family: "Times New Roman", Times, serif;
                 color: $title-color;
+                padding: -10px;
+                display: inline;
             }
 
-            .text1,.text2,.text3 {
+            .text1,
+            .text2,
+            .text3 {
                 cursor: pointer;
-               margin: auto 0;
-               
-
-                .text-1, .text-2, .text-3 {
-                    font-size: 20px;
-                    font-weight: bold;
-                    color:$title-color;
-                
+                margin: auto 0;
+
+                .text-1,
+                .text-2,
+                .text-3 {
+                    font-size: 24px;
+                    font-weight: bolder;
+                    color: $title-color;
                 }
             }
         }
     }
     .content1-right {
         margin: auto 10px;
-        width: 35vw;
+        width: 39vw;
+        
+      
         .slick-dots {
             margin-bottom: 50px;
-            ::before{
-                color:#fff;
+            ::before {
+                color: #fff;
             }
         }
         img {
+          margin-left: 70px;
             width: 32vw;
             height: 40vw;
+           
             object-fit: cover;
         }
     }
@@ -499,25 +510,26 @@ body {
             }
         }
     }
-    #form {
+    .btn {
+        margin: 50px auto;
+        border: none;
+        padding: 15px;
+        background: #EDBC96;
+        color: rgb(64, 72, 84);
+        font-size: 20px;
+        width: 450px;
+        border-radius: 10px;
+
+        &:hover {
+            color: #fff;
+            background-color: #745c54;
+        }
+    }
+    .form-btn {
         text-align: center;
         position: relative;
-        #btn {
-            margin: 50px auto;
-            border: none;
-            padding: 15px;
-            background: #ffaf60;
-            color: rgb(64, 72, 84);
-            font-size: 20px;
-            width: 450px;
-            border-radius: 10px;
-
-            &:hover {
-                color: #fff;
-                background-color: #745c54;
-            }
-        }
-
+        width: 75vw;
+        margin: 0 auto;
         #phone {
             position: absolute;
             left: 500px;
@@ -541,3 +553,39 @@ body {
         display: inline;
     }
 }
+
+.animation-h1{
+    animation-name:fade;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    animation-delay: 0.5s;
+    opacity: 0;
+    @keyframes fade {
+        from {
+            transform: translateY(0px);
+        }
+
+        to {
+            transform: translateY(20px);
+            opacity: 1;
+        }
+    }
+}
+.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;
+}
+}
+ }