strelok011

Можно радио, текст с рамками в label for, оформление зависит от выделенного radio. Все в css оформляется. Внутри лейблов скрытый див для тултипа, реакция на ховер. Все довольно просто.
Сами радио инпуты сделать прозрачными, позиционировать абсолютно, уменьшить до 1px. Дальше простая верстка. На обертку строки дисплей флекс, на лейблы позишн релатив.

Извиняюсь, с телефона пишу ))

https://jquery-script.net/how-to-create-a-mosaic-t...

Задайте максимальную высоту блоку меню и оверфлоу
.menu {
max-height: 80vw;
overflow: auto;
}

Максимальная высота не даст блоку развернуться больше высоты экрана, overflow: auto добавит скролл если контент больше чем доступная высота.
80vw - 80% от высоты окна браузера. Не путать с 80% от родительского контейнера.

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

Не согласен с разнесением по компонентам всего и вся.

Структурировать правильнее по второму варианту. Если у вас реально сложный проект, то обязательно будут переиспользуемые компоненты. Иначе это не крупный проект а крупный бардак.

Примерная структура:

js - > pages -> page 1 -> лежит js этой страницы, всякие инициализации или уникальный код
js - > pages -> page 2 -> лежит js этой страницы, всякие инициализации или уникальный код
js -> utils -> утилитки
js -> components -> reviews -> лежит js этого компонента

scss -> components -> _head - стили для head
scss -> components -> _forms - стили для форм
и т.д.

А на выходе будет один файл с минифицированным js (если только нет независимых библиотек и т.п.), один-два файла с css (если используются темы, то появляются второй и проч файлы).

В крупном проекте не должно быть отдельных изображений в больших количествах. Декорации будут либо в спрайтах, либо в шрифтах, в идеале так вообще всё с cdn в конечном итоге.
Изображения заглушки - просто в каталоге images.

Плодить каталоги необходимо в соответствии со здравым смыслом как минимум.

Ну и опять же - это всё надо определять по месту. Будет проект на реакте с jcss, всё поменяется еще раз )

Если вам не для личного пэт проекта а для бизнеса - используйте CDN сервисы, типа https://aws.amazon.com/ru/cloudfront/
Специальная разновидность для хранения статики.
Хотите - шарьте для всех, хотите - только по токену и т.п.
Разумеется за деньги.

лучше поиграть с max-width и max-height
jsfiddle.net/xwrvxser/1

Просто нужно разбираться в семантике html - какие теги как себя ведут в отсутствии вообще любых стилей и для чего предназначены.
Гуглите блочные/строчные элементы, что во что можно вкладывать, а что нельзя и почему. Сразу подобные вопросы отпадут.
И для чего придумывали всевозможные теги. К примеру , , ...
Хорошая верстка не должна разваливаться в отсутствии всех стилей, списки должны быть списками, ссылки - ссылками.
А стилями можно и глаз на глобус натянуть. Браузер съест.

Есть рекомендации (на том же убунту, кстати) как развернуть свой защищенный сервер (спрятать ssh, подключить https). Есть рекомендации как собрать сервер на nginx+php-fpm, есть рекомендации как развернуть maria-db вместо mysql, и проч и проч.
Но. Никто не скажет, что лучше в Вашем случае. Без погружения в проблему. Погружаешься в проблему - читаешь инструкцию - выполняешь от А до Я - сталкиваешься с проблемами несовместимости пакетов/версий/собственного тугодумства/кривыми дистрибутивами - решаешь их - welcome to GURU (почти ;) )

JS - добавляет инлайн стили на скрытые блоки (т.к. блоки отображаются ЗА текстом, на котором отлавливается наведение). В частности добавляется scale с изменяемым значением и opacity, сиречь прозрачность.
То бишь
1.определяетесь с жизненно важной необходимостью вывести такую анимацию, определяете, где именно необходимо вывести подобную анимацию:
а. Если блок внутри или следом за активатором - можно обойтись CSS с анимацией и keyframes
б. Если блок находится в изоляции от активатора - используете js (ну, к примеру, богомерсский JQuery) и отображаете связанный элемент (если не знаете css) с изменением значений в стиле через JS. Либо тупо меняете классы, а анимация на css прописана внутри.

профит.

Ну, на самом деле, кмк, надо копать в сторону эффектов на svg. Комбинация фильтров (блюр, оффсет, бленд) дадут вам то что может пригодиться в этом случае. Примеры попроще можно посмотреть тут https://tympanus.net/Development/DistortedButtonEf...

Например используйте @keyframes.
По событиям меняете классы на оба компонента, а к классам привязывайте последовательную анимацию.
https://idg.net.ua/blog/uchebnik-css/ispolzovanie-...

А еще придется использовать всякие штуки типа SSR, если нужно индексировать товары в поисковике. И весь ваш фронт превратится в тык... в бэк :)

1. нельзя в заголовок вкладывать блок (по семантике)
2. роботы хоть и умеют выполнять js - но даже всякие реакты и ангуляры запекают страницы на сервере, если есть необходимость взаимодействовать с пауками.