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

Update

This project was a winner in the Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

In a world where visibility is resistance, QueerStation was born out of the desire to create a vibrant, interactive space that celebrates queer joy, resistance, and community. Inspired by punk zines, Pride protests, and chosen family, this CSS art project is a digital manifestation of love, rebellion, and identity.

Our vision was to translate the feel of a handcrafted zine into a browser experience—with glitchy headers, animated rainbow backgrounds, and floating symbols of celebration. Every element is meant to be loud, chaotic, and beautifully queer.

For the question of why only this project? I wanted to prove that front-end development can be beautiful and bold. That CSS art can tell stories. That a webpage can feel like home. I’ve always believed that tech isn’t just for solving corporate problems—it’s also a powerful medium for representation, empathy, and change.

Demo

🔗 Live Demo: https://brilliant-hamster-1e022f.netlify.app/
💾 GitHub Repo: https://github.com/Snehadas2005/QueerStation
📸 Preview Image:

Journey

This project was built with pure HTML, CSS, and JavaScript—no frameworks, no dependencies (aside from EmailJS for sending anonymous love notes). Here's what we learned:

• CSS Art can be expressive and political. Animations like @keyframes glitchEffect and layered shadows let us simulate the punk zine aesthetic.
• Interactivity without complexity is possible with minimal JS—hover states, keyboard accessibility, and click effects make the zine feel alive.
• We took care to make content inclusive and culturally relevant, focusing on Indian LGBTQ+ resources and Pride movements.

Features

• 🌈 CSS-based Pride flag animations (Rainbow, Trans, Bi)
• 📰 Zine-style article cards with punk-inspired borders and shadows
• 💖 “Spread the Love” form that sends anonymous messages via EmailJS
• 📚 Resources page with mental health, safety, and advocacy links for the LGBTQ+ community in India
• 📢 “Tell Your Story” feature for sharing personal experiences using LocalStorage
• 🎉 Floating shapes and glitch animations for maximum zine energy

Things We're Proud Of

• A design that feels handmade, defiant, and hopeful
• Full accessibility via keyboard navigation on interactive elements
• Creative use of emojis, CSS gradients, and custom fonts to give a voice to every page

Team Credits

Solo project by @sneha_2004
Special thanks to @axrisi for generously contributing a beautiful draft piece to the zine 💌
EmailJS template credits and flag design inspiration from contributors across CodePen and the LGBTQ+ dev community.

📄 License
MIT – Feel free to fork and remix with pride.