Сначала вам нужно сделать разметку валидной.
ul не может быть прямым потомком другого ul.
Потому что иначе не совсем понятно, кого вы обзываете родителем внутреннего списка.
Alex47517, из-за какого текста? В вашей песочнице был тег p, в котором из "текста" была только иконка.
Скорректируйте песочницу так, чтобы была видна проблема.
Если речь про текст, который справа, то затемнение должно быть псевдоэлементом для обертки непосредственно картинки.
Kvason, что они из себя представляют и так вполне понятно.
SeraphimaAkkerman эти линии это вылезающие отступы от заголовков. Гуглите "выпадение и схлопывание вертикальных margin" и воспользуйтесь любым из способов починки.
Но для начала хорошо бы почитать про семантику и не делать меню инпутами. Пункты меню это ссылки.
Сам заголовок "Меню" выглядит совсем странно. Зачем оно? И так очевидно, что это меню.
Про семантику верстки навигации есть прекрасное видео Вадима Макеева https://www.youtube.com/watch?v=y52rtbUeCac&list=P...
Кнопки (именно кнопки) удобнее делать тегами button, чем input. Легче стилизуются, можно внутрь складывать другие теги, текст не является значением. А input это просто устаревший вариант, когда тега button просто не существовало, оставлен для совместимости.
Semantic.Moscow, да, потому что вы по кругу выдаете аргументы за один вариант, не признавая существование других.
Больше того, я написала, что мне тоже больше нравится лейбл после инпута, а не внутри.
Мне действительно нечего добавить для пользы спрашивающего и других с аналогичной проблемой и я не вижу другого приличного варианта, кроме как свалить из разговора.
bazliiii, скорее всего это несколько радиальных градиентов.
В Фигме они могут быть сделаны по-разному. В том числе и блюром к различным фигурам,не обязательно окружностям.
Вы можете использовать радиальные градиенты, фоновую svg или png. Или что-то ещё в зависимости от того, что там в макете и как оно должно вести себя при адаптиве.