This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.
Introduction
Hey DEV community! I'm Eleftheria, and I’m excited to share my submission for the Office Culture Frontend Challenge sponsored by Axero. I call this CSS art 'Zoom Call Mosaic', and it's a tribute to the chaotic, charming world of remote office life, built with pure CSS. You can check it out live on CodePen. Grab a coffee (or a virtual one ), and let me walk you through the inspiration, process, and code behind this project!
Why Zoom? My Story
I’ve been working remotely since 2018, and Zoom has become my daily companion. Whether it’s a quick standup, a brainstorming session, or a virtual happy hour, Zoom is where I connect with my colleagues. One of my favorite memories is from a team meeting where my coworker’s cat jumped into the frame, stealing the show while we all laughed and sent thumbs-up reactions. These moments (cats, coffee, sleepy colleagues, and all) capture the heart of modern office culture. I wanted my CSS art to reflect that messy, human, and totally relatable vibe of Zoom calls. 😊
Inspiration
I browsed other submissions in the Frontend Challenge series, and the creativity blew me away! But I decided to go my own way and focus on something super specific to office life: a Zoom call with multiple people. The challenge prompt mentioned water coolers and mechanical keyboards, but I felt Zoom was a better symbol of my personal work life as a remote worker. I didn't want to completely copy zoom's interface, but make something cute and aesthetic. I wanted to add a few participants in a cartoonish way and have a few interactive buttons and animations, all in CSS.
Demo
https://codepen.io/EleftheriaBatsou/full/raOMrqv
Check it here.
Journey: A Zoom Call in CSS
The Zoom Call Mosaic is a 3x3 grid of video feeds (but it's also responsive), mimicking a real Zoom meeting. Each participant represents a slice of office culture:
- Sarah (Host): Glowing as the active speaker, keeping the meeting on track. 🗣️
- John: Camera off, just a pulsing icon—because we all know that guy. 📷
- Mike: Rocking pajamas and yawning, the WFH aesthetic. 😅
- Alex: Half-asleep with a emoji floating above, nodding off in the meeting. 😴
- Emma: Messy hair flipping in the wind (or maybe just a bad hair day - that could have been me!). 👱♀️
- Marcus: A professional with glasses, giving a thumbs-up reaction. 👍
- Lisa: Interrupted by a cat jumping into frame—classic Zoom moment! 😻
- David: Sipping coffee with animated steam, fueling the meeting. ☕
- You: A special self-view with a golden border, because you’re the star of your own Zoom call. 🙌
The interface includes a top bar with meeting info (like “Team Standup, 10:30 AM”), a control bar with functional buttons (all the icons have small animations, maybe the icons are changing, or the background color is changing, etc - have a look!), a toggleable chat panel with sample messages, and a connection status indicator. It’s all built with vanilla CSS—no JavaScript—making it a pure CSS art piece.
The Code: How It Came Together
Here’s a quick peek at the key ingredients in the Zoom Call Mosaic, without diving too deep:
-
Grid Layout: The 3x3 video grid uses
display: gridwithgrid-template-columns: repeat(3, 1fr)for a responsive layout that shifts to 2 columns on smaller screens. -
Participant Avatars: Each avatar is a
divwith a gradient background and an emoji (::before) for character. For example, Emma’s.messy-hair-girluses ahairFlipanimation to sway her hair (or, at least, that was my inspiration!). -
Animations: I leaned hard into
@keyframesfor life-like effects:
• breathe: Avatars subtly scale to mimic breathing.
• catJump: Lisa’s cat pops in every 6 seconds.
• steam: David’s coffee steam rises and fades.
• nod and yawn: Alex and Mike move sleepily.
• speakerPulse: Sarah’s video feed glows when active.
Interactivity (CSS-only): Using checkbox and radio inputs with :checked states, I made buttons toggle:
• Mute/unmute switches between 🎤 and 🔇 icons, with a red glow when muted.
• Camera on/off changes the video feed (📷,🎥).
• Reactions (👍,👏 , ❤️) light up with a green backround when clicked.
• Chat toggle slides the chat panel in/out.
Responsive Design: Media queries adjust the grid, font sizes, and controls for mobile, with a fallback to hide reactions on tiny screens.
Accessibility: Added prefers-reduced-motion support to respect user preferences.
The full code is on CodePen—feel free to fork it and play around!
The Process:
This project took me a few days to conceptualize and a few more to build. I leaned on AI tools to help generate and refine the CSS, but the inspiration was all mine. I spent quite a few time sketching out ideas, wanting to capture the chaos of Zoom calls (cats, sleepy colleagues, coffee mugs, and all). I initially planned to add more details to the buttons, like animated reaction pop-ups or virtual background switches, but I ran out of time. Maybe I’ll revisit that in a future version!
Finding the right balance was tricky. I wanted the interface to feel like Zoom without being a pixel-perfect copy, and I wanted each participant to tell a story.
Why CSS Art?
I’ve always loved CSS art, and I have experimented a lot with it (check out my codepen, I've also written a lot of articles about CSS, and CSS art).
There’s something magical about turning lines of CSS into a living, breathing scene.
This Zoom Call Mosaic is one of my favorites because it’s so personal—it’s my daily work life in code form.
What’s Next?
I had a blast building this for the Office Culture challenge, and I hope the judges and community enjoy it as much as I do!
I’d love to hear your feedback—does it remind you of your own Zoom calls? Maybe you’ve got a story about a pet crashing your meeting or a time you forgot to unmute. Drop a comment below, and let’s swap WFH tales!
Thanks to DEV.to and Axero for this awesome challenge. It pushed me to get creative and have fun with CSS. Can’t wait to see everyone else’s submissions!
Top comments (4)
👍👍👍 Looks awesome
Thank you so much 😊
Thank you so much