Повторення 4

body: фон сторінки – зображення, розтягнуте на весь екран (background-size: cover), margin 0, padding 0, висота 100vh.
.status: position: fixed; left: 20px; top: 20px; ширина 350px.
.status img: ширина 100%.
.bags: position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px;.
.bag: ширина 100px, відносне позиціонування (position: relative;).
.bag img: ширина 100%.
.menu: абсолютне позиціонування (position: absolute;), bottom: 110px; left: 50%; padding: 8px; transform: translateX(-50%); рамка 2px solid goldenrod, border-radius 6px, flex-wrap: wrap; display: none; ширина 124px.
.cell: ширина 60px, висота 60px, display: flex; justify-content: center; align-items: center; рамка 1px solid goldenrod.
.bag:hover .menu: display: flex;

У тілі сторінки:
div class="status" з картинкою всередині, показує статус гравця.
div class="bags" – містить три div class="bag". Кожен div містить: картинку (img) мішка та div з класом .menu. У середині класу .menu 8 div з класом .cell, які містять картинки предметів (розташування предметів у мішку на ваш вибір).

body: фон сторінки – зображення, розтягнуте на весь екран (background-size: cover), margin: 0, padding: 0, висота 100vh, прокрутка вимкнена (overflow: hidden).
img: ширина 300px, висота 300px.
.rocket: абсолютне позиціонування (position: absolute), рухається за анімацією fly, тривалість 6 секунд, лінійна, повторюється нескінченно (animation: fly 6s linear infinite).
@keyframes fly: задає траєкторію руху ракети через зміну bottom і right у відсотках анімації:
0% – bottom: 100px, right: 100px
20% – bottom: 400px, right: 300px
40% – bottom: 0px, right: 300px
60% – bottom: 200px, right: 800px
80% – bottom: 0px, right: 950px
100% – bottom: 400px, right: 1200px

!!! bottom i right можуть відрізнятись в залежності від розширення вашого екрану. Підберіть px під ваш екран.

У тілі сторінки:
div class="rocket" – містить img ракети, яка рухається по заданій траєкторії на фоні зображення.