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

А что с ним не так?
Слева текст, справа фон или псевдоэлемент. Ну или img с aria-hidden.

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

Как поместить пагинацию внутрь слайда, swiper js?

Ага, а потом во второй и тд. Но пагинация при этом одна.

Как поместить пагинацию внутрь слайда, swiper js?

imko, ну, этой задачке 100 лет уже и решение тоже давно есть.

Как поместить пагинацию внутрь слайда, swiper js?

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

Как поместить пагинацию внутрь слайда, swiper js?

starkingdom, я бы и не стала так делать :)

Как поместить пагинацию внутрь слайда, swiper js?

starkingdom, конечно, у вас не первый дизайнер, который плохо себе представляет, как неудобно, когда точки прыгают. Поэтому, в реальной жизни они прибиваются куда-нибудь фиксированно. Обычно к нижнему краю.

Если все таки прыгать, то а js определяйте положение и меняйте (через кастомное свойство css поудобнее)

Как поместить пагинацию внутрь слайда, swiper js?

starkingdom, вы же понимаете, что пагинация не может быть частью слайда? Или нет?
И вы уверены, что это нормально, что она будет прыгать по высоте от слайда к слайду?

Как сделать, что бы картинка была на весь фон и при скроле не двигалась?

У background-attachment: fixed; есть проблемы.
Можно заменить на псевдо соответствующего размера.

В firefox не работает transition opacity?

Я бы перенесла background-image в основной селектор.
И заменила бы all на opacity. Зачем там all, если анимируется только одно конкретное свойство?

Как скруглить низ изображения?

leeroyjenkins176, при ширине блока 118 достаточно 59. Ширина фото не имеет значения.
Либо любого другого размера больше.
Универсальный вариант я написала выше.

Как скруглить низ изображения?

leeroyjenkins176, круг можно рисовать чем угодно, градиентом или псевдо. И прибить к низу.
+ border-radius у обертки как в примере.
Или можно универсально заменить на 0 0 100vmax 100vmax

Что именно у вас не работает?
Сделайте пример на codepen.io

Как сделать анимацию фона в css?

Не понятно, какая анимация. Но в общем виде, например, так: берете svg, располагаете где нужно, при клике (или загрузке) сдвигаете куда нужно.

Как сделать анимацию фона в css?

newfolder_js,

если картинки не видно

А вам что, их видно?

Как рассчитать значения на которые произошел scale?

EryTi,

То есть, если блок шириной например 500px, на мобильном устройстве текст перенесется на новую строку, если использовать адаптивную верстку, с изменением разме а нужно чтобы все элементы располагались в том же виде, что и на десктопе.

Если блоку задать размер 500px и запретить всякие flex-shrink и т.д., то он так и останется шириной 500px.

Также есть мета тег vieport и фиксированная ширина в нем вместо device-width
Либо использование единиц vw (vh, vmin, vmax) как раз для масштабирования. И функции min, max и clamp, чтобы совсем не увлечься.

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

Почему CSS не видит классы HTML, но при этом их применяет на странице?

Почему CSS не видит классы HTML, но при этом их применяет на странице?

Применяет потому что применяет браузер, а не vs code.
Почему не видит vs code не знаю, с ним бывают такого типа проблемы. Обычно помогает перезагрузка/переустановка.

Как рассчитать значения на которые произошел scale?

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

В текущем коде уменьшать нужно container либо вообще его убрать.

То есть, если в общем, есть определенный блок на странице, которому нужно уменьшить масштаб, но при этом чтобы соседние блоки восприняли изменение масштаба как изменение размера и подстроились под него

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

Не запускается gulp, проблема со шрифтами, как исправить?

Есть объяснение, зачем при каждой сборке конвертировать шрифты из ttf в woff?

А по теме нужно проверять версии node.js, gulp и пакетов.
Вот, например "gulp": "^5.0.0" Сколько там 5му галпу деньков от роду?

Как подключить этот font-face генератор?

dima89e, ещё раз: в нём нет смысла. Не нужны сейчас ни ttf ни otf ни вся та ерунда, которую вы зачем-то хотите писать. Это миксин из прошлого.

Почему не применяются изменения в адаптиве CSS?

Чтобы был адаптив:
1. Должен быть соответствующий meta тег
2. Стили для обычного состояния и измененные должны быть написаны в правильном порядке и с правильной специфичностью.

Как проверить:
Открыть инструменты разработчика, выделить проблемный блок и на вкладках Styles и Computed (если мы про Хром) посмотреть какие стили применились и почему не те, которые вы хотели.

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

Делайте пример в песочнице типа codepen.io

Как подключить этот font-face генератор?

Что же вам неймется? Остался один актуальный формат шрифтов: woff2. Даже если вам нужно поддерживать какие-то древние браузеры и просто woff, то это всё равно меньше строк, чем в тоё простыне, что у вас выше.

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