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

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

商品選單和商品要一起規劃，這一篇就先列出選單部分的程式碼。

<div class="navbar10">
	<a href="#" class="list-name dg-m">甜點類別</a>
	<a href="#" class="dg-m dg active">所有甜點 (45)</a>
	<a href="#" class="dg-m dg">本日精選 (10)</a>
	<a href="#" class="dg-m dg">人氣精選 (26)</a>
	<a href="#" class="dg-m dg">新品上市 (12)</a>
</div>

//_index.scss
.dg-m {
    font-size: 24px;
    font-weight: 600;
    text-align: center;

    &:hover {
      background-color: #e7eeea;
    }
  }

  .list-name {
    background-color: #3f5c46;
    color: white;

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

  .dg {
    color: #3f5c46;
  }
.navbar10 {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-right: 10px;

    a {
      border: 1px solid #e7eeea;
      padding: 16px 48px;

      &.active {
        background-color: #e7eeea;
      }
    }
  }

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

參考資料：

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

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