### 題目

練習 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 | runweiting | [Codepen](https://codepen.io/weiting14/pen/ExOzVbr) |
| 02 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/ZEmNbaj) |
| 03 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/OJaYyzW) |
| 04 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/dyQEYJy) |
| 05 | awei | [Codepen](https://codepen.io/hong-wei/pen/abQrvYx?editors=1000) |
| 06 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/NWEVGYa) |
| 07 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/KKrLdQQ) |
| 08 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/rNQgOro) |
| 09 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/zYMQvab?editors=1010) |
| 10 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/wvQbKme) |
| 11 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/KKrYJQg) |
| 12 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/rNQgOqP) |
| 13 | townyuan | [Codepen](https://codepen.io/townyuan/pen/BaGeoqZ) |
| 14 | SmallP | [Codepen](https://codepen.io/smallp/pen/qBQGOzd) |
| 15 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/Rwqmrwp?editors=1000) |
| 16 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/MWzdKwx) |
| 17 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/KKrLVvE?editors=1100) |
|18|Moreene|[CodePen](https://codepen.io/Moreene/pen/bGQyEvQ)|
|19|Morning|[CodePen](https://codepen.io/sxzjnkxs-the-styleful/pen/eYQaJKm?editors=1100)|
| 20 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/bGQyEQz) |
| 21 | Edene | [Codepen](https://codepen.io/iseden/pen/NWEVxeJ)|
| 22 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/qBQGbeX) |
| 23 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/yLQWOBN?editors=1010) |
| 24 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/ExOzPLK) |
| 25 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/dyQEMvK) |
| 26 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/ZEmNWyL) |
| 27 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/GRwaZmz?editors=1000) |
| 28 | shcopy | [Codepen](https://codepen.io/shcopy/pen/OJaYNZL) |
| 29 | PayRoom |[CodePen](https://codepen.io/water38198/pen/OJaYNBJ)|
| 30 |deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/LYXoNqg)|
| 31 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/jOQoqjy?editors=1000) |
| 32 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/zYMQBqL) |
| 33 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/LYXoZME) |
| 34 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/yLQWJWR) |
| 35 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/OJaYXdg) |
| 36 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/OJaYRYa) |
| 37 | Uli | [Codepen](https://codepen.io/uli1313/pen/ExOzNbw) |
| 38 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/rNQgWxW?editors=1000) |
| 39 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/VwVOmEq) |
| 40 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/gOQJgOb?editors=1010)|
| 41 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/MWzdpWZ?editors=1000)|
| 42 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/dyQEvxZ) |
| 43 | rjjq | [Codepen](https://codepen.io/rjjq/pen/wvQbdKZ) |
| 44 | m_m | [Codepen](https://codepen.io/minnn7716/pen/vYQweNr) |
| 45 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/XWywmvw) |
| 46 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/yLQWzrb) |
| 47 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/oNQRzxL) |
| 48 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/MWzdOLq) |
| 49 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 50 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/gOQJEvr) |
| 51 | Randy | [Codepen](https://codepen.io/landy510/pen/vYQqGxj?editors=1000) |
| 52 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/mdQZEZE) |
| 53 | 依依| [Codepen](https://codepen.io/Rita-Yang/pen/gOQNLYz?editors=1100) |
| 54 | wind | [Codepen](https://codepen.io/wind7y/pen/XWyLRgj) |
| 55 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/abQgLzZ) |
| 56 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/mdQZjge) |
| 57 | Long | [Codepen](https://codepen.io/Loonng/pen/mdQZgVE) |
| 58 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/xxQvRBL) |
| 59 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/YzRmNWR) |
| 60 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/NWEQdvx) |
| 61 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/PoXYoVw) |
| 62 | .icesam | [Codepen](https://codepen.io/icesam/pen/jOXNqJg) |
| 63 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/dywbXyd) |
| 64 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/RwqXpXg?editors=1100) |
| 65 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/BavBRRx) |
| 66 | 郭芙蘭 ＃6374 | [Codepen](https://codepen.io/flora_Kuo/pen/vYvBeVW?editors=1100) |
| 67 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/XWoroNq) |
| 68 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/rNoNPpb) |
| 69 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/qBLEWBG) |
| 70 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/MWZwjBm) |
| 71 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/poqJaKL?editors=1100) |
| 72 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/qBLdJyz) |
| 73 | cura | [Codepen](https://codepen.io/curalin/pen/rNoVovm?editors=1000) |
| 74 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/poqjpWv?editors=1100) |
| 75 | Martin | [Codepen](https://codepen.io/markyourpage/pen/qBLbxxM) |
| 76 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/yLGOXez) |
| 77 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/ExGgbwQ) |
| 78 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/WNLOvoo) |
| 79 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/RwEQdJv?editors=1000) |
| 80 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/xxmWyrx?editors=1000) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |