## Recap from last class (02/20)
---
### In-Class Practice 01<i class="fa fa-firefox fa-spin fa-1x"></i>
* Draw 4 boxes with (w,h) = (150px, 100px), put them in a row separeted with 20px. Color them "orange".
* How to draw a "box" HTML? Using "div", "span"?
----
### Let's beautify the boxes by making them 立體感<i class="fa fa-firefox fa-spin fa-1x"></i>
* Making a "round border"
* Add "blurred shadow"
----
### Let's make some "animation"
* First, let's align boxes horizontally on the center of the browser window
* When mourse hover, make the box "pop-up", while others remain intact
* Please check: when browser window is resized, the last box(es) is(are) "wrapped" to the next line!
----
### Let's improve the user experience!
* When window gets smaller, the boxes should get smaller accordingly. (note: use "@media" queries)
* The boxes should remain in a line. However, when the window gets too small, the boxes should alter to align vertically.
---
## End
{"metaMigratedAt":"2023-06-14T20:19:42.073Z","metaMigratedFrom":"YAML","title":"Recap from last class (02/20)","breaks":true,"slideOptions":"{\"theme\":\"league\",\"transition\":\"fade\",\"slidenumber\":true}","contributors":"[{\"id\":\"a202b02b-072b-4474-be14-c5a3f8932dbb\",\"add\":86,\"del\":1},{\"id\":\"752a44cb-2596-4186-8de2-038ab32eec6b\",\"add\":1404,\"del\":257}]"}