contact 和 footer 的頁面製作
阿新 • • 發佈:2022-03-25
1. html 結構
<section id="contact"> <div class="contact-form bg-primary p-2"> <h2 class="m-heading">Contact Us</h2> <p>如有疑問請填寫以下資訊聯絡我們!</p> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" name="name" id="name" placeholder="情輸入姓名"> </div> <div class="form-group"> <label for="name">郵箱</label> <input type="email" name="email" id="email" placeholder="情輸入郵箱"> </div> <div class="form-group"> <label for="message">反饋資訊</label> <textarea name="message" id="message" placeholder="情輸入內容"></textarea> </div> </form> <input type="submit" class="btn btn-dark"> </div> <div class="contact-img"></div> </section> <!-- foter --> <foter id="main-footer" class="bg-dark text-center py-1"> <div class="container"> <p>Copyright © 2021, 米修線上, All Right Reserved</p> </div> </foter>
2. css
/* rest */ * { padding: 0; margin: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; } a { text-decoration: none; } p { margin: 0.75rem 0; } /* utility classes */ .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; overflow: hidden; } .text-center { text-align: center; } .bg-light { background: #f4f4f4; color: #333; } .bg-dark { background: #333; color: #fff; } .bg-primary { background: #93cb52; color: #fff; } .p-1 { padding: 1.5rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } .text-primary { color: #32cb52; } .l-heading { font-size: 4rem; margin-bottom: 0.75rem; line-height: 1.1; } .m-heading { font-size: 2rem; margin-bottom: 0.75rem; line-height: 1.1; } .lead { font-size: 1.3rem; margin-bottom: 2rem; } .py-1 { padding: 1.5rem 0; } .py-2 { padding: 2rem 0; } .py-3 { padding: 3rem 0; } .btn { display: inline-block; color: #fff; background-color: #93cb52; padding: 0.5rem 2rem; border: none; border-radius: 5px; } .btn:hover { background-color: #7ab436; } .btn-dark { background: #333; color: #fff; } .list { margin: 0.5rem 0; list-style: none; } .list li { padding: 0.5rem 0; border-bottom: #444 dotted 1px; } /* navbar */ #navbar { display: flex; /* 兩端對齊 */ justify-content: space-between; background: #333; color: #fff; position: sticky; top: 0; z-index: 1; padding: 1rem; } #navbar ul { display: flex; list-style: none; /* 以中心點進行對齊 */ align-items: center; } #navbar ul li a { color: white; padding: 0.75rem; margin: 0 0.25rem; } #navbar ul li a:hover { background: #93cb52; border-radius: 5px; } /* home */ #home { background: url('../img/1.jpg') no-repeat center center/cover; height: 100vh; color: #ffffff; position: relative; } #home .home-content { display: flex; /* 垂直方向排列 */ flex-direction: column; /* 垂直居中 */ justify-content: center; /* 水平居中 */ align-items: center; text-align: center; height: 100%; padding: 0 2rem; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.4); } /* section: what we do */ #what .items { display: flex; padding: 1rem; } #what .items .item { flex: 1; text-align: center; } #what .items .item i { background: #93cb52; padding: 1rem; border-radius: 50%; margin-bottom: 1rem; } /* section : Who We Are */ #who { display: flex; } #who div { flex: 1; flex-basis: 50%; } #who .who-img { background: url('../img/2.jpg') no-repeat center center/cover; } /* section: clients */ #clients .items { overflow: hidden; display: flex; justify-content: space-around; } #clients .items img { display: block; margin: 0 auto; border-radius: 50%; width: 100%; height: 100%; } #clients .items div{ justify-content: space-around; width: 100px; height: 100px; border-radius: 50%; } /* section: contact */ #contact { display: flex; } #contact .contact-form, #contact .contact-img { flex: 1; } #contact .contact-img { background: url('../img/2.jpg') no-repeat center center/cover; } #contact .contact-form .from-group { margin: 0.75rem; } #contact .contact-form label { display: block; } #contact .contact-form input, #contact .contact-form textarea { width: 100%; padding: 0.5rem; }