--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/12(四) 每日切版任務 - RWD 練習 I ## 題目 * 用 Codepen 練習 將 [5/11(三)](https://hackmd.io/GHf3WiVVQ1Wme2DZtIlgWw) 的切版加入 max-width: 576px 的 RWD 畫面 : ![](https://i.imgur.com/WJdMl2A.png) . . . ![](https://i.imgur.com/wJ48xNq.png) 文字提供: DORKEN｀ 最新資訊 促銷活動 休閒鞋類 工作鞋類 兒童鞋類 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis, vero quaerat debitis ea omnis ratione? Voluptatem, quibusdam dolor reprehenderit recusandae minima voluptates accusantium asperiores molestias? Saepe eveniet fugiat asperiores. Tempora assumenda omnis harum explicabo. Ipsa, tempora sequi! Aliquam excepturi id illo perferendis fuga eligendi doloremque, praesentium recusandae minus quam et odio tempore sequi qui? Facere quasi ipsum corrupti culpa. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti quis, vero quaerat debitis ea omnis ratione? Voluptatem, quibusdam dolor reprehenderit recusandae minima voluptates accusantium asperiores molestias? Saepe eveniet fugiat asperiores. Tempora assumenda omnis harum explicabo. Ipsa, tempora sequi! Aliquam excepturi id illo perferendis fuga eligendi doloremque, praesentium recusandae minus quam et odio tempore sequi qui? Facere quasi ipsum corrupti culpa. <!-- ans: [RWD01](https://codepen.io/DoLucky/pen/eYVJqEm) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. su#7798 codepen: . <!-- 2. yunyun 答案： Codepen: https://codepen.io/yun_yunni/pen/xxYExKY --> <!-- 3. Bruno Yu 答案： Codepen：https://codepen.io/bruno-yu/pen/XWZjWWe --> <!-- 4. JackC Codepen: https://codepen.io/key0329/pen/abqZBeG --> <!-- 5. Leo Song Codepen: https://codepen.io/sunnylaba/pen/wvyWJem?editors=1100 --> <!-- 6. Lina Chen Codepen:https://codepen.io/LinaChen/pen/xxYExLa --> <!-- 7. Chi Codepen: https://codepen.io/YoChi84/pen/qBxaBxL --> <!-- 8. RJRS#9430 Codepen: https://codepen.io/RJRS/pen/KKQgKzN --> <!-- 9. Jason Chen Codepen: https://codepen.io/jason60810/pen/dydpyXw --> <!-- 10. Bao Codepen: https://codepen.io/baoh/pen/vYdXYdo?editors=0100 --> <!-- 11. Sweet Codepen: https://codepen.io/Pei-Ying/pen/rNJMNrK --> <!-- 12.君Jyun#0147 https://codepen.io/Okaybeok/pen/abqmbeM?editors=1100 --> <!-- 13. Cliff https://codepen.io/Cliff_hex/pen/wvyzvQo --> <!-- 14. LHchien https://codepen.io/lin_chien/pen/MWQjWxV --> <!-- 15. CloThEs 答案： Codepen：https://codepen.io/bogwdnxx-the-sans/pen/vYdXBqv --> <!-- 16. NaRa#7954 答案： Codepen：https://codepen.io/chou-nara/pen/RwQGwpz --> <!-- 17.IreneLee codepen: https://codepen.io/ntjtcxpt-the-animator/pen/poaEvpQ?editors=1100 --> <!-- 18. hw#0715 Codepen: https://codepen.io/Lhwei/pen/MWQjYLd --> <!-- 19. yuyu#6310 Codepen: https://codepen.io/yuyu0905/pen/QWQKWXq?editors=1100 --> <!-- 20. Jia-Hong Chen#3863 Codepen: https://codepen.io/iloveleon19/pen/jOZryva --> <!-- 21. 楓之聲#6945 Codepen: https://codepen.io/sshane258/pen/RwQGNmL --> <!--22. HiyukiOuO # 8072 codepen:https://codepen.io/Befei/pen/OJQRJrR?editors=1100 --> <!--23. Yuhung#1391 codepen: https://codepen.io/Yu__hung/pen/vYdKZgo?editors=0110 --> <!--24. Noy https://codepen.io/MochiCodingPen/pen/oNEzXQq --> <!-- 25.ozawa#8815 https://codepen.io/PIN-HSIN/pen/KKQMamv --> <!-- 26.Joyce#3790 https://codepen.io/joycehuang/pen/OJQXmvY?editors=1100--> <!-- 27.Raymond Lam#0344 https://codepen.io/manshun-lam/pen/eYVdmLw--> <!-- 28.hsiuhsiu https://codepen.io/hsiuhsiu/pen/xxYExve?editors=1100 --> <!-- 29. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/vYdXOMQ --> <!-- 30. Peng https://codepen.io/your-work --> <!-- 31. kuo https://codepen.io/sunny-sun/pen/zYRKvBp --> <!-- 32. How#5806 https://codepen.io/howtobefine/pen/ExQgKYP --> <!-- 33. Knn#0492 https://codepen.io/Knn_84/pen/QWQKNLY --> <!-- 34. Muse#9741 CodePen:https://codepen.io/mu24/pen/JjpRGdQ --> <!-- 35. EG#7172 CodePen: https://codepen.io/paneg-jpeg/pen/ExQgPjM --> <!-- 36. Kiwi#9804 CodePen:https://codepen.io/kiwi1113/pen/vYdKxZx --> <!-- 37. EllieLo#9809 CodePen:https://codepen.io/ellie-lo/pen/QWQKyRz --> <!-- 38. 花禮湖燒#7359 CodePen:https://codepen.io/lai-pei/pen/XWZjXXO --> <!-- 39. RyanLu#3642 CodePen:https://codepen.io/ryanlu1125/pen/PoQGwrR?editors=1100 --> <!-- 40. zzuhann#2786 codepen: https://codepen.io/zzuhann/pen/JjpRKMm --> <!-- 41. stanley#3825 codepen: https://codepen.io/sean_1215/pen/rNJMMBq?editors=0110 --> <!--42. https://codepen.io/Adif/pen/WNMGwwm?editors=1100 --> <!-- 43. lyle#8123 codepen: https://codepen.io/tomys/pen/jOZMMEY?editors=1100 --> <!-- 44. 白狐 codepen: https://codepen.io/baihu7851/pen/wvyzoJR --> <!-- 45.yuling codepen:https://codepen.io/igzdflpu/pen/jOZMVJP --> <!-- 46.Katie codepen:https://codepen.io/Katie24/pen/poabLdW --> <!-- 47.Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/ExQgZrd?editors=1100 --> <!-- 48. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/xxYEbrK?editors=1100 --> <!-- 49. 阿基基 https://codepen.io/JIJI_GNI/pen/abqZpxr --> <!-- 50. 鉦勝 #8333 https://codepen.io/atckmax823/pen/yLvabPy --> <!--51. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/ZErOLNq --> <!--52. Carrie#2750 Codepen:https://codepen.io/carrie-wang/pen/qBxNYYZ --> <!--53. RayChen#6088 Codepen:https://codepen.io/raychen1996/pen/WNMGjpW --> <!--54. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/VwQKYLL --> <!--55. WeiKai#1867 Codepen: https://codepen.io/beginneraboutlife116/pen/poabZxp --> <!-- 56. #EVC1876 57. Codepen: https://codepen.io/elvi-chuang/pen/bGLeWyd?editors=1100 58. --> <!-- 57. Hao#2485 https://codepen.io/hao216/pen/jOZMrja --> <!-- 58. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/zYRKobz?editors=1100 --> <!-- 59.Tin https://codepen.io/tinchen/pen/yLvayOq --> <!--60. Murmurline#6969 https://codepen.io/murmurline/pen/eYVddQw --> <!-- 61. Meri#0052 Codepen: https://codepen.io/Bboy_Meri/pen/poabGyz?editors=1100 --> <!-- 62. LCC#9012 https://codepen.io/pamelaxchun/pen/KKQgvRx --> <!-- 63. deveryone#8090 https://codepen.io/raycheng/pen/poaEbYp?editors=1100 --> <!-- 64. bonnieli1414#4906 https://codepen.io/bonnieli1414/pen/WNMGZvL --> <!-- 65. ajhappy#6488 https://codepen.io/ajhappy5438/pen/OJQRxWo --> <!-- 66. Triple https://codepen.io/riku30/pen/vYdXZoE --> <!-- 67. Ayre #0016 codepen:https://codepen.io/yichunlin09/pen/vYdXJzg?editors=1100 --> <!-- 68. Josh Chen#4552 codepen: https://codepen.io/hiphop825/pen/MWQjELe --> <!-- 69. 黑松胖#4836 https://codepen.io/yi-chien-hsieh/pen/GRQjMpQ?editors=1100 --> <!-- 70. Chaco#2993 https://codepen.io/chaco-wang/pen/eYVzQRV?editors=1100 --> <!-- 71. amy芳#1385 https://codepen.io/amy-chieng/pen/eYVdyPa --> <!-- 72. Mylène codepen: https://codepen.io/hamajibashi/pen/ZErpQQq --> <!-- 73. Mitour#0672 codepen: https://codepen.io/mitour/pen/mdXrMRr?editors=1100 --> <!-- 74. Cheng-Yu#1813 codepen: https://codepen.io/ball77111/pen/wvyzQdB --> <!-- 75. Erica Chen#6929 codepen: https://codepen.io/ericachen/pen/rNJMNeG --> <!-- 76. Nina泥#1422 codepen: https://codepen.io/xiangqi09020/pen/dydpwPx --> <!-- 77. Easton#3863 Codepen: https://codepen.io/EastonIsCodingNow/pen/gOvwZOr --> <!-- Jill#5577 CodePen: https://codepen.io/Jillkate/pen/jOZMXzK --> <!-- 79. xuan#0808 Codepen: https://codepen.io/xuan0915/pen/VwQKeZY --> <!-- 80. JustinLiu Codepen: https://codepen.io/justin0227/pen/yLvJpqr?editors=1100 --> <!-- 81. Nini Chen#5790 Codepen: https://codepen.io/ninistyle/pen/vYdXGKp --> <!-- 82. andersonshen#4675 Codepen: https://codepen.io/luxyenni-the-bold/pen/QWQKPMQ --> <!-- 83. 安安你好你是誰#7416 Codepen: https://codepen.io/leave3310-the-looper/pen/ExQgBYX --> <!-- 84. Charlotte Lee Codepen: https://codepen.io/charlotte-lee/pen/OJQRYQB?editors=1100 --> <!-- 小不點#1793 Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/JjpKMPg --> <!-- 85. 雷雷#7844 Codepen: https://codepen.io/lei-yi-jie/pen/xxYRbZM --> <!--86Tsuei#9284 https://codepen.io/AlbertoLL/pen/OJQbyRe --> <!-- 87. yen#5757 https://codepen.io/TZU-HUANG-YEN/pen/LYQbbXj?editors=1100 --> <!-- 88. SASIMI #5099 Codepen: https://codepen.io/sashimi1327/pen/dydOvVy --> <!-- 88. 邊邊#2293 Codepen: https://codepen.io/WinnieTsao/pen/JjpRWeY?editors=1100 --> <!-- 89. 小天 #7177 Codepen: https://codepen.io/linyujing/pen/MWQeBQr --> <!-- 90 Arista Codepen: https://codepen.io/arista-hsieh/pen/abqmwJG --> <!-- 米金#1399 https://codepen.io/ihrowjtq-the-vuer/pen/vYdyJOB?editors=1100 --> <!--101. 靜宜#6866 codepen:https://codepen.io/jamie18/pen/dydOJVy --> <!--102. rubyruby codepen:https://codepen.io/Ruby0831/pen/ZErBrqG --> <!--103. Greta#0837 Codepen: https://codepen.io/gretali/pen/wvyoyON --> <!--104. ling chang#1024 Codepen: https://codepen.io/ling-chang/pen/BaYzGEW?editors=1100 --> <!--104. Lyndon.Su #6018 Codepen: https://codepen.io/LyndonSu/pen/jOZVvBG?editors=1100 <!--104. kk28976328#1197 Codepen: https://codepen.io/kk28976328/pen/eYVBXKR <!-- 105 Van.CS #2067 codepen: https://codepen.io/fbacojji-the-selector/pen/ExQNMBL?editors=1100 --> <!-- 106 J_u_d_y#5993 Codepen: https://codepen.io/J_u_d_y/pen/bGLBJMR --> <!-- 106 Tori#1283 Codepen: https://codepen.io/FlyTori/pen/JjpKvvG --> <!-- 107 singend#0876 codepen:https://codepen.io/singend/pen/yLvVWdL --> <!-- 108 Cynthia1111 codepen:https://codepen.io/Cynthia1111/pen/JjpbgPa?editors=1100 --> <!-- 109 WilliamChou#7375 codepen:https://codepen.io/williampo78/pen/zYRBLPL --> <!-- 110 艾芮絲#6060 codepen: https://codepen.io/wangyingju/pen/eYVgYzz --> <!-- 111 菟小歆#2154 dodepen:https://codepen.io/catmoon1017/pen/abqpbXY --> <!-- 112 亞芽 #1185 dodepen: https://codepen.io/sanahsu/pen/OJQWbwZ?editors=1100 --> <!-- 113 小鹿Kerwin#5730 dodepen: https://codepen.io/tkoleo84119/pen/mdXRmPW --> <!-- 114. azami#5986 codepen : https://codepen.io/azami/pen/xxYgLVa --> <!-- 115. 肉桂卷#0625 codepen : https://codepen.io/ginnlee/pen/zYRNzgp?editors=1100--> <!-- 116. Lynn73 #3164 codepen : https://codepen.io/LYNN0703/pen/bGLgLJQ --> <!-- 117. Omi#3467 codepen : https://codepen.io/chian0501/pen/QWQdxEr--> <!-- 118. Vito#7797 https://codepen.io/Vito_Yang/pen/eYVvYPB?editors=1100 --> <!-- 119.Lian Chen https://codepen.io/CCL1007/pen/yLvVrqE --> <!--120. Jamie https://codepen.io/Wu220103/pen/ZEreQWy --> <!--121. Cora #3153 https://codepen.io/coracola/pen/gOvmMjZ --> <!--122. 隔壁小王 Codepen: https://codepen.io/stevetanus/pen/poabVXX --> <!-- 123. Mojito#6002 codepen: https://codepen.io/vu3xk41997/pen/dydvJwE?editors=1100 --> <!-- 124. 黑白兔#0684 codepen: https://codepen.io/johnny329/pen/eYVdRoK --> <!-- 124. 黑白兔#0684 codepen: https://codepen.io/johnny329/pen/eYVdRoK --> <!-- 125. Sophia19#4005 codepen: https://codepen.io/sophia019/pen/QWQpzwb --> <!-- 126. 諾拉#4800 codepen: https://codepen.io/Naomi_riayun/pen/KKQmmJB --> <!-- 127. skypassion5000#4151 codepen: https://codepen.io/skypassion5000/pen/QWQvObV --> <!-- 128. Georgina#9761 codepen: https://codepen.io/9gina/pen/qBxmoBO --> <!-- 129. Dun Dun#9857 codepen: https://codepen.io/dundun/pen/WNMjJPx --> <!-- 130. CHIA#3031 codepen: https://codepen.io/chiachiaD/pen/OJQmodP?editors=1100 --> <!-- 131. Marco Yin# 2673 codepen:https://codepen.io/Marcoyin/pen/OJQmBRX?editors=1100 --> <!-- 132. weihsin#5643 codepen:https://codepen.io/weisin/pen/dydRONE?editors=1100 --> <!-- 133. AmberC#1372 codepen:https://codepen.io/AmberChuang/pen/abqwOKM --> <!-- 134. ChaoChao https://codepen.io/EmiiilyJ/pen/dydXejN --> <!-- 135. Newman https://codepen.io/newmankz/pen/dydRqLq?editors=1100 --> <!-- 136. 家洋#6999 https://codepen.io/yang940648/pen/rNJWaJP --> <!-- 137. 大衛 https://codepen.io/exnsrpjc/pen/JjpyLKQ?editors=1100 --> <!-- 138. Jean https://codepen.io/jean-liu/pen/yLvgJEa --> <!-- 139. 狸貓#9725 https://codepen.io/leeemo/pen/RwQZJjz --> <!-- 140. H2CO3#7232 https://codepen.io/guan-zhen-wang/pen/xxYEdxV?editors=1100 --> <!--141.Vito#7797 https://codepen.io/Vito_Yang/pen/rNJGyJO --> <!--142.piha#9987 https://codepen.io/pihahaha/pen/RwQZmpd --> <!--143.JessieCho https://codepen.io/jessieCho/pen/MWQExmV --> <!--144.CrystalD#6007 https://codepen.io/Crystaldu/pen/abqVpNj --> <!--145. YC#2008 Codepen: https://codepen.io/danisternburg/pen/rNJYQKr?editors=1100 --> <!--146. Arvin#6347 Codepen: https://codepen.io/family929317/pen/abqZLXE?editors=1100 --> <!--147. zera#6060 codepen : https://codepen.io/zera-tseng/pen/QWQaWgd?editors=1100 --> <!--148. mei#8421 codepen : https://codepen.io/Shila-Chen/pen/abqEYgP --> <!--149. color#4378 codepen: https://codepen.io/color0602/pen/LYQZXxM?editors=1100 --> <!--150. Yurii#7455 codepen: https://codepen.io/Yurii-Wen/pen/ExQbxdM?editors=1100 --> <!--151. Jumpye#8601 codepen: https://codepen.io/Jumpye/pen/GRQGRgO?editors=1100 --> <!--152. Vivian#9511 codepen: https://codepen.io/Vivianliuu/pen/vYdjyax?editors=1100 --> <!--153. jiajiajiahou#5229 codepen: https://codepen.io/chia-chia-hou/pen/qBxYwZY?editors=1100 --> <!--154. Eileen#6454 codepen: https://codepen.io/Eileen-io/pen/MWQVrdq --> <!-- 155.Barret#1119 https://codepen.io/barret0720/pen/dydqRpo --> <!-- 156. JOU#6876 https://codepen.io/joujoujou924/pen/rNJZgxm --> <!-- 157. Zoey#0839 https://codepen.io/zoec/pen/JjpwoqR -->