This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.
Inspiration
When I saw the theme was “celebration,” the first thing that came to mind was joy, fun, and vibrance — and what better way to express that than with colourful visuals and animated interactions?
I began thinking of how celebrations make us feel: bright, lively, and a little chaotic in the best way. Then I realized — June isn’t just Pride Month or Father’s Day — it’s packed with quirky, joyful occasions like National Donut Day, Go Barefoot Day, and World Oceans Day. That variety gave me the perfect excuse to showcase different styles, moods, and themes using just HTML, CSS, and a little JavaScript.
So I built a space where each day’s celebration could shine: with a description, a fun fact, a “how to celebrate” moment, and even a shareable button — just like how you’d invite someone to a party 🎉
This project became my way of celebrating celebration itself — with floating particles, playful gradients, and lots of little CSS surprises. It’s my colourful tribute to the randomness and joy that June brings.
Demo
You can explore the full project here on GitHub:
👉 GitHub Repository – June Celebrations CSS Art
If you'd like to run it locally:
- Clone or download the repo
- Open
index.html
in your browser - Enjoy the celebration-themed fun 🎉
Optional: View the hosted version here 👉 Live Demo
`
`
This was my first time creating such a colourful, interactive website, and honestly — it was a journey filled with learning, experimenting, and a lot of back-and-forth!
In the beginning, I was a bit confused about how to bring so many elements together — shapes, animations, layout — and still make it look cohesive. I tried a few different ideas, changed direction more than once, and slowly things started falling into place.
I'm proud of how it turned out because I feel like I took a real step forward in CSS and JavaScript — exploring animations, layout tricks, and responsive design in ways I hadn’t before. I even played with new visual ideas using clip-path
, gradients, and floating elements that were totally new to me.
More than anything, this project sparked a deeper interest in frontend design — it gave me fresh ideas and the confidence to try bolder styles. I’m excited for the next CSS or website challenge where I can push myself further and apply everything I learned here (plus some new twists!).
And yes, I’ll admit — if this doesn't win, I’ll be a little disappointed 😅 But even then, I’ll just take it as motivation to come back stronger next time 💪
Flying solo on this one! Just me, my code, and a lot of colorful chaos. 🚀🎨
Top comments (1)
THIS IS JUST AMAZING!!! Truly, my mind is blown away right now. Kudos to your hard work.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.