Евгений Кузовлев

Для начала нужно освоить:
- HTML/CSS/JS
- Какой-нибудь бекенд язык

Затем просто нажимаешь CTRL+S в браузере, сохраняешь все это дело себе на диск и правишь пути к стилям, картинкам, скриптам.
Бекенд функционал (если он был) реализовываешь сам на выбранном языке.

добавьте атрибут muted

<video muted="muted" autoplay="autoplay"  loop src="/shake.mp4"> </video>

. с недавних пор, браузеры блочат видео если оно автоматом запускается и при этом звук не отключен

Если коротко - никак

https://developers.google.com/web/updates/2017/09/...

инлайн стили в html, а что мешает использовать css?

самое лучшее это svg
вот так например : https://codepen.io/topicstarter/pen/NYLBGY
так как тему svg не досконально знаю то вопрос задал специалистам в сфере svg и ожидается ответ : https://ru.stackoverflow.com/q/809836/33274

на чистом HTML

Хотели как лучше, а получилось как всегда =(((((
https://jsfiddle.net/as3evhpg/
Картинка, для тех у кого не работает нативно

Если общая ширина меню важна для дизайна, то её и нужно фиксировать размером.
А пункты внутри распределять не марджинами (вы же помните, что небольшая систематическая ошибка имеет свойство накапливаться?), а через flex и space-between.

Обёртке над блоком:

{
display: flex;
justify-content: center;
align-items: center;
}

Вы поймете только в процессе работы, да и никто не будет 100% всех фич использовать в каждом проекте.

Попишите 1000 раз один и тот же цвет, а потом дизайнер его изменит и вам придётся менять код в 1000 местах - надоест - начнёте использовать переменные.

Напишите стили на 5000 строк и замучаетесь скроллить туда-сюда - начнёте использовать импорты.

Замучались писать селекторы по 5 классов глубиной? Начнёте использовать наследование (а потом ещё и БЭМ).

Надоест писать @media screen and max-width($width-md) {...} - напишите первый миксин $breakpoint-md {...}.

И Т Д

Вам не кажется жутким костылем формировать ссылки именно таким образом?
Не проще ли возложить данную задачу на php