Nebula CSS - A Galactic Office Scene Crafted Purely with CSS ✨

#frontendchallenge #devchallenge #css #html

Frontend Challenge CSS Art Submission

🌠 Nebula CSS: Galactic Resources Dashboard

This is a submission for the Frontend Challenge: Office Edition, sponsored by Axero — under the category CSS Art: Office Culture.

🌌 Inspiration

What if your office dashboard lived in a galaxy far, far away?

For this challenge, I envisioned a futuristic "Resources Dashboard" — a CSS-only, intranet-style interface glowing with galactic flair. Inspired by my talented twin sister @VIDAKHOSHPEY22 and her animated Nebula Works Admin Panel, I set out to build the counterpart: a static yet visually rich resource hub, crafted using only HTML and CSS, no JavaScript at all.

✨ Live Demo & Preview

🔗 Explore the Live Demo

📁 View Source Code on GitHub

Me coding HTML & CSS like... 🐱⌨️✨

🗂 Project Structure

Nebula-CSS/
├── assets/
│   ├── logo.png                 # Project logo
│   └── resource-preview.png     # Project preview image
├── index.html                   # Static dashboard page
├── style.css                    # All styles in one clean file
├── .hintrc                      # Optional lint config
└── LICENSE                      # MIT License

🎨 Highlights

✅ 100% HTML + CSS, zero JavaScript

🧩 Modular CSS with comments for easy navigation

🪐 Responsive layout using Flexbox & CSS Grid

🌠 Hover animations and glowing buttons with pure transitions

🧑‍🚀 Office-in-space UI design language — minimalist yet immersive

✍️ Carefully selected fonts and spacing for clean readability

🚀 What I Learned

This wasn’t just a design — it was a deliberate exercise in restraint. My main goal was to push the limits of CSS, and here’s what I took away:

How to use shadows, gradients, and layering to build a sense of depth

Leveraged CSS-only transitions to simulate interactivity

Learned how to build a dashboard layout with no JS or external libraries