Максим

https://codepen.io/topicstarter/pen/XWbWzzy - так тоже можно - сделать обёртку для верхнего блока и для нижнего и этой обёртке установить фон - эту карту

.center-buttons:hover p{
  color: red;
}

.center-buttons {
display: flex;
align-items: center;
width: 10.6%;
background-color: red;
margin-right: 5px;
justify-content: center;
}

https://ru.stackoverflow.com/a/1075230/308951 - я же ответил на ruSO в чём проблема?

https://jsfiddle.net/lenskyuser/2ay3k89g/1/ так ?

https://codepen.io/topicstarter/pen/mdygddK - само выпадающее меню ни делал - просто добавил статический квадратик ...если не разберётесь пишите - помогу

animation: name time alternate infinite;

ключевой момент alternate

На гриде наверно проще



Второй вариант на flexbox

https://codepen.io/topicstarter/pen/eYmQBBg
https://codepen.io/topicstarter/pen/qBEQqpK

Менять параметр: stroke-dasharray:130 80;
Добавил анимацию при клике на кнопку

Сами себе мозг парите - windows в котором всё есть и он стабильный ...да простят меня линуксоиды ...
если хотитеsudo apt-get или проблемы с grub или initrams ли ещё какие то проблемы с системой то добро пожаловать в мир Линукс а если вы действительно хотите установить и пользоваться и учиться ..то либо mac либо windows

Вот так каждый день: Серый экран при установке ubuntu, как исправить?

https://codepen.io/topicstarter/pen/Powegpw?editor...

Как обычно ...делаем либо блок под фото ..в котором box-shadow и blur()
или псевоэлемент с теми же параметрами

https://bkosborne.com/jquery-waterwheel-carousel

Можно и canvas а можно на scroll повесить типа вот этого : https://codepen.io/topicstarter/pen/OevaZO
только в codepen по click
а вот типа волны это уже webGL шейдэры
а когда фоновая картинка за курсором бегает то это вообще пионерский эффект для начинающих