---
# System prepended metadata

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

---

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

#  🏅 5/27 (五) 每日切版任務 - position 練習
## 題目 

* 用 Codepen 練習以下畫面，若有不足的尺寸，可試著自行調整為差不多的樣式即可:

謎樣的小提示: box-shadow 不只是打上陰影的作用喔!

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

>**相關資訊**
![](https://i.imgur.com/8iRWBlF.png)

>**完成圖**
![](https://i.imgur.com/RD59Eb0.png)





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

## 回報流程

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

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

<!-- 解答：  -->

回報區
---
<!-- 1. yunyun
Codepen：https://codepen.io/yun_yunni/pen/eYVyvNP
-->

<!-- 2. Bruno Yu
Codepen：https://codepen.io/bruno-yu/pen/dydJNxb
-->

<!-- 3. RJRS#9430
Codepen：https://codepen.io/RJRS/pen/mdXpWGw
-->

<!-- 4. Stanley
Codepen：https://codepen.io/sean_1215/pen/RwQxpoR
-->

<!-- 4. han#9437
Codepen：https://codepen.io/qnrxylcw-the-reactor/pen/wvypdMY
-->

<!-- 5. Chi
Codepen:　https://codepen.io/YoChi84/pen/KKQZWxr 
-->

<!-- 6. Eric.S
 Codepen：https://codepen.io/Eric_Shen/pen/YzeYVxe
-->

<!-- 7. Sweet
 Codepen：https://codepen.io/Pei-Ying/pen/abqEWdZ
-->

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

<!-- 9. 小不點#1793
Coedepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/PoQEjYv
-->

<!-- 10. ajhappy#6488
Codepen:https://codepen.io/ajhappy5438/pen/bGLaRBV
-->

<!-- 11.IreneLee
 codepen:https://codepen.io/ntjtcxpt-the-animator/pen/WNMdONv
-->

<!-- 12.Noy
https://codepen.io/MochiCodingPen/pen/gOvoRGO
-->

<!-- 13.Tori
https://codepen.io/FlyTori/pen/BaYJdLZ
-->

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

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

<!-- 16.How#5806
https://codepen.io/howtobefine/pen/MWQrEYN
-->

<!-- 17. Hao#2485
 https://codepen.io/hao216/pen/rNJpzdg
-->

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

<!-- 19. Peng
https://codepen.io/peng-027/pen/PoQEEOj
 -->
 
<!-- 20. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/JjpMrNW
-->

<!-- 21. Jason Chen 現在我有冰淇淋
Codepen: https://codepen.io/jason60810/pen/GRQyQRy
-->

<!-- 22. lyle#8123
Codepen: https://codepen.io/tomys/pen/yLvpvyW
-->

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

<!--24. 雷雷#7844
https://codepen.io/lei-yi-jie/pen/LYQeByJ
-->

<!--25. deveryone#8090
https://codepen.io/raycheng/pen/xxYpayb?editors=1100
-->

<!--26. yuyu#6310
https://codepen.io/yuyu0905/pen/mdXpBLG?editors=1100
-->

<!--27. Knn#0492
https://codepen.io/Knn_84/pen/MWQQWvp
-->

<!--28. Arista
https://codepen.io/arista-hsieh/pen/ZErrEyK
-->

<!-- 29. JackC
Codepen: https://codepen.io/key0329/pen/QWQQwdO -->

<!-- 30. Charlotte Lee
Codepen: https://codepen.io/charlotte-lee/pen/NWyyqve?editors=1100 -->

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

<!-- 32. Katie
codepen: https://codepen.io/Katie24/pen/xxYYVRV
-->

<!-- 33. 小天#7177
https://codepen.io/linyujing/pen/abqqEBP
-->

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

<!-- 35. hw#0715 
https://codepen.io/Lhwei/pen/PoQQeJb 
-->

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

<!-- 35. Chaco#2993 
https://codepen.io/chaco-wang/pen/WNMMKZv?editors=1100
-->

<!-- 36. Muse#9741
https://codepen.io/mu24/pen/oNEEOgV
-->

<!-- 37. RayChen#6088
https://codepen.io/raychen1996/pen/RwQMNea
-->

<!-- 38. Ayre#0016
codepen: https://codepen.io/yichunlin09/pen/MWQVKyO
-->

<!--39. TunacanBoy#2206
https://codepen.io/JamesDesign/pen/vYdRpzO
-->

<!-- 40. Mitour#0672
 codepen https://codepen.io/mitour/pen/qBxoxjb
-->

<!-- 41. Ryan Lu#3642
 codepen https://codepen.io/ryanlu1125/pen/RwQMmwa?editors=1100
-->

<!-- 42. Erica Chen#6929
 codepen https://codepen.io/ericachen/pen/MWQGarK
-->

<!-- 43. Greta#0837
codepen
https://codepen.io/gretali/pen/yLvjOMR
-->

<!-- 44. amy芳#1385
codepen
https://codepen.io/amy-chieng/pen/GRQdyZa
-->

<!-- 45. J_u_d_y#5993
https://codepen.io/J_u_d_y/pen/JjpZGZa
-->

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

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

<!-- 47. ling chang#1024
https://codepen.io/ling-chang/pen/vYdraZJ
-->

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

<!-- 49. Vera#5592
Codepen：https://codepen.io/skvera/pen/GRQQqbg
-->

<!-- 50. Cliff
https://codepen.io/Cliff_hex/pen/ZErjByx 
-->

<!-- 51. Cynthia1111
https://codepen.io/Cynthia1111/pen/GRQBNOo 
-->

<!-- 52. Jumpye#8601
https://codepen.io/Jumpye/pen/dydqZZG?editors=1100
-->
<!-- 53. 鉦勝 #8333
https://codepen.io/atckmax823/pen/abqRVRe
-->

<!-- 54. Jamie 
https://codepen.io/Wu220103/pen/gOvvbxL -->


<!-- 55. andersonshen#4675
Codepen：https://codepen.io/luxyenni-the-bold/pen/bGLZape
-->

[xuan#0808](https://codepen.io/xuan0915/pen/YzeMWLv?editors=1100)

<!-- 57. WeiKai
Codepen: https://codepen.io/beginneraboutlife116/pen/oNqgNeV
-->