Как расположить карточки?

sw213,

В моём понимании, выход один - увеличить ширину карточек

Да, гриды и minmax обычно дает хороший результат.

ну я это понимаю, но хочется, что бы карточки весли себя как при спейс-битвин, если их 4, если меньше, то как старт (justify-content)

Вы хорошо понимаете, что колонки не совпадут? Привет геометрии.

А так, nth-child в помощь
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Как расположить карточки?

Вопрос точно про верстку?
Может про дизайн?

Либо расскажите, а как должны себя вести карточки, если осталось свободное место? А потом запишите эти требования в css.

Как намек: размеры можно задавать в процентах или в единицах fr для гридов. И тому подобные мысли.

Как лучше реализовать верстку?

OCCASS OCCASSOVICH, вы хорошо понимаете, что будет двойной скролл? Для прокрутки контента внутри слайда и для прокрутки страницы? Или вы собираетесь просто обрезать, что не влезло и черт с ним?

Почему адаптация под мобильное не получается?

Начните с придумывания того как оно должно выглядеть на мобилках.
Сейчас у вас контейнер имеет фиксированную ширину 1000px. Наверное, при уменьшении экрана и он должен уменьшаться. Т.е. это не width, а max-width.

Зачем-то вы ставите его в центр абсолютом. Зачем? Есть флексы и гриды.

И так далее и решаете с каждым из блоков.

Хорошо бы почитать про семантику. Для текстов использовать заголовки и параграфы, а для ссылок теги <a>, а не <button>

Как лучше реализовать верстку?

У меня проблема в том, что когда я уменьшаю высоту окна, контент блоков заходит друг на друга, то есть за пределы

Нарисуйте, а что с ним должно происходить?
Потом поговорим и о стилях.
Т.е. сначала нужно понимать, как это задумал дизайнер, а потом уже решать как делать вам.

А так, любые плагины типа fullpage. Swiper тоже поддерживает полноэкранный вариант.

Как сделать так, чтобы два flex блока сжимались одинаково?

Задать им одинаковый flex-basis. На самом деле не обязательно именно через basis, можно минимальной высотой или отступами.

Возможно, вам будет удобнее делать такие вещи гридами

В данном случае кнопку нужно делать в виде button или label для инпута?

Overlord934, да, верно

В данном случае кнопку нужно делать в виде button или label для инпута?

Overlord934, даже если не смотреть в справочники, простой перевод слова placeholder намекает на то, что он делает, за что отвечает и в каком формате должен быть.
Подробненько: https://htmlacademy.ru/blog/html/form-design-place...

Как тогда прописывать строку " Телефон" в сам инпут?

Ну в смысле как? Как наложить один тег на другой?
Гридами (лучше). Абсолютами (хуже). Отрицательные margin, transform... что вы ещё умеете..

В данном случае кнопку нужно делать в виде button или label для инпута?

Overlord934, я бы рекомендовала проверять код валидатором перед тем, как кому-то показывать.

Нет, не правильно.
1. label это подпись для инпутов. Кнопки нельзя вкладывать в лейблы.
2. Смысл лейбла в осмысленной подписи для поля. Если её нет видимой в макете, то её придумывают для скринридеров.
Если текста нет, то это как Вовочке мороженное по лбу из известного анекдота.

В данном случае кнопку нужно делать в виде button или label для инпута?

Там еще и форма потерялась.
На скрине кнопка, с типом submit, которая отправляет эту форму (и не важно, что вы там с ней творите на js).

Но лейбл у инпута всё равно должен быть. Если совсем никак, то хотя бы aria-label.
Если что, "Телефон" это не плейсхолдер, это как раз таки label.

Как сделать более плавную svg анимацию?

https://codepen.io/search/pens?q=Svg+line+animation

Насколько хорошо использовать li для создания колонки текста?

Нормально ли делать так, или нужно это делать с flexbox

Нужно разгрести кашу.

Разметку пишут по смыслу (семантическая верстка). Если это список, то используют ul, ol, dl.

Флексы (или не флексы) это стилизация. Можно применять к любым (ну почти) тегам. Т.е. для вашего списка вы можете сделать раскладку флексами, если она подходит или чем-то ещё.

Как сделать такой custom border?

Что не получилось с border-image?

Почему Firefox не наследует font-weight для h1?

Overlord934, Во всех браузерах у заголовков по умолчанию 700.

Если по какой-то причину на вашем сайте 400, а в ФФ вообще 600, то вы нам рассказали не всё о происходящем.
Или есть какие-то дополнительные стили или неверно подключены шрифты или в шрифте отсутствует нужная жирность и т.д.
Сделайте песочницу на codepen.io, которая иллюстрирует проблему или покажите сайт.

Как установить gulp-cli?

Возможно, имеет смысл не устанавливать никакой cli, а запускать пакеты через npx вместо npm?
Т.е. рассказать истинную задачу.

С помощью чего и как можно сверстать такую секцию?

Список, абсолюты (или гриды), svg, псевдоэлементы, относительные единицы измерения (если оно должно масштабироваться)

Что именно вы уже попробовали и что не получилось?

Не работает position: sticky, почему?

Потому что стики работает внутри родителя

Как убрать невидимую полосу в правой стороне (такое только с телефона)?

Это не полоса и даже не отступ. Это элементы торчащие из ширины вьюпорта.
Причем на скрине даже хорошо видно, что именно торчит.

Как понять куда шлет письма?

Может и не слать письма. Может складывать полученные данные в БД или слать в телеграм или ещё что угодно.
Нужно смотреть скрипт, который обрабатывает эту форму.

Как чистить html код от строчек подключения скриптов, стилей, после воссоединение всех стилей, скриптов в одиночные файлы?

gazes12,

Я работаю в исходниках.

Логично

Как мне дебажить код в файлах, когда они отформатированы и все в одиночных файлах, там каша какая-то.

Не понятно где каша и почему бы не распределить код по файлам так, чтобы не было каши? (Например, БЭМ или аналогичные подходы).

Смотрите в браузере, исправляете в исходниках.
Если не ясно в каком файле искать, то см выше:
1. переделать на логичную структуру
2. подключить sourcemaps (на этапе разработки не включая плагины для комбинирования media)