---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/5(四) 每日任務

## 題目

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

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

HTML

<div class="container">
    <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>

CSS

.container{
  max-width:1200px;
  margin: 0 auto;
}

需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）


## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 範例](https://codepen.io/Bingbingboom/pen/YzZxxdP) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/YzZxxdP
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/zYZbgLv
-->

<!-- 2. Alpha
Codepen：https://codepen.io/alphatero/pen/QWvVxBb
-->

<!-- 3. LiShang
Codepen：https://codepen.io/li-shang/pen/mdmGKXQ
-->

<!-- 4. Vic
codepen: https://codepen.io/hsuan333/pen/vYmzrRV
-->

<!-- 3. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/full/JjNaZZM
-->

<!-- 6. 雷古娜
codepen:https://codepen.io/tinahopo/pen/qBmMKKx
-->

<!--7. Sam li
codepen:https://codepen.io/sam830623/pen/poPOKxb
-->

<!-- 8. Xing
codepen:https://codepen.io/xing10/pen/vYmzrdz?editors=1100
-->

<!-- 9. Lina Chen
codepen: https://codepen.io/LinaChen/pen/BaROVEa
-->

<!-- 10. lumei
codepen: https://codepen.io/l_umei/pen/rNmZrYK
-->
<!-- 11. 陳sam
codepen:https://codepen.io/euldpliv/pen/NWjLBzj
-->
<!-- 12. 大衛
codepen:https://codepen.io/exnsrpjc/pen/wvdExqz
-->

<!-- 13. Gill
codepen:https://codepen.io/Gill-Chin/pen/rNmZrbQ?editors=1100
-->

<!-- 14. huanan
codepen:https://codepen.io/hua_nan/pen/BaROONd
-->

<!-- 15. Gui
https://codepen.io/guitimliu/pen/BaROOjw -->

<!-- 16. Cate Chang
https://codepen.io/tutz/pen/PomddBQ -->

<!-- 17.肉鬆
codepen: https://codepen.io/klrkicog/pen/YzVOObr
-->

<!--18. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!-- 19. hellocrab
https://codepen.io/hellocrab/pen/abWaRZp
-->

<!-- 20. Sz
https://codepen.io/szyln/pen/gOWdBwB
-->

<!-- 21. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/BaROqzv
-->

<!-- 22.zy
https://codepen.io/zy_c/pen/MWmqPxJ-->
<!-- 23.icy
https://codepen.io/ccsbjzze-the-sasster/pen/bGWxmPd-->

<!-- 24. yijun
https://codepen.io/sandy3068/pen/poPOQPr
-->

<!-- 25 peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/YzVOdXq
-->

<!-- 26 沈依蓉
https://codepen.io/lily-oa/pen/eYWLbyw
-->

<!-- 27 curry
https://codepen.io/Ted19851223/pen/zYwJeZo
-->

<!-- 28 kevinhes
codepen: https://codepen.io/dwpwdpad/pen/dyWqarq
-->

<!--29. 阿和
codepen: https://codepen.io/shnny/pen/zYwJbxp?editors=1000
-->

<!-- 30.阿瓜
https://codepen.io/hoick/pen/QWvVobE -->

<!-- 31. 蔡明達
Codepen: https://codepen.io/Bingbingboom/pen/YzZxxdP?editors=1000
-->

<!-- 32. ZOE WU
https://codepen.io/Zoechiueh/pen/oNWPObX?editors=1000
-->

<!-- 33. 黃士桓
https://codepen.io/shr-huan-huang/pen/yLbxdqp
-->

<!-- 34. Hi Annie
https://codepen.io/lhohdalu/pen/rNmZXMR
-->

<!-- 35. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/ExmeqvY
-->

<!-- 36. 程翔
Codepen：https://codepen.io/xxxiang/pen/ExmdaPz?editors=1100
-->

<!-- 37. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/WNjavrm
-->

<!--38.童筱涵
https://codepen.io/hsiaohan/pen/qBmJbEe
-->

