<h1>聯絡我們</h1> <div class="container-xl"> <div class="row"> <div class="col-md-1"></div> <div class="col-md-11"></div> </div> </div>
<form method="post" action=""> <p class="text-center"><small><span class="reqword">*</span> 表示欄位必填</small></p> <!-- 第1列 ======================================================= --> <div class="row mb-3 align-items-center"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> <span><span class="reqword">*</span>姓名:</span> <span class="faword"><i class="bi bi-person-fill"></i></span> </div> <div class="col-12 col-sm-7 col-md-8"> <input type="text" name="" class="form-control" required placeholder="請填寫聯絡人真實姓名, 方便與您聯絡......"> </div> </div> <!-- 第2列 ======================================================= --> <div class="row mb-3 align-items-center"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> <span><span class="reqword">*</span>稱謂:</span> <span class="faword"><i class="bi bi-gender-ambiguous"></i></span> </div> <div class="col-12 col-sm-7 col-md-8"> <label><input type="radio" name="" value="先生" class="form-check-input"> 先生 </label> <label><input type="radio" name="" value="小姐" class="form-check-input"> 小姐 </label> </div> </div> <!-- 第3列 ======================================================= --> <div class="row mb-3 align-items-center"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> <span><span class="reqword">*</span>手機:</span> <span class="faword"><i class="bi bi-phone-vibrate"></i></span> </div> <div class="col-12 col-sm-7 col-md-8"> <input type="number" name="" class="form-control" required placeholder="請填寫與您聯絡的手機......."> </div> </div> <!-- 第4列 ======================================================= --> <div class="row mb-3 align-items-center"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> <span><span class="reqword">*</span>服務區域:</span> <span class="faword"><i class="bi bi-shop"></i></span> </div> <div class="col-12 col-sm-7 col-md-8"> <select name="" class="form-select" aria-label="Default select example"> <option selected disabled>請選擇靠近的服務區域...</option> <option value="台北">台北</option> <option value="台中">台中</option> <option value="高雄">高雄</option> </select> </div> </div> <!-- 第5列 ======================================================= --> <div class="row mb-3 align-items-center"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> <span><span class="reqword">*</span>需要的服務:</span> <span class="faword"><i class="bi bi-check2-square"></i></span> </div> <div class="col-12 col-sm-7 col-md-8"> <label><input type="checkbox" name="" value="回覆問題" class="form-check-input"> 回覆問題 </label> <label><input type="checkbox" name="" value="寄發型錄" class="form-check-input"> 寄發型錄 </label> <label><input type="checkbox" name="" value="寄發樣品" class="form-check-input"> 寄發樣品 </label> <label><input type="checkbox" name="" value="預約面談" class="form-check-input"> 預約面談 </label> </div> </div> <!-- 第6列 ======================================================= --> <div class="row mb-3 align-items-start"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> <span><span class="reqword">*</span>留言內容:</span> <span class="faword"><i class="bi bi-chat-dots"></i></span> </div> <div class="col-12 col-sm-7 col-md-8"> <textarea name="" rows="6" class="form-control" required></textarea> </div> </div> <!-- 第7列 ======================================================= --> <div class="row mb-3 align-items-start"> <div class="col-12 col-sm-4 col-md-3 d-flex align-items-center justify-content-between justify-content-md-end"> </div> <div class="col-12 col-sm-7 col-md-8 text-end"> <input type="submit" class="btn btn-outline-secondary" value="確定送出"> </div> </div> </form>
#sec5 { padding-bottom: 50px; display: flex; flex-direction: column; } #sec5 .container-xl { background: url(img/contact2.png) no-repeat 20% top; background-size: 40% auto; flex: 1; } #sec5 h1 { margin-bottom: 20px; } #sec5 form { background-color: rgba(255, 255, 255, 1); color: #333; border-radius: 1rem; max-width: 900px; margin: 150px auto 100px; padding: 20px; } #sec5 form .bi { font-size: 1.5em; } #sec5 form .reqword { color: red; margin-right: 5px; display: inline-block; vertical-align: middle; } #sec5 form input::placeholder { color: var(--c-form2); } .form-control:focus { color: #212529; background-color: #fff; border-color: var(--c-form2); outline: 0; box-shadow: 0 0 0 0.25rem var(--c-form2); } .form-check-input:focus { border-color: var(--c-form2); outline: 0; box-shadow: 0 0 0 0.25rem var(--c-form2); } .form-check-input:checked { background-color: var(--c-form1); border-color: var(--c-form1); } .form-select:focus { border-color: var(--c-form2); outline: 0; box-shadow: 0 0 0 0.25rem var(--c-form2); } @media (min-width: 768px){ #sec5 .container-xl { background: url(img/contact2.png) no-repeat left bottom; background-size: min(30%, 300px) auto; } #sec5 form { margin: 0px auto 40px; padding: 40px; background-color: rgba(255, 255, 255, 0.6); } } @media (min-width:992px){ #sec5 .container-xl { background-size: min(30%, 300px) auto; } }