Home Explore Help
Register Sign In
choozmo
/
HHH_Home_Decoration_B
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

表單內容調整ˋ

jeter20131220 3 years ago
parent
6d6183df5a
commit
200a7d175d
11 changed files with 919 additions and 691 deletions
Split View Show Diff Stats
  1. BIN
      desktopB/img/logomain-2.png
  2. 285 132
      desktopB/index.html
  3. 53 82
      desktopB/style.css
  4. 0 0
      desktopB/style.css.map
  5. 105 112
      desktopB/style.scss
  6. BIN
      mobileB/img/logomain-2.png
  7. 295 131
      mobileB/index.html
  8. BIN
      mobileB/logomain-2.png
  9. 78 125
      mobileB/style.css
  10. 0 0
      mobileB/style.css.map
  11. 103 109
      mobileB/style.scss

BIN
desktopB/img/logomain-2.png
View File


+ 285 - 132
desktopB/index.html
View File 

@@ -216,150 +216,303 @@ src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
 
     <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
 
     </div>
 
     <section id="contact-us">
 
-        <div class="form-title">
 
+        <nav class="navbar navbar-precise navbar-light d-flex justify-content-center my-3">
 
+            <a href="" class="navbar-brand navbar-brand-precise d-flex justify-content-center">
 
+                <img src="./img/logomain-2.png" alt="">
 
+            </a>
 
+        </nav>
 
+        <div id="sec-contact">
 
            
-            <h1>已經服務超過<span style="font-size:38px;">14392</span>個家庭</h1>
 
-            <h1>打造夢想中的完美居家生活</h1>
 
-            <h1>即刻啟動!</h1>
 
-        </div>
 
-        <!-- <hr> -->
 
-        <div class="contact-text">
 
-            <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
 
-                    style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
 
-            <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
 
-        </div>
 
+            <div class="form-title py-3">
 
+                <h1>【免費裝修顧問諮詢】</h1>
 
+                <p>幫您創造專屬的幸福空間.</p>
 
+                <p>滿足家的渴望、實現家的想像.</p>
 
+                <p>每日限量名額，馬上填寫預約表單.</p>
 
+            </div>
 
+            <!-- <hr> -->
 
+            <!-- <div class="contact-text">
 
+                <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
 
+                        style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
 
+                <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
 
+            </div> -->
 
 
-        <div class="container-fluid" style="padding:0; margin:0;">
 
-            <form class="contact-form1">
 
-                <input type="hidden" name="version" value="b">
 
-                <div id="contact-form">
 
-                    <div id="form-left">
 
-                        <select name="loc" 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>
 
-                            <option class="option">澎湖縣</option>
 
-                        </select>
 
-                        <select name="h_class" 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="type" 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 name="size" type="text" id="square" placeholder="請輸入坪數" required>
 
-                        <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
 
-                            <option class="option" value="1">1房</option>
 
+            <div class="container-fluid" style="padding:0; margin:0;">
 
+                <!-- <form class="contact-form1">
 
+                    <input type="hidden" name="version" value="a">
 
+                    <div id="contact-form" name="myForm">
 
+                        <div id="form-left">
 
+                            <select name="loc" id="loc" 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>
 
+                                <option class="option">澎湖縣</option>
 
+                            </select>
 
+                            <select name="h_class" 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="type" 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 name="size" type="text" id="square" placeholder="請輸入坪數" required>
 
+                            <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1房</option>
 
                                 <option class="option" value="2" selected>2房</option>
 
-                                <option class="option" value="3" >3房</option>
 
+                                <option class="option" value="3">3房</option>
 
                                 <option class="option" value="4">4房</option>
 
                                 <option class="option" value="5">5房</option>
 
                                 <option class="option" value="6">6房</option>
 
                                 <option class="option" value="7">7房</option>
 
                                 <option class="option" value="8">8房</option>
 
-                        </select>
 
-                        <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
 
-                            <option class="option" value="1">1廳</option>
 
-                            <option class="option" value="2" selected>2廳</option>
 
-                        </select>
 
-                        <select name="bath_num" id="bathroom" required>
 
-                            <option class="option" value="1" selected>1衛</option>
 
-                            <option class="option" value="2">2衛</option>
 
-                            <option class="option" value="3">3衛</option>
 
-                            <option class="option" value="4">4衛</option>
 
-                            <option class="option" value="5">5衛</option>
 
-                            <option class="option" value="6">6衛</option>
 
-                            <option class="option" value="7">7衛</option>
 
-                            <option class="option" value="8">8衛</option>
 
-                        </select>
 
-                        <select name="style" 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 name="prefer_date" class="datepicker" type="text" id="datepicker" placeholder="預選裝修日期" required>
 
+                            </select>
 
+                            <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1廳</option>
 
+                                <option class="option" value="2" selected>2廳</option>
 
+                            </select>
 
+                            <select name="bath_num" id="bathroom" required>
 
+                                <option class="option" value="1" selected>1衛</option>
 
+                                <option class="option" value="2">2衛</option>
 
+                                <option class="option" value="3">3衛</option>
 
+                                <option class="option" value="4">4衛</option>
 
+                                <option class="option" value="5">5衛</option>
 
+                                <option class="option" value="6">6衛</option>
 
+                                <option class="option" value="7">7衛</option>
 
+                                <option class="option" value="8">8衛</option>
 
+                            </select>
 
+                            <select name="style" 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 name="prefer_date" class="datepicker" type="text" id="datepicker" placeholder="預選裝修日期" required>
 
+                        </div>
 
+                        <hr>
 
+
 
+
 
+                        <div id="form-right">
 
+                            <div id="fb_login">
 
+                                <button id="fb-button"><img src="./img/logo/facebook.png" alt="">
 
+                                   <span id="line" style=" font-size: 30px;">｜</span><p>使用fb填入信箱與姓名</p>
 
+                                </button>
 
+                                <span id="FB_STATUS_2"></span>
 
+                            </div>
 
+                            <div id="fb_login">
 
+                                <fb:login-button id="fb-button" scope="public_profile,email"
 
+                                    onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
 
+                                    使用FB填入信箱與姓名
 
+                                </fb:login-button>
 
+                                <div id="status"></div>
 
+                            </div>
 
+
 
+                            <input type="email" name="email" id="email" placeholder="請輸入信箱" required>
 
+                            <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
 
+                            <input type="text" name="phone" id="phone" placeholder="請輸入行動電話" pattern="09\d{2}\d{6}" required>
 
+                            <select name="gender" id="gender" required>
 
+                                <option value="" disabled selected="selected">性別</option>
 
+                                <option class="option">男</option>
 
+                                <option class="option">女</option>
 
+                            </select>
 
+                            <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
 
+                                for="agree" style="width: 40px;">同意</label><a target="https://hhh.com.tw/about/privacy_policy/"
 
+                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
+                        </div>
 
+
 
                     </div>
 
-                    <hr>
 
-                    <div id="form-right">
 
-                        <!-- <div id="fb_login">
 
