Как сделать этот предмет с помощью 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...
Дальше продолжайте гуглить самостоятельно.

Как сделать заголовок в две строки и логотип справа от первой строки?

<h1 class="main-title">
      мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
      достижения
    </h1>

Как подобрать ширину контента для сайта к 1920,1366,1280 px?

просто зачем столько пикселей брать для 1920, если можно взять 1600 в сетку?

Кто-то мешает?

как подбирать ширину контента для сайта?

Как вам идея посмотреть как это сделано на тысячах других сайтов? С учетом тематики и вида страницы (я имею в виду, что промо страницы и страницы каталогов будут различаться по затейливости)

Как разместить блок с текстом в правой стороне сайта без использования позиционирования?

1. Да абсолют тут лишний и заставит думать о высоте блока.
Но, на всякий случай, для надо не писать много брейкпоинтов при адаптиве. Задали ширину в половину контентной области и прибили левым краем к середине. Потом один раз перестроили на всю ширину.

2. Просто обычной шириной 50% от контейнера и margin-lef: auto.

3. Флексами. Аналогично как выше, только двигаем с помощью флексовых свойств.

4. Гридами = как флексами.

5. Гридами в две ячейки. Текстом занимаем правую.

Ещё как-нибудь так

Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

Про БЭМ вам там в ответах уже понаписали разного хорошего.
Но у меня вопрос: номер телефона и иконка это точно поиск?

Как прекрипить футер к самому нижу?

Zumich, в современном мире, футер прибивают к низу страницы флексами или гридами. Способы многократно описаны и легко гуглятся по запросу "липкий футер", "sticky footer".
Вариант с флексами более предпочтителен при разной структуре страниц. Например, если не все страницы четко состоят из header, main, footer. Тогда проще задать flex-grow для main, чем думать для которой строки на какой странице задать 1fr в гриде.

На вашей странице футер уже встанет на приличное место, если прекратить задавать ему свойства, смысл которых вы не понимаете. А именно про relative и координаты.

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

Зачем вы пишете три раза одинаковые свойства для трех соц.сетей. А если их будет 10? Так и будете долбить? Может всё таки им один общий класс задать?

Как прекрипить футер к самому нижу?

aspirantes, ну да, когда не было гридов и флексов, приходилось извращаться и так, как вы пишете. Но сейчас-то зачем такое советовать?

Какой .gitignore юзать и почему он всё ещё видит папку .idea?

Владимир, засунуть .idea в глобальный игнор. Вы ведь не будете все возможные редакторы перечислять в игноре проекта?

https://git-scm.com/book/ru/v2/%D0%9D%D0%B0%D1%81%...

https://qna.habr.com/q/1102296 (ответ Сергея)

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

Не вижу, чтобы там что-то не применялось.

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

Ася, да, флекс применяется к родителю.
И, если что, jsfiddle не работает в России, пользуйтесь, пожалуйста, codepen.io

Font-dislay: swap. Как избежать смещение макета?

alexsun7, кстати, зачем вам старый ttf?
Современным браузерам нужен woff2. На всякий случай, для предыдущих поколений можно подгружать и просто woff.