github pages：https://rochelwang1205.github.io/sweetie/

github repo：https://github.com/rochelwang1205/sweetie

商品區塊由六個卡片組成，結構相似，可以善用emmet完成和快捷鍵：

goods

<div class="goods10">
            <ul class="card">
              <li class="tag">本日精選</li>
              <li class="favorite"><a href="#"><span class="material-icons">
                favorite_border
                </span></a></li>
              <li><img src="./assets/images/p-1.png" alt="goods1"></li>
              <div class="itm10"><span>焦糖馬卡龍</span><span>NT$ 450</span></div>
              <li><input type="button" value="加入購物車" class="btn10"></li>
            </ul>
            <ul class="card">
              <li class="tag">本日精選</li>
              <li class="favorite"><a href="#"><span class="material-icons">
                favorite_border
                </span></a></li>
              <li><img src="./assets/images/p-2.png" alt="goods2"></li>
              <div class="itm10"><span>焦糖馬卡龍</span><span>NT$ 450</span></div>
              <li><input type="button" value="加入購物車" class="btn10"></li>
            </ul>
....
//商品的結構都一樣，這邊就列出兩個商品

.goods10 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    box-sizing: border-box;
    justify-content: space-between;
    width: fit-content;
    gap: 20px;

    .card {
      box-sizing: border-box;
      flex-direction: column;
      text-align: center;
      outline: 1px solid #e7eeea;
      position: relative;
      max-width: 300px;
      margin: 0 auto;

      .tag {
        position: absolute;
        width: 36px;
        height: 106px;
        background-color: #3f5c46;
        color: #e7eeea;
        font-weight: normal;
        padding: 5px;
        top: 0;
        left: 20px;
        line-height: 1.5;
      }

      .favorite {
        position: absolute;
        top: 20px;
        left: 260px;

        img {
          width: 24px;
        }
      }

      img {
        width: 300px;
      }

      .itm10 {
        font-size: 20px;
        font-weight: normal;
        color: #3f5c46;
        padding: 10px 0px;

        span {
          padding: 11px 29px;
        }
      }

      .btn10 {
        width: 100%;
        padding: 20px;
        background-color: #e7eeea;
        color: #3f5c46;
        font-size: 24px;
        font-weight: bold;
        border: none;

        &:hover {
          background-color: #3f5c46;
          color: white;
          cursor: pointer;
        }
      }
    }
  }
}

pagination

切出設計稿的效果：

<div class="pagination">
	<span class="material-icons">arrow_left</span>
	<span class="active-d">1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span class="material-icons">arrow_right</span></div>

.pagination {
  display: flex;
  justify-content: right;
  margin: 30px;
  max-width: 940px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid #e7eeea;
    color:#3f5c46;
    font-weight: 600;

    &:hover {
      background-color: #3f5c46;
      color: white;
      cursor: pointer;
      border: none;
    }

    &.active-d {
      background-color: #3f5c46;
      color: white;
    }
  }
}

💡分享：近期六角學院分享20份可商用得設計稿(真的太佛了)，附上文章連結：https://www.facebook.com/hexschool/posts/pfbid02cDLUBSiErvbdgw9HtqeKWQpgCLWZEY8dvPtjq53VU6Amc9ayoxPGpvg7K9BFpyZZl(內含設計稿網址)，分享給大家~

參考資料：

1. 甜點店商設計稿(可商用)-吳俊儀：https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid/?fbclid=IwAR1FdRhh7aYFQ67oXv3lO1BfhPr7ScYLrSSB7J83txA2TmTDZHaMJxE8deI

以上實作僅根據此系列提到的部分進行練習，細節沒有完全符合設計稿。請斟酌參考。