We'll be beefing up our original DJ JS. (You'll still need to make this from scratch).
Also, instead of one main box, you'll make 6 smaller boxes. Each one, when hovered, should change 2 or 3 different properties of the box that was hovered.
You get to choose which properties change, but try to vary it between each box. Here's a non-exhaustive list of something you could change about each box:
- Background color
- Border (width, color, style)
- Border radius (can target each corner individually if you want)
- Box shadow
- Margin/padding (put some text inside to better see what's happening)
ALSO, you must make each box smoothly transition from one style to another. (This is a CSS transitions practice, after all).
Learn about the HTML5
<audio> tag and insert some music to play in the background. It's just like you're in the club!
Have fun, and experiment with CSS transitions!