Как сделать входную и выходную анимаци?

Было бы полезно взглянуть на код для ясности. HTML, CSS, JS...

При добавлении анимации scale появился ползунок. Как от него избавиться?

@keyframes scale {
      0% {transform: scale(1);}
      50%{transform: scale(1.1);}
      100%{transform: scale(1.2);}
}

В таком случае достаточно указать только начальное и конечное значение анимации:

@keyframes scale {
      from {transform: scale(1);}
      to {transform: scale(1.2);}
}

Или даже только конечное значение:

@keyframes scale {
   100% {transform: scale(1.2);}
}

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

inkscape лучший инструмент для работы с SVG. Там самому можно легко нарисовать такую картинку. Будет занимать не более 2КБ.

Как расположить элемент?

Странно, но я наблюдаю "лесенку" на границе градиента. Прямая получается слегка зигзагом. браузер chromium. Я в таких случаях использую svg в качестве background. С ним не должно быть неожиданностей, плюс очень легкий, такой треугольник будет весить байт 200-300.

Не подключается CSS в html файле, как исправить?

style="box-r" как вы это можете объяснить?

Как выровнять содержимое карточки товара?

Так у вас в первом случае есть дополнительная строчка "(ветровики)" поэтому цена сдвигается ниже ровно на высоту строки.

Верстка фигуры на фоне?

А какая адаптация должна быть для фона? Разве background-size: cover не будет достаточно?

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

Как одна картинка родительского элемента. Не нужно усложнять.

Как убрать отображение скидок для товара, оставив только основную цену?

Нашел! В крайне неожиданном месте для меня месте

bitrix/tools/bxready/library/elements/ecommerce_v1/price.php

Спасибо за помощь.

Как убрать отображение скидок для товара, оставив только основную цену?

Отлично. Это помогло для карточки товара на странице товара. Отредактировал этот файл

/bitrix/templates/market_fullscreen/components/alexkova.market/catalog/denomination/bitrix/catalog.element/.default/price.php

Но на карточке товара в каталоге при отображении плиткой остался список скидок. Куда еще посмотреть, подскажите, пожалуйста. Поиск по файлам в каталоге /bitrix/templates/market_fullscreen/ не дает результата.

Как настроить продажу дополнительных продуктов к основному Woocommerce?

Скорее всего то, что вам нужно поможет решить плагин подобный этому WooCommerce Custom Field или Product Addons for Woocommerce или что-то в это роде.

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

Вот здесь .icon_i:after { z-index: -1;} лишний

Как отменить opacity у элемента блока?

А это обязательно делать у родителя прозрасность с помощью opacity. Можно сделать background: rgba(0,0,0,0.82); , например, или какой другой цвет, какой нужен с необходимой прозрасность. Если я правильно понял задачу.

Почему блок не хочет расширяться?

Да, точно. Не учел это. Вот так, кажется, будет работать лучше.

.submenu {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 290px;
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.submenu li a {
  line-height: 30px;
  padding: 0;
  color: #111;
  font-weight: 500;
}
.submenu li {
  list-style: none;
}

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

Мне как человеку знающему HTML и СSS - это вариант представляется наиболее удобным и в тоже время эффективным.

Напишите сами свой особенный style.css под свои нужды и решится этот вопрос.

Как сделать такую форму на WordPress в плагине Caldera Forms?

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

Как сделать такую форму на WordPress в плагине Caldera Forms?

Если у вас есть ваш action и он хорошо отрабатывает. Зачем вам тогда плагин форм? Их смысл как раз в том, чтобы не писать свой action.

Как задать длину параграфа в CSS, чтобы она определялась его содержимым?

Если бы я делал, что-то такое я бы создал класс для текста с фоном и всякий раз, при необходимости, в любом блочном теге вставлял span с этим классом, не разрушая изначальный замысел HTML. И не потребовалось бы каждый раз переопределять блочный элемент в строчный.

span.backlight-1 {
    backcgound-color: PaleGoldenrod;
}
span.backlight-2 {
    backcgound-color: LightBlue;
}

<h1><span class="backlight-1">Выделенный</span> текст </h1>
<p>Еще один <span class="backlight-1">выделенный</span> текст </p>
<div><span class="backlight-1">Этот текст выделен желтым</span>, а <span class="backlight-2">этот</span> другим цветом</div>

Насколько удобен линукс для верстальщика?

Sanes, Осуждаю? Кого? И где в моем комментарии вообще осуждение?

Service Worker и ограничение хостинга по одновременным соединениям или как справиться с ошибкой 509?

grinat, отличная идея. Спасибо.