DEV Community

Cover image for [Frontend Challenge] Space Markup πŸš€
Arnav
Arnav

Posted on

[Frontend Challenge] Space Markup πŸš€

Screenshot of solar markupThis 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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)