jeter20131220 3 years ago
parent
commit
94f09e7010
10 changed files with 869 additions and 735 deletions
  1. BIN
      desktop11/img/logomain-2.png
  2. 295 146
      desktop11/index.html
  3. 34 64
      desktop11/style.css
  4. 0 0
      desktop11/style.css.map
  5. 60 83
      desktop11/style.scss
  6. BIN
      mobile/img/logomain-2.png
  7. 296 134
      mobile/index.html
  8. 79 167
      mobile/style.css
  9. 0 0
      mobile/style.css.map
  10. 105 141
      mobile/style.scss

BIN
desktop11/img/logomain-2.png


+ 295 - 146
desktop11/index.html

@@ -357,154 +357,303 @@ src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
 
         </div>
         <section id="contact-us">
-            <div class="form-title">
-                <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="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>
+            <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 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>
+    
+    
+                            <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> -->
-                            <!-- <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 class="form-btn">
+                            <input class="btn" style="opacity: 1;" type="submit" value="送出">
+    
                         </div>
-
-                    </div>
-                    <div class="form-btn">
-                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
-
-                    </div>
-                </form>
+                    </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>
+                
             </div>
         </section>
 

+ 34 - 64
desktop11/style.css

@@ -515,8 +515,21 @@ body .arrow:hover {
 #contact-us {
   margin: 0 auto;
   width: 100vw;
-  background: #eee;
+  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 {
@@ -530,37 +543,24 @@ 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 #loc,
@@ -576,55 +576,24 @@ body .arrow:hover {
 #contact-us #contact-form #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;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background: url(./img/icondown.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;
 }
 
-#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%;
-  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;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: url(./img/icondown.webp) 85% 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 #fb-button {
   margin-top: 12px;
   width: 29vw;
@@ -697,14 +666,16 @@ body .arrow:hover {
 }
 
 #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: 400px;
-  border-radius: 10px;
+  border-radius: .25rem;
+  text-align: center;
+  vertical-align: middle;
 }
 
 #contact-us .btn:hover {
@@ -715,7 +686,6 @@ body .arrow:hover {
 #contact-us .form-btn {
   text-align: center;
   position: relative;
-  width: 75vw;
   margin: 0 auto;
 }
 

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


+ 60 - 83
desktop11/style.scss

@@ -1,4 +1,3 @@
-
 * {
     margin: 0;
     padding: 0;
@@ -9,21 +8,17 @@ $title-color: #4b515e;
 $toggle: #9c857b;
 $process: #6f645a;
 
-
 @font-face {
     font-family: 追奇手寫體;
     src: url(./goto1.woff);
     font-weight: 900;
-    font-display:swap;
+    font-display: swap;
 }
 @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap");
 
-
-
 $destop: 1025px;
 
 body {
-    
     width: 100vw;
 
     .btn {
@@ -93,10 +88,10 @@ body {
             .banner1 {
                 text-align: center;
                 background-image: url(./img/banner/00.webp);
-                img{
+                img {
                     width: 15vw;
-                    display:block;
-                    margin:auto !important;
+                    display: block;
+                    margin: auto !important;
                 }
             }
             .banner2 {
@@ -106,7 +101,7 @@ body {
                 background-image: url(./img/banner/003.webp);
             }
         }
-        h1{
+        h1 {
             padding: 15px;
             color: $Font-color !important;
             font-family: 追奇手寫體 !important;
@@ -454,10 +449,21 @@ body {
 #contact-us {
     margin: 0 auto;
     width: 100vw;
-
-    background: #eee;
+    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;
@@ -469,32 +475,21 @@ 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;
-        }
+        padding: 24px;
         #loc,
         #type,
         #modal,
@@ -508,55 +503,38 @@ 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/icondown.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/icondown.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 {
-            width: 29vw;
-            margin-left: 5vw;
-            // #fb_login {
-            //     #fb-button {
-            //         font-size: 16px;
-            //         width: 29vw;
-            //         height: 50px;
-            //         padding: 30px;
-            //     }
-            // }
-        }
         #fb-button {
             margin-top: 12px;
             width: 29vw;
@@ -571,18 +549,17 @@ body {
             position: relative;
             p {
                 position: absolute;
-                top:1vw;
-                left:14vw;
-    
+                top: 1vw;
+                left: 14vw;
+
                 color: #626262;
             }
             #line {
                 position: absolute;
                 color: #9b9b9b;
-                opacity: 0.8;;
-                left:8vw;
-                top:-0.1vw;
-               
+                opacity: 0.8;
+                left: 8vw;
+                top: -0.1vw;
             }
             img {
                 position: absolute;
@@ -622,15 +599,16 @@ body {
     }
 
     .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: 400px;
-        border-radius: 10px;
-
+        border-radius: .25rem;
+        text-align: center;
+        vertical-align: middle;
         &:hover {
             color: #fff;
             background-color: #745c54;
@@ -639,7 +617,6 @@ body {
     .form-btn {
         text-align: center;
         position: relative;
-        width: 75vw;
         margin: 0 auto;
         #phone1 {
             position: absolute;

BIN
mobile/img/logomain-2.png


+ 296 - 134
mobile/index.html

@@ -351,143 +351,305 @@ src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
 
         </div>
     </section>
+    <section id="contact-us">
+        <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 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>
+
+
+                        <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>
 
-    <section id="contact-us" style="width: 100vw; background: #f7f7f7;">
-        <div id="form-title">
-            <h1>已經服務超過<span style="font-size: 28px;">14392</span>個家庭</h1>
-            <h1>打造夢想中的完美居家生活</h1>
-            <h1>即刻啟動!</h1>
+                    </div>
+                    <div class="form-btn">
+                        <input class="btn" style="opacity: 1;" type="submit" value="送出">
 
-        </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="a">
-            <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>
-
-
-                </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">
-                    <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">使用FB填入信箱與姓名
-                    </fb:login-button>
-                    <div id="status"></div>
-                </div> -->
-                <!-- <div id="fb_login">
-                    <button id="fb-button"  ><img src="./img/logo/facebook.png" alt="">
-                        <p><span style="padding-right:5vw; color:#9B9B9B ; font-size: 28px;">|</span>使用fb填入信箱與姓名</p>
-                    </button>
-                    <span id="FB_STATUS_2"></span>
-                </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>
+                    </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="送出">
         
-        </form>
+                                </div>
+                    </div>
+                </form>
+            </div>
+            
+        </div>
     </section>
     <div id="footer">
         <p>幸福空間 版權所有 &copy; Gorgeous Space Co.Ltd.</p>

+ 79 - 167
mobile/style.css

@@ -640,93 +640,48 @@ body .arrow:hover {
 }
 
 #contact-us {
-  margin-top: 100px;
-}
-
-#contact-us p {
-  font-size: 16px;
-  font-weight: 600;
-  margin: 0px 10px;
-}
-
-@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;
-  }
+  margin: 0 auto;
+  width: 100vw;
+  background: #fafafa;
+  position: relative;
+  padding-bottom: 5vw;
 }
 
-#contact-us #form-title {
-  padding-top: 100px;
-  margin-bottom: 50px;
-  color: #4b515e;
+#contact-us .navbar img {
+  width: 180px;
 }
 
-#contact-us #form-text {
+#contact-us #sec-contact {
   width: 100vw;
-  margin: 30px auto;
-}
-
-@media screen and (max-width: 1024px) {
-  #contact-us #form-text {
-    font-size: 24px;
-    text-align: center;
-    margin: 30px auto;
-  }
+  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);
 }
 
-@media screen and (max-width: 767px) {
-  #contact-us #form-text {
-    font-size: 16px;
-    margin: 30px auto;
-  }
+#contact-us .form-title {
+  margin: 0 auto;
+  text-align: center;
 }
 
-#contact-us h1 {
+#contact-us .form-title h1 {
   text-align: center;
-  font-size: 24px;
+  font-size: 1.75rem;
   font-weight: 900;
 }
 
-@media screen and (max-width: 1024px) {
-  #contact-us h1 {
-    font-size: 36px;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  #contact-us h1 {
-    font-size: 24px;
-  }
+#contact-us .form-title p {
+  font-size: 18px;
+  margin-bottom: 0;
 }
 
 #contact-us #contact-form {
-  text-align: center;
-}
-
-#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 #contact-form .btn:hover {
-  color: #fff;
-  background-color: #745c54;
+  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,
@@ -736,130 +691,67 @@ 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/icondown.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 {
-  margin: 15px auto;
-  width: 85vw;
-  height: 60px;
-  border: 1px solid #3B5998;
+  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;
   position: relative;
-  color: #3C3C3C;
 }
 
 #contact-us #contact-form #fb-button p {
   position: absolute;
