This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Inspiration
Earth’s composition is fascinating. I thought I’d take this opportunity to create a single page that covers some of its high-level layers.
Demo
Journey
I wondered how far you could get without having to rely on JavaScript. Admittedly, I had way too much fun with the spinning Earth portion, and ran out of time for the rest of the site (which is probably apparent 😅), but it was just fun to mess around with plain ol’ CSS for a change and not think too hard about things.
Learned
I learnt a lot about Earth’s composition, it’s actually pretty difficult to summarise since there are various perspectives you could use as your lens, plus there’s not a lot of direct measurements we can make about its deeper parts, for obvious reasons.
Next Steps
Things I’d like to get to:
Flesh out each of the layers with more detail
Add more animations per layer
Ensure everything’s semantically and accessibly marked up
Credits
You can scroll all the way down to the bottom of the actual submission for credits, but also here:
Data gleaned from: SEG Wiki & Wikipedia here, here and here
Visual inspiration drawn from: Kurzgesagt
Icons from: Iconoir
Landscape image: insspirito (Pixabay)
