Как вертикально выровнять картинки с разной шириной, что бы они занимали всю площадь контейнера?

idafanasew, для флекса с главной осью по горизонтали за вертикальное выравнивание внутри строки отвечает align-items.

В гридах аналогично.

Как выгрузить собранный проект на GitHub с помощью gulp?

Положите в своём проекте готовый файл gh-pages.yml в папку .github/workflows

spoiler

name: gh-pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Check Out
        uses: actions/checkout@v2.4.0
        with:
          persist-credentials: false

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '16.x'

      - name: Installing Dependencies
        run: npm ci

      - name: Linting
        run: npm test

      - name: Building
        run: npm run build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4.2.2
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          folder: ./build
          branch: gh-pages

Версию node поправьте под себя, нужные таски тоже.

Дальше, как обычно, в настройках Github Pages укажите ветку gh-pages

И вот это видео посмотрите
https://www.youtube.com/watch?v=hevU4NdIsoU&list=P...

Как пушить подпапку в удалённый репозитории Git?

В репозиторий логичнее пушить исходники, а не build.

Какое свойство развернет background на всю длину?

Андрей Годунко,
раз https://codepen.io/AnnaSummer/pen/KKZKLjy
два https://codepen.io/AnnaSummer/pen/oNpNRrK

Как это сверстать?

Ну как-то вы хорошо вопрос завернули. Его нужно хорошенько конкретизировать.

А что вы вообще знаете, что уже сделали и т.д.

Начните с контейнера гридом на две колонки.
И т.д. потихонечку.

Выкладывайте наработки в песочницы типа codepen.io (jsfiddle.net больше люблю, но он не работает в России, не все смогут посмотреть без vpn)

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

https://webref.ru/course/position и т.д.
Затем про гриды, чтобы избежать абсолютов.

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

Какое свойство развернет background на всю длину?

Андрей Годунко, ага.
И где?

сначала нужно растянуть на весь вьюпорт html

html {
        height: 100%;
      }

Какое свойство развернет background на всю длину?

Андрей Годунко, я не предлагала писать в %.
Чтобы задавать высоту в %, у родителя должна быть не нулевая высота. А у body она 0 по умолчанию. Соответственно, сначала нужно растянуть на весь вьюпорт html, затем body и только потом будет от чего считать высоту вашего блока.

Какое свойство развернет background на всю длину?

Андрей Годунко, ну и в чем логика? Вы задаете блоку фиксированную высоту, а хотите, чтобы он растянулся на всю высоту окна.

Вы можете задать высоту (или минимальную высоту) 100vh.
Возможны и другие варианты в зависимости от макета и ТЗ. Гадать не буду.

Какое свойство развернет background на всю длину?

И что такое в codepen

Это значит, что в поле html нужно писать только содержимое body.
Стили пишут в поле css.
Внешние файлы прикрепляют в настройках.

Какое свойство развернет background на всю длину?

Длина по-вашему, это высота или ширина?

Сейчас у вас фон занимает всю площадь блока для которого задан.

Уточните, чего именно вы хотите добиться?

Не понимаю как реализовать в css данный блок?

Jayzarka, по ссылке разные варианты решения задачи https://sitist.ru/info-centering-blocks.htm
Если картинки контентные, то просто вставляете их в код, а не используете псевдо.

Пройдите игры по гридам и флексам.
https://cssgridgarden.com/
https://flexboxfroggy.com/
будет полегче.

Не понимаю как реализовать в css данный блок?

Beliyadm,

float: left; width: 50%

Это было простым и разумным 10 лет назад.

Как правильно реализовать overlay?

Soceine, мне не видно, что вы пишете.

Должно быть типа того

.родитель:hover .картинка {
  стили
}

Почему не работает отрицательный margin?

acamel98, потому что браузеры решили, что схлопывание это хорошо и избавляет от двойных отступов.
И то, что вы перечислили это как раз методы избавления от эффекта схлопывания и выпадения.

Как правильно реализовать overlay?

Вы можете использовать pinter-events для текста, но при этом потеряете возможность выделять его.
Либо перевесить hover с картинки на родителя.
Второе разумнее.

Почему не работает отрицательный margin?

Может гриды и gap?
Или column-gap для флексов, если позволяет список поддерживаемых браузеров?

Каким размером создать градиент?

У вас в макете вроде очевидно нарисован фон на всю ширину окна.

Если с внешней стороны направляющих цвет перестает меняться, то соответственно точки перехода делать по ширине контентной области.

Как сверстать такой блок?

agromov91, может быть, ещё какие-нибудь условия вспомните?

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

Ни одна из картинок из этого макета не является контентной.
Это украшения и место им в стилях.

С иконками, наверное, всё понятно.
Ананас и фруктовое сердце просто два псевдоэлемента прибитых абсолютом.

Всё.

Как сверстать такой блок?

agromov91, filter drop-shadow