-                            <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
 
-                                <span id="line" style=" font-size: 30px;">｜</span><p>使用fb填入信箱與姓名</p>
 
-                            </button>
 
-                            <span id="FB_STATUS_2"></span>
 
-                        </div> -->
 
-                        <!-- <button  id="facebook" onclick="fb_login()"><img src="./img/logo/facebook.png" alt=""><p><span  style="padding-right:5vw; font-size: 25px;">｜</span>使用fb填入信箱與姓名</p></button> -->
 
-                        <!-- <div id="fb_login">
 
-                            <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
 
-                            </fb:login-button>
 
-                            <div id="status"></div>
 
-                        </div> -->
 
-                        <input type="email" name="email" id="email" placeholder="請輸入信箱" required>
 
-                        <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
 
-                        <input type="text" name="phone" id="phone" placeholder="請輸入行動電話" pattern="09\d{2}\d{6}" required>
 
-                        <select name="gender" id="gender" required>
 
-                            <option value="" disabled selected="selected">性別</option>
 
-                            <option class="option">男</option>
 
-                            <option class="option">女</option>
 
-                        </select>
 
-                        <input type="checkbox" id="checkbox" checked> <label for="agree">同意</label><a
 
-                        target="https://hhh.com.tw/about/privacy_policy/" href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
+                    <div class="form-btn">
 
+                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
+
 
                     </div>
 
+                </form> -->
 
+                <form class="contact-form1">
 
+                    <input type="hidden" name="version" value="a">
 
+                    <div id="contact-form" name="myForm">
 
+                        <div id="form-left">
 
+                            <input type="email" name="email" id="email" placeholder="電子信箱" required>
 
+                            <input type="text" name="name" id="name" placeholder="聯絡人名稱" required>
 
+                            <input type="text" name="phone" id="phone" placeholder="聯絡電話(格式:0987654321)" pattern="09\d{2}\d{6}" required>
 
+                            <select name="loc" id="loc" 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>
 
+                                <option class="option">澎湖縣</option>
 
+                            </select>
 
+                            <select name="h_class" 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="type" 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 name="size" type="text" id="square" placeholder="請輸入坪數" required> -->
 
+                            <select name="size" id="square" required style="margin-right:1.5vw">
 
+                                <option value="" disabled selected="selected">您目前房屋實際坪數</option>
 
+                                <option class="option">10坪以下</option>
 
+                                <option class="option">11~20坪</option>
 
+                                <option class="option">21~30坪</option>>
 
+                                <option class="option">41~50坪</option>
 
+                                <option class="option">50坪以上</option>
 
+                            </select>
 
+                            <!-- <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1房</option>
 
+                                <option class="option" value="2" selected>2房</option>
 
+                                <option class="option" value="3">3房</option>
 
+                                <option class="option" value="4">4房</option>
 
+                                <option class="option" value="5">5房</option>
 
+                                <option class="option" value="6">6房</option>
 
+                                <option class="option" value="7">7房</option>
 
+                                <option class="option" value="8">8房</option>
 
+                            </select>
 
+                            <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1廳</option>
 
+                                <option class="option" value="2" selected>2廳</option>
 
+                            </select>
 
+                            <select name="bath_num" id="bathroom" required>
 
+                                <option class="option" value="1" selected>1衛</option>
 
+                                <option class="option" value="2">2衛</option>
 
+                                <option class="option" value="3">3衛</option>
 
+                                <option class="option" value="4">4衛</option>
 
+                                <option class="option" value="5">5衛</option>
 
+                                <option class="option" value="6">6衛</option>
 
+                                <option class="option" value="7">7衛</option>
 
+                                <option class="option" value="8">8衛</option>
 
+                            </select> -->
 
+                            <!-- <select name="style" 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 name="prefer_date" class="datepicker" type="text" id="datepicker" placeholder="預選裝修日期" required> -->
 
+                        </div>              
+                            <!-- <div id="fb_login">
 
+                                <button id="fb-button"><img src="./img/logo/facebook.png" alt="">
 
+                                   <span id="line" style=" font-size: 30px;">｜</span><p>使用fb填入信箱與姓名</p>
 
+                                </button>
 
+                                <span id="FB_STATUS_2"></span>
 
+                            </div> -->
 
+                            <!-- <div id="fb_login">
 
+                                <fb:login-button id="fb-button" scope="public_profile,email"
 
+                                    onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
 
+                                    使用FB填入信箱與姓名
 
+                                </fb:login-button>
 
+                                <div id="status"></div>
 
+                            </div> -->
 
 
-                </div>
 
-                <div class="form-btn">
 
-                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
+                          
+                            <!-- <select name="gender" id="gender" required>
 
+                                <option value="" disabled selected="selected">性別</option>
 
+                                <option class="option">男</option>
 
+                                <option class="option">女</option>
 
+                            </select> -->
 
+                            <!-- <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
 
+                                for="agree" style="width: 40px;">同意</label><a target="https://hhh.com.tw/about/privacy_policy/"
 
+                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a> -->
 
 
-                </div>
 
-            </form>
 
+                                <div class="form-btn">
 
+                                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
+        
+                                </div>
 
+                    </div>
 
+                </form>
 
+            </div>
 
+            
         </div>
 
     </section>

+ 53 - 82
desktopB/style.css
View File 

@@ -241,7 +241,21 @@ body .arrow:hover {
 
 #contact-us {
 
   margin: 0 auto;
 
   width: 100vw;
 
+  background: #fafafa;
 
   position: relative;
 
+  padding-bottom: 5vw;
 
+}
 
+
 
+#contact-us .navbar img {
 
+  width: 180px;
 
+}
 
+
 
+#contact-us #sec-contact {
 
+  width: 90vw;
 
+  margin: 0 auto;
 
+  background: #fff;
 
+  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
+          box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
 }
 
 
 #contact-us .contact-text {
 
@@ -255,40 +269,27 @@ body .arrow:hover {
 
 }
 
 
 #contact-us .form-title {
 
-  width: 70vw;
 
   margin: 0 auto;
 
-  padding-top: 100px;
 
-  margin-bottom: 120px;
 
-  color: #5c5248;
 
+  text-align: center;
 
 }
 
 
 #contact-us .form-title h1 {
 
   text-align: center;
 
-  font-size: 32px;
 
+  font-size: 1.75rem;
 
   font-weight: 900;
 
 }
 
 
-#contact-us #contact-form {
 
-  width: 75vw;
 
-  display: -ms-grid;
 
-  display: grid;
 
-  -ms-grid-columns: (1fr)[2];
 
-      grid-template-columns: repeat(2, 1fr);
 
-  margin-top: 10px;
 
-  margin: 0 auto;
 
-  position: relative;
 
+#contact-us .form-title p {
 
+  font-size: 18px;
 
 }
 
 
-#contact-us #contact-form hr {
 
-  position: absolute;
 
-  width: 34vw;
 
-  -webkit-transform: rotate(90deg);
 
-          transform: rotate(90deg);
 
