---
# System prepended metadata

title: "\U0001F3C5 5/12(四) 每日切版任務 - RWD 練習 I"
tags: [公益程式體驗營 - 2022]

---

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