---
# System prepended metadata

title: 第二週小組任務

---

# 第二週小組任務
* 組別：22組
* 10題Flex練習!完成的夥伴請留下codepen連結及你的Discord稱謂在對應題號下呦!

### 第一題 Flex 精神時光屋
#### CodePen實作：1.並排卡片 
| 第一題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/PoQbYMV |
| :heavy_check_mark: | LHchien33 | https://codepen.io/lin_chien/pen/YzeNeQp |
| --- | ------------ | ------- |


#### CodePen實作：2.雙欄排版
| 第二題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/wvyogVW |
|:heavy_check_mark: | LHchien33 | https://codepen.io/lin_chien/pen/gOvgePd |
| --- | ------------ | ------- |


#### CodePen實作：3.雙欄選單設計 
| 第三題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/rNJWyOK |
| :heavy_check_mark: | LHchien33 | https://codepen.io/lin_chien/pen/vYdxgwV?editors=1100 |
| --- | ------------ | ------- |


#### CodePen實作：4.表頭表尾設計
| 第四題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/gOvLmBm |
| :heavy_check_mark: | LHchien33 |https://codepen.io/lin_chien/pen/eYVvKGb?editors=1100 |
| --- | ------------ | ------- |


#### CodePen實作：5.常見三種排版
| 第五題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/LYQbyVN |
| :heavy_check_mark: | LHchien33 | https://codepen.io/lin_chien/pen/vYdxVwm?editors=1100 |
| --- | ------------ | ------- |


#### CodePen實作：6.圖文並排
| 第六題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 |https://codepen.io/bruno-yu/pen/WNMoOqo |
| --- | ------------ | ------- |
| --- | ------------ | ------- |

#### CodePen實作：7.首頁橫幅排版
| 第七題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/ZErBJrM |
| --- | ------------ | ------- |
| --- | ------------ | ------- |


#### CodePen實作：8.圖文並排設計
| 第八題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 |  https://codepen.io/bruno-yu/pen/JjpbrKG |
| --- | ------------ | ------- |
| --- | ------------ | ------- |


#### CodePen實作：9.訂單明細
| 第九題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/xxYRXdV |
| --- | ------------ | ------- |
| --- | ------------ | ------- |

#### CodePen實作：10.產品列表 
| 第十題 | Discord Name | CodePen |
| --- | -------------- | ------- |
| :heavy_check_mark: | 布魯諾#7239 | https://codepen.io/bruno-yu/pen/GRQNPGj  |
| --- | ------------ | ------- |
| --- | ------------ | ------- |


### 討論截圖


 ![](https://i.imgur.com/BVKZWgK.jpg) 