-  left: 20vw;
 
-  top: 19vw;
 
+#contact-us #contact-form {
 
+  width: 50%;
 
+  margin: 0 auto;
 
+  padding: 24px;
 
 }
 
 
-#contact-us #contact-form #location,
 
+#contact-us #contact-form #loc,
 
 #contact-us #contact-form #type,
 
 #contact-us #contact-form #modal,
 
 #contact-us #contact-form #budget,
 
@@ -301,62 +302,31 @@ body .arrow:hover {
 
 #contact-us #contact-form #gender {
 
   width: 100%;
 
   height: 50px;
 
-  margin: 10px 0;
 
-  padding-left: 10px;
 
-  border: 1px solid rgba(0, 0, 0, 0.3);
 
-  padding: 10px 15px;
 
-  font-size: 16px;
 
-  border-radius: 3px;
 
-  -webkit-appearance: none;
 
-     -moz-appearance: none;
 
-          appearance: none;
 
-  background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
 
-  background-size: 10px 10px;
 
-  background-color: #fff;
 
-}
 
-
 
-#contact-us #contact-form #form-left {
 
-  width: 28vw;
 
-  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: 28.5%;
 
+  margin: 20px 0;
 
   border: 1px solid rgba(0, 0, 0, 0.3);
 
-  height: 50px;
 
-  margin: 15px 0;
 
-  padding-right: 50px;
 
-  padding: 10px 15px;
 
-  font-size: 16px;
 
+  padding: .375rem .75rem;
 
+  font-size: 1rem;
 
   border-radius: 3px;
 
   -webkit-appearance: none;
 
      -moz-appearance: none;
 
           appearance: none;
 
-  background: url(./img/icondown1.webp) 85% 50% no-repeat scroll transparent;
 
+  background: url(./img/icondown.webp) 99% 50% no-repeat scroll transparent;
 
   background-size: 10px 10px;
 
   background-color: #fff;
 
 }
 
 
-#contact-us #contact-form #form-left #square,
 
 #contact-us #contact-form #form-left #datepicker {
 
   background: none;
 
   background-color: #fff;
 
 }
 
 
-#contact-us #contact-form #form-right {
 
-  width: 29vw;
 
-  margin-left: 5vw;
 
-}
 
-
 
-#contact-us #contact-form #form-right #fb-button {
 
+#contact-us #contact-form #fb-button {
 
   margin-top: 12px;
 
   width: 29vw;
 
   height: 50px;
 
   border: 1px solid #3b5998;
 
   text-align: right;
 
-  padding-right: 50px;
 
+  padding-right: 60px;
 
   background-size: 32px 32px;
 
   border-radius: 3px;
 
   background-color: #fff;
 
@@ -365,14 +335,14 @@ body .arrow:hover {
 
   position: relative;
 
 }
 
 
-#contact-us #contact-form #form-right #fb-button p {
 
+#contact-us #contact-form #fb-button p {
 
   position: absolute;
 
   top: 1vw;
 
   left: 14vw;
 
   color: #626262;
 
 }
 
 
-#contact-us #contact-form #form-right #fb-button #line {
 
+#contact-us #contact-form #fb-button #line {
 
   position: absolute;
 
   color: #9b9b9b;
 
   opacity: 0.8;
 
@@ -380,56 +350,58 @@ body .arrow:hover {
 
   top: -0.1vw;
 
 }
 
 
-#contact-us #contact-form #form-right #fb-button img {
 
+#contact-us #contact-form #fb-button img {
 
   position: absolute;
 
   left: 50px;
 
-  top: 7px;
 
+  top: 10px;
 
   width: 32px;
 
   height: 32px;
 
   -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 
           filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 
 }
 
 
-#contact-us #contact-form #form-right #fb-button:hover {
 
+#contact-us #contact-form #fb-button:hover {
 
   background-color: #2a4f91;
 
   color: #fff;
 
 }
 
 
-#contact-us #contact-form #form-right #fb-button:hover img {
 
+#contact-us #contact-form #fb-button:hover img {
 
   -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
           filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
 }
 
 
-#contact-us #contact-form #form-right #fb-button:hover p {
 
+#contact-us #contact-form #fb-button:hover p {
 
   color: #fff;
 
 }
 
 
-#contact-us #contact-form #form-right a {
 
+#contact-us #contact-form #fb-button:hover #line {
 
+  color: #fff;
 
+}
 
+
 
+#contact-us #contact-form a {
 
   text-decoration: none;
 
   color: #ee751b;
 
   font-weight: 900;
 
 }
 
 
-#contact-us #contact-form #form-right #checkbox {
 
-  margin: 15px;
 
-}
 
-
 
-#contact-us #contact-form #form-right #email,
 
-#contact-us #contact-form #form-right #name,
 
-#contact-us #contact-form #form-right #phone {
 
+#contact-us #contact-form #email,
 
+#contact-us #contact-form #name,
 
+#contact-us #contact-form #phone {
 
   background: none;
 
   background-color: #fff;
 
 }
 
 
 #contact-us .btn {
 
-  margin: 50px auto;
 
+  width: 100%;
 
+  margin: 16px auto;
 
   border: none;
 
-  padding: 15px;
 
-  background: #edbc96;
 
-  color: #4b515e;
 
+  padding: 16px 12px;
 
+  background: #ee7800;
 
+  color: #fff;
 
   font-size: 20px;
 
-  width: 450px;
 
-  border-radius: 10px;
 
+  border-radius: .25rem;
 
+  text-align: center;
 
+  vertical-align: middle;
 
 }
 
 
 #contact-us .btn:hover {
 
@@ -440,11 +412,10 @@ body .arrow:hover {
 
 #contact-us .form-btn {
 
   text-align: center;
 
   position: relative;
 
-  width: 75vw;
 
   margin: 0 auto;
 
 }
 
 
-#contact-us .form-btn #phone {
 
+#contact-us .form-btn #phone1 {
 
   position: absolute;
 
   left: 500px;
 
 }

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


+ 105 - 112
desktopB/style.scss
View File 

@@ -206,11 +206,25 @@ body {
 
         z-index: 5;
 
     }
 
 }
 
+
 
 #contact-us {
 
     margin: 0 auto;
 
     width: 100vw;
 
+    background: #fafafa;
 
     position: relative;
 
-
 
+    padding-bottom: 5vw;
 
+    .navbar{
 
+        img{
 
+            width: 180px;
 
+        }
 
+    }
 
+    #sec-contact {
 
+        width: 90vw;
 
+        margin: 0 auto;
 
+        background: #fff;
 
+        box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);
 
