--- 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 -->