`Este é um envio para o Frontend Challenge v24.09.04, CSS Art: Space.

Inspiração

Eu queria criar uma representação interativa e visualmente envolvente do nosso Sistema Solar usando CSS Art e HTML. A inspiração vem do meu fascínio pelo espaço e pela beleza dos corpos celestes. Através deste projeto, pretendi combinar design minimalista com elementos interativos que incentivassem os usuários a explorar e aprender sobre cada planeta do Sistema Solar.

Demonstração

Demonstração ao vivo: Explore o Sistema Solar
https://solar-system-explorer-css-art.vercel.app

Você também pode ver uma prévia do projeto no editor de código incorporado abaixo:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

Jornada

Neste desafio, decidi combinar design CSS criativo com funcionalidade JavaScript interativa para tornar a experiência mais dinâmica. Aqui está um detalhamento do processo:

Projetando os planetas: usei uma combinação de CSS Grid e animações flutuantes para criar cartões de planetas que proporcionam interatividade divertida. Os nomes dos planetas e as principais informações são apresentados dinamicamente.

Efeitos de flutuação interativos: cada planeta tem um efeito de flutuação brilhante, inspirado na forma como os objetos celestes emitem luz. Também adicionei uma animação giratória ao pairar para simular o movimento orbital.

Modais para mais informações: quando um planeta é clicado, um modal aparece com informações adicionais, criando uma experiência de aprendizagem envolvente. Isso torna o aplicativo interativo e informativo.

Arte CSS: Em vez de usar imagens externas, toda a arte do sistema solar foi construída usando CSS puro. Concentrei-me em formas, cores e efeitos de brilho para simular a aparência dos planetas.

Responsividade: O layout é totalmente responsivo, adaptando-se a todos os tamanhos de tela para garantir que os usuários possam explorar o sistema solar a partir de qualquer dispositivo.

O que aprendi:
O desafio de tornar CSS Art interativo usando JavaScript simples.
Implementação de animações e efeitos de foco avançados para dar vida aos elementos estáticos.
O poder do CSS Grid e Flexbox para criar layouts responsivos e limpos.
O que vem a seguir?
Pretendo adicionar informações mais detalhadas sobre os planetas e potencialmente implementar uma visualização 3D interativa dos planetas para simular uma experiência mais próxima da realidade.
Aprimorando o modal para exibir dados em tempo real, como velocidade de rotação do planeta e variações de temperatura.`