DEV Community

Cover image for Daily Challenge #2 : The "Secret Valentine" Decoder ๐Ÿ’Œ
bingkahu (Matteo)
bingkahu (Matteo)

Posted on

Daily Challenge #2 : The "Secret Valentine" Decoder ๐Ÿ’Œ

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 ๐Ÿšซ

  1. NO JavaScript Allowed: No onclick, no addEventListener, and absolutely no localStorage.
  2. Pure CSS/HTML only: You must rely on checkboxes, :checked states, :hover, or :active selectors to trigger the reveal.
  3. 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)