Back to articles
Daily Challenge #2 : The "Secret Valentine" Decoder πŸ’Œ

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

via Dev.tobingkahu

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 , no addEventListener , and absolutely no localStorage . Pure CSS/HTML only: You must rely on checkboxes, :checked states, :hover , or :active selectors 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:

Continue reading on Dev.to

Opens in a new tab

Read Full Article
9 views

Related Articles