This is a submission for 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.
Top comments (14)
Love how you brought that zine energy to the web - it really pops! What part of the build was the biggest creative challenge for you?
Honestly? Translating the idea into code was the biggest creative lift. But once that clicked, the live showcase of the stories became my favourite part—it felt like watching the zine breathe on screen. CSS gave me a ride too—finding the right colours, nailing the glitch effect, obsessing over every tiny detail you see... it was all me pouring heart (and back pain 😅) into it. Post-project effect? I can’t feel my spine 😂 But thank you for asking—it means a lot!
this dotallio guy seems to be bot tbh. :D saw him everywhere and just giving general questions from your article content
Haha you might be onto something, but hey, bot or not, I’ll take any excuse to ramble about CSS battles .😅 Thanks for keeping an eye out tho
This is really great
Thank you
Pretty cool seeing someone go all-in with raw CSS and actually make it feel personal, like you can feel the pride in every detail. Respect.
You can add this if you want :) One of drafts I made for submission to challenge, but decided to go with donut instead :)
That’s incredibly kind of you! 🥹 Thank you so much for sharing your draft—it’s beautiful, and I’m truly honoured to include it in my project. I’ll make sure to give you proper credit with all the love and pride it deserves 🌈💖 So grateful to cross paths with generous souls like you in this community! 🫶
Thanks, Sneha—I’m happy it landed well. Looking forward to see the magic you create! 🫡❤️
I didn’t know where else to message you—your profile’s GitHub link is incorrect. just FYI <3
Aww you're too kind, Sir! Here's the GitHub link just in case: github.com/Snehadas2005 — stalk away, haha 💖
Alert 🔴
can you please check your github repo if you pushed there something sensitive :) i found something what should not be there. text me on X if need help fixing it. x.com/axrisi
I got where I was missing, thank you for help
Some comments may only be visible to logged-in visitors. Sign in to view all comments.