🖥️ Zoom Call Matrix – A Light-to-Dark CSS Intranet Surprise

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge CSS Art Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

For this challenge, I recreated a familiar remote work scene — the classic Zoom video call matrix — using only HTML, CSS, and a sprinkle of JavaScript.

But I didn’t stop at layout.

I made the monitor itself interactive:

💡 Double-clicking the screen toggles dark mode — like dimming the lights in a real meeting room.

This isn’t just a CSS layout. It’s a micro-moment for workplace UI — familiar, fun, and frictionless.

Demo

🌍 Live Demo (Netlify):
👉 https://oyezooareo2.netlify.app/

📁 **GitHub Repo:

👉 https://github.com/poowa-gg/Zoom-call-matrix/tree/master

🎥 Watch Video Demo (Google Drive):
👉 https://drive.google.com/file/d/1JPkKTmkrw0KTGnDcR2qTtozRcBGdY_Et/view?usp=sharing

✨ What It Does

🎨 CSS Grid layout with 4 avatar placeholders
🖥️ Monitor, stand, and base built from scratch with divs
🌗 Dark mode switch triggered by double-click (or Enter key)
♿ Keyboard navigable + screen reader friendly
📱 Responsive and zero dependencies

Journey

The goal wasn’t just to draw boxes — it was to build a component that feels alive.

So instead of a toggle button, I let users interact with the thing they’re looking at: the monitor.

It was a solo project

💬 Over to You

What’s your favourite subtle way to enhance a digital workspace?

Drop an idea below — could be wild, weird, or wow-worthy.

☕ If you liked this project, leave a comment, share with a teammate, or just smash that ❤️.

Thanks DEV + Axero for pushing us to reimagine the office intranet!