+       
+    }
 
     .contact-text {
 
         margin: 0 auto;
 
         width: 68vw;
 
@@ -222,33 +236,22 @@ body {
 
     }
 
 
     .form-title {
 
-        width: 70vw;
 
         margin: 0 auto;
 
-        padding-top: 100px;
 
-        margin-bottom: 120px;
 
-        color: #5c5248;
 
-
 
+        text-align: center;
 
         h1 {
 
             text-align: center;
 
-            font-size: 32px;
 
+            font-size: 1.75rem;
 
             font-weight: 900;
 
         }
 
+        p {
 
+            font-size: 18px;
 
+        }
 
     }
 
     #contact-form {
 
-        width: 75vw;
 
-        display: grid;
 
-        grid-template-columns: repeat(2, 1fr);
 
-        margin-top: 10px;
 
+        width: 50%;
 
         margin: 0 auto;
 
-        position: relative;
 
-        hr {
 
-            position: absolute;
 
-            width: 34vw;
 
-            transform: rotate(90deg);
 
-            left: 20vw;
 
-            top: 19vw;
 
-        }
 
-        #location,
 
+        padding: 24px;
 
+        #loc,
 
         #type,
 
         #modal,
 
         #budget,
 
@@ -261,121 +264,112 @@ body {
 
         #gender {
 
             width: 100%;
 
             height: 50px;
 
-            margin: 10px 0;
 
-            padding-left: 10px;
 
+            margin: 20px 0;
 
             border: 1px solid rgba(0, 0, 0, 0.3);
 
-            padding: 10px 15px;
 
-            font-size: 16px;
 
+            padding: .375rem .75rem;
 
+            font-size: 1rem;
 
             border-radius: 3px;
 
             appearance: none;
 
-            background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
 
+            background: url(./img/icondown.webp) 99% 50% no-repeat scroll transparent;
 
             background-size: 10px 10px;
 
             background-color: #fff;
 
         }
 
         #form-left {
 
-            width: 28vw;
 
-            margin-left: 3vw;
 
-
 
-            #rooms,
 
-            #livingroom,
 
-            #bathroom {
 
-                width: 28.5%;
 
-                border: 1px solid rgba(0, 0, 0, 0.3);
 
-                height: 50px;
 
-                margin: 15px 0;
 
-                padding-right: 50px;
 
-                padding: 10px 15px;
 
-                font-size: 16px;
 
-                border-radius: 3px;
 
-                appearance: none;
 
-                background: url(./img/icondown1.webp) 85% 50% no-repeat scroll transparent;
 
-                background-size: 10px 10px;
 
-                background-color: #fff;
 
-            }
 
-            #square,
 
+            // #rooms,
 
+            // #livingroom,
 
+            // #bathroom {
 
+            //     width: 28.5%;
 
+            //     border: 1px solid rgba(0, 0, 0, 0.3);
 
+            //     height: 50px;
 
+            //     margin: 15px 0;
 
+            //     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;
 
+            // }
 
             #datepicker {
 
                 background: none;
 
                 background-color: #fff;
 
             }
 
         }
 
-        #form-right {
 
+        #fb-button {
 
+            margin-top: 12px;
 
             width: 29vw;
 
-            margin-left: 5vw;
 
+            height: 50px;
 
+            border: 1px solid #3b5998;
 
+            text-align: right;
 
+            padding-right: 60px;
 
+            background-size: 32px 32px;
 
+            border-radius: 3px;
 
+            background-color: #fff;
 
+            transition: 0.3s;
 
+            position: relative;
 
+            p {
 
+                position: absolute;
 
+                top: 1vw;
 
+                left: 14vw;
 
 
-            #fb-button{
 
-                margin-top: 12px;
 
-                width: 29vw;
 
-                height: 50px;
 
-                border: 1px solid #3b5998;
 
-                text-align: right;
 
-                padding-right: 50px;
 
-                background-size: 32px 32px;
 
-                border-radius: 3px;
 
-                background-color: #fff;
 
-                transition: 0.3s;
 
-                position: relative;
 
+                color: #626262;
 
+            }
 
+            #line {
 
+                position: absolute;
 
+                color: #9b9b9b;
 
+                opacity: 0.8;
 
+                left: 8vw;
 
+                top: -0.1vw;
 
+            }
 
+            img {
 
+                position: absolute;
 
+                left: 50px;
 
+                top: 10px;
 
+                width: 32px;
 
+                height: 32px;
 
+                filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 
+            }
 
+            &:hover {
 
+                background-color: #2a4f91;
 
+                color: #fff;
 
+                img {
 
+                    filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
+                }
 
                 p {
 
-                    position: absolute;
 
-                    top:1vw;
 
-                    left:14vw;
 
-        
-                    color: #626262;
 
+                    color: #fff;
 
                 }
 
+
 
                 #line {
 
-                    position: absolute;
 
-                    color: #9b9b9b;
 
-                    opacity: 0.8;;
 
-                    left:8vw;
 
-                    top:-0.1vw;
 
-                   
-                }
 
-               
-                img {
 
-                    position: absolute;
 
-                    left: 50px;
 
-                    top: 7px;
 
-                    width: 32px;
 
-                    height: 32px;
 
-                    filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 
-                }
 
-                &:hover {
 
-                    background-color: #2a4f91;
 
                     color: #fff;
 
-                    img {
 
-                        filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%)
 
-                            contrast(106%);
 
-                    }
 
-                    p{
 
-                        color:#fff;
 
-                        }
 
                 }
 
             }
 
-            a {
 
-                text-decoration: none;
 
-                color: #ee751b;
 
-                font-weight: 900;
 
-            }
 
-            #checkbox {
 
-                margin: 15px;
 
-            }
 
-            #email,
 
-            #name,
 
-            #phone {
 
-                background: none;
 
-                background-color: #fff;
 
-            }
 
+        }
 
+        a {
 
+            text-decoration: none;
 
+            color: #ee751b;
 
+            font-weight: 900;
 
+        }
 
+
 
+        #email,
 
+        #name,
 
+        #phone {
 
+            background: none;
 
+            background-color: #fff;
 
         }
 
     }
 
