Максим

Переписать в json и вывести всё это в цикле в javascript - и будет на выходе один блок в котором гора карточек

примерно вот так




это я единственное что на js умею

В общем мне дальше лень - флип сделал - текст добавил - дальше сами уже

https://codepen.io/topicstarter/pen/vYNWZXv

window.onunload - может так ?

Я полностью смоделировал ситуацию от json до адаптивного меню : https://codepen.io/topicstarter/pen/ZEbJeME

<svg height="200" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg">
<path d="M 15.498 487.577 L 15.498 431.037 L 62.884 396.913 L 94.033 351.883 L 158.319 309.973 L 189.252 236.175 L 280.039 205.522 L 302.034 124.519 L 320.749 62.004 L 384.937 13.925 L 445.421 30.396 L 469.462 54.445 L 469.462 488.53" stroke="red" stroke-width="4" fill="red" fill-opacity="0" stroke-dasharray="0 1637">
   <animate attributeName="stroke-dasharray"
            dur="2s"
            begin="0s"
            repeatCount="1"
            values="0 1637; 1637 1637"
            id="path"
            fill="freeze"/>
   <animate attributeName="stroke"
            dur="1s"
            begin="path.end"
            repeatCount="1"
            values="red; blue"
            fill="freeze"/>
   <animate attributeName="fill-opacity"
            dur="1s"
            begin="path.end"
            repeatCount="1"
            values="0; 1"
            fill="freeze"/>
  </path>
</svg>

https://codepen.io/topicstarter/pen/MWaKYgZ - transition-delay: 0.34s

https://codepen.io/topicstarter/pen/ExVVVvJ - вроде так но и на css это делается тоже

left: calc(100% - 50px);
или

position:fixed;
 right: 0;
 top:calc(100px + 150px)

или

position:absolute;
  right: 0;
  top:calc(100px + 150px)

Надеюсь это не сложно ...

Если через css то можно так : https://codepen.io/topicstarter/pen/vYOoWQb
Если через javascript то так: https://codepen.io/topicstarter/pen/NWqQyXL
Несколько кнопок js: https://codepen.io/topicstarter/pen/MWagJBy

Вообще если в ответе не получили что то нужное достаточно уточнить в комментарии ..

Любые знания без практики не имеют смысла

Берёте любой шаблон в сети и делаете то что там изображено вот и будет вам практика

Потом в процессе появятся вопросы ..почему не так выглядит или почему работает криво или как сократить то пишите сюда и здесь разжуют

https://ru.stackoverflow.com/a/1093659/308951 вот так это делается

Собирают куб на css а крутят на js

https://www.jssor.com/premium/interior-design/inte... выбирайте

Ну если только из двух : https://codepen.io/topicstarter/pen/zYGwROG