Happy February 14th! Today we are playing Cupid, but instead of arrows, we’re using pure CSS logic. Your mission is to build a secret message reveal.
The Mission
Create a "Love Letter" UI. Initially, the page looks empty or has a placeholder. When the user interacts with it, a secret message is revealed.
The Rules 🚫
-
NO JavaScript Allowed: No
onclick, noaddEventListener, and absolutely nolocalStorage. -
Pure CSS/HTML only: You must rely on checkboxes,
:checkedstates,:hover, or:activeselectors to trigger the reveal. - The Reveal: The message shouldn't just "be there." It needs to be triggered by a specific user action (like clicking a "Seal" or hovering over an envelope).
The Goal 🏆
Make the reveal feel magical. Use transitions, opacities, or transform scales to make the message "pop" out of the envelope.
How to enter:
Drop your CodePen or GitHub Repo in the comments below!
- Bonus Points: If you use the "Checkbox Hack" to make the message stay open after being clicked.
- Extra Credit: If you style it to look like a vintage wax-sealed letter. ✉️
Have fun and Happy Valentines!
Top comments (0)