+
 
     .btn {
 
-        margin: 50px auto;
 
+        width: 100%;
 
+        margin: 16px auto;
 
         border: none;
 
-        padding: 15px;
 
-        background: #edbc96;
 
-        color: #4b515e;
 
+        padding: 16px 12px;
 
+        background: #ee7800;
 
+        color: #fff;
 
         font-size: 20px;
 
-        width: 450px;
 
-        border-radius: 10px;
 
-
 
+        border-radius: .25rem;
 
+        text-align: center;
 
+        vertical-align: middle;
 
         &:hover {
 
             color: #fff;
 
             background-color: #745c54;
 
@@ -384,9 +378,8 @@ body {
 
     .form-btn {
 
         text-align: center;
 
         position: relative;
 
-        width: 75vw;
 
         margin: 0 auto;
 
-        #phone {
 
+        #phone1 {
 
             position: absolute;
 
             left: 500px;
 
         }

BIN
mobileB/img/logomain-2.png
View File


+ 295 - 131
mobileB/index.html
View File 

@@ -162,140 +162,304 @@ src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
 
     </div>
 
     <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
 
     <section id="contact-us">
 
-        <div id="form-title">
 
-            <h1>已經服務超過<span style="font-size: 24px;">14392</span>個家庭</h1>
 
-            <h1>打造夢想中的完美居家生活</h1>
 
-            <h1>即刻啟動!</h1>
 
+        <nav class="navbar navbar-precise navbar-light d-flex justify-content-center my-3">
 
+            <a href="" class="navbar-brand navbar-brand-precise d-flex justify-content-center">
 
+                <img src="./img/logomain-2.png" alt="">
 
+            </a>
 
+        </nav>
 
+        <div id="sec-contact">
 
+           
+            <div class="form-title py-3">
 
+                <h1>【免費裝修顧問諮詢】</h1>
 
+                <p>幫您創造專屬的幸福空間.</p>
 
+                <p>滿足家的渴望、實現家的想像.</p>
 
+                <p>每日限量名額，馬上填寫預約表單.</p>
 
+            </div>
 
+            <!-- <hr> -->
 
+            <!-- <div class="contact-text">
 
+                <div class="text-p">請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone1"
 
+                        style="color: #ee751b; font-weight:900;"> 0800-366-086</span></div>
 
+                <div class="text-p">或填寫以下資料，專人將盡速與您聯繫</div>
 
+            </div> -->
 
 
-        </div>
 
-        <div id="form-text">
 
-            <p>請撥打全台免付費專線<span style="opacity: 0;">11</span><span id="phone"
 
-                    style="color:  #ee751b;">0800-366-086</span></p>
 
-            <p>或填寫以下資料，專人將盡速與您聯繫。</p>
 
-        </div>
 
-        <form class="contact-form1">
 
-            <input type="hidden" name="version" value="b">
 
-            <div id="contact-form">
 
-                <select name="loc" 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>
 
-                    <option class="option">澎湖縣</option>
 
+            <div class="container-fluid" style="padding:0; margin:0;">
 
+                <!-- <form class="contact-form1">
 
+                    <input type="hidden" name="version" value="a">
 
+                    <div id="contact-form" name="myForm">
 
+                        <div id="form-left">
 
+                            <select name="loc" id="loc" 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>
 
+                                <option class="option">澎湖縣</option>
 
+                            </select>
 
+                            <select name="h_class" 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="type" 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 name="size" type="text" id="square" placeholder="請輸入坪數" required>
 
+                            <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1房</option>
 
+                                <option class="option" value="2" selected>2房</option>
 
+                                <option class="option" value="3">3房</option>
 
+                                <option class="option" value="4">4房</option>
 
+                                <option class="option" value="5">5房</option>
 
+                                <option class="option" value="6">6房</option>
 
+                                <option class="option" value="7">7房</option>
 
+                                <option class="option" value="8">8房</option>
 
+                            </select>
 
+                            <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1廳</option>
 
+                                <option class="option" value="2" selected>2廳</option>
 
+                            </select>
 
+                            <select name="bath_num" id="bathroom" required>
 
+                                <option class="option" value="1" selected>1衛</option>
 
+                                <option class="option" value="2">2衛</option>
 
+                                <option class="option" value="3">3衛</option>
 
+                                <option class="option" value="4">4衛</option>
 
+                                <option class="option" value="5">5衛</option>
 
+                                <option class="option" value="6">6衛</option>
 
+                                <option class="option" value="7">7衛</option>
 
+                                <option class="option" value="8">8衛</option>
 
+                            </select>
 
+                            <select name="style" 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 name="prefer_date" class="datepicker" type="text" id="datepicker" placeholder="預選裝修日期" required>
 
+                        </div>
 
+                        <hr>
 
 
-                </select>
 
-                <select name="h_class" 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="type" 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 name="size" type="text" id="square" placeholder="請輸入坪數" required>
 
-                <select name="bed_num" id="rooms" required>
 
-                    <option class="option" value="1">1房</option>
 
-                    <option class="option" value="2" selected>2房</option>
 
-                    <option class="option" value="3">3房</option>
 
-                    <option class="option" value="4">4房</option>
 
-                    <option class="option" value="5">5房</option>
 
-                    <option class="option" value="6">6房</option>
 
-                    <option class="option" value="7">7房</option>
 
-                    <option class="option" value="8">8房</option>
 
-                </select>
 
-                <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
 
-                    <option class="option" value="1">1廳</option>
 
-                    <option class="option" value="2" selected>2廳</option>
 
-                </select>
 
-                <select name="bath_num" id="bathroom" required>
 
-                    <option class="option" value="1" selected>1衛</option>
 
-                    <option class="option" value="2">2衛</option>
 
-                    <option class="option" value="3">3衛</option>
 
-                    <option class="option" value="4">4衛</option>
 
-                    <option class="option" value="5">5衛</option>
 
-                    <option class="option" value="6">6衛</option>
 
-                    <option class="option" value="7">7衛</option>
 
-                    <option class="option" value="8">8衛</option>
 
-                </select>
 
-                <select name="style" 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 name="prefer_date" class="datepicker" type="text" id="datepicker" inputmode="none" placeholder="預選裝修日期" required>
 
-                <!-- <div id="fb_login">
 
-                    <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
 
-                        <p><span style="padding-right:5vw; font-size: 25px;">｜</span>使用fb填入信箱與姓名</p>
 
-                    </button>
 
-                    <span id="FB_STATUS_2"></span>
 
-                </div> -->
 
-                <!-- <div id="fb_login">
 
-                    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
 
-                    </fb:login-button>
 
-                    <div id="status"></div>
 
-                </div> -->
 
-                <input type="email" name="email" id="email" placeholder="請輸入信箱" required>
 
-                <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
 
-                <input type="text" name="phone" id="phone" placeholder="請輸入行動電話" pattern="09\d{2}\d{6}" required>
 
-                <select name="gender" id="gender" required>
 
-                    <option value="" disabled selected="selected">性別</option>
 
-                    <option class="option">男</option>
 
-                    <option class="option">女</option>
 
-                </select>
 
-                <input type="checkbox" id="checkbox" checked> <label id="agree" for="agree">同意</label><a
 
-                target="https://hhh.com.tw/about/privacy_policy/"   href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
-                <div class="form-btn">
 
-                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
-                </div>
 
+
 
+                        <div id="form-right">
 
+                            <div id="fb_login">
 
+                                <button id="fb-button"><img src="./img/logo/facebook.png" alt="">
 
+                                   <span id="line" style=" font-size: 30px;">｜</span><p>使用fb填入信箱與姓名</p>
 
+                                </button>
 
+                                <span id="FB_STATUS_2"></span>
 
+                            </div>
 
+                            <div id="fb_login">
 
+                                <fb:login-button id="fb-button" scope="public_profile,email"
 
+                                    onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
 
+                                    使用FB填入信箱與姓名
 
+                                </fb:login-button>
 
+                                <div id="status"></div>
 
+                            </div>
 
+
 
+                            <input type="email" name="email" id="email" placeholder="請輸入信箱" required>
 
+                            <input type="text" name="name" id="name" placeholder="請輸入姓名" required>
 
+                            <input type="text" name="phone" id="phone" placeholder="請輸入行動電話" pattern="09\d{2}\d{6}" required>
 
+                            <select name="gender" id="gender" required>
 
+                                <option value="" disabled selected="selected">性別</option>
 
+                                <option class="option">男</option>
 
+                                <option class="option">女</option>
 
+                            </select>
 
+                            <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
 
+                                for="agree" style="width: 40px;">同意</label><a target="https://hhh.com.tw/about/privacy_policy/"
 
+                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a>
 
+                        </div>
 
+
 
+                    </div>
 
+                    <div class="form-btn">
 
+                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
+
 
+                    </div>
 
+                </form> -->
 
+                <form class="contact-form1">
 
+                    <input type="hidden" name="version" value="a">
 
+                    <div id="contact-form" name="myForm">
 
+                        <div id="form-left">
 
+                            <input type="email" name="email" id="email" placeholder="電子信箱" required>
 
+                            <input type="text" name="name" id="name" placeholder="聯絡人名稱" required>
 
+                            <input type="text" name="phone" id="phone" placeholder="聯絡電話(格式:0987654321)" pattern="09\d{2}\d{6}" required>
 
+                            <select name="loc" id="loc" 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>
 
+                                <option class="option">澎湖縣</option>
 
+                            </select>
 
+                            <select name="h_class" 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="type" 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 name="size" type="text" id="square" placeholder="請輸入坪數" required> -->
 
+                            <select name="size" id="square" required style="margin-right:1.5vw">
 
+                                <option value="" disabled selected="selected">您目前房屋實際坪數</option>
 
+                                <option class="option">10坪以下</option>
 
+                                <option class="option">11~20坪</option>
 
+                                <option class="option">21~30坪</option>>
 
+                                <option class="option">41~50坪</option>
 
+                                <option class="option">50坪以上</option>
 
+                            </select>
 
+                            <!-- <select name="bed_num" id="rooms" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1房</option>
 
+                                <option class="option" value="2" selected>2房</option>
 
+                                <option class="option" value="3">3房</option>
 
+                                <option class="option" value="4">4房</option>
 
+                                <option class="option" value="5">5房</option>
 
+                                <option class="option" value="6">6房</option>
 
+                                <option class="option" value="7">7房</option>
 
+                                <option class="option" value="8">8房</option>
 
+                            </select>
 
+                            <select name="liv_num" id="livingroom" required style="margin-right:1.5vw">
 
+                                <option class="option" value="1">1廳</option>
 
+                                <option class="option" value="2" selected>2廳</option>
 
+                            </select>
 
+                            <select name="bath_num" id="bathroom" required>
 
+                                <option class="option" value="1" selected>1衛</option>
 
+                                <option class="option" value="2">2衛</option>
 
+                                <option class="option" value="3">3衛</option>
 
+                                <option class="option" value="4">4衛</option>
 
+                                <option class="option" value="5">5衛</option>
 
+                                <option class="option" value="6">6衛</option>
 
+                                <option class="option" value="7">7衛</option>
 
+                                <option class="option" value="8">8衛</option>
 
+                            </select> -->
 
+                            <!-- <select name="style" 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 name="prefer_date" class="datepicker" type="text" id="datepicker" placeholder="預選裝修日期" required> -->
 
+                        </div>              
+                            <!-- <div id="fb_login">
 
+                                <button id="fb-button"><img src="./img/logo/facebook.png" alt="">
 
+                                   <span id="line" style=" font-size: 30px;">｜</span><p>使用fb填入信箱與姓名</p>
 
+                                </button>
 
+                                <span id="FB_STATUS_2"></span>
 
+                            </div> -->
 
+                            <!-- <div id="fb_login">
 
+                                <fb:login-button id="fb-button" scope="public_profile,email"
 
+                                    onlogin="checkLoginState();" data-button-type="continue_with" data-size="large">
 
+                                    使用FB填入信箱與姓名
 
+                                </fb:login-button>
 
+                                <div id="status"></div>
 
+                            </div> -->
 
+
 
+                          
+                            <!-- <select name="gender" id="gender" required>
 
+                                <option value="" disabled selected="selected">性別</option>
 
+                                <option class="option">男</option>
 
+                                <option class="option">女</option>
 
+                            </select> -->
 
+                            <!-- <input type="checkbox" style="margin:30px 10px;" id="checkbox" checked><label
 
+                                for="agree" style="width: 40px;">同意</label><a target="https://hhh.com.tw/about/privacy_policy/"
 
+                                href="https://hhh.com.tw/about/privacy_policy/">免責聲明與隱私使用政策</a> -->
 
+
 
+                                <div class="form-btn">
 
+                                    <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
+        
+                                </div>
 
+                    </div>
 
+                </form>
 
             </div>
 
-        </form>
 
+            
+        </div>
 
     </section>
 
     <section id="feedback">
 
         <h1 class="title">客戶真實見證</h1>

BIN
mobileB/logomain-2.png
View File


+ 78 - 125
mobileB/style.css
View File 

@@ -283,93 +283,48 @@ body .arrow:hover {
 
 }
 
 
 #contact-us {
 
-  padding-top: 50px;
 
-}
 
-
 
-#contact-us p {
 
-  font-size: 16px;
 
-  font-weight: 600;
 
-  margin: 0px 10px;
 
-  color: #5c5248;
 
-}
 
-
 
-@media screen and (max-width: 1024px) {
 
-  #contact-us p {
 
-    font-size: 24px;
 
-    text-align: center;
 
-  }
 
-}
 
