###### tags: `HTML助教作業`
# 第三週作業

第三週作業主要讓同學學習簡單的排版與CSS動畫(animation)，以及如何利用transition讓枯燥的元素變得稍有活力。

***學習重點***
- 學習animation與@keyframes如何使用
- 了解margin和padding差別(先簡單了解就好)
- 自己做個帶有hover效果的圖片出來(加分用)
- 善用transition讓UX有所改善
- 複習絕對位置和相對位置(因為很重要)

***重點語法***
- animation
- @keyframes
- margin
- padding
- box-sizing
- position(absolute & relative)
- top/bottom/left/right

***作業要求***
自行利用HTML標籤和CSS打造出以下畫面，可視情況拿掉部分功能。

<iframe src="https://codesandbox.io/embed/disancizuoye-0ve39?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="第三次作業"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>