Как сделать этот предмет с помощью CSS + HTML(Меня интересует елемент, что находится посередине.)?

Достаточно одного div и одного bg

<div class="container"></div>

.container {
  width: 130px;
  height: 70px;
  background: radial-gradient(ellipse 100% 90% at left 20%, transparent 99.5%, orange) no-repeat left center/ 33% 100%,
    linear-gradient(orange, orange) no-repeat top center / 34% 100%,
    radial-gradient(ellipse 100% 90% at right 20%, transparent 99.5%, orange) no-repeat right center/ 33% 100%;
}

Как растянуть левый блок по высоте относительно правого?

Flyheck, Даниил, ай какие молодцы, случайно зашли комментировать один древний вопрос )))

Читаем задачу

Как растянуть левый блок по высоте относительно правого?

Смотрим в то, как выглядит исходник

Как сделать этот предмет с помощью CSS + HTML(Меня интересует елемент, что находится посередине.)?

Даниил, собственно, я не пишу это в ответы и не предлагаю никому вызовов.

SVG задачу решит? Решит.
Если автор хочет решений с градиентами и border-radius'ами, то может начать с того, что пробовал и не получилось. Делать за него не имею желания.

Как растянуть левый блок по высоте относительно правого?

Даниил, честно говоря, не вижу в вашем варианте того, что нужно ТС.

Как убрать пустое место в grid?

Как убрать пустое место в grid?

- Не использовать грид.
Если была бы известна высота остальных блоков, то гриды бы помог за счет объединения ячеек. А так нет.

css columns, скрипты типа masonry, просто подкрутить на js и т.д.

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

Tereverda, придется выяснить почему дергается и исправить. Заниматься угадыванием не имеет смысла. Делайте песочницу на codepen.io с видимой проблемой.
Либо считайте нужную высоту на js.

Почему ломаются кнопки и input на IOS?

Это все стили у этих инпутов?
А где рабочий пример?
Смотрите что с отступами, как вы вообще позиционировали кнопки внутри родителя.
Белое это точно инпут, а не родитель?
Какие стили у родителя?

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

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

Ну например, через display: none тому содержимому, которое нужно скрыть.
Не подходит? Чем не подходит? Что ещё пробовали?

Как выравнять 2 блока по центру?

Даниил, да прям у них написано. Было, по крайней мере.
И без vpn лично у меня не работает.

Как расположить блоки, чтобы средний был по центру?

Аналогичная тема и решения без абсолютов https://qna.habr.com/q/1088262
Правда, тоже нужно думать о содержимом.

Как сделать этот предмет с помощью CSS + HTML(Меня интересует елемент, что находится посередине.)?

Взять svg...

Как сделать чтобы hover эффект не лагал при скролле и у кнопки работал cursor pointer?

1. Замените абсолют на грид.
2. Задайте кнопке свойства в обычный селектор, без наведения. Скройте.
3. При наведении пишите только изменяющиеся свойства. Можно скрыть не только через display: none, а, например, через opacity или visibility.

p.s. c БЭМ и названиями классов бы разобраться, а то сейчас дичь: блок внутри своего же элемента.
card__hover__button и card__img__test - это вообще черт знает кто.
И т.д.

card__hover - это, похоже, просто лишнее.

И имеет смысл избавится от important в собственном коде.

Как растянуть полосу?

Тут написаны стили от какой-то контентной картинки с изображением партнеров.
Именно так читается написанный вами код.

А на макете я вижу просто bg color какого-то блока, если в нем есть содержимое или псевдоэлемента, если нет. Либо не bg color, а кусок градиента. Поскольку макет там обрывается, то кто же его знает что там ниже в макете.

Что делать:
1. Не складывать в контейнер то, что там неудобно держать.
2. Если всё таки нужно выйти за пределы контейнера и это гладкий фон, то прибить абсолютом к правой части блока, чтобы шел налево. Направо тенью. Так не будет прокрутки и не понадобится сомнительный overflow.
3. Либо абсолют по центру и overflow.

Но эти рецепты абстрактны. Потому что не видно всей задачи. Что это за полоса вообще? Что там дальше?

Может, это вообще тень от шапки...

Как можно сверстать градиентный бордер на градиентном фоне?

modelair, https://qna.habr.com/q/1156102

Как сделать overflow для отдельной части таблицы?

fraqlehver,

Мне нужно

С этим на фриланс.

В какую сторону гуглить я подсказала. Дальше вы можете показать, что вы делали и что именно не получилось. Желательно в песочнице на codepen.io, чтобы ваш код можно было потрогать.

Также можно гуглить не в гугле, а поискать на том же codepen. Рекомендую так и поступить.

Стоит ли изучить PUG?

PUG нужно изучать тогда, когда окажется, что без него никак. Пожелаю, чтобы никогда :)

Думаю, что сейчас есть много чего другого для изучения, с заметно большим приоритетом.

Как правильно адаптировать секции на Tailwind css?

Ну и как сверстать макет где дают только ПК версию и просят использовать Tailwind css если там Mobile first с использованием в контейнерах min-width?

Если по ТЗ брейкпоинты должны идти mobile-first, то так и делать.
Можно сверстать сначала десктоп, потом внести соответствующие корректировки. Потом навостритесь сразу писать mobile first, даже при одном десктопном макете.

Как добавить плавность когда возвращаемся в исходное состояние?

frontAng, работает. Ради очень древних проектов, примерно двадцатилетней давности (ну ладно, чуть поменьше).

Как добавить плавность когда возвращаемся в исходное состояние?

frontAng, можно переформулировать: зачем-то цвет добавляется только в раскрытом виде, а не сразу.
И псевдоэлементы пишутся с двумя ::

Как сделать overflow для отдельной части таблицы?

Не помню, где хорошая статья по этому поводу, вот первая попавшаяся из гугла https://tympanus.net/codrops/2014/01/09/sticky-tab...
Дальше продолжайте гуглить самостоятельно.