-  top: 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: 1.8vw;
-    right: 5vw;
-    font-size: 16px;
-  }
-}
-
-@media screen and (max-width: 350px) {
-  #contact-us #contact-form #fb-button p {
-    font-size: 16px;
-  }
-}
-
-#contact-us #contact-form #fb-button p .sapn-line {
-  padding-right: 1vw;
-  font-size: 28px;
-  color: #8E8E8E;
-  font-weight: 100;
-}
-
-@media screen and (min-width: 700px) {
-  #contact-us #contact-form #fb-button p .sapn-line {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  #contact-us #contact-form #fb-button p .sapn-line {
-    padding-right: 5vw;
-  }
-}
-
-@media screen and (max-width: 400px) {
-  #contact-us #contact-form #fb-button p .sapn-line {
-    padding-right: 2vw;
-  }
-}
-
-@media screen and (max-width: 350px) {
-  #contact-us #contact-form #fb-button p .sapn-line {
-    padding-right: 3vw;
-    font-size: 27px;
-  }
+#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%);
           filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
 }
 
-@media screen and (max-width: 350px) {
-  #contact-us #contact-form #fb-button img {
-    left: 15px;
-  }
-}
-
 #contact-us #contact-form #fb-button:hover {
   background-color: #2a4f91;
   color: #fff;
