:::spoiler 目錄
[TOC]
:::
<hr>

:::success
【[題目連結](https://hackmd.io/tzVvKM28QDq2qjB7ioIN_Q?view)】
<!--
【檢核】
- [X] 參與人數: 8人
- [X] 參與名單
- [X] 任務內容
- [x] 討論截圖 -->

:::

## 參與人員
- [X] 阿榮#8277
- [X] PayRoom#8328
- [X] WA#9787
- [X] Tina02
- [X] AYA
- [X] I401#7101
- [ ] abalun#6727
- [ ] jia yu#8896
- [X] 無敵笨笨貓#3628
- [X] 貓咪#6294

## 任務一：請一起編譯 Bootstrap SCSS，並修改變數，讓主色 primary 能變更自己想要的色系，整合自己的 all.scss，並確保有編譯成功，有必要時，組員彼此用 ZOOM 協助除錯，或召喚助教協助

### ✅任務完成
| # | 組員 | 連結 |
|:-:|:----:|:--------:|
|1|阿榮|[repo](https://github.com/Peg-L/week6-booking-tickets)|

> 如果想不到變數關鍵字，可以利用 dev tools 來檢查元素，看 styles 的變數名稱是什麼。

## 任務二：請試著使用 Bootstrap，做這一頁格線系統[練習設計稿](https://bootstrap.hexschool.com/docs/4.2/examples/grid/)
| # | 組員 | 連結 |
|:-:|:----:|:--------:|
|1|WA|[codepen](https://codepen.io/ldddl/pen/NWEZEdN)|

---

## 任務三：請討論[第六週版型](https://rpg.hexschool.com/training/36/task) 需如何實作

### 🗣️討論

### `icofont` 怎麼用

1. 加入 `collection`
2. 下載
3. 整組放到專案的資料夾裡面
4. `import` 或 `<link>` 都可以

---

### pagination 前後和數字高度不一致


:::success
- 解法：小東西可以寫死寬高，因為不會影響到其他區塊

<a class="d-flex align-items-center justify-content-center p-0"  
   style="height: 40px;width: 40px;>

:::

---

### navbar 的漢堡選單會被擠下去


:::success
- 解法：搜尋輸入框要自己調整寬度
:::

---

### 首頁的分類區塊

- 用 `padding` 整個歪掉

:::success

- 解法：外層容器設定為正方形

aspect-ratio: 1 / 1;



:::

---

### 跑馬燈或布條


:::success

- `WA`：分享好看的跑馬燈網站
> <https://ringo-dou.com/>


- `貓咪`：布條作法可以用 `overflow: hidden`，把超出去的文字藏起來

:::

---

### 標題文字可以透過變數直接修改全部

- `heading` 區域

- 或是直接匯入 `700` 的 `CDN`

---

### 注意：`border` 寬度在不同裝置會有不同寬度QQ

- 大標在桌機寬度 `3`；手機寬度 `2`


---

### 標籤的 hover 效果
> 本來想用偽元素來畫左側的 粗 border，但會被 button 的 border 影響，外面多一圈黑色

1. 直接寫 border 2 次，[Codepen](https://codepen.io/NoNameNote/pen/BavBRwV)
2. 使用 ul>li

## 語音 & 文字討論截圖

> 【討論時間】： [time=Sun, Aug 13, 2023 20:00 PM]