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

Yalda Khoshpey @yaldakhoshpey

About: 🎨 Front-End Developer | 🛠️ WordPress Customizer 💡 Skilled in HTML, CSS, JavaScript, and learning Python 🌐 Crafting clean, responsive websites with love and creativity

Location:
IRAN,arak
Joined:
Jun 11, 2025

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

Publish Date: Jul 16
21 5

🌠 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

Nebula CSS Resources Dashboard Preview

Cat typing like crazy
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
Enter fullscreen mode Exit fullscreen mode

🎨 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

Explored color and animation to communicate function and mood

Collaborated with my twin, whose dashboard inspired me throughout ❤️


👯‍♀️ Team & Shout-outs

🌟 Designed & developed by @yaldakhoshpey

👩‍🚀 Inspired by @vidakhoshpey22’s Admin Dashboard build

🏢 Huge thanks to Axero and DEV.to for organizing this creative challenge


📜 License

This project is licensed under the MIT License. You’re welcome to use, remix, and build on it — just credit the original.


Made with 💫, ☕, and a sprinkle of twin-powered space magic by
Yalda Khoshpey

Comments 5 total

Add comment