Открываете инструменты разработчика, вкладку Console.
Браузер напишет, что не нашел картинки и где их искал.
Нужно сравнить те пути по которым ищет браузер и те, по которым реально лежат файлы.
Скорректировать.
Перед тем как исправлять, чтобы не накосячить ещё больше, можно прочитать: Абсолютные и относительные ссылки
Обертка гридом. Снизу видео (или его превью), сверху оверлей на который можно нажать либо кликабельна только кнопка.
Это с точки зрения разметки и стилей.
А дальше на JS делаете всё, что нужно: показываете видео, скрываете кнопку и т.д.
Тут дело не в БЭМ, а в доступности и семантике.
И соображений несколько:
Для доступности у инпутов должны быть label. Если их нет в макете, то они должны быть доступно скрыты с помощью паттерна visually-hidden (гуглится).
Если идет несколько подряд инпутов, то вероятно, это список.
В итоге получаем список, каждый элемент которого input + label = красивая, доступная структура. К тому же помогает стилизации.
1. Каким образом можно воспользоваться поиском, если это одинокий инпут без формы и сабмита? (Читалки, клавиатуры, мышки).
Там же: почему вы считаете лупу контентным изображением? Аналогичный вопрос и про другие иконки.
2. У вас практически весь текст свёрстан заголовками разного уровня. А что не заголовки, то div.
Даже количество страниц у вас заголовок. Ладно бы ещё секция вокруг была бы..
3. Дальше про пагинацию: всё таки пользователь ожидает, что номера страниц, а также стрелки будут кликабельными.
А не просто сообщением "а там ещё есть страницы".
4. Это в макете такие отступы были?
Сейчас в разметке у вас заметный трэш.
Покажите всю задачу, которую решаете, пока не поздно привести всё в порядок, а не наделать ещё больших костылей.
Wolron, я бы делала на глаз, а если нужно точнее, то так: заменила цвет заливки на черный. Сделала бы белую подложку. Тыкнула бы пипеткой в получившийся серенький цвет. Посчитала %.
Возможно, есть вариант попроще.
