Pexels:線上圖片網站,大量圖片資源,建立一個資料夾使用Visual code開啟建立專案index為主頁面，接著再建立兩個副頁面，contact和about、給主頁面新增浮動效果作為標題，新增滑鼠滑入效果 

<!-- 頭部標題區域 -->
  <header>
    <nav id="navbar">
      <div class="container">
        <!-- 左邊米奇logo -->
        <h1><a href="index.html">米奇線上</a></
 
h1>
        <ul>
          <li><a class="current" href="index.html">首頁</a></li>
          <li><a href="about.html">關於我們</a></li>
          <li><a href="contact.html">聯絡我們</a></li>
        </ul>
      </div>
    </
 
nav>
  </header>

中間內容使用background插入一個圖片，設定h1內容歡迎來到米奇線上用span標籤使米奇線上與前面內容隔開修改米奇線上字型顏色，寫入一段英文改為居中

<h1>歡迎來到<span class="text-primary">米奇線上</span></h1>
          <p>Lorem ipsum dolor sit amet, consectetur 
            adipisicing elit. Voluptatem iure 
            aspernatur dicta optio repudiandae! 
            Assumenda reprehenderit debitis voluptates 
            nisi, repellendus praesentium earum modi 
            nihil? Enim ab saepe autem corporis porro. 
          
 
</p>

下面部分插入一個圖片分為左下角一個小模組，右下角插入一段米奇線上介紹，設定一個按鈕閱讀更多跳轉到about分頁面中

<section id="home-info" class="bg-dark">
    <div class="info-img"></div>
    <div class="info-content">
      <h2><span class="text-primary">米奇線上</span> 介紹</h2>
      <p>Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit. Voluptatem iure 
        aspernatur dicta optio repudiandae! 
        Assumenda reprehenderit debitis voluptates 
        nisi, repellendus praesentium earum modi 
        nihil? Enim ab saepe autem corporis porro. 
      </p>
      <a class="btn btn-light" href="about.html">閱讀更多</a>
    </div>
  </section>

底部用了三個模組，三個模組內有三個圖示使用Font Awesome圖示庫，官網網址:fontawesome.com.cn