---
# System prepended metadata

title: 8/4(三) 每日任務
tags: [網頁切版直播班 - 2021 夏季班]

---

---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/4(三) 每日任務
## 題目

嘗試將元件 [Card](https://getbootstrap.com/docs/5.0/components/card/) 和通用類別 [Media Object](https://getbootstrap.com/docs/5.0/utilities/flex/#media-object) 組合在一起，如圖所示：
![](https://i.imgur.com/EmCasDl.png)

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

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

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


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

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


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

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/WNpmVJY?editors=1010
-->

<!-- 2. Alpha
Codepen：https://codepen.io/alphatero/pen/QWvBejB
-->
<!-- 3. LiShang
Codepen：https://codepen.io/li-shang/pen/NWjBQGM
-->

<!-- 4. Lina Chen
codepen: https://codepen.io/LinaChen/pen/BaRPXam
-->

<!-- 5. Vic
codepen: https://codepen.io/hsuan333/pen/MWmBNKx
-->

<!-- 6.肉鬆
codepen: https://codepen.io/klrkicog/pen/GRmBVZv?editors=1000
-->


<!-- 7 kevinhes
codepen:https://codepen.io/dwpwdpad/pen/qBmyeZb?editors=1000
-->

<!-- 8.Sam li
codepen:https://codepen.io/sam830623/pen/bGWjXgK
-->

<!-- 9. 雷古娜
codepen:https://codepen.io/tinahopo/pen/bGWjXBK -->

<!-- 10. lumei
codepen:https://codepen.io/l_umei/pen/RwVBXYx
-->

<!-- 11. Gill
codepen:https://codepen.io/Gill-Chin/pen/JjNBgBb
-->

<!-- 12. 陳sam
codepen:https://codepen.io/euldpliv/pen/PomdYYx


<!-- 13. KK
codepen: https://codepen.io/potatokaka/pen/WNjKVPW?editors=1000
-->

<!-- 14.Xing
codepen: https://codepen.io/xing10/pen/qBmMBBQ?editors=1000
-->

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

<!-- 16.huanan
codepen: https://codepen.io/hua_nan/pen/BaROazz
-->

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

<!-- 18. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/qBmMBmw?editors=1000
-->

<!-- 19. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/OJmoJVy?editors=1100
-->

<!-- 20. hellocrab
https://codepen.io/hellocrab/pen/YzVOKOd
-->

<!-- 21. Sz
https://codepen.io/szyln/pen/gOWdObb
-->

<!-- 22. Fleur
https://codepen.io/swwlee/pen/OJmjqLL
-->

<!-- 23. Cate Chang
https://codepen.io/tutz/pen/JjNajJz
-->

<!-- 24. peterchen
codepen:https://codepen.io/JIAN-RONG/pen/ZEKMYdb?editors=1100
-->

<!-- 25.阿瓜
https://codepen.io/hoick/pen/qBmMWYY?editors=1100 -->

<!-- 26.axlrock1021
https://codepen.io/andy1021/pen/dyWqYNB -->

<!-- 27. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/dyvKQLE?editors=1000
-->

<!-- 28. KatieZhao
https://codepen.io/katiezhao/pen/QWvVjaq -->


<!-- 29. curry
https://codepen.io/Ted19851223/pen/gOWdaKw -->
<!-- 30. 大衛 
https://codepen.io/exnsrpjc/pen/ExmeYVW?editors=1100
-->

<!--31.童筱涵
https://codepen.io/hsiaohan/pen/OJmoyKj
-->

<!-- 32. Gui
https://codepen.io/guitimliu/pen/eYWLJGq -->

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

<!--34. 阿和
codepen:https://codepen.io/shnny/pen/WNjgrVB?editors=1100
-->

<!--35. Jim Hwang
codepen:https://codepen.io/jimh1129/pen/mdmGOqa?editors=1100
-->

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

<!-- 37. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/xxdaggQ?editors=1010
-->

<!-- 38.黃士桓
https://codepen.io/shr-huan-huang/pen/oNWPWod?editors=1000
-->

<!-- 39. Jessie Cheng
https://codepen.io/JessieMosbi/pen/gOWdROY
-->

<!-- 40. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/QWvVZXN?editors=1100
-->

<!-- 41. yijun
https://codepen.io/sandy3068/pen/zYwJMrW
-->

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

<!-- 43. ZOE WU
https://codepen.io/Zoechiueh/pen/vYmzbvQ?editors=1000
-->
<!-- 44. ellie
https://codepen.io/hsu-yu/pen/eYWLXde
-->

<!-- 45. anna
https://codepen.io/annhys/pen/YzVOMor?editors=1000
-->

<!-- 46. Jean
https://codepen.io/jean-liu/pen/bGWxGeB
-->

<!-- 47. Yurie
https://codepen.io/_u_jung/pen/zYwmpQx
-->

<!-- 48. Meng
https://codepen.io/MGHN/pen/KKmNjoO
-->

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

<!-- 49. jimmyFang
https://codepen.io/pohxiqqo/pen/MWmPNNR?editors=1010
-->

<!-- 50. Erin Huang
https://codepen.io/ErinHuang/pen/QWvJdgy
-->

<!--51. Jocelyn Wu
https://codepen.io/enjoyful/pen/vYmQgvq
-->

<!-- 52. Karen Huang
https://codepen.io/Coding_Snorlax/pen/YzVRZGP
-->

<!-- 53.WilsonHan
https://codepen.io/wi0821/pen/xxdQppN
-->

<!-- 54. Elaine Liu
https://codepen.io/elaine7598/pen/LYyXQXj
-->
<!-- 55. Alberto
https://codepen.io/AlbertoLL/pen/VwbVQOQ
-->

<!-- 56: Sec
https://codepen.io/Sentiments/pen/QWvJQao?editors=1010
-->


<!-- 57: Kin Hei Shing
https://codepen.io/kinhei-shing/pen/VwbVxoK
-->

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

<!--58. YuriT
code: https://codepen.io/wenfisht/pen/mdmGKNY
-->

<!-- 59.Page
https://codepen.io/kanawin821/pen/ExmOrpy?editors=1000
-->

<!-- 60.Shani
https://codepen.io/ShaniMa/pen/jOmQYQK -->


<!-- 61.Oober
https://codepen.io/xtsjrjdv/pen/VwbqEGb?editors=1010
-->

<!-- 62.Riley
https://codepen.io/jjpxbprd/pen/gOWZBJz
-->

<!-- 63.una
https://codepen.io/xbsapbas-the-vuer/pen/gOWqrLm?editors=1100
-->

<!-- 64.魚魚
https://codepen.io/YuYu_29/pen/qBmgNGo
-->

<!--65.Jun Chan
code: https://codepen.io/chujunchan/pen/dyWawPj
-->

<!--66.YOYO
code: https://codepen.io/lumedkle/pen/RwVOEay?editors=1010
-->

<!--67. Min Chun Tsai
code: https://codepen.io/Tsai0926/pen/LYyvaON
-->

<!--68. Joe Kuo
code: https://codepen.io/alertislow/pen/vYmwVLv
-->

<!-- 69. WA
https://codepen.io/ldddl/pen/qBmzEYj
-->

<!-- 70. YJ kung
https://codepen.io/bagelover/pen/dyRyqYB 
-->

<!-- 71. AKI
https://codepen.io/akichen27/pen/BaZzjzP
-->