@@ -870,13 +762,18 @@ body .arrow:hover {
           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 #line {
+  color: #fff;
+}
+
 #contact-us #contact-form a {
   text-decoration: none;
   color: #ee751b;
-}
-
-#contact-us #contact-form #checkbox {
-  margin-top: 30px;
+  font-weight: 900;
 }
 
 #contact-us #contact-form #email,
@@ -886,16 +783,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
mobile/style.css.map


+ 105 - 141
mobile/style.scss

@@ -471,69 +471,43 @@ body {
     }
 }
 #contact-us {
-    margin-top: 100px;
-  
-    p {
-        font-size: 16px;
-        font-weight: 600;
-        margin: 0px 10px;
-
-        @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 {
-        padding-top: 100px;
-        margin-bottom: 50px;
-        color: $title-color;
-    }
-    #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-size: 24px;
-        font-weight: 900;
-        @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: 24px;
+        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,
@@ -543,101 +517,74 @@ 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/icondown.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{
-            margin: 15px auto;
-            width: 85vw;
-            height: 60px;
-            border: 1px solid #3B5998;
+        #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;
-            color:	#3C3C3C;
             p {
                 position: absolute;
-                top: 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: 1.8vw;
-                    right: 5vw;
-                    font-size: 16px;
-                }
-                @media screen and(max-width:350px) {
-                    font-size: 16px;
-                    
-                }
-                .sapn-line{
-                    padding-right: 1vw;
-                    font-size: 28px;
-                    color:		#8E8E8E;
-                    font-weight: 100;
-                    @media screen and(min-width:700px) {
-                        display: none;
-                    }
-                    @media screen and(max-width:$moblie) {
-                        padding-right: 5vw;
-                        
-                    }
-                    @media screen and(max-width:400px) {
-                        padding-right: 2vw;
-                        
-                    }
-                    @media screen and(max-width:350px) {
-                        padding-right: 3vw;
-                        font-size: 27px;
-                    }
-                    
-                }
+                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%);
-                @media screen and(max-width:350px) {
-                    left: 15px;
-                }
             }
             &:hover {
                 background-color: #2a4f91;
@@ -645,40 +592,57 @@ body {
                 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: 30px;
-        }
-       
+
         #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;
         }
     }
 }
 
+
 #footer {
   
     padding-top: 50px;

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