# 🏅 Day 32 - 元件與通用類別 I

### 題目

嘗試將元件 [dropdowns](https://getbootstrap.com/docs/5.3/components/dropdowns/#dropstart) 、 元件 [Card](https://getbootstrap.com/docs/5.3/components/card/) 、通用類別 [Media Object](https://getbootstrap.com/docs/5.3/utilities/flex/#media-object) 與 [spacing](https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding) 組合在一起，如圖所示：

> 內文可以複製下方或是自行使用假字

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.

>假圖可使用 [Fake images please?](https://fakeimg.pl/) 或其他工具皆可

作業指示：
* 點擊右上方 icon 時可以開啟 [向左的 dropdowns](https://getbootstrap.com/docs/5.3/components/dropdowns/#dropstart)。
* 右上的 icon 可自行選擇不同資源載入(示範為 bootstrap 的 icon)。
* 圖片與文字需間格 16px ，第一段文字需與第二段文字間格 48px ，第二段文字下方 margin 為 0 。
* 圖片與文字排版方式可以參考 [Media object](https://getbootstrap.com/docs/5.3/utilities/flex/#media-object)

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/gOQZWem
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/oNrwzbB) |
|02| Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/RwzgGQM)|
| 03 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/QWXgKaR)|
| 04 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/MWMojLK?editors=1000)|
| 05 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/QWXgKOP)|
| 06 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/xxorEmr) |
| 07 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB?editors=1010) |
| 08 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/QWXgKYL) |
| 09 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/qBzjqKJ) |
| 10 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/VwJWPEj) |
| 11 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/XWLgMrr) |
| 12 | kawa | [Codepen](https://codepen.io/z83xji6/pen/ExBXXoJ) |
| 13 | KUN. | [Codepen](https://codepen.io/barry91205/pen/PorjJVq) |
| 14 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/vYqZezw) |
| 15 | yoishere | [Codepen](https://codepen.io/yoishere/pen/abgwJap) |
| 16 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/zYVzENE?editors=1000) |
| 17 | xcx100 | [Codepen](https://codepen.io/c13026/pen/dyBRKpK) |
| 18 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/yLdXqNP) |
| 19 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/gONRZXe) |
| 20 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/OJegdMG) |
| 21 | haojing | [Codepen](https://codepen.io/hjxu/pen/rNEwBJp) |
| 22 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/jOjLqgy) |
| 23 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/WNqExKX) |
| 24 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/JjQyPLv?editors=1010) |
| 25 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/bGPRXNv)|
| 26 | n913239 | [Codepen](https://codepen.io/n913239/pen/MWMvBPX?editors=1000) |
| 27 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/VwJWmyg?editors=1000) |
| 28 | wind | [Codepen](https://codepen.io/wind7y/pen/yLdoGwm) |
| 29 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/zYVEExr?editors=1100) |
| 30 | Mike | [Codepen](https://codepen.io/mike2049/pen/MWMEOqQ) |
| 31 | emmayo | [Codepen](https://codepen.io/emmayo/pen/GRbMxNV) |
| 32 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/GRbMdLO) |
| 33 | 俊 | [Codepen](https://codepen.io/jun12079/pen/LYKzgGW) |
| 34 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/mdZqWNw) |
| 35 | Emma | [Codepen](https://codepen.io/Emma0919/pen/ExBwGoq) |
| 36 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/KKjZJYL) |
| 37 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/ZEdxKgN) |
| 38 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/ExBEJOE?editors=1000) |
| 39 | Enn | [Codepen](https://codepen.io/enntang/pen/VwJxXej) |
| 40 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/wvLjQBr?editors=1000) |
| 41 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/ExBRgxK) |
| 42 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/xxoJYyJ?editors=1000)|
| 43 | macihuang | [Codepen](https://codepen.io/macy1215/pen/JjQwgrw)|
| 44 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/rNEPGdE)|
| 45 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/JjQzGVx?editors=1000) |
| 46 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/mdZZwMr?editors=1000) |
| 47 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/rNEEzre) |
| 48 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/ZEgzrPL?editors=1010) |
| 49 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/LEYXEpE?editors=1100) |

<!--
| No | Discord | [Codepen]() |
-->