<div class="circle">
<form action="">
<!-- your code -->
</form>
</div>.circle{
width: 400px; /* с шириной и высотой можешь поиграться*/
height: 400px; /* или и вовсе не задавать их, а cделать padding: 100px */
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #ccc;
}display: block чтоб средние пункты не наезжали друг на другаborder с прозрачностью (transparent). Потому что если у тебя изменится фон, то тебе также придется изменять и цвет изначального border-а.
if(scrollTop offset > [ваша переменная]){ }.
srcset для тэга img. Если кратко, атрибут позволяет грузить картинки в зависимости от разрешения экрана (т.е. на мобилках можно грузить картинки поменьше). Также есть такая штука, как lazy-load – загрузка изображений только тогда, когда человек доскроллил до них. Всё это в сумме даст неплохой прирост к скорости загрузки страницы.
position: absolute, я вижу лишь единственный вариантmedia queryleft заменять на right: 0. Потом, когда левый край контейнера начнет заходить на блок, опять же через квери задавать блоку width 100% и left, right = 0. Должно работать. А высоту можно делать через vw.
text-overflow: ellipsis? А если человек хочет до конца прочитать, то по тыку убирать это свойство и контейнер меняет свою высоту в зависимости от текста. Типо как в вк "Читать далее".
margin-left: auto;order: 1, или же остальным элементам, а логотипу ничего не добавляйте. Не помню как именно :)
position: relativebottom: 0;
right: -40px;
position: absolutewidth: 40px;
height: 10px;
background-color: #fff;transform: rotate(45deg) (ну или сколько там понадобится для каждого из них.