Где можно открыть файл 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.

Возможен ли отступ только второй строки CSS clamp?

comm1ted, я вроде написала как это сделать прямо кодом. Что не получилось?

Делаю кастомный калькулятор на Tilda, как по клику на картинку выбрать нужную галочку?

Не знаю, что там в Тильде, но в обычном HTML для этого есть label.

Как лучше сверстать элемент?

Newto, как вы собираетесь делать зависимые столбцы флексами? Вообще ни разу не удобно, если не задавать размеры. А задавать тут размеры фу-фу.

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

Приставьте псевдо с SVG, в чем сложность-то?

Как лучше сверстать элемент?

Начать хорошо бы с того, что табличная верстка не исключает гридов.

Семантично - таблицей.
А дальше как угодно.

Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?

Полина Емельянова, у меня работает. После нажатия на кнопку карточки появляются постепенно по одной.
Или надо не так?

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

Возможно потребуется разобраться с вот этим

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}

потому что оно может перетирать трансформ из .hide

Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?

Что-то такое?

.section__item {
    transform: scaleY(1);
    opacity: 1;
}
.hide{
   //display: none;
  opacity: 0;
  transform: scaleY(0);
}

Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?

Такой же вопрос
Как добиться такого эффекта при наведении?

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

Онотолий,

Но сидеть перед такими огромными мониторами наверное для зрения не очень хорошо

Ну конечно, а перед маленькими полезно.

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

Разве сайт не должен плюс/минус одинаково выглядеть на десктопах с разным разрешением экрана?

Нет.
Кому должен? Кто это придумал?
И что значит одинаково? Иметь фикс ширину и поля или масштабироваться?

Вам стоит изменить теги вопроса и оставить только дизайн. Потому что верстка это уже реализация задуманного и вопрос не имеет к этому отношения.

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

Разве сложно верстальщикам добавлять с css стили что то вроде этого как делаю я (см. ниже), а так же размеры всех элементов делать не в px а в em или я просто чего то не понимаю?

Это не сложно. Это неверно. Потому что вовсе не все размеры зависят от текущего размера шрифта. Это раз.
Даже размер шрифта для разных элементов не обязан увеличиваться пропорционально. Это два.
Макет должен быть готов к увеличенному шрифту в браузере пользователя при такой записи. Это три.

Попробуйте сесть перед монитором в метр шириной и сделать на нем этот сайт так, как вы хотите, без полей. Будет удобно? Вообще нет.

Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?

meta941,

а что в media плохого?

Абсолютно ничего плохого в нём нет.

Просто есть варианты получить адаптив одной строкой.
Например,
font-size: clamp(16px, 2.5vw, 30px);
Шрифт будет зависеть от вьюпорта, но не меньше 16px и не больше 30px.
Можно использовать более сложные формулы, чтобы 16 не наступило слишком рано.

Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?

meta941,

Если не бутстрап, то какие есть ему аналоги, если хочется пользоваться весьма удобной сеткой? Кроме CSS-Grid.

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

Вот в этом и проблема - я вообще не понимаю, где люди находят информацию о том, как правильно верстать в нынешнее время.

Там же, где и в предыдущее. Гугл, MDN, ютуб, спека наложенные на базовую школьную геометрию.
С "правильно" тут сложнее, потому что абстрактного правильно практически нет. Есть задача и её нужно решить. Обычно, соблюдая ещё правила доступности и тому подобные полезности для пользователей.

Пока что нашёл только способ делать object-fit: contain, но это же ведь не панацея?

Для контентных изображений? Вполне себе панацея. Contain или scale-down, если нужно.

Указываешь размер в пикселях - всё съезжает и адаптива 0

Да, логично. Какой уж тут адаптив...

Указываешь в процентах - оно не работает

Значит, не тому задаете проценты. (В верстке для разных свойств проценты считаются от разных величин. Яркий пример: вертикальные отступы в процентах считаются от ширины родителя, а не от высоты, как хотела бы банальная логика)
Обычно адаптивные изображения оборачивают в div, работают с его размерами, а картинке object-fit.
В качестве обертки в теории можно использовать ячейку грида, но нужно быть уверенным, что она никуда не денется. В смысле, родитель внезапно не перестанет быть гридом.
Также не забываем про picture.
По дороге задает для picture и source display: contents, чтобы не мешались в гридах.

Указываешь в единицах размера текста - так текст ведь не уменьшается при изменении размеров.

Не напишете, чтобы менялся - не поменяется. Напишете - поменяется.

О каких правилах идёт речь? Я не представляю этого от слова совсем.

Ну хоть каких-нибудь, с чего картинка (или любой другой элемент) будут как-то меняться (менять размеры или перестраиваться) в зависимости от ширины вьюпорта.

===

В современном CSS есть много удобных штук для адаптива, кроме стандартного @media.
Флексы, гриды.
Единицы измерения зависящие от вьюпорта (разнообразные).
Функции min, max и clamp.