[Frontend Challenge] Space Markup 🚀

This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space

Demo

https://4rnv.github.io/solar-markup/

About

This demo is made using vanilla HTML, CSS and JS. I believe that the form of a page must follow its function, and the content should be displayed in a concise yet visually appealing manner. With these tenets in mind, I went for a gradient blue background with a grid layout for the planets and moons.

A canvas element was added with moving particles representing stars. Subtle animations are added for each section, along with appropriate styling. The distinct "leaf" shape for the info cards was achieved simply through asymmetric border radius.

.planets > *, .moons > *, .solar-system-objects > * {
    padding: 1rem;
    border: 4px dashed rgba(255, 255, 255, 0.5);
    transition: all 0.5s;
    cursor: pointer;
}

.planets>*:hover, .moons>*:hover, .solar-system-objects>*:hover {
    border-radius: 2rem 0;
    transform: scale(1.03);
}

I had a lot of fun designing this page. When you think about it, space is such a fascinating topic. As a child I had learnt this planetary mnemonic while in school:-

My Very Excited Mother Just Served Us Nine Pizzas.

Since then, Pluto's planetary status has been deprecated. Now, instead of Nine Pizzas the mother serves Nachos. Oh well.

Code

You can view the source code on Github.