建立html頁面、css樣式檔案、link引入css樣式，先寫入標題html內容和css內容

《標題部分》

<nav id="navbar">
    <h1 class="logo">
      <span class="text-primary">
        <i class="fas fa-book-open"></i></span>
      米修線上
    </h1>
    <ul>
      <li><a>Home</a></li>
 

      <li><a>What</a></li>
      <li><a>Who</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>

/* rest */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height
 
: 1.4;
}
a {
  text-decoration: none;
}
p {
  margin: 0.75rem 0;
}
/* utility classes */
.text-primary {
  color: #93cb52;
}
/* 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裡小標題和內容新增css樣式

<!-- header:Home -->
  <header id="home">
    <div class="home-content">
      <h1 class="l-heading">歡迎來到米修線上</h1>
      <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus alias ut ipsa laudantium eveniet
        rerum!</p>
      <a href="#what" class="btn">閱讀更多</a>
    </div>
  </header>

css樣式

/* home頁面 */
#home {
  background: url('../img/home.jpg') no-repeat center center/cover;
  height: 100vh;
  color: #fff;
  position: relative;
}
#home .home-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 0 2rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

<section id="what" class="bg-light py-1">
    <div class="container">
      <h2 class="m-heading text-center"><span class="text-primary">What</span> We Do</h2>
      <div class="items">
        <div class="item">
          <i class="fas fa-university fa-2x"></i>
          <h3>前端基礎課程</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, animi!</p>
        </div>
        <div class="item">
          <i class="fas fa-book-reader fa-2x"></i>
          <h3>前端進階課程</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, animi!</p>
        </div>
        <div class="item">
          <i class="fas fa-pencil-alt fa-2x"></i>
          <h3>前端高階課程</h3>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet, animi!</p>
        </div>
      </div>
    </div>
  </section>

使用css調整what we do小標題和內容樣式

/* 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 id="who">
    <div class="who-img"></div>
    <div class="who-text bg-dark p-2">
      <h2 class="m-heading"><span class="text-primary">Who</span> We Are</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptatem, voluptatum omnis corrupti tempora
        magnam veritatis, aliquid dolore praesentium consectetur optio laudantium sed hic doloremque vero accusamus et!
        Vitae, quos.</p>
      <h3>Our Team</h3>
      <ul class="list">
        <li>Mark Smith:CEO</li>
        <li>Shannon Johnson:CFO</li>
        <li>John Corbit:Lead Accountant</li>
        <li>Janet Williams:Investment Manager</li>
        <li>Kara Jackson:Senior Accountant</li>
      </ul>
    </div>
  </section>

css樣式

/* section:who we are */
#who {
  display: flex;
}
#who div {
  flex: 1;
  flex-basis: 50%;
}
#who .who-img {
  background: url('../img/who we are.jpg') no-repeat center center/cover;
}

OurClients部分只需五個imglogo圖片

<div class="items py-1">
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
        <div><img src="./img/logo.jpg" alt="clients"></div>
      </div>

Contact Us 寫入字型內容插入圖片、input、button按鈕

<!-- section:contact us -->
  <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="email">郵箱</label>
          <input type="email" name="email" id="email" placeholder="請輸入郵箱">
        </div>
        <div class="form-group">
          <label for="phone">電話</label>
          <input type="text" name="phone" id="phone" placeholder="請輸入電話">
        </div>
        <div class="form-group">
          <label for="message">反饋資訊</label>
          <textarea name="message" id="message" placeholder="請輸入內容"></textarea>
        </div>
      </form>
      <input type="submit" value="send" class="btn btn-dark">
    </div>
    <div class="contact-img"></div>
  </section>

css樣式

/* section:contact */
#contact {
  display: flex;
}
#contact .contact-form,
#contact .contact-img {
  flex: 1;
}
#contact .contact-img {
  background: url('../img/contact.jpg') no-repeat center center/cover;
}
#contact .contact-form .form-group {
  margin: 0.75rem;
}
#contact .contact-form label {
  display: block;
}
#contact .contact-form input,
#contact .contact-form textarea {
  width: 100%;
  padding: 0.5rem;
}