Landing in June: A Celebration of Colours & Quirks

Isha Gupta — Sun, 08 Jun 2025 16:48:42 +0000

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations.

🎯 Perfect Landing for June Celebrations

What I Built

For this challenge, I created a vibrant landing page inspired by the quirky, joyful, and downright delightful celebrations of June!

Instead of focusing on a single day, I wanted the page to capture the spirit of celebration itself — from National Nail Polish Day to World Oceans Day, each event brings its own color, story, and energy. That gave me the idea to design a page that's dynamic, colorful, and fun, reflecting the mood of each day while offering users fun facts, celebration ideas, and shareable buttons.

The core theme? ✨ June is joy — let's celebrate everything! ✨

Demo

🔗 And here’s the live project/code on GitHub:

👉 View the Project on GitHub

(You can clone it, explore the CSS art, and even celebrate a random day!)

Journey

This was a fresh experience for me! I had never built a landing page where every element was so lively and thematic. From animations to background shapes and hover effects, I learned a lot — especially how to use CSS clip-path, animation keyframes, gradients, and responsive design tweaks for different screens.

There were moments of confusion early on — deciding how to fit so many small celebration cards, balancing design with clarity, and changing layout ideas more than once 😅. But every challenge taught me something new about arranging UI, layering effects, and keeping a theme consistent.

I’m proud of how it turned out — and more than that, I’ve definitely caught the bug for CSS creativity! I’m looking forward to the next frontend challenge to keep improving and applying new ideas. Whether I win or not, this project has already made me more confident in my skills and sparked a lot of design inspiration for future work.

Team Submissions

This was a solo project — designed and built entirely by me, Isha Gupta 💻🎨

Frontend Challenge: Joyful June in HTML, CSS & JS

Isha Gupta — Sun, 08 Jun 2025 16:39:34 +0000

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. 🚀🎨

DEV Community: Isha Gupta

Landing in June: A Celebration of Colours & Quirks

🎯 Perfect Landing for June Celebrations

What I Built

Demo

Journey

Team Submissions

Frontend Challenge: Joyful June in HTML, CSS & JS

Inspiration

Demo

`