`Это заявка на Frontend Challenge v24.09.04, CSS Art: Space.

Вдохновение

Я хотел создать интерактивное и визуально привлекательное представление нашей Солнечной системы, используя CSS Art и HTML. Вдохновение исходит от моего увлечения космосом и красотой небесных тел. В этом проекте я стремился объединить минималистичный дизайн с интерактивными элементами, которые побуждают пользователей исследовать и узнавать о каждой планете Солнечной системы.

Демо

Живая демонстрация: исследуйте Солнечную систему
https://solar-system-explorer-css-art.vercel.app

Вы также можете просмотреть предварительный просмотр проекта во встроенном редакторе кода ниже:
https://github.com/Sooryaprabhath/solar-system-explorer-css-art

Путешествие

В этом задании я решил объединить креативный дизайн CSS с интерактивными функциями JavaScript, чтобы сделать процесс более динамичным. Вот описание процесса:

Проектирование планет: я использовал комбинацию CSS Grid и анимации при наведении, чтобы создать карточки планет, обеспечивающие забавную интерактивность. Названия планет и ключевая информация отображаются динамически.

Интерактивные эффекты при наведении: каждая планета имеет эффект свечения при наведении, вдохновленный тем, как небесные объекты излучают свет. Я также добавил анимацию вращения при наведении курсора для имитации орбитального движения.

Модальные окна для получения дополнительной информации: при нажатии на планету появляется модальное окно с дополнительной информацией, что создает захватывающий опыт обучения. Это делает приложение одновременно интерактивным и информативным.

CSS-арт: вместо использования каких-либо внешних изображений вся графика Солнечной системы была создана с использованием чистого CSS. Я сосредоточился на формах, цветах и ​​эффектах свечения, чтобы имитировать внешний вид планет.

Отзывчивость: макет полностью адаптивный и адаптируется ко всем размерам экрана, чтобы пользователи могли исследовать Солнечную систему с любого устройства.

Что я узнал:
Задача сделать CSS Art интерактивным с помощью простого JavaScript.
Реализация расширенных эффектов и анимации при наведении, чтобы оживить статические элементы.
Возможности CSS Grid и Flexbox для создания адаптивных и понятных макетов.
Что дальше?
Я планирую добавить более подробную информацию о планетах и, возможно, реализовать интерактивное 3D-изображение планет, чтобы имитировать опыт, более приближенный к реальности.
Улучшение модального окна для отображения данных в реальном времени, таких как скорость вращения планеты и изменения температуры.`