# 🏅 Day 33 - 元件與通用類別 II

### 題目

練習 Bootstrap [元件](https://getbootstrap.com/docs/5.3/components/card/)和 [通用類別](https://getbootstrap.com/docs/5.3/utilities/borders/) 的組合，如圖：

提示：
* card 可以使用通用類別的屬性加上 [陰影](https://getbootstrap.com/docs/5.3/utilities/shadows/)、[無圓角](https://getbootstrap.com/docs/5.3/utilities/borders/)
* [按鈕](https://getbootstrap.com/docs/5.3/components/buttons/) 可以使用 [通用類別的 flex 屬性](https://getbootstrap.com/docs/5.3/utilities/flex/)分別讓按鈕可以在同一排的兩側，一個具有危險意義的紅色＋框線樣式、一個是成功意義的綠色＋實心樣式
* 以上都不需要另外寫 CSS、不需載入 CSS Reset

HTML

<div class="container py-3">
    <div class="card ...">
     <img src="https://getbootstrap.com/docs/4.5/assets/img/[e-mail]" class="card-img-top">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <div class="...">
         <a href="#" class="...">移除收藏</a>
         <a href="#" class="...">加入購物車</a>
       </div>
     </div>
    </div>
</div>

> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links)）

## 回報流程

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


<!-- 解答：
https://codepen.io/hexschool/pen/poLrBGW
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/ZEdyqRy) |
| 02 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/vYqZVjP) |
| 03 | han | [Codepen](https://codepen.io/iamHanCheng/pen/NWZgOBx) |
| 04 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB?editors=1010) |
| 05 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/rNEwqEd) |
|06|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/bGPRmXw)|
|07|yoishere|[Codepen](https://codepen.io/yoishere/pen/poXwQjW)|
| 08 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/KKjqrNy) |
| 09 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/GRbEwbm)|
| 10 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/qBzjLoR) |
| 11 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/bGPRzEX) |
| 12 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/PorjLqZ) |
| 13 | kawa | [Codepen](https://codepen.io/z83xji6/pen/oNrwVgO) |
| 14 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/PorjLYP) |
| 15 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/eYwRLVm) |
| 16 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/YzoQbMM?editors=1010) |
| 17 | KUN. | [Codepen](https://codepen.io/barry91205/pen/wvLeLeJ) |
| 18 | haojing | [Codepen](https://codepen.io/hjxu/pen/GRbvpWp) |
| 19 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/QWXMEyp) |
| 20 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/ExBvyrz?editors=1010) |
| 21 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/NWZvRNM?editors=1000) |
| 22 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/zYVdZRG?editors=1010) |
| 23 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/OJejaRy) |
| 24 | wind | [Codepen](https://codepen.io/wind7y/pen/ExBvrvm) |
| 25 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/LYKzLvK) |
| 26 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/OJexxga?editors=1000) |
| 27 | Mike | [Codepen](https://codepen.io/mike2049/pen/abgLqBB?editors=1010) |
| 28 | emmayo | [Codepen](https://codepen.io/emmayo/pen/qBzPoRM) |
| 29 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/PorJaoe) |
| 30 | 俊 | [Codepen](https://codepen.io/jun12079/pen/QWXqZgR) |
| 31 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/OJexdpo?editors=1000) |
| 32 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjyzBP)|
| 33 | Emma | [Codepen](https://codepen.io/Emma0919/pen/ExBbQeN) |
| 34 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/GRbOzKE) |
| 35 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/dyBJaxz) |
| 36 | xcx100 | [Codepen](https://codepen.io/c13026/pen/ZEdreOJ) |
| 37 | glen_69515| [Codepen](https://codepen.io/glenyaochih/pen/bGPLRgZ) |
| 38 | jasonlin| [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/mdZxMjN) |
| 39 | Enn| [Codepen](https://codepen.io/enntang/pen/xxojWOb) |
| 40 | 野鴿| [Codepen](https://codepen.io/HoshinoSyouta/pen/KKjeMgB) |
| 41 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/XWLYjEp) |
| 42 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/qBzyomz?editors=1000)|
| 43 | macihuang | [Codepen](https://codepen.io/macy1215/pen/gONqYZe)|
| 44 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/wvLNRrM)|
| 45 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/poXYwoG?editors=1000) |
| 46 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/NWZZvdE?editors=1000) |
| 47 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/Exqxmjj) |
| 48 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/NWQWVEm?editors=1100) |
| 49 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/YPzRXMR?editors=1000) |
<!--
| No | Discord | [Codepen]() |
-->