HackMD
Recap from last class (02/20)
In-Class Practice 01
- 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 立體感
- 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.