-
 
-@media screen and (max-width: 767px) {
 
-  #contact-us p {
 
-    font-size: 16px;
 
-  }
 
-}
 
-
 
-#contact-us #form-title {
 
-  margin-bottom: 50px;
 
-}
 
-
 
-#contact-us #form-text {
 
+  margin: 0 auto;
 
   width: 100vw;
 
-  margin: 30px auto;
 
+  background: #fafafa;
 
+  position: relative;
 
+  padding-bottom: 5vw;
 
 }
 
 
-@media screen and (max-width: 1024px) {
 
-  #contact-us #form-text {
 
-    font-size: 24px;
 
-    text-align: center;
 
-    margin: 30px auto;
 
-  }
 
+#contact-us .navbar img {
 
+  width: 180px;
 
 }
 
 
-@media screen and (max-width: 767px) {
 
-  #contact-us #form-text {
 
-    font-size: 16px;
 
-    margin: 30px auto;
 
-  }
 
+#contact-us #sec-contact {
 
+  width: 100vw;
 
+  margin: 0 auto;
 
+  background: #fff;
 
+  -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
+          box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 
 }
 
 
-#contact-us h1 {
 
+#contact-us .form-title {
 
+  margin: 0 auto;
 
   text-align: center;
 
-  font-family: 'Noto Serif TC', serif;
 
-  color: #4b515e;
 
-  font-weight: bolder;
 
-}
 
-
 
