---
# System prepended metadata

title: "\U0001F3C5 Day 33"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 33

## 元件與通用類別 I

### 題目

嘗試將元件 [Card](https://bootstrap5.hexschool.com/docs/5.1/components/card/) 和通用類別 [Media Object](https://bootstrap5.hexschool.com/docs/5.1/utilities/flex/#media-object) 組合在一起，如圖所示：
![](https://i.imgur.com/EmCasDl.png)

> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）
> 內文可以複製下方或是自行使用假字
```
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：https://codepen.io/hexschool/pen/mdxMaay?editors=1010 -->


回報區
---


|      Discord      |                                CodePen / 答案                                 |
|:-----------------:|:-----------------------------------------------------------------------------:|
|     小白#2406     |             [CodePen](https://codepen.io/gracewhite/pen/NWYMmVL)              |
|  Iris Huang#6727  |               [CodePen](https://codepen.io/ythuang/pen/bGvKYyw)               |
|  Clara Cai#7097   |             [CodePen](https://codepen.io/Clara-Snowy/pen/MWVXxVm)             |
|    布魯諾#7239    |              [CodePen](https://codepen.io/bruno-yu/pen/vYRamRe)               |
|     大衛#4869     |        [CodePen](https://codepen.io/exnsrpjc/pen/PoRBmBa?editors=1010)        |
|      YC#2522      |                [CodePen](https://codepen.io/YCLu/pen/vYRamvp)                 |
|    Clara#1275     |              [CodePen](https://codepen.io/bsupixqu/pen/MWVBmRY)               |
|  Potatolee#7749   |             [CodePen](https://codepen.io/potatoleee/pen/NWYBjmJ)              |
|  christina#6185   |             [Codepen](https://codepen.io/chrisc0210/pen/jOzpmgg)              |
|     L0F0#8733     |          [CodePen](https://codepen.io/l0f0/pen/zYWLweq?editors=1000)          |
|   WEI_RIO#9342    |         [CodePen](https://codepen.io/wei_wu/pen/VwXBbOr?editors=1000)         |
|     咻蹦#1526     |               [CodePen](https://codepen.io/emmasyu/pen/WNzKOwV)               |
| bonnieli1414#4906 |      [CodePen](https://codepen.io/bonnieli1414/pen/YzajVBE?editors=1010)      |
|     威爾#1694     |               [CodePen](https://codepen.io/WILL_Wu/pen/eYMjRvB)               |
|  PeggyLiao#1552   |       [CodePen](https://codepen.io/PeiJu-Liao/pen/KKoBqmd?editors=1000)       |
|    Cliff#4606     |       [Codepen](https://codepen.io/Cliff_hex/pen/BarPZZg?editors=1000)        |
|   LinaChen#1796   |              [Codepen](https://codepen.io/LinaChen/pen/GRxBEYa)               |
|   Jenny真#7532    |      [CodePen](https://codepen.io/wei-chen-wu/pen/XWEBRYb?editors=1010)       |
|  Yuna Huang#2692  |              [CodePen](https://codepen.io/Yuna1002/pen/NWYBgJx)               |
|    Joyce#3790     |             [CodePen](https://codepen.io/joycehuang/pen/ZExjyZJ)              |
|    黃士桓#7654    |           [codePen](https://codepen.io/shr-huan-huang/pen/jOzpLbB)            |
|  LHchien33#6232   |              [codePen](https://codepen.io/lin_chien/pen/jOzpLPB)              |
|     int#7518      |        [Codepen](https://codepen.io/intHuang/pen/XWEBgvZ?editors=1010)        |
|     小諾#1866     |               [Codepen](https://codepen.io/noichan/pen/WNzKEJZ)               |
|     威0#6919      |      [Codepen](https://codepen.io/n0918679182/pen/rNdrGxg?editors=1000)       |
|    yo_yo#2678     | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/VwXBMyb?editors=1100) |
|     yuyu#6310     |        [Codepen](https://codepen.io/yuyu0905/pen/mdxjBzX?editors=1010)        |
|    JackC#0411     |               [Codepen](https://codepen.io/key0329/pen/xxWJPbd)               |
|    azami#5986     |                [CodePen](https://codepen.io/azami/pen/poLZdoo)                |
|   CloThEs#7837    |              [CodePen](https://codepen.io/CloThEsZ/pen/QWmBOpW)               |
|   Amberhh #2465   |               [Codepen](https://codepen.io/Amberhh/pen/PoRBOjL)               |
|  我是泇吟 #5189   |              [CodePen](https://codepen.io/kljuqbxs/pen/eYMjegd)               |
|     Vera#5592     |               [CodePen](https://codepen.io/skvera/pen/abYjVGE)                |
|    Aaron#2964     |              [CodePen](https://codepen.io/narrowd4c/pen/rNdrGVb)              |
|    Henry#7386     |                [CodePen](https://codepen.io/h1nr9/pen/RwMBjOm)                |
|     Chi#7605      |               [Codepen](https://codepen.io/YoChi84/pen/vYRaWqM)               |
|     Melon#0380      |               [Codepen](https://codepen.io/BalaFang/pen/NWYBXLv)               |
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/abYjVrG)|
|雷雷#7844|[codepen](https://codepen.io/lei-yi-jie/pen/BarPYZr?editors=1010)|
|suihsilan#9485|[codepen](https://codepen.io/suihsilan/pen/gOejXdN)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/KKoBozK) |
| Hsiu#8767 | [Codepen](https://codepen.io/amy-hsiu/pen/MWVBaEb?editors=1010) |
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/bGvjMbE)|
| Yunei#6323 |[codepen](https://codepen.io/Yunei/pen/mdxjLLV)|
|鉦勝 #8333 |[codepen](https://codepen.io/atckmax823/pen/WNzKgxo?editors=1010)|
|ssozr#4680 |[codepen](https://codepen.io/ssozr/pen/OJvwBJg)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/VwXBEjj?editors=1100)|
|   YU #0618    | [CodePen](https://codepen.io/yoken_/pen/dymjadN)      |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/JjLBeOO?editors=1000)|
|yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/zYWLyvW)| 
| NeilLin#3009 |  [CodePen](https://codepen.io/a0071421/pen/qBoyeNQ?editors=1000)| 
| 黑白兔#0684 |  [CodePen](https://codepen.io/johnny329/pen/OJvoVov)| 
| kevin8349 #6131 |  [CodePen](https://codepen.io/kun8349/pen/dymqoeO?editors=1010)| 
| Tori#1248 |  [CodePen](https://codepen.io/FlyTori/pen/rNdZOXz)| 
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/QWmVGjQ) |
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/XWEPRjQ)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/zYWJpVy)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/bGvxLvv?editors=1010)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/NWYLzXY)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/gOedjXB)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/poLxomg)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/RwMeNQz)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/JjLmWYp)|
|阿蘇 #8531|[Codepen](https://codepen.io/susu3131/pen/yLKRoGo?editors=1010)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/GRxYyva)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/GRxYXqz)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/PoRxGvw)|
|郭芙蘭#6372|[Codepen](https://codepen.io/flora_Kuo/pen/vYRQxNr)|
| Fang#4680 |[Codepen](https://codepen.io/std95174/pen/qBoQQmb?editors=1010)|
| kancheng#3915 |[Codepen](https://codepen.io/kancheng/pen/qBoQvWB)|
| J_u_d_y#5993 | [Codepen](https://codepen.io/J_u_d_y/pen/bGvOxgz) |
| Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/poLGPWR) |
| allen#0876 | [CodePen](https://codepen.io/sodarman/pen/poLGZqx?editors=1010) |
| Cream#3449 | [Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/WNzmoqG?editors=1010) |
|Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/poLYELm) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/XWEGzmq)|
|mei#8421|[CodePen](https://codepen.io/Shila-Chen/pen/oNqOjYm)|
|Nini Chen#5790|[CodePen](https://codepen.io/ninistyle/pen/LYdqVzg?editors=1100)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/PoRvQay?editors=1000)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/LYdKLVO)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/PoRrRwx)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/bGvPOjW)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/BarXdwK?editors=1100)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/jOzgZod)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/OJZVGPz)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/LYmpXPX)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/KKRgvJZ?editors=1100)|