* { font-family: 微軟正黑體; } $Font-color: #fff; $title-color: #4b515e; $toggle: #9c857b; $process: #6f645a; @font-face { font-family: 追奇手寫體; src: url(./drechifont-proportional.ttf); font-weight: 900; } $destop: 1025px; body { .btn { width: 96vw; margin: 0 auto; .btn-main { box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5); border: none; padding: 15px; background: rgb(64, 72, 84); color: $Font-color; font-size: 16px; font-weight: 600; width: 280px; border-radius: 30px; transition: 0.3s; &:hover { background-color: $toggle; width: 285px; font-size: 17px; } } } .title { padding: 15px; font-size: 45px; color: $title-color; text-align: center; } .arrow { position: fixed; right: 30px; bottom: 30px; width: 30px; z-index: 10; } .arrow { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 40px; z-index: 10; background-color: #E06649; &:hover{ box-shadow: 1px 3px 13px -2px rgba(0, 0, 0, 0.35); } } } .banner { width: 100vw; position: relative; padding-bottom: 10vw; #text { text-align: center; .banner-slider { margin: 0 !important; padding: 0 !important; .banner1, .banner2, .banner3 { padding-bottom: 10vw; background-size: cover; background-repeat: no-repeat; background-position: center; padding-right: 0 !important; position: relative; .banner-titleh1 { padding-top: 16vw; text-align: center; color: #fff; font-size: 55px; } .icondown { position: absolute; left:48vw; top:48vw; } .process-box { padding-top: 5vw; display: grid; grid-template-columns: repeat(4, 1fr); width: 55vw; margin: auto; .box-text { font-family: 微軟正黑體; text-align: center; font-size: 16px; font-weight: 900; padding-right: 3vw; color: $Font-color; } img { width: 180px; height: 180px; } } } .banner1 { background-image: url(./img/banner/001.webp); } .banner2 { background-image: url(./img/banner/001.webp); } .banner3 { background-image: url(./img/banner/001.webp); } } h1 { padding: 15px; color: $Font-color; font-family: 追奇手寫體 !important; font-size: 72px; } .btn-main { box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5); border: none; padding: 15px; background: rgb(64, 72, 84); color: $Font-color; font-size: 16px; font-weight: 600; width: 280px; border-radius: 30px; transition: 0.3s; &:hover { background-color: #9c857b; width: 285px; font-size: 17px; } } } .Navigation { width: 90vw; position: absolute; margin: 0 auto; top: 5px; z-index: 5; display: grid; grid-template-columns: 2fr 4fr; .logo { padding-top: 1.5vw; padding-left: 12vw; img { width: 120px; } } .link { text-align: right; padding: 30px; img { width: 1.5vw; filter: invert(100%) sepia(0%) saturate(10%) hue-rotate(238deg) brightness(104%) contrast(103%); transition: 0.3s; &:hover { filter: none; } } a { display: inline-block; text-decoration: none; color: $Font-color; // padding-right: 35px; letter-spacing: 1px; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 15px; position: relative; } } } hr { width: 85vw; position: absolute; top: 80px; left: 100px; height: 1px; z-index: 5; } } #contact-us { margin: 0 auto; width: 100vw; position: relative; .contact-text { margin: 0 auto; width: 68vw; .text-p { font-size: 16px; font-weight: 600; } } .form-title { width: 70vw; margin: 0 auto; padding-top: 100px; margin-bottom: 120px; color: #5c5248; h1 { text-align: center; font-size: 32px; font-weight: 900; } } #contact-form { width: 75vw; display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 10px; margin: 0 auto; position: relative; hr { position: absolute; width: 34vw; transform: rotate(90deg); left: 20vw; top: 19vw; } #location, #type, #modal, #budget, #square, #style, #datepicker, #email, #name, #phone, #gender { width: 100%; height: 50px; margin: 10px 0; padding-left: 10px; border: 1px solid rgba(0, 0, 0, 0.3); padding: 10px 15px; font-size: 16px; border-radius: 3px; appearance: none; background: url(./img/icondown1.webp) 95% 50% no-repeat scroll transparent; background-size: 10px 10px; background-color: #fff; } #form-left { width: 28vw; margin-left: 3vw; #rooms, #livingroom, #bathroom { width: 28.5%; border: 1px solid rgba(0, 0, 0, 0.3); height: 50px; margin: 15px 0; padding-right: 50px; padding: 10px 15px; font-size: 16px; border-radius: 3px; appearance: none; background: url(./img/icondown1.webp) 85% 50% no-repeat scroll transparent; background-size: 10px 10px; background-color: #fff; } #square, #datepicker { background: none; background-color: #fff; } } #form-right { width: 29vw; margin-left: 5vw; #fb-button{ margin-top: 12px; width: 29vw; height: 50px; border: 1px solid #3b5998; text-align: right; padding-right: 50px; background-size: 32px 32px; border-radius: 3px; background-color: #fff; transition: 0.3s; position: relative; p { position: absolute; top:1vw; left:14vw; color: #626262; } #line { position: absolute; color: #9b9b9b; opacity: 0.8;; left:8vw; top:-0.1vw; } img { position: absolute; left: 50px; top: 7px; width: 32px; height: 32px; filter: invert(29%) sepia(70%) saturate(712%) hue-rotate(186deg) brightness(89%) contrast(81%); } &:hover { background-color: #2a4f91; color: #fff; img { filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%); } p{ color:#fff; } } } a { text-decoration: none; color: #ee751b; font-weight: 900; } #checkbox { margin: 15px; } #email, #name, #phone { background: none; background-color: #fff; } } } .btn { margin: 50px auto; border: none; padding: 15px; background: #edbc96; color: #4b515e; font-size: 20px; width: 450px; border-radius: 10px; &:hover { color: #fff; background-color: #745c54; } } .form-btn { text-align: center; position: relative; width: 75vw; margin: 0 auto; #phone { position: absolute; left: 500px; } } } #feedback { width: 100vw; padding-bottom: 200px; h1 { margin-top: 50px; margin-bottom: 50px; } #feedback-box { width: 80vw; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); .box { width: 25vw; transition: 0.5s; text-align: center; padding-bottom: 1vw; position: relative; .play { position: absolute; left: 12vw !important; top: 5vw !important; width: 3vw; height: 3vw; opacity: 0.8; z-index: 10; } img { width: 25vw; margin: 0 auto; object-fit: cover; transition: 0.5s; // &:hover { // width: 400px; // height: 200px; // } } p { text-align: center; font-size: 18px; font-weight: 600; margin: 10px; } } } } #footer { width: 100vw; background-color: #ebe6e2; color: #9f5000; text-align: center; font-size: 18px; line-height: 130px; a { text-decoration: none; color: #9f5000; } p { display: inline; } }