style.scss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697
  1. * {
  2. font-family: 微軟正黑體;
  3. }
  4. $Font-color: #fff;
  5. $title-color: #4b515e;
  6. $toggle: #9c857b;
  7. $process: #6f645a;
  8. @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;600&display=swap");
  9. @font-face {
  10. font-family: 追奇手寫體;
  11. src: url(./drechifont-proportional.ttf);
  12. font-weight: 900;
  13. }
  14. $destop: 1025px;
  15. body {
  16. height: 5000px;
  17. width: 100vw;
  18. .btn {
  19. width: 96vw;
  20. margin: 0 auto;
  21. .btn-main {
  22. box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
  23. border: none;
  24. padding: 15px;
  25. background: rgb(64, 72, 84);
  26. color: $Font-color;
  27. font-size: 16px;
  28. font-weight: 600;
  29. width: 280px;
  30. border-radius: 30px;
  31. transition: 0.3s;
  32. &:hover {
  33. background-color: $toggle;
  34. width: 285px;
  35. font-size: 17px;
  36. }
  37. }
  38. }
  39. .title {
  40. font-weight: 900;
  41. font-family: "Noto Serif TC", serif;
  42. padding: 15px;
  43. font-size: 45px;
  44. color: $title-color;
  45. padding-left: 10vw;
  46. }
  47. .arrow {
  48. position: fixed;
  49. right: 30px;
  50. bottom: 30px;
  51. width: 45px;
  52. height: 40px;
  53. z-index: 10;
  54. background-color: #e06649;
  55. &:hover {
  56. box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35);
  57. }
  58. }
  59. }
  60. // banner
  61. .banner {
  62. width: 100vw;
  63. position: relative;
  64. #text {
  65. text-align: center;
  66. .banner-slider {
  67. margin: 0 !important;
  68. padding: 0 !important;
  69. .banner1,
  70. .banner2,
  71. .banner3 {
  72. height: 100vh;
  73. background-size: cover;
  74. background-repeat: no-repeat;
  75. background-position: center;
  76. padding-right: 0 !important;
  77. }
  78. .banner1 {
  79. background-image: url(./img/banner/00.webp);
  80. }
  81. .banner2 {
  82. background-image: url(./img/banner/002.webp);
  83. }
  84. .banner3 {
  85. background-image: url(./img/banner/003.webp);
  86. }
  87. }
  88. h1 {
  89. padding: 15px;
  90. color: $Font-color;
  91. font-family: 追奇手寫體;
  92. font-size: 72px;
  93. }
  94. .btn-main {
  95. box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
  96. border: none;
  97. padding: 15px;
  98. background: rgb(64, 72, 84);
  99. color: $Font-color;
  100. font-size: 16px;
  101. font-weight: 600;
  102. width: 280px;
  103. border-radius: 30px;
  104. transition: 0.3s;
  105. &:hover {
  106. background-color: #9c857b;
  107. width: 285px;
  108. font-size: 17px;
  109. }
  110. }
  111. }
  112. .Navigation {
  113. width: 90vw;
  114. position: absolute;
  115. margin: 0 auto;
  116. top: 20px;
  117. z-index: 5;
  118. display: grid;
  119. grid-template-columns: 2fr 4fr 2fr;
  120. .logo {
  121. padding-top: 1.5vw;
  122. padding-left: 12vw;
  123. img {
  124. width: 120px;
  125. }
  126. }
  127. .link {
  128. text-align: left;
  129. padding: 1.5vw 30px;
  130. // padding-right: 150px;
  131. a {
  132. display: inline-block;
  133. text-decoration: none;
  134. color: $Font-color;
  135. // padding-right: 35px;
  136. letter-spacing: 1px;
  137. font-size: 0.9rem;
  138. font-weight: 600;
  139. cursor: pointer;
  140. padding: 15px;
  141. position: relative;
  142. :hover {
  143. opacity: 0.8;
  144. }
  145. &:after {
  146. content: "";
  147. display: block;
  148. width: 80%;
  149. height: 3px;
  150. background-color: #fff;
  151. position: absolute;
  152. left: 12%;
  153. bottom: 0;
  154. transition: all 0.3s;
  155. opacity: 0;
  156. }
  157. &:hover:after {
  158. width: 80%;
  159. opacity: 1;
  160. }
  161. }
  162. }
  163. .socail-link {
  164. text-align: right;
  165. padding: 1.5vw 30px;
  166. img {
  167. width: 1.5vw;
  168. filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%);
  169. transition: 0.3s;
  170. &:hover {
  171. filter: none;
  172. }
  173. }
  174. a {
  175. display: inline-block;
  176. text-decoration: none;
  177. color: $Font-color;
  178. // padding-right: 35px;
  179. letter-spacing: 1px;
  180. font-size: 0.9rem;
  181. font-weight: 600;
  182. cursor: pointer;
  183. padding: 15px;
  184. position: relative;
  185. }
  186. }
  187. }
  188. hr {
  189. width: 85vw;
  190. position: absolute;
  191. top: 90px;
  192. left: 100px;
  193. height: 1px;
  194. z-index: 5;
  195. }
  196. }
  197. // content1
  198. #content1 {
  199. display: grid;
  200. grid-template-columns: 1fr 1fr;
  201. margin: 0 auto;
  202. padding-top: 150px;
  203. width: 90vw;
  204. position: relative;
  205. grid-gap: 30px;
  206. .hr2 {
  207. position: absolute;
  208. width: 32vw;
  209. height: 1px !important;
  210. left: 5vw;
  211. }
  212. .content1-left {
  213. width: 45vw;
  214. text-align: left;
  215. margin: 0px auto;
  216. padding-right: 50px;
  217. .contant-toggle {
  218. color: $toggle !important;
  219. }
  220. .contant-toggle2 {
  221. color: $title-color !important;
  222. }
  223. .title {
  224. margin: 0;
  225. padding: 10px;
  226. margin-bottom: 50px;
  227. font-weight: 900;
  228. font-size: 45px;
  229. font-family: "Noto Serif TC", serif;
  230. color: $title-color;
  231. padding-left: 5vw;
  232. }
  233. .left {
  234. display: grid;
  235. grid-template-columns: 1.5fr 3fr;
  236. width: 37vw;
  237. .title1 {
  238. text-align: center;
  239. font-size: 90px;
  240. font-weight: 400;
  241. font-family: "Times New Roman", Times, serif;
  242. color: #8593a4;
  243. padding-left: 3vw;
  244. }
  245. .text1,
  246. .text2,
  247. .text3 {
  248. cursor: pointer;
  249. margin: auto 0;
  250. .text-1,
  251. .text-2,
  252. .text-3 {
  253. font-size: 23px;
  254. font-weight: bolder;
  255. color: $title-color;
  256. }
  257. }
  258. }
  259. }
  260. .content1-right {
  261. width: 35vw;
  262. text-align: center;
  263. .slick-dots {
  264. margin-bottom: 50px;
  265. ::before {
  266. color: #fff;
  267. }
  268. }
  269. img {
  270. width: 35vw;
  271. height: 40vw;
  272. object-fit: cover;
  273. }
  274. }
  275. }
  276. // service
  277. #service {
  278. width: 100vw;
  279. h1 {
  280. padding: 15px;
  281. padding-left: 10vw;
  282. margin-bottom: 80px;
  283. padding-top: 5vw;
  284. }
  285. .service-box {
  286. width: 80vw;
  287. margin: 0 auto;
  288. #service-text {
  289. display: grid;
  290. grid-template-columns: 1fr 1fr;
  291. margin: 3vw auto;
  292. width: 70vw;
  293. #text-left,
  294. #text-right {
  295. width: 40vw;
  296. text-align: left;
  297. display: grid;
  298. grid-template-columns: 1fr 1fr;
  299. .img-icon {
  300. width: 12vw;
  301. }
  302. }
  303. .icon-text {
  304. width: 30vw;
  305. margin-top: 15px;
  306. font-weight: 600;
  307. }
  308. img {
  309. width: 128px;
  310. height: 128px;
  311. // filter: invert(69%) sepia(15%) saturate(301%) hue-rotate(175deg) brightness(90%) contrast(85%);
  312. }
  313. .text-p {
  314. font-size: 18px;
  315. color: #000;
  316. }
  317. }
  318. #service-img {
  319. width: 75vw;
  320. display: grid;
  321. grid-template-columns: 1fr 1fr;
  322. grid-gap: 10px;
  323. img {
  324. width: 38vw;
  325. object-fit: cover;
  326. }
  327. }
  328. }
  329. .btn {
  330. text-align: center;
  331. margin-bottom: 100px;
  332. margin-top: 50px;
  333. }
  334. }
  335. // service-process
  336. #service-process {
  337. background-color: #f7f7f7;
  338. padding-bottom: 150px;
  339. h1 {
  340. padding: 15px;
  341. margin-left: 10vw;
  342. padding-top: 100px;
  343. margin-bottom: 80px;
  344. }
  345. #process-box {
  346. display: grid;
  347. grid-template-columns: repeat(6, 1fr);
  348. width: 80vw;
  349. margin: 0 auto;
  350. .box {
  351. width: 14vw;
  352. .box-text {
  353. font-family: 微軟正黑體;
  354. text-align: center;
  355. font-size: 17px;
  356. font-weight: 900;
  357. padding-right: 2.8vw;
  358. color: $process;
  359. }
  360. }
  361. img {
  362. width: 185px;
  363. height: 185px;
  364. filter: invert(42%) sepia(12%) saturate(490%) hue-rotate(347deg) brightness(89%) contrast(86%);
  365. }
  366. }
  367. }
  368. // feedback
  369. #feedback {
  370. width: 100vw;
  371. padding-bottom: 200px;
  372. h1 {
  373. margin-top: 50px;
  374. margin-bottom: 50px;
  375. }
  376. #feedback-box {
  377. width: 80vw;
  378. margin: 0 auto;
  379. display: grid;
  380. grid-template-columns: repeat(3, 1fr);
  381. .box {
  382. width: 25vw;
  383. transition: 0.5s;
  384. text-align: center;
  385. padding-bottom: 1vw;
  386. position: relative;
  387. .play {
  388. position: absolute;
  389. left: 12vw !important;
  390. top: 5vw !important;
  391. width: 3vw;
  392. height: 3vw;
  393. opacity: 0.8;
  394. z-index: 10;
  395. }
  396. img {
  397. width: 25vw;
  398. margin: 0 auto;
  399. object-fit: cover;
  400. transition: 0.5s;
  401. // &:hover {
  402. // width: 400px;
  403. // height: 200px;
  404. // }
  405. }
  406. p {
  407. text-align: center;
  408. font-size: 18px;
  409. font-weight: 600;
  410. margin: 10px;
  411. }
  412. }
  413. }
  414. }
  415. #contact-us {
  416. margin: 0 auto;
  417. width: 100vw;
  418. background: #eee;
  419. position: relative;
  420. .contact-text {
  421. margin: 0 auto;
  422. width: 68vw;
  423. .text-p {
  424. font-size: 16px;
  425. font-weight: 600;
  426. }
  427. }
  428. .form-title {
  429. width: 70vw;
  430. margin: 0 auto;
  431. padding-top: 100px;
  432. margin-bottom: 120px;
  433. color: #5c5248;
  434. h1 {
  435. text-align: center;
  436. font-size: 32px;
  437. font-weight: 900;
  438. }
  439. }
  440. #contact-form {
  441. width: 75vw;
  442. display: grid;
  443. grid-template-columns: repeat(2, 1fr);
  444. margin-top: 10px;
  445. margin: 0 auto;
  446. position: relative;
  447. hr {
  448. position: absolute;
  449. width: 34vw;
  450. transform: rotate(90deg);
  451. left: 20vw;
  452. top: 19vw;
  453. }
  454. #loc,
  455. #type,
  456. #modal,
  457. #budget,
  458. #square,
  459. #style,
  460. #date,
  461. #email,
  462. #name,
  463. #phone,
  464. #gender {
  465. width: 100%;
  466. height: 50px;
  467. margin: 10px 0;
  468. padding-left: 10px;
  469. border: 1px solid rgba(0, 0, 0, 0.3);
  470. padding: 10px 15px;
  471. font-size: 16px;
  472. border-radius: 3px;
  473. appearance: none;
  474. background: url(./img/icondown.webp) 95% 50% no-repeat scroll transparent;
  475. background-size: 10px 10px;
  476. background-color: #fff;
  477. }
  478. #form-left {
  479. width: 28vw;
  480. margin-left: 3vw;
  481. #rooms,
  482. #livingroom,
  483. #bathroom {
  484. width: 28.5%;
  485. border: 1px solid rgba(0, 0, 0, 0.3);
  486. height: 50px;
  487. margin: 15px 0;
  488. padding-right: 50px;
  489. padding: 10px 15px;
  490. font-size: 16px;
  491. border-radius: 3px;
  492. appearance: none;
  493. background: url(./img/icondown.webp) 85% 50% no-repeat scroll transparent;
  494. background-size: 10px 10px;
  495. background-color: #fff;
  496. }
  497. #square,
  498. #date {
  499. background: none;
  500. background-color: #fff;
  501. }
  502. }
  503. #form-right {
  504. width: 29vw;
  505. margin-left: 5vw;
  506. // #fb_login {
  507. // #fb-button {
  508. // font-size: 16px;
  509. // width: 29vw;
  510. // height: 50px;
  511. // padding: 30px;
  512. // }
  513. // }
  514. }
  515. #fb-button{
  516. margin-top: 12px;
  517. width: 29vw;
  518. height: 50px;
  519. border: 1px solid #3b5998;
  520. text-align: right;
  521. padding-right: 50px;
  522. background-size: 32px 32px;
  523. border-radius: 3px;
  524. background-color: #fff;
  525. transition: 0.3s;
  526. position: relative;
  527. p{
  528. line-height: 40px;
  529. }
  530. img {
  531. position: absolute;
  532. left: 50px;
  533. top: 10px;
  534. width: 32px;
  535. height: 32px;
  536. filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%);
  537. }
  538. &:hover {
  539. background-color: #2a4f91;
  540. color: #fff;
  541. img {
  542. filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%)
  543. contrast(106%);
  544. }
  545. }
  546. }
  547. a {
  548. text-decoration: none;
  549. color: #ee751b;
  550. font-weight: 900;
  551. }
  552. #email,
  553. #name,
  554. #phone {
  555. background: none;
  556. background-color: #fff;
  557. }
  558. }
  559. .btn {
  560. margin: 50px auto;
  561. border: none;
  562. padding: 15px;
  563. background: #edbc96;
  564. color: #4b515e;
  565. font-size: 20px;
  566. width: 400px;
  567. border-radius: 10px;
  568. &:hover {
  569. color: #fff;
  570. background-color: #745c54;
  571. }
  572. }
  573. .form-btn {
  574. text-align: center;
  575. position: relative;
  576. width: 75vw;
  577. margin: 0 auto;
  578. #phone1 {
  579. position: absolute;
  580. left: 500px;
  581. }
  582. }
  583. }
  584. #footer {
  585. width: 100vw;
  586. background-color: #ebe6e2;
  587. color: #9f5000;
  588. text-align: center;
  589. font-size: 18px;
  590. line-height: 130px;
  591. a {
  592. text-decoration: none;
  593. color: #9f5000;
  594. }
  595. p {
  596. display: inline;
  597. }
  598. }
  599. .animation-h1 {
  600. animation-name: fade;
  601. animation-duration: 1s;
  602. animation-fill-mode: forwards;
  603. animation-delay: 0.5s;
  604. opacity: 0;
  605. @keyframes fade {
  606. from {
  607. transform: translateY(0px);
  608. }
  609. to {
  610. transform: translateY(20px);
  611. opacity: 1;
  612. }
  613. }
  614. }
  615. .animation-btn {
  616. animation-name: fade2;
  617. animation-duration: 1s;
  618. animation-fill-mode: forwards;
  619. animation-delay: 1s;
  620. opacity: 0;
  621. @keyframes fade2 {
  622. from {
  623. transform: translateY(0px);
  624. }
  625. to {
  626. transform: translateY(-10px);
  627. opacity: 1;
  628. }
  629. }
  630. }
  631. form label {
  632. display: inline-block;
  633. width: 100px;
  634. }
  635. form div {
  636. margin-bottom: 10px;
  637. }
  638. .error {
  639. color: red;
  640. margin-left: 5px;
  641. }
  642. label.error {
  643. display: inline;
  644. }