DEV Community

Cover image for 🎉 Pride Month 2025: A Colorful Landing Page for June Celebrations
Praneet Biswal
Praneet Biswal

Posted on

🎉 Pride Month 2025: A Colorful Landing Page for June Celebrations

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

What I Built

For this challenge, I created a responsive and cheerful Pride Month 2025 Landing Page that highlights upcoming events, shares a brief history of Pride Month, and links to important LGBTQIA+ support resources.
Pride Month is close to my heart for its emphasis on love, identity, and equality. I wanted to design a page that felt warm, welcoming, and informative — celebrating community while encouraging visitors to get involved.

Demo

🔗 Live Demo (replace with your Netlify/CodePen/Vercel link)

✨ Preview:

Image description

Image description

Journey

Process:
I started by sketching a simple layout: a vibrant gradient header, a hero section with a call-to-action, event cards, and a resource list.
Focused on clean, responsive layout using CSS Grid and Flexbox.
Added soft pastel backgrounds and hover interactions to keep it modern and friendly.
Prioritized readability and accessibility in font choices, color contrast, and link behaviors.

What I Learned:
How minor UI details like spacing, color gradients, and button hovers can greatly improve the user experience.
Practical CSS Grid for adaptive card layouts.
Clean semantic HTML structure paired with modular CSS.

What I'm Proud Of:
The soft, inviting vibe of the page.
Keeping it fully frontend and lightweight while informative.
The quick-loading, mobile-responsive design.

Next Steps:
Add animated elements (like confetti or fade-ins on scroll)
Maybe expand this into a micro Pride event aggregator app later.

Team Submissions: praneet_biswal_d355dcff3c

This project is open for use under the MIT License.

Top comments (0)