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

修正

jeter20131220 3 years ago
parent
97e5c3a79f
commit
94f09e7010
10 changed files with 869 additions and 735 deletions
Split View Show Diff Stats
  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
View File


+ 295 - 146
desktop11/index.html
View File 

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

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

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


+ 296 - 134
mobile/index.html
View File 

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

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

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