1.剛開始先到這裡下載資料夾
https://drive.google.com/drive/folders/1_MrGCQm2erGjGo8lD5vZ6DM1VNeKjluj?usp=sharing

2.Body 部分
**CSS**

body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

3.Header 部分
**HTML**

<header>
    <nav>
      <ul class="menu">
        <li class="logo">
          <a href="#"><img src="src/images/logo.png" height="40px"/></a>
        </li>
        <li class="menu_item"><a href="#">登入</a></li>
        <li class="menu_item"><a href="#">登出</a></li>
      </ul>
    </nav>
    <div class="banner">
      <div class="container">
        <h1 id="logo">集合啦！動物森友會</h1>
        <hr />
        <p>這是款生活模擬遊戲，玩家扮演的角色參與Nook Inc.推出的「無人島移居計劃」，打算展開全新的生活</p>
      </div>
    </div>
  </header>

**CSS**

a {
    color: white;
    text-decoration: none;
}

nav {
    background: #fff;
    padding: 5px 50px;
    font-weight: 700;
    border-bottom: 1px solid #83d3c9;
}

.menu {
    display: flex;
    list-style: none;
}

.logo {
    flex: 1;
}

.menu_item {
    margin: 9px 10px;
}

.menu_item a {
    padding: 8px 10px;
    background: #83d3c9;
    color: #fff;
}
.banner {
    background-image: url(src/images/background.jpeg);
    background-size: cover;
    min-height: 650px;
    position: relative;
}

.banner .container {
    position: absolute;
    width: 60%;
    background: rgba(0, 0, 0, 0.7);
    padding:  50px;
    left: 20%;
    top: 40%;
}

.banner .container h1 {
    font-family: 'Arvo';
    font-weight: 700;
    color: #ed786a;
    text-shadow: 0.05em 0.075em 0 rgb(256 256 256 / 10%);
    font-size: 3em;
    letter-spacing: 13px;
}

.banner .container p {
    margin: 1.25em 0 0 0;
    letter-spacing: 2px;
    color: white;
    font-weight: 700;
}

.buttonReadMore {
    padding: 1em;
    color: white;
    font-weight: 700;
    border: 0;
    margin-top: 3em;
    background-color: #9999ff;
    cursor: pointer;
}

4.Main 部分

<main>
    <section id="features">
      <div class="container">
        <h2>大家好，這是動物森友會的島民們</h2>
        <div class="islander">
          <div class="islanderHead1"></div>
          <div class="islanderStory">
            <h3>瑞秋 / paula / レイチェル</h3>
            <p>種族：大熊。 個性：大姊姊。 性別：女孩。</p>
            <p>座右銘：流行總是周而復始。口頭禪：耶呼。</p>
            <p>喜歡的顏色：橘色、綠色。 喜歡的風格：可愛、活力。</p>
          </div>
        </div>
        <div class="islander">
          <div class="islanderHead2"></div>
          <div class="islanderStory">
            <h3>小岡 / papi / オカッピ</h3>
            <p>種族：馬。 個性：悠閒。 性別：男孩。</p>
            <p>座右銘： 秋高馬肥。 口頭禪：聽說是。</p>
            <p>喜歡的顏色：橘色、淺藍色。 喜歡的風格：簡約。</p>
          </div>
        </div>
        <div class="islander">
          <div class="islanderHead3"></div>
          <div class="islanderStory">
            <h3>小敏 / mint / ミント</h3>
            <p>種族：松鼠。 個性：悠閒。 性別：男孩。</p>
            <p>座右銘： 色彩繽紛的世界。 口頭禪： 喔哼。</p>
            <p>喜歡的顏色： 粉紅色、紫色。 喜歡的風格：華麗、可愛。</p>
          </div>
        </div>
      </div>
    </section>
  </main>

**CSS**

main {
    padding: 50px;
    background: #f3f6fa;
}

#features {
    text-align: center;
    background-color: white;
    padding: 6em 0;
}

#features h2 {
    font-size: 1.65em;
    font-weight: 400;
    letter-spacing: 4px;
    margin: 0 0 1.5em 0;
    line-height: 1.75em;
    color: #888;
}

#features .container {
    padding: 0 6em;
}

.islander {
    display: flex;
}

.islanderHead1{
    width: 15em;
    height: 15em;
    border-radius: 50%;
    background-position: top;
    background-image: url(src/images/islanderHead1.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 5px 5px 10px #d3c983;
    margin-right: 15em;
    margin-left: 6em;
}

.islanderHead2{
    width: 15em;
    height: 15em;
    border-radius: 50%;
    background-position: top;
    background-image: url(src/images/islanderHead2.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 5px 5px 10px #d3c983;
    margin-right: 15em;
    margin-left: 6em;
}

.islanderHead3{
    width: 15em;
    height: 15em;
    border-radius: 50%;
    background-position: top;
    background-image: url(src/images/islanderHead3.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 5px 5px 10px #d3c983;
    margin-right: 15em;
    margin-left: 6em;
}

.islanderStory{
    text-align: left;
    padding: 5em 0;
    line-height: 2em;
}

5.Footer 部分
**HTML**

<footer>
    <ul>
      <li>© Untitled. All rights reserved.</li>
      <li>Design: HTML5 UP</li>
    </ul>
</footer>

**CSS**

footer {
    background: #272833;
    padding: 3em 0;

}

footer ul {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    text-align: center;
}

footer li {
    display: inline;
    margin: 0 1em;
}

6.JS 部分
**JS 動畫，滑鼠滑到 button 上會換色**

function buttonChangeColor() {
  document.getElementById('readMoreButton').onmouseover = function () {
      this.style.backgroundColor = "#9933ff";
  }

  document.getElementById('readMoreButton').onmouseout = function () {
    this.style.backgroundColor = "#9999ff";
  }
}

window.onload = buttonChangeColor;

7.課程網址 ＰＰＴ
https://docs.google.com/presentation/d/1J9QhAKgIRP-jNxc0JZFoAcZQ0HlMka1GL76sgSoDrPI/edit?usp=sharing