---
# System prepended metadata

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

---

---
tags: 公益程式體驗營 - 2022
---

#  🏅 5/26 (四) 每日切版任務 - Flex 與 RWD 練習
## 題目 

* 用 Codepen 練習以下畫面，提供 Desktop 寬度尺寸為 1000px ，其餘相關尺寸、間距請自行設計，只要跟畫面比例差不多即可，需做 RWD( Desktop -> 768px -> 576px ):

>**顏色資訊**
>![](https://i.imgur.com/roBsYWj.png)


>**Deskto**
![](https://i.imgur.com/rXA9ANs.png)

>**768px**
![](https://i.imgur.com/uEBPx4S.png)

>**576px**
![](https://i.imgur.com/uqLZhgx.png)




<!--
ans:
[RWD02](https://codepen.io/DoLucky/pen/eYVWEgv?editors=1100)
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

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

<!-- 解答：  -->

回報區
---

<!-- 1. Bruno Yu 
Codepen: https://codepen.io/bruno-yu/pen/WNMXKRo

-->

<!-- 2. yunyun 
Codepen: https://codepen.io/yun_yunni/pen/gOvXjmb

-->

<!-- 3.IreneLee
codepen:https://codepen.io/ntjtcxpt-the-animator/pen/RwQjBYP 
-->

<!-- 4. su#7798
codepen: https://codepen.io/wc-su/pen/ZErajVj
-->

<!-- 5. 楓之聲#6945
codepen: https://codepen.io/sshane258/pen/GRQOXLQ  
-->

<!-- 6. Peng
https://codepen.io/peng-027/pen/xxYPygd?editors=1100
 -->
 
<!-- 7.Noy
https://codepen.io/MochiCodingPen/pen/oNEoayd
-->

<!-- 8.RJRS#9430
https://codepen.io/RJRS/pen/gOvXBWQ
-->

<!--9.Chaco #2993
https://codepen.io/chaco-wang/pen/mdXqzwG?editors=0110
-->

<!-- 10. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/wvyPYPb?editors=1100
-->

<!-- 11.Mitour#0672
 https://codepen.io/mitour/pen/ExQbdvW
-->

<!-- 12. Cheng-Yu#1813
 codepen: https://codepen.io/ball77111/pen/NWywEBj
-->

<!-- 13. Cliff
https://codepen.io/Cliff_hex/pen/LYQOXNX 
-->

<!-- 14.眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/MWQOPNp
-->


<!-- 15. Greta#0837
Codepen: https://codepen.io/gretali/pen/ExQbOqM
-->

<!-- 16. Hao#2485
https://codepen.io/hao216/pen/dydZzWp
-->

<!-- 17.LHchien
https://codepen.io/lin_chien/pen/vYdWvyX?editors=1100 
-->

<!-- 18. Chaoci#2460
Codepen:
https://codepen.io/gmailchao/pen/OJQOoKw?editors=1100
-->

<!-- 19.Joyce
https://codepen.io/joycehuang/pen/gOvXqbK?editors=1100
-->

<!-- 20. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/mdXqvoo
-->

<!-- 21. How#5806
Codepen：https://codepen.io/howtobefine/pen/gOvXEKP
-->

<!-- 22. SASIMI#5099
Codepen：
https://codepen.io/sashimi1327/pen/jOZaJgZ
-->

<!-- 23. 雷雷#7844
https://codepen.io/lei-yi-jie/pen/yLvPrLE?editors=1100
-->

<!-- 24. #EVC1876
Codepen: https://codepen.io/elvi-chuang/pen/zYRPeLz?editors=1100
 -->
 
 <!-- 25. lyle#8123
Codepen: https://codepen.io/tomys/pen/eYVeaZp
 -->
 
<!-- 26. Jason Chen
Codepen: https://codepen.io/jason60810/pen/qBxVwRE
 -->
 
 <!-- 27. ajhappy#6488
Codepen:https://codepen.io/ajhappy5438/pen/KKQyjmm
-->

<!-- 28. Chi
Codepen:　https://codepen.io/YoChi84/pen/ExQbzJb 
-->

<!-- 29. hw#0715 
 https://codepen.io/Lhwei/pen/bGLYPQq
-->

<!--30. 黑松胖#4836
https://codepen.io/yi-chien-hsieh/pen/MWQOqWq?editors=1100
-->

<!--31. Stanley
https://codepen.io/sean_1215/pen/BaYmEWm
-->

<!--32. 鉦勝
https://codepen.io/atckmax823/pen/QWQaLXy
-->

<!--33. Muse#9741
Codepen:https://codepen.io/mu24/pen/gOvXBOK
-->

<!--34. amy芳#1385 
Codepen:https://codepen.io/amy-chieng/pen/OJQzJWV
-->

<!--35. bonnieli1414#4906
Codepen:https://codepen.io/bonnieli1414/pen/GRQyZVL
-->

<!--36. Ryan Lu#3642
Codepen:https://codepen.io/ryanlu1125/pen/abqEOgE?editors=0100
-->

<!--37. JessieCho
Codepen:https://codepen.io/jessieCho/pen/vYdpXMZ
-->

<!--38. 小不點#1793
Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/qBxpRMg
-->

<!--39. JustinLiu
Codepen: https://codepen.io/justin0227/pen/rNJYbmb?editors=1100
-->

<!--40. Knn#0492
Codepen: https://codepen.io/Knn_84/pen/OJQzgPK
-->

<!--41. Tori
Codepen: https://codepen.io/FlyTori/pen/PoQEmQx?editors=1100
-->

<!--42. xuan#0808
Codepen: https://codepen.io/xuan0915/pen/eYVyWjd?editors=1100
-->

<!--43. yuyu#6310
Codepen: https://codepen.io/yuyu0905/pen/gOvoxxW
-->

<!-- 44. JackC
Codepen: https://codepen.io/key0329/pen/PoQEOOw
-->

<!-- 45. deveryone#8090
https://codepen.io/raycheng/pen/bGLaMmv
-->

<!-- 46. mei#8421
https://codepen.io/Shila-Chen/pen/WNMdaNa
-->

<!-- 46. skypassion5000#4151
https://codepen.io/skypassion5000/pen/oNEpPzN?editors=1100
-->

<!-- 47 J_u_d_y#5993
https://codepen.io/J_u_d_y/pen/poapxZv
-->

<!-- 48 Arista
https://codepen.io/arista-hsieh/pen/xxYpejK
-->

<!-- 49. Vicky Chang#8846
Codepen:
https://codepen.io/cychang/pen/yLvpmYv?editors=1100
-->

<!-- 50. danny123
codepen: https://codepen.io/binlandz123/pen/PoQQYey?editors=1100
-->

<!-- 51. Lina Chen
Codepen: https://codepen.io/LinaChen/pen/OJQQLNZ
-->

<!-- 52. Charlotte Lee
Codepen: https://codepen.io/charlotte-lee/pen/gOvvOWN?editors=0100
-->

<!-- 53. Josh Chen#4552
Codepen: https://codepen.io/hiphop825/pen/dyddYYK?editors=1100
-->

<!-- 54. Katie
Codepen: https://codepen.io/Katie24/pen/NWyyxqp
-->

<!-- 55. 花禮湖燒#7359
Codepen: https://codepen.io/lai-pei/pen/vYddGoa
-->

<!-- 56. Vera#5592
Codepen: https://codepen.io/skvera/pen/mdXXyEV
-->

<!-- 57. 小天#7177
https://codepen.io/linyujing/pen/rNJJYQp?editors=0100
-->



<!-- 58.RayChen#6088
https://codepen.io/raychen1996/pen/zYRWGLv
-->

<!--59. Ayre#0016
codepen:https://codepen.io/yichunlin09/pen/OJQvVaw?editors=1100
-->

<!--60. 家洋#6999
https://codepen.io/yang940648/pen/JjpLyjB
-->

<!--61. Erica Chen#6929
https://codepen.io/ericachen/pen/rNJdKRa?editors=1100
-->

<!--61. hsiuhsiu
https://codepen.io/hsiuhsiu/pen/poaVXZo?editors=1100
-->

<!--62. CloThEs
https://codepen.io/bogwdnxx-the-sans/pen/XWZEaaB
-->

<!--63. Jamie
https://codepen.io/Wu220103/pen/WNMMzve -->

<!--64. ling chang#1024
https://codepen.io/ling-chang/pen/ExQRRNO?editors=1100 -->

<!-- 65. 白狐
Codepen：https://codepen.io/baihu7851/pen/BaYVPdV
-->

<!-- 66. Cynthia1111
Codepen：https://codepen.io/Cynthia1111/pen/wvyxzVK?editors=1100
-->

<!-- 67. Jumpye#8601
Codepen：https://codepen.io/Jumpye/pen/poaOwxq?editors=1100
-->

<!--68. TunacanBoy#2206
https://codepen.io/JamesDesign/pen/GRQxQEv -->

<!--69.yuling
  https://codepen.io/igzdflpu/pen/zYRRLZz-->
  
<!-- 70. andersonshen#4675
Codepen：https://codepen.io/luxyenni-the-bold/pen/bGLZRrX
-->

<!-- 71. WeiKai#1867
Codepen: https://codepen.io/beginneraboutlife116/pen/ZErNrWo
-->