Forem

Cover image for CSS Art: Earth Day 2024
Barry Els
Barry Els

Posted on

3 2

CSS Art: Earth Day 2024

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:

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (2)

Collapse
 
steeve profile image
Steeve •

On firefox your earth is between flat and being a bagel.

Image description

On Chrome it looks round as expected :D
Congrats!

Collapse
 
barryels profile image
Barry Els •

Thank you so much for the feedback @steeve 🙌
I managed to fix it.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay