Можно ли накладывать/объединять блоки с наружным изображением?

blackSnail,

и сильно с @mdeia не возиться когда это

я не вижу изменений в media кроме bg size.
Проблемы могут начаться только при переполнении.

Альтернатива: задавать точки как фон нижнего блока.
Маленькие блоки делать прозрачными.
Остальное закрашивать бордерами, тенями, псевдиками для маленьких блоков.
Проблема переполнения будет решена для +/- пары строк. Иначе положение иконок на траектории всё равно съедет.
Либо JS.

Можно ли накладывать/объединять блоки с наружным изображением?

blackSnail, в 4 не ясно зачем.
Я бы спросила дизайнера, как он себе представляет переполнение этих блоков.

Можно ли накладывать/объединять блоки с наружным изображением?

Сергей delphinpro

точки - это скорее направляющие

это первое о чем подумала, в частности их цвет на это намекает. Но тогда траектория расположения иконок вообще ничем не оправдана. С другой стороны, мы не видим весь макет, черт знает, что в голове у дизайнеров.
А с третьей стороны, тогда вообще не понятно в чем сложности верстки :)
Поэтому решила прокомментировать верстку точек.

Можно ли накладывать/объединять блоки с наружным изображением?

Иконки отдельно, точки отдельно. Точки позиционировать с помощью bg position. Раз блок по своей сути не подразумевает переполнения.
Вообще, точки очень странно выглядят.

p.s. и не нужно спамить тегами.

Современный учебник HTML/CSS?

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

Максимально приближенное к вашим потребностям это тренажеры и навыки в HTML Academy, правда бесплатных немного, но и стоят не космос.

Справочники: doka.guide и MDN.

Остальное собирать по кусочкам из разных источников.

Современный учебник HTML/CSS?

htmlbook устарел уже много-много лет назад.
Даже его создатель уже сделал его новую версию webref, но и она уже тоже успела устареть. Что-то обновляется, но и заметно многого не хватает.

Из актуальных справочников я бы предложила Доку и MDN.

Как наложить текст на изображение в Figma?

А не, это же про Фигму, а не про верстку.
Видела, что дизайнеры по простому прикладывают в нужные места уголки svg.
Либо можно попробовать баловаться с объединением фигур и скруглением.

И, поскольку это макет сайта, то верстальщику будет удобнее работать, если вы воспользуетесь первым вариантом с уголками.

Как добраться до placeholder и выровнять по вертикали при наличии #shadow-root (user-agent)?

I_want_to_know, поскольку никаких стилей dropdown вы нам не показывали, то сложно сказать насколько это уместно. Звучит странно.

Вообще, очень редко есть необходимость менять font-size для плейсхолдера. Обычно, он такой же как у инпута.

Как добраться до placeholder и выровнять по вертикали при наличии #shadow-root (user-agent)?

line-height: 1; уберите. Не знаю из какого браузера скрин, но не не все браузеры его воспринимают единицей для инпутов. Не помню сейчас минимальны значения.

Но ни это

при наличии #shadow-root (user-agent)

ни это

Получается, gulp где-то шалит?

не имеют отношения к проблеме.

После экспорта в Photoshop пропал именно градиент. Как можно исправить?

А в jpg? Да и зачем тут png?
А если предварительно слить все слои в один?
А если не экспортом?

В люстре все видно четко. Все градиенты присутствуют

И я не поняла на каком там этапе люстра.

Grid или Flex -сетка с разными условными margin-top и margin-bottom для колонок?

Есть следующий макет, существует ли способ создать общий грид или флекс

Флексами со сдвигом (марджин или трансформ)
Гридами и span 2 и просто пропустить первую ячейку.

Оцените код html и css. Можно ли так делать?

Оцените код html и css.

Любое число меньше нуля.

Можно ли так делать?

Можно, если никому не показывать.
Вообще, нет, нельзя.
В этом коде нарушены правила вложенности тегов (валидность) и семантика.

Не видел, чтобы так кто-то делал, но как по мне интересная штука.

Хорошо, что не видели. Разумные люди такое никому не показывают.

И вроде бы так гораздо быстрее получается писать код с минимальным использованием css.

Это очень странное заявление.
Быстрее писать стили можно используя широкий монитор (или два) и emmet.

Если писать нормально, то ваш код можно существенно сократить.
И заметно уменьшить количество ошибок.

Где можно открыть файл pdf для верстки?

Для верстки вообще без разницы в чем вы его откроете. Тут скорее интересно, что в есть хорошего в самом пдф или он безнадежен.
Если в принципе умеете делать такую работу.

Впрочем, если не умеете, то тоже всё равно.

Как внизу блока сделать маску волной и поместить туда изображение?

Если картинка в формате png + маска в формате png , то их можно объединить в фигме и сохранить , как один слой

Если уверены на 110%, что никто и ни при каких обстоятельствах не захочет менять ни волну ни картинку.

А потом добавить и через z-index поднять выше верхнего слоя

Выше цвета фона поднимать z-index'ом это сильная идея.
Это либо множественный фон, если всё таки слили в одну картинку.
Либо псевдик (с маской или clip-path или типа того). Который сам по себе ниже фона не провалится. Так что z-index очень преждевременный.

Как сделать блок такой же формы?

ksnk, да и не обязательно :)
Это я на коленке, не заморачиваясь ни на выравнивание градиентов ни на эллипсы для получения нужной фигуры. Чисто показать возможности, раз уж такой разговор.
Если заменить уголки на svg будет аккуратнее.

Как сделать эффект текста на кривой безье?

https://css-irl.info/positioning-text-along-a-path...
И целая коллекция примеров к статье https://codepen.io/collection/XOOoWv

Как отключить swiper-bundle.min.css?

Как отключить swiper-bundle.min.css?

Тут хорошо бы узнать как вы его подключили и почему не можете отключить.

не могу установить свои стили

Нужно проверить, что сначала подключены стили слайдера, а потом ваши. Не важно как именно всё это собирается.

Потом указывать свои селекторы с такой же или с большей специфичностью, как и у свайпера.

Как перенести лендинг на WordPress у которого НЕТ базы данных?

Взять новый WP с базой, дополнить нужными плагинами, если они там реально использовались. Аккуратно прикрутить поверх этого лендинг.
Правда пока не ясно зачем там вообще WP.

Мулти селект Dropdown. Как можно создать многослойный мулти селект?

Вам же захочется это как-то красиво стилизовать, а значит, всё равно придется скрывать селекты.
Поэтому можно сразу делать обычные выпадашки с чекбоксами.
Только не забывайте скрывать чекбоксы доступно, а не через display none.

Как сделать блок такой же формы?

просто сделай "пипку" чуть утопленным центрированым псевдо-элементом фиксированной ширины и не придётся пересчитывать path.

Да даже и не фиксированной ширины. Фиксацию пропорций убрать из SVG и пусть подстраивается под размер псевдика, если вдруг нужен адаптивный размер.

Для такой формы и clip-path избыточен. Не говоря уж про JS.