北 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 ```  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />  <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)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.