Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

June is a month packed with diverse and meaningful celebrations — from honoring Father’s Day and Juneteenth to the vibrant spirit of Pride Month. I wanted to capture a cheerful scene that brings together these events with a playful, CSS-only art piece featuring a waving Pride flag, a Father's Day card, a delicious hazelnut cake, a Juneteenth calendar date, and a tiny donut with colorful sprinkles for National Donut Day.

All of it is set under a bright sun to represent the warmth and joy of the month.

Demo

🔗 Live Demo on CodePen (replace with your actual CodePen or Netlify link)

Github Link- https://github.com/Praneetb2929/june-css-art/tree/main

✨ Preview:

Journey

This was a fun exercise in creative, semantic CSS positioning and animations:
I started by sketching out the scene layout in my head, then translated it element by element.
The Pride flag uses a simple linear-gradient background with a waving animation via @keyframes.
The sun features a soft pulse animation for subtle liveliness.
The donut was the trickiest but most fun — using border-radius, radial-gradient sprinkles, and a clever pseudo-element hole.
Each item was labeled using cleanly styled speech-bubble-like divs.

What I learned:
How small animations like subtle transforms and pulses can add life to a static CSS scene.
Reinforced the power of pseudo-elements (::before, ::after) to create layered details without extra markup.
CSS radial-gradient tricks for sprinkles and textures.

📌 Next Steps
I'd love to try adding:
Some animated confetti particles falling across the scene.
A button to toggle between day and night mode with CSS transitions.
Thanks to the DEV community for hosting this creative space!
Happy June Celebrations to all 🎉🌈🍰

<! Team Submissions: praneet_biswal_d355dcff3c -->

📖 License
This project is open for use under the MIT License.