-@media screen and (max-width: 1024px) {
 
-  #contact-us h1 {
 
-    font-size: 36px;
 
-  }
 
-}
 
-
 
-@media screen and (max-width: 767px) {
 
-  #contact-us h1 {
 
-    font-size: 20px;
 
-  }
 
 }
 
 
-#contact-us #contact-form {
 
+#contact-us .form-title h1 {
 
   text-align: center;
 
+  font-size: 1.75rem;
 
+  font-weight: 900;
 
 }
 
 
-#contact-us #contact-form .btn {
 
-  margin: 50px auto;
 
-  border: none;
 
-  padding: 15px;
 
-  background: #ffaf60;
 
-  color: #404854;
 
-  font-size: 20px;
 
-  width: 300px;
 
-  border-radius: 30px;
 
+#contact-us .form-title p {
 
+  font-size: 18px;
 
+  margin-bottom: 0;
 
 }
 
 
-#contact-us #contact-form .btn:hover {
 
-  color: #fff;
 
-  background-color: #745c54;
 
+#contact-us #contact-form {
 
+  width: 85%;
 
+  margin: 0 auto;
 
+  padding: 10px;
 
 }
 
 
-#contact-us #contact-form #location,
 
+#contact-us #contact-form #loc,
 
 #contact-us #contact-form #type,
 
 #contact-us #contact-form #modal,
 
 #contact-us #contact-form #budget,
 
@@ -379,47 +334,36 @@ body .arrow:hover {
 
 #contact-us #contact-form #email,
 
 #contact-us #contact-form #name,
 
 #contact-us #contact-form #phone,
 
-#contact-us #contact-form #gender,
 
-#contact-us #contact-form #rooms,
 
-#contact-us #contact-form #livingroom,
 
-#contact-us #contact-form #bathroom {
 
-  border-radius: 3px;
 
-  width: 85%;
 
-  height: 60px;
 
-  margin: 15px 0;
 
-  padding-left: 15px;
 
+#contact-us #contact-form #gender {
 
+  width: 100%;
 
+  height: 50px;
 
+  margin: 20px 0;
 
   border: 1px solid rgba(0, 0, 0, 0.3);
 
-  font-size: 18px;
 
+  padding: .375rem .75rem;
 
+  font-size: 1rem;
 
+  border-radius: 3px;
 
   -webkit-appearance: none;
 
      -moz-appearance: none;
 
           appearance: none;
 
-  background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
 
+  background: url(./img/icondown.webp) 98% 50% no-repeat scroll transparent;
 
   background-size: 10px 10px;
 
   background-color: #fff;
 
 }
 
 
-#contact-us #contact-form #square,
 
-#contact-us #contact-form #datepicker,
 
-#contact-us #contact-form #email,
 
-#contact-us #contact-form #name,
 
-#contact-us #contact-form #phone {
 
-  font-size: 18px;
 
-  width: 85%;
 
+#contact-us #contact-form #form-left #datepicker {
 
   background: none;
 
-}
 
-
 
-#contact-us #contact-form #gender {
 
-  display: block;
 
-  margin: 0 auto;
 
+  background-color: #fff;
 
 }
 
 
 #contact-us #contact-form #fb-button {
 
-  border-radius: 3px;
 
-  margin: 15px auto;
 
-  width: 85vw;
 
-  height: 60px;
 
+  margin-top: 12px;
 
+  width: 29vw;
 
+  height: 50px;
 
   border: 1px solid #3b5998;
 
   text-align: right;
 
+  padding-right: 60px;
 
+  background-size: 32px 32px;
 
+  border-radius: 3px;
 
   background-color: #fff;
 
   -webkit-transition: 0.3s;
 
   transition: 0.3s;
 
@@ -428,30 +372,23 @@ body .arrow:hover {
 
 
 #contact-us #contact-form #fb-button p {
 
   position: absolute;
 
-  right: 2vw;
 
-  font-weight: normal;
 
+  top: 1vw;
 
+  left: 14vw;
 
   color: #626262;
 
 }
 
 
-@media screen and (max-width: 1024px) {
 
-  #contact-us #contact-form #fb-button p {
 
-    top: 2vw;
 
-    right: 10vw;
 
-    font-size: 20px;
 
-  }
 
-}
 
-
 
-@media screen and (max-width: 767px) {
 
-  #contact-us #contact-form #fb-button p {
 
-    top: 3vw;
 
-    right: 1vw;
 
-  }
 
+#contact-us #contact-form #fb-button #line {
 
+  position: absolute;
 
+  color: #9b9b9b;
 
+  opacity: 0.8;
 
+  left: 8vw;
 
+  top: -0.1vw;
 
 }
 
 
 #contact-us #contact-form #fb-button img {
 
   position: absolute;
 
-  left: 30px;
 
-  top: 15px;
 
+  left: 50px;
 
+  top: 10px;
 
   width: 32px;
 
   height: 32px;
 
   -webkit-filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 
@@ -463,22 +400,23 @@ body .arrow:hover {
 
   color: #fff;
 
 }
 
 
+#contact-us #contact-form #fb-button:hover img {
 
+  -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
+          filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
+}
 
+
 
 #contact-us #contact-form #fb-button:hover p {
 
   color: #fff;
 
 }
 
 
-#contact-us #contact-form #fb-button:hover img {
 
-  -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
-          filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
+#contact-us #contact-form #fb-button:hover #line {
 
+  color: #fff;
 
 }
 
 
 #contact-us #contact-form a {
 
   text-decoration: none;
 
   color: #ee751b;
 
-}
 
-
 
-#contact-us #contact-form #checkbox {
 
-  margin-top: 50px;
 
+  font-weight: 900;
 
 }
 
 
 #contact-us #contact-form #email,
 
@@ -488,16 +426,31 @@ body .arrow:hover {
 
   background-color: #fff;
 
 }
 
 
-#contact-us #contact-form .option {
 
-  width: 85%;
 
+#contact-us .btn {
 
+  width: 100%;
 
+  margin: 16px auto;
 
+  border: none;
 
+  padding: 16px 12px;
 
+  background: #ee7800;
 
+  color: #fff;
 
+  font-size: 20px;
 
+  border-radius: .25rem;
 
+  text-align: center;
 
+  vertical-align: middle;
 
+}
 
+
 
+#contact-us .btn:hover {
 
+  color: #fff;
 
+  background-color: #745c54;
 
 }
 
 
-#contact-us #form {
 
+#contact-us .form-btn {
 
   text-align: center;
 
   position: relative;
 
+  margin: 0 auto;
 
 }
 
 
-#contact-us #form #phone {
 
+#contact-us .form-btn #phone1 {
 
   position: absolute;
 
   left: 500px;
 
 }

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


+ 103 - 109
mobileB/style.scss
View File 

@@ -219,68 +219,43 @@ body {
 
 }
 
 
 #contact-us {
 
-    padding-top: 50px;
 
