---
# System prepended metadata

title: 北 13 組｜第八週主線任務討論(四人小組)

---

---
tags: 北 13 組｜第八週小組討論
---
# 北 13 組｜第八週主線任務討論(四人小組)
> 討論日期及時間 
> 1. 2023/08/27 20:00-22:30
> 2. 2023/08/30 22:00
> 3. 2023/09/06 20:30
> 4. 2023/09/09 20:30
> 
**組員參與名單(4)：**
name / github username
- [ ] andersonshen / AndersonShen2020
- [ ] ChrisSQR / ChrisSQR-alpha
- [ ] m_m / minnnn7716
- [ ] homer / buckhorn17


## 第八週 - 大型線上服務[【設計版型】](https://www.figma.com/file/zth5XUKMHePyTIxwxYbuBi/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W8---AI-%E8%99%9B%E6%93%AC%E9%99%AA%E4%BC%B4?type=design&node-id=622-1038&mode=design&t=PIQORYJ8KrRE7Cix-0)、[【Github】](https://github.com/AndersonShen2020/2023_web-layouting_week8)

1. 執行方式/目標/開會日期：


2. 區塊認領分工
    **分工名單：**
    | 編號 | 項目（請參考下方附圖） | 組員 | 狀態 |
    | --- | ------------------ | ---- | --- |
    | 1 | * 建置Github環境             | andersonshen | 完成 |
    | 2 | * 定義屬性(utils/variables等) | andersonshen | 隨組員擴增中 |
    | 3 | * Navbar / Footer           | homer        | 完成 |
    | 4 |  Home - section1            | ChrisSQR     | 完成 |
    | 4 |  Home - section2 (swiper)   | ChrisSQR     | 完成 |
    | 4 |  Home - section3            | m_m          | 完成 |
    | 4 |  Home - section4 (swiper)   | m_m          | 完成 |
    | 4 |  Home - section5            | homer        | 完成 |
    | 4 |  Home - section6            | homer        | 完成 |
    | 6 | Product (全頁)               | andersonshen | 完成 |
    | 7 | About us (全頁)              | homer        | 完成 |
    | 8 | News / News-2 (全頁)         | m_m          | 完成 |
    | 9 | FAQ                         | m_m          | 完成 |
    | 10 | Contact us                 | ChrisSQR     | 完成 |
    | 11 | Sign up (含Modal) / Sign in | ChrisSQR    | 完成 |


## 作業說明

**繳交內容**
1. 您的 Discord 名稱
2. 您的作業等級，請見下方等級表，例如 LV1
3. 作業網址：請提供 GitHub Pages 、Github Repo 連結提交作業，以方便助教與講師檢視
4. 訓練菜單：請到此*連結*挑選 2~3 個訓練菜單，並回報您增加哪些技能的熟練度。
5. 是否有分組：例如：獨自完成、3人分組，並提供各個 discord ID

**分組細節**
1. 可一起組隊完成第八關 LV2 以上
2. 需提供 GitHub Repo，我們會從 commit 更新列表，檢視各組員做了哪些頁面
3. 每位組員至少需做一頁

**作業等級表**
1. LV1：任選兩頁含 RWD
2. LV2（80、100% 獎品門檻）：至少做兩頁含 RWD，其中一頁必須為首頁
3. LV3：做三頁 RWD 頁面（其中一個頁面要做首頁，且三個頁面都需要包含效果）
4. LV4：全部頁面與效果都做

