index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>HHH_Home_Decoration2</title>
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  9. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  10. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  11. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
  12. <link rel="stylesheet" href="./style.css">
  13. </head>
  14. <body id="top">
  15. <div class="container-fluid" style="padding:0;">
  16. <div class="container-fluid" style="padding:0;">
  17. <section id="banner">
  18. <div class="Navigation">
  19. <div class="logo">
  20. <img src="./img/logo-main-1-1.webp" alt="">
  21. </div>
  22. <div class="link">
  23. <a href="">首頁</a>
  24. <a data-gt-target="#contact-us" data-gt-duration="800" data-gt-offset="-300">我有裝修需求</a>
  25. <a data-gt-target="#feedback" data-gt-duration="500" data-gt-offset="0">屋主都說好</a>
  26. <a data-gt-target="#service-process" data-gt-duration="500" data-gt-offset="0">服務流程</a>
  27. </div>
  28. </div>
  29. <hr class="hr bg-white" style="opacity:1">
  30. <div id="text">
  31. <div class="banner-slider">
  32. <div class="banner1">
  33. <h1>北歐風</h1>
  34. <button i class="btn-main">預約免費裝修諮詢</button>
  35. </div>
  36. <div class="banner2">
  37. <h1>次代風</h1>
  38. <button class="btn-main">預約免費裝修諮詢</button>
  39. </div>
  40. <div class="banner3">
  41. <h1>美式風</h1>
  42. <button class="btn-main">預約免費裝修諮詢</button>
  43. </div>
  44. </div>
  45. </div>
  46. </section>
  47. <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/totop.png"
  48. alt="">
  49. </div>
  50. <section id="content1">
  51. <div class="content1-left">
  52. <h1 class="title">你有以這些下困擾嗎</h1>
  53. <div class="left">
  54. <h1 class="title1">o1</h1>
  55. <div class="text1">
  56. <div class="text-1">裝修公司眾多</div>
  57. <div class="text-1">不知道如何邀選最適合的設計師?</div>
  58. </div>
  59. </div>
  60. <hr class="hr2 bg-dark " style="margin: 0;opacity:1">
  61. <div class="left">
  62. <h2 class="title1">o2</h2>
  63. <div class="text2">
  64. <div class="text-2">擔心遇到不良裝修公司</div>
  65. <div class="text-2">容易產生裝修糾紛?</div>
  66. </div>
  67. </div>
  68. <hr class="hr2 bg-dark " style=" margin: 0 ; opacity:1">
  69. <div class="left">
  70. <h2 class="title1">o3</h2>
  71. <div class="text3">
  72. <div class="text-3">不了解工程預算行情</div>
  73. <div class="text-3">害怕被騙嗎?</div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="content1-right">
  78. <div class="containg-img1">
  79. <img src="./img/content/01.webp" alt="">
  80. </div>
  81. <div class="containg-img2">
  82. <img src="./img/content/02.webp" alt="">
  83. </div>
  84. <div class="containg-img3">
  85. <img src="./img/content/03.webp" alt="">
  86. </div>
  87. </div>
  88. </section>
  89. <section id="service">
  90. <h1 class="title">我們提供的服務</h1>
  91. <div class="service-box">
  92. <div id="service-img">
  93. <div id="img-right"><img src="./img/service/service01.webp" alt=""></div>
  94. <div id="img-left"><img src="./img/service/service02.webp" alt=""></div>
  95. </div>
  96. <div id="service-text">
  97. <div id="text-left">
  98. <div class="img-icon">
  99. <img src="./img/process/icon1.webp" alt="">
  100. </div>
  101. <div class="icon-text">
  102. <div class="text-p">推薦合法立案</div>
  103. <div class="text-p">無裝修司法糾紛紀錄的專業設計師</div>
  104. <div class="text-p">輕鬆找到合適人選</div>
  105. <div class="text-p">不再大海撈針</div>
  106. </div>
  107. </div>
  108. <div id="text-right">
  109. <div class="img-icon">
  110. <img src="./img/process/icon2.webp" alt="">
  111. </div>
  112. <div class="icon-text">
  113. <div class="text-p">13年經驗安心把關</div>
  114. <div class="text-p">不懂預算行情</div>
  115. <div class="text-p">也不用擔心受騙</div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <div class="btn">
  121. <button class="btn-main">預約免費裝修諮詢</button>
  122. </div>
  123. </section>
  124. <div class="container-fluid">
  125. <section id="service-process">
  126. <h1 class="title">最嚴謹的服務流程</h1>
  127. <div id="process-box">
  128. <div class="box">
  129. <img src="./img/process/box1.png" alt="">
  130. <div class="box-text">填寫需求表單</div>
  131. </div>
  132. <div class="box">
  133. <img src="./img/process/box2.png" alt="">
  134. <div class="box-text">專人聯繫</div>
  135. <div class="box-text">進行裝修前諮詢</div>
  136. </div>
  137. <div class="box">
  138. <img src="./img/process/box3.png" alt="">
  139. <div class="box-text">依照屋主的需求</div>
  140. <div class="box-text">推薦合法立案的</div>
  141. <div class="box-text">設計公司</div>
  142. </div>
  143. <div class="box">
  144. <img src="./img/process/box4.png" alt="">
  145. <div class="box-text">設計公司會</div>
  146. <div class="box-text"> 主動與屋主</div>
  147. </div>
  148. <div class="box">
  149. <img src="./img/process/box5.png" alt="">
  150. <div class="box-text">選擇是否使用</div>
  151. <div class="box-text">幸福經紀人制度</div>
  152. <div class="box-text">來保障裝修權益</div>
  153. </div>
  154. <div class="box">
  155. <img src="./img/process/box6.png" alt="">
  156. <div class="box-text">媒合成功</div>
  157. </div>
  158. </div>
  159. </section>
  160. </div>
  161. <section id="feedback">
  162. <h1 class="title">客戶真實見證</h1>
  163. <div id="feedback-box">
  164. <div class="box">
  165. <img src="./img/feedback-img/feedback01.webp" alt="">
  166. <p>嚮往仁文街處的溫度-文響</p>
  167. </div>
  168. <div class="box">
  169. <img src="./img/feedback-img/feedback02.webp" alt="">
  170. <p>嚮往仁文街處的溫度-文響</p>
  171. </div>
  172. <div class="box">
  173. <img src="./img/feedback-img/feedback03.webp" alt="">
  174. <p>嚮往仁文街處的溫度-文響</p>
  175. </div>
  176. <div class="box">
  177. <img src="./img/feedback-img/feedback04.webp" alt="">
  178. <p>嚮往仁文街處的溫度-文響</p>
  179. </div>
  180. <div class="box">
  181. <img src="./img/feedback-img/feedback05.webp" alt="">
  182. <p>嚮往仁文街處的溫度-文響</p>
  183. </div>
  184. <div class="box">
  185. <img src="./img/feedback-img/feedback06.webp" alt="">
  186. <p>嚮往仁文街處的溫度-文響</p>
  187. </div>
  188. </div>
  189. </section>
  190. <section id="contact-us">
  191. <div class="form-title">
  192. <h1>已經服務超過14392個生活</h1>
  193. <h1>打造夢想中的完美居家生活</h1>
  194. <h1>即刻啟動!</h1>
  195. </div>
  196. <!-- <hr> -->
  197. <div class="contact-text">
  198. <div class="text-p">請撥打全台付費專線<span id="phone" style="color: #ffaf60">0800-336-086</span></div>
  199. <div class="text-p">或填寫以下資料,專人將盡速與您聯繫</div>
  200. </div>
  201. <div class="container-fluid" style="padding:0">
  202. <div id="contact-form">
  203. <div id="form-left">
  204. <select name="location" id="location">
  205. <option value="地區" disabled selected="selected">地區</option>
  206. <option class="option" value="type">基隆市</option>
  207. <option class="option" value="type">台北市</option>
  208. <option class="option" value="type">新北市</option>
  209. <option class="option" value="type">桃園市</option>
  210. <option class="option" value="type">新竹縣</option>
  211. <option class="option" value="type">新竹市</option>
  212. <option class="option" value="type">苗栗縣</option>
  213. <option class="option" value="type">台中市</option>
  214. <option class="option" value="type">彰化縣</option>
  215. <option class="option" value="type">雲林縣</option>
  216. <option class="option" value="type">嘉義縣</option>
  217. <option class="option" value="type">嘉義市</option>
  218. <option class="option" value="type">台南市</option>
  219. <option class="option" value="type">高雄市</option>
  220. <option class="option" value="type">屏東縣</option>
  221. <option class="option" value="type">宜蘭縣</option>
  222. <option class="option" value="type">花蓮縣</option>
  223. <option class="option" value="type">台東縣</option>
  224. <option class="option" value="type">澎湖縣</option>
  225. </select>
  226. <select name="type" id="type">
  227. <option value="房屋類型" disabled selected="selected">房屋類型</option>
  228. <option class="option" value="type">預售屋</option>
  229. <option class="option" value="type">中古屋</option>
  230. <option class="option" value="type">新成屋</option>
  231. <option class="option" value="type">毛胚屋</option>
  232. <option class="option" value="type">自地自建</option>
  233. </select>
  234. <select name="modal" id="modal">
  235. <option value="房屋型態" disabled selected="selected">房屋型態</option>
  236. <option class="option" value="type">透天</option>
  237. <option class="option" value="type">電梯華廈</option>
  238. <option class="option" value="type">公寓</option>
  239. <option class="option" value="type">平房</option>
  240. <option class="option" value="type">民宿</option>
  241. <option class="option" value="type">商空</option>
  242. <option class="option" value="type">其他</option>
  243. </select>
  244. <select name="budget" id="budget">
  245. <option value="裝修預算" disabled selected="selected">裝修預算</option>
  246. <option class="option" value="type">50~100萬</option>
  247. <option class="option" value="type">100~200萬</option>
  248. <option class="option" value="type">200~300萬</option>
  249. <option class="option" value="type">300萬~400萬</option>
  250. <option class="option" value="type">400~500萬</option>
  251. <option class="option" value="type">500萬以上</option>
  252. </select>
  253. <input type="text" id="square" placeholder="請輸入坪數" required>
  254. <select name="rooms" id="rooms">
  255. <option value="幾房" disabled selected="selected">幾房</option>
  256. <option class="option" value="type">1房</option>
  257. <option class="option" value="type">2房</option>
  258. <option class="option" value="type">3房</option>
  259. <option class="option" value="type">4房</option>
  260. <option class="option" value="type">5房</option>
  261. <option class="option" value="type">6房</option>
  262. <option class="option" value="type">7房</option>
  263. <option class="option" value="type">8房</option>
  264. </select>
  265. <select name="living room" id="livingroom">
  266. <option value="幾廳" disabled selected="selected">幾廳</option>
  267. <option class="option" value="type">1廳</option>
  268. <option class="option" value="type">2廳</option>
  269. </select>
  270. <select name="bathroom" id="bathroom">
  271. <option value="地區" disabled selected="selected">幾衛</option>
  272. <option class="option" value="type">1衛</option>
  273. <option class="option" value="type">2衛</option>
  274. <option class="option" value="type">3衛</option>
  275. <option class="option" value="type">4衛</option>
  276. <option class="option" value="type">5衛</option>
  277. <option class="option" value="type">6衛</option>
  278. <option class="option" value="type">7衛</option>
  279. <option class="option" value="type">8衛</option>
  280. </select>
  281. <select name="cars" id="style">
  282. <option value="風格類型" disabled selected="selected">風格類型</option>
  283. <option class="option" value="type">現代風</option>
  284. <option class="option" value="type">鄉村風</option>
  285. <option class="option" value="type">古典風</option>
  286. <option class="option" value="type">休閒多元</option>
  287. <option class="option" value="type">美式風</option>
  288. <option class="option" value="type">奢華風</option>
  289. <option class="option" value="type">新古典</option>
  290. <option class="option" value="type">日式禪風</option>
  291. <option class="option" value="type">東方風</option>
  292. <option class="option" value="type">混搭風</option>
  293. <option class="option" value="type">前衛風</option>
  294. <option class="option" value="type">北歐風</option>
  295. <option class="option" value="type">工業風</option>
  296. <option class="option" value="type">異國風</option>
  297. </select>
  298. <input type="text" id="date" placeholder="預選裝修日期" required>
  299. </div>
  300. <div id="form-right">
  301. <div id="facebook">
  302. <img src="./img/logo/facebook.webp" alt="">
  303. 使用FB填入信箱與姓名
  304. </div>
  305. <input type="text" id="email" placeholder="請輸入信箱" required>
  306. <input type="text" id="name" placeholder="請輸入姓名" required>
  307. <input type="text" id="phone" placeholder="請輸入電話" required>
  308. <select name="cars" id="gender">
  309. <option value="性格" disabled selected="selected">性別</option>
  310. <option class="option" value="type">男</option>
  311. <option class="option" value="type">女</option>
  312. </select>
  313. <input type="checkbox" id="checkbox"> <label for="agree">同意</label><a href="">免責聲明與隱私使用政策</a>
  314. </div>
  315. </div>
  316. <div id="form">
  317. <button id="btn">送出</button>
  318. </div>
  319. </div>
  320. </section>
  321. <div class="container-fluid" style="padding:0; margin:0; ">
  322. <div id="footer">
  323. <p>幸福空間 版權所有 &copy;Gorgeous Space Go.Ltd. All Rights Reserved.</p>
  324. <a href="x">|聯絡我們|</a>
  325. <a href="">|關於本站|</a>
  326. </div>
  327. </div>
  328. </div>
  329. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  330. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  331. crossorigin="anonymous"></script>
  332. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  333. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  334. crossorigin="anonymous"></script>
  335. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  336. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  337. <script src="./goto.js"></script>
  338. </body>
  339. </html>