<!--39.Jean
https://codepen.io/jean-liu/pen/WNjapEz
-->

<!--40.anna
https://codepen.io/annhys/pen/abWRLQy?editors=1100
-->

<!--41.axlrock1021
https://codepen.io/andy1021/pen/wvdYmqK
-->

<!-- 42. KatieZhao
https://codepen.io/katiezhao/pen/JjNmvMj-->

<!-- 43. Meng
https://codepen.io/MGHN/pen/GRmExgg
-->

<!-- 44. Sylvia-H
https://codepen.io/Cosmosheart/pen/OJmBGGz?editors=1100 -->

<!-- 45. Tori
https://codepen.io/hayen/pen/abWKGZZ?editors=1100
-->

<!-- 46.jimmyFang
https://codepen.io/pohxiqqo/pen/OJmaLVv
-->

<!-- 47.Erin Huang
https://codepen.io/ErinHuang/pen/ZEKmLvy
-->

<!--48. Jocelyn Wu
https://codepen.io/enjoyful/pen/BaRGpEK?editors=1100
-->

<!-- 49. Karen Huang
https://codepen.io/Coding_Snorlax/pen/wvdQeaL
-->

<!-- 50. Jessie Cheng
https://codepen.io/JessieMosbi/pen/PomxEJb
-->

<!-- 51. WilsonHan
https://codepen.io/wi0821/pen/yLbQpQR
-->

<!-- 52. Elaine Liu
https://codepen.io/elaine7598/pen/MWmzVWK
-->

<!-- 53. ALberto
https://codepen.io/AlbertoLL/pen/ExmOEam
-->

<!-- 54: Sec
https://codepen.io/Sentiments/pen/YzVRayj
-->

<!-- 55: KinHei Shing
https://codepen.io/kinhei-shing/pen/VwbVdpb
-->

<!--56. Sihle Huang
code: https://codepen.io/bugbug777/pen/xxdQyEw?editors=1100
-->

<!--57. KK
code: https://codepen.io/potatokaka/pen/BaRGGNE?editors=1100
-->

<!--57. YuriT
code: https://codepen.io/wenfisht/pen/RwVqEEG?editors=1100
-->

<!-- 58.Page
https://codepen.io/kanawin821/pen/ZEKmPyL
-->

<!-- 59.Jim Hwang
https://codepen.io/jimh1129/pen/PomXwbZ
-->
<!-- 60. Shani
https://codepen.io/ShaniMa/pen/xxdmpRy -->

<!-- 61. Yurie
https://codepen.io/_u_jung/pen/PomXBLM -->

<!-- 62. Oober
https://codepen.io/xtsjrjdv/pen/jOmXeed
-->

<!-- 63. Riley
https://codepen.io/jjpxbprd/pen/OJmraXa
-->

<!-- 64.佳文
https://codepen.io/chiawen81/pen/VwbgYoY
-->

<!-- 65.una
https://codepen.io/xbsapbas-the-vuer/pen/abWXNRO
-->

<!-- 66. 魚魚
https://codepen.io/YuYu_29/pen/KKmJgNa
-->

<!-- 67. Jun Chan
codepen: https://codepen.io/chujunchan/pen/XWROozZ
-->
<!-- 68.袁祥恩
codepen:
https://codepen.io/ovfxsavp-the-bashful/pen/jOmJaxo
-->

<!-- 69. YOYO
https://codepen.io/lumedkle/pen/NWjmerm
-->

<!-- 70. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/MWmRxqd
-->

<!-- 71. Joe Kuo
codepen: https://codepen.io/alertislow/pen/dyWBYbB
-->

<!-- 72. WA
https://codepen.io/ldddl/pen/yLbdbMV
-->

<!-- 73. YJ kung
https://codepen.io/bagelover/pen/bGRGxLr
-->

<!-- 74. AKI
https://codepen.io/akichen27/pen/bGReEWQ
-->