-    p {
 
-        font-size: 16px;
 
-        font-weight: 600;
 
-        margin: 0px 10px;
 
-        color: #5c5248;
 
-        @media screen and(max-width:$table) {
 
-            font-size: 24px;
 
-            text-align: center;
 
-        }
 
-        @media screen and(max-width:$moblie) {
 
-            font-size: 16px;
 
+    margin: 0 auto;
 
+    width: 100vw;
 
+    background: #fafafa;
 
+    position: relative;
 
+    padding-bottom: 5vw;
 
+    .navbar{
 
+        img{
 
+            width: 180px;
 
         }
 
     }
 
-
 
-    #form-title {
 
-        margin-bottom: 50px;
 
-     
-    }
 
-    #form-text {
 
+    #sec-contact {
 
         width: 100vw;
 
-        margin: 30px auto;
 
-        @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;
 
-        }
 
+        margin: 0 auto;
 
+        background: #fff;
 
+        box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12);
 
+       
     }
 
-    h1 {
 
+    
+
 
+    .form-title {
 
+        margin: 0 auto;
 
         text-align: center;
 
-        font-family: 'Noto Serif TC', serif;
 
-        color:$title-color;
 
-        font-weight: bolder;
 
-        @media screen and(max-width:$table) {
 
-            font-size: 36px;
 
+        h1 {
 
+            text-align: center;
 
+            font-size: 1.75rem;
 
+            font-weight: 900;
 
         }
 
-        @media screen and(max-width:$moblie) {
 
-            font-size: 20px;
 
+        p {
 
+            font-size: 18px;
 
+            margin-bottom: 0;
 
         }
 
     }
 
     #contact-form {
 
-        text-align: center;
 
-        .btn {
 
-            margin: 50px auto;
 
-            border: none;
 
-            padding: 15px;
 
-            background: #ffaf60;
 
-            color: rgb(64, 72, 84);
 
-            font-size: 20px;
 
-            width: 300px;
 
-            border-radius: 30px;
 
-
 
-            &:hover {
 
-                color: #fff;
 
-                background-color: #745c54;
 
-            }
 
-        }
 
-        #location,
 
+        width: 85%;
 
+        margin: 0 auto;
 
+        padding: 10px;
 
+        #loc,
 
         #type,
 
         #modal,
 
         #budget,
 
@@ -290,67 +265,71 @@ body {
 
         #email,
 
         #name,
 
         #phone,
 
-        #gender,
 
-        #rooms,
 
-        #livingroom,
 
-        #bathroom {
 
-            border-radius: 3px;
 
-            width: 85%;
 
-            height: 60px;
 
-            margin: 15px 0;
 
-            padding-left: 15px;
 
+        #gender {
 
+            width: 100%;
 
+            height: 50px;
 
+            margin: 20px 0;
 
             border: 1px solid rgba(0, 0, 0, 0.3);
 
-            font-size: 18px;
 
+            padding: .375rem .75rem;
 
+            font-size: 1rem;
 
+            border-radius: 3px;
 
             appearance: none;
 
-            background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent;
 
+            background: url(./img/icondown.webp) 98% 50% no-repeat scroll transparent;
 
             background-size: 10px 10px;
 
             background-color: #fff;
 
         }
 
-        #square,
 
-        #datepicker,
 
-        #email,
 
-        #name,
 
-        #phone {
 
-            font-size: 18px;
 
-            width: 85%;
 
-            background: none;
 
-        }
 
-        #gender {
 
-            display: block;
 
-            margin: 0 auto;
 
+        #form-left {
 
+            // #rooms,
 
+            // #livingroom,
 
+            // #bathroom {
 
+            //     width: 28.5%;
 
+            //     border: 1px solid rgba(0, 0, 0, 0.3);
 
+            //     height: 50px;
 
+            //     margin: 15px 0;
 
+            //     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;
 
+            // }
 
+            #datepicker {
 
+                background: none;
 
+                background-color: #fff;
 
+            }
 
         }
 
-        #fb-button{
 
-            border-radius: 3px;
 
-            margin: 15px auto;
 
-            width: 85vw;
 
-            height: 60px;
 
+        #fb-button {
 
+            margin-top: 12px;
 
+            width: 29vw;
 
+            height: 50px;
 
             border: 1px solid #3b5998;
 
             text-align: right;
 
-            // background: url(./img/facebook.png) 10% 50% no-repeat scroll transparent;
 
-            // background-size: 32px 32px;
 
+            padding-right: 60px;
 
+            background-size: 32px 32px;
 
+            border-radius: 3px;
 
             background-color: #fff;
 
             transition: 0.3s;
 
             position: relative;
 
             p {
 
                 position: absolute;
 
-                right: 2vw;
 
-                font-weight: normal;
 
-                color:#626262;
 
-                @media screen and(max-width:$table) {
 
-                    top: 2vw;
 
-                    right: 10vw;
 
-                    font-size: 20px;
 
-                }
 
+                top: 1vw;
 
+                left: 14vw;
 
 
-                @media screen and(max-width:$moblie) {
 
-                    top: 3vw;
 
-                    right: 1vw;
 
-                }
 
+                color: #626262;
 
+            }
 
+            #line {
 
+                position: absolute;
 
+                color: #9b9b9b;
 
+                opacity: 0.8;
 
+                left: 8vw;
 
+                top: -0.1vw;
 
             }
 
             img {
 
                 position: absolute;
 
-                left: 30px;
 
-                top: 15px;
 
+                left: 50px;
 
+                top: 10px;
 
                 width: 32px;
 
                 height: 32px;
 
                 filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 
@@ -358,38 +337,53 @@ body {
 
             &:hover {
 
                 background-color: #2a4f91;
 
                 color: #fff;
 
-                p{
 
-                    color:#fff;
 
-                }
 
                 img {
 
                     filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
 
                 }
 
+                p {
 
+                    color: #fff;
 
+                }
 
+
 
+                #line {
 
+                    color: #fff;
 
+                }
 
             }
 
         }
 
         a {
 
             text-decoration: none;
 
             color: #ee751b;
 
+            font-weight: 900;
 
         }
 
-        #checkbox {
 
-            margin-top: 50px;
 
-        }
 
+
 
         #email,
 
         #name,
 
         #phone {
 
             background: none;
 
             background-color: #fff;
 
         }
 
+    }
 
 
-        .option {
 
-            width: 85%;
 
+    .btn {
 
+        width: 100%;
 
+        margin: 16px auto;
 
+        border: none;
 
+        padding: 16px 12px;
 
+        background: #ee7800;
 
+        color: #fff;
 
+        font-size: 20px;
 
+        border-radius: .25rem;
 
+        text-align: center;
 
+        vertical-align: middle;
 
+        &:hover {
 
+            color: #fff;
 
+            background-color: #745c54;
 
         }
 
     }
 
-
 
-    #form {
 
+    .form-btn {
 
         text-align: center;
 
         position: relative;
 
-
 
-        #phone {
 
+        margin: 0 auto;
 
+        #phone1 {
 
             position: absolute;
 
             left: 500px;
 
         }

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