---
# System prepended metadata

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

---

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

## 元件與通用類別 II

### 題目

練習 Bootstrap [元件](https://bootstrap5.hexschool.com/docs/5.1/components/card/)和 [通用類別](https://bootstrap5.hexschool.com/docs/5.1/utilities/borders/) 的組合，如圖：
![](https://i.imgur.com/usKHu0e.png)



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



HTML
```htmlembedded=
<div class="container py-3">
    <div class="card ...">
     <img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-themes@2x.png" 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://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）


## 回報流程

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

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

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


回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|     小白#2406     |        [CodePen](https://codepen.io/gracewhite/pen/KKoRLaj)         |
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/abYKVgR)          |
|  Clara Cai#7097   |        [CodePen](https://codepen.io/Clara-Snowy/pen/mdxKovN)        |
|    布魯諾#7239    |   [CodePen](https://codepen.io/bruno-yu/pen/OJvwKRy?editors=1010)   |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/oNqMKzm)            |
|   NeilLin#3009    |   [CodePen](https://codepen.io/a0071421/pen/PoRBMKZ?editors=1010)   |
|     大衛#4869     |         [CodePen](https://codepen.io/exnsrpjc/pen/zYWLgwa)          |
|   WEI_RIO#9342    |    [CodePen](https://codepen.io/wei_wu/pen/PoRBMEN?editors=1000)    |
|    黃士桓#7654    |      [codePen](https://codepen.io/shr-huan-huang/pen/jOzpgaw)       |
| bonnieli1414#4906 | [codePen](https://codepen.io/bonnieli1414/pen/dymjxex?editors=1100) |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/poLZMQa?editors=1000)  |
|     zera#6060     |        [codepen](https://codepen.io/zera-tseng/pen/NWYBXgp)         |
|  christina#6185   |        [codepen](https://codepen.io/chrisc0210/pen/BarPXvW)         |
|    JackC#0411     |          [codepen](https://codepen.io/key0329/pen/RwMBXvr)          |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/ZExjgPM)          |
|     咻蹦#1526     |          [CodePen](https://codepen.io/emmasyu/pen/XWEBvLO)          |
|  Karol-Kuo#5287   | [CodePen](https://codepen.io/ting-yu-kuo/pen/xxWaKVK?editors=1000)  |
|     L0F0#8733     |           [CodePen](https://codepen.io/l0f0/pen/YzaOKaZ)            |
|     小諾#1866     |          [CodePen](https://codepen.io/noichan/pen/BarOBqV)          |
|     int#7518      |   [Codepen](https://codepen.io/intHuang/pen/wvmEwZY?editors=1010)   |
|    ssozr#4680     |           [codepen](https://codepen.io/ssozr/pen/LYdJPvW)           |
|     威0#6919      | [Codepen](https://codepen.io/n0918679182/pen/vYRzYNd?editors=1000)  |
|     Vera#5592     |          [Codepen](https://codepen.io/skvera/pen/oNqPNwp)           |
|  Yuna Huang#2692  |         [Codepen](https://codepen.io/Yuna1002/pen/WNzgNXe)          |
|     WEI#0797      |           [Codepen](https://codepen.io/wei-z/pen/MWVqgJZ)           |
|   我是泇吟#5189   |         [CodePen](https://codepen.io/kljuqbxs/pen/wvmEvQw)          |
|   CloThEs#7837    |         [CodePen](https://codepen.io/CloThEsZ/pen/GRxXRzL)          |
|     yuyu#6310     |   [CodePen](https://codepen.io/yuyu0905/pen/QWmVwLE?editors=1000)   |
|  LHchien33#6232   |         [CodePen](https://codepen.io/lin_chien/pen/OJvoPRV)         |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/MWVqYLX)          |
|    Melon#0380     |         [CodePen](https://codepen.io/BalaFang/pen/YzaOXKw)          |
|   Jenny真#7532    |        [CodePen](https://codepen.io/wei-chen-wu/pen/MWVqwgq)        |
|    JarDar#6980    |         [codepen](https://codepen.io/jardarpen/pen/oNqPXjX)         |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/VwXGLWK)           |
|    Henry#7386     |           [CodePen](https://codepen.io/h1nr9/pen/RwMYPLV)           |
|  suihsilan#9485   |  [CodePen](https://codepen.io/suihsilan/pen/abYaOPd?editors=1100)   |
|    Benson#6763    |   [CodePen](https://codepen.io/kumashow/pen/OJvoyEY?editors=1100)   |
|    Yunei#6323     |           [CodePen](https://codepen.io/Yunei/pen/qBoMZGq)           |
|    鉦勝 #8333     |        [CodePen](https://codepen.io/atckmax823/pen/MWVqewW)         |
|   RayChen#6088    |        [CodePen](https://codepen.io/raychen1996/pen/QWmVEbP)        |
|     Hsiu#8767     |         [CodePen](https://codepen.io/amy-hsiu/pen/poLOjpj)          |
|  Potatolee#7749   |        [CodePen](https://codepen.io/potatoleee/pen/PoRdzaL)         |
|     Chi#7605      |          [Codepen](https://codepen.io/YoChi84/pen/poLObxy)          |
|     YU #0618      |          [Codepen](https://codepen.io/yoken_/pen/KKoxMRd)           |
|  Sentiments#4883  |  [codepen](https://codepen.io/Sentiments/pen/xxWaOpL?editors=1010)  |
|    楓之聲#6945     |         [Codepen](https://codepen.io/sshane258/pen/PoRdGpq)         |
| 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/NWYLbjY?editors=1000) |
|yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/poLOeKd)| 
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/bGvxWLM)|
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/GRxBOMz?editors=1010)|
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/VwXGyKg)|
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/oNqPEBX)|
| YI#0863 | [Codepen](https://codepen.io/YI0305/pen/dymqdvG)|
| kevin8349 #6131 | [Codepen](https://codepen.io/kun8349/pen/PoRdRxL)|
| yo_yo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/JjLaLaO?editors=1000)|
| 雷雷#7844 | [Codepen](https://codepen.io/lei-yi-jie/pen/rNdZvYJ)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/VwXGdRp)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/mdxGGRZ)
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/JjLaape)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/QWmZwWb)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/gOeBPpy?editors=1100)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/QWmZpEj)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/MWVPrQo)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/LYdggOP?editors=1100)|
|阿蘇#8531|[Codepen](https://codepen.io/susu8327/pen/Barqqbm?editors=1010)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/mdxzQOq)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/QWmJGzQ)|
|郭芙蘭#6374|[Codepen](https://codepen.io/flora_Kuo/pen/WNzYpgr?editors=1010)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/eYMQQVq?editors=1000)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/qBoQQgR)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/qBoQvOE)|
| J_u_d_y#5993 | [Codepen](https://codepen.io/J_u_d_y/pen/rNdPgrY?editors=1100) |
| Rena#6249 | [Codepen](https://codepen.io/aureate0116/pen/QWmodRr) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/jOzJawL)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/abYxyxd?editors=1010)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/GRxLxXp)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/vYRMmYW?editors=1000)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/KKoLQGP)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/JjLQJEO)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/eYMwxdo)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/wvmLVaK)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/rNdXzQr)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/RwMXMoM)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/YzLXMxx)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/jOxbQLL)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/VwxKMKa)|