Browse Source

表單內容調整ˋ

jeter20131220 3 years ago
parent
commit
200a7d175d

BIN
desktopB/img/logomain-2.png


+ 285 - 132
desktopB/index.html

@@ -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

@@ -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

@@ -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


+ 295 - 131
mobileB/index.html

@@ -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


+ 78 - 125
mobileB/style.css

@@ -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

@@ -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