7 элементов посадочной страницы после клика по кнопке должны совершить движения, аналогичное приведенному по ссылке https://threejs.org/examples/css3d_periodictable.html

Элемент – текст с фоном внутри контура в виде бутылок для кулерной воды. Каждый элемент – кликабельный и интерактивный (смена прозрачности, изменение цвета границы при наведении мыши и т.п.).
При клике по любому элементу остальные должны перейти в правую часть экрана в виде вертикальной колонки. При уменьшении размеров экрана элементы должны уменьшается до иконок с исключением части исходного текста.
На освободившемся экране открыть окно, в котором 70% площади занимает описание открывшегося элемента, а на 30% (внизу окна) – схематичное изображение травы (вертикальные полоски зеленого цвета).
У блока «трава" два варианта анимации.
«Засыхание» – цвет травы меняется на желтый, трава сокращается в размерах, превращаясь в бурую пыль.
«Расцветание» – над зеленой травой плавно поднимаются вверх на 30% три схематичные ромашки (кружок на палочке желтого цвета и вокруг него эллипсы, как лепестки).
Время анимации травы индивидуальное для каждого элемента (зависит от количества знаков в тексте каждого элемента).
Посадочная страница должны быть адаптивной и кроссбраузерной.
Цель этой работы – сравнить конверсию покупок в интернете без кнопки и с кнопкой "Сравнить цены". Сделанный Вами проект будет внедрен в готовый сайт водной компании.
Во вложении моя верстка страницы (я – новичок ). Логотипы и содержание акций на странице нужны только для вашего понимания, в каком месте будет размещена кнопка («Сравнить цены»), по которой начинается анимация. Их повторять не надо. Достаточно сверстать на странице с серым фоном 3 красивые карточки с белым фоном. Внутри каждой карточки поместить произвольную картинку (можно использовать мои) с текстом "Акция 1", "Акция 2", "Акция 3" и оформить на странице кнопку "Сравнить цены". Готовая страница нужна для проверки адаптивности кода и целостного восприятия кнопки и карточек с акциями.
Разработать надо 4 сценария анимации:
1 – бутылки кружат хоровод и выстраиваются в линию по центру экрана. В задании есть готовый код из codpen. В нем вместо химических элементов использовать 19л бутылки;
2 – клик по любом элементу и бутылки перестраиваются на экране, а активный элемент раскрывается;
3 – в активном элементе блок "трава" засыхает;
4 – в активном элементе блок "трава" расцветает.

Сложность работы в адаптивности анимации – кодом менять вектора движений элементов и их содержимое при изменении экрана. Анимации кажутся не сложными, должны решаться скриптом.