**作業地雷**
* 使用 Bootstrap 需要透過 _variables.scss 來修改主色等設定
* 頁數需以實際網站頁數計算
* 需至少完成 Lv1 作業需求
* 伸縮時不可以出現 x 軸與跑版的狀況
* 需使用線上圖示
* 作業須符合此[作業規範](https://hackmd.io/XbKPYiE9Ru6G0sAfB5PBJw)





## 08/27(日) 討論紀錄
### 使用環境
* Vite＋Vue
* node v19.6.0
* npm v9.8.1
---

### 使用套件
* Bootstrap
* [Google font](https://fonts.google.com/share?selection.family=Noto%2BSans%2BTC:wght@400;500;700;900%7CShrikhand)
  ```
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Shrikhand&display=swap" rel="stylesheet">
  ```
* Material Icons
  ```
  <link href="https://fonts.googleapis.com/css?family=Material+Icons%7CMaterial+Icons+Outlined%7CMaterial+Icons+Two+Tone%7CMaterial+Icons+Round%7CMaterial+Icons+Sharp" rel="stylesheet">
  ```
* Swiper
  ```
  <!-- 貼到 <head> 內 -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
  />

  <!-- 貼到 </body> 之前 -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  ```

---

### 變數設定（[Figma 連結](https://www.figma.com/file/AInz5IaOD5rw8WhGloAPLM/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W8---AI-%E8%99%9B%E6%93%AC%E9%99%AA%E4%BC%B4?type=design&node-id=464%3A2697&mode=design&t=YDV0aBhpjvTFG4Hi-1)）
* spacing：4 的倍數
* font
  * font-size：4 的倍數
  * font-family
    ```
    $font-tw: 'Noto Sans TC', sans-serif, 
    $font-en: 'Shrikhand', cursive,
    ```
    ![](https://hackmd.io/_uploads/BJO4BytT3.png)
* color
  ```
  // primary
  primary: #7000FF,
  primary100: #6E01F8,
  primary200: #380C7E,
  primary300: #1F0F39,
  primary400: #11002D,

  // gradient
  // figma 提供的漸層程式碼
  gradient-liner: linear-gradient(180deg, #7000FF 0%, rgba(17, 0, 45, 0.00) 100%),
  gradient-radial: radial-gradient(50% 50.00% at 50% 50.00%, #28085C 0%, rgba(0, 0, 0, 0.00) 100%),

  // neutral
  black: #000000,
  white: #FFFFFF,
  light: #E9E2F3,
  ```
  ![](https://hackmd.io/_uploads/HJslQkKa3.png)
  
---

### git commit 用詞
* feat: 增加 index.html / 增加 ... 區塊 / 增加 ... 功能
* update: 調整 ... 功能 / 調整 ... 變數
* fix: 修正 ... 錯誤
* delete: 刪除 ... 檔案

---

## 08/30(三) 討論紀錄
### 共用文件更新內容
  * `_variable.scss` 
    * 453 行，新增 spacer
      ```
      16: $spacer * 4,    // 64px
      30: $spacer * 7.5,  // 120px
      ```
    * 675 行，新增字重
      ```
      $font-weight-black: 900; // *custom
      ```
  * `utilities.scss`
    * 566 行，新增字重
      ```
      black: $font-weight-black,
      ```
  * 新增檔案
    * assets > stylesheets > pages > 新增 `_faq.scss` ，並在 `all.scss` 引入

---
### 待更新內容
1. 漸層背景採用 @include
2. container 需新增 1784px 尺寸

---
## 09/02(六) 討論紀錄
* `_variable.scss` 
  * 新增 spacer 20、40
    ```
    20: $spacer * 5,
    40: $spacer * 10,
    ```
* `all.scss`、`_base.scss`
  * 新增字體：Saira Extra Condensed
    ```
    // all.scss：更新 import url
    @import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Shrikhand&family=Saira+Extra+Condensed:wght@300&display=swap";

    // base.scss：新增 class
    .font-number {
      font-family: 'Saira Extra Condensed', sans-serif !important;
    }
    ```
    ![](https://hackmd.io/_uploads/rJoDxMxC3.png)
* `_utilities.scss` 新增 `letter-spacing` 
  ```
  .letter-spacing-4 {
  letter-spacing: $spacer;  // 16px
  }

  .letter-spacing-5 {
    letter-spacing: $spacer * 1.25;  // 20px
  }

  .letter-spacing-12 {
    letter-spacing: $spacer * 3;  // 48px
  }
  ```
* `_bg-gradient.scss` 新增放射狀的漸層 mixin
---
## 9/6(三) 20:30 完成 80%

---
## 9/9(六) 20:30 全部完成

### 任務提交內容

Discord 名稱：
作業等級：LV3
作業網址：[repo](https://github.com/AndersonShen2020/2023_web-layouting_week8)、[pages](https://andersonshen2020.github.io/2023_web-layouting_week8/)
訓練菜單：
四人分組：
1. andersonshen ( AndersonShen2020 )
2. ChrisSQR ( ChrisSQR-alpha )
3. homer ( buckhorn17 )
4. m_m ( minnn7716 )

分工名單：
![](https://hackmd.io/_uploads/r16kQy9Ch.png)

![](https://hackmd.io/_uploads/SywJcDIVh.png)
