Изучаем HTML & CSS в 2025 году | Адаптивная верстка секции с отзывами

Содержание: 00:00 Создание структуры HTML 01:22 Для чего я задаю классы для текста и ссылки 01:57 Размножение карточек с отзывами 03:02 Работаем с CSS 03:07 Селектор testim с отступами со всех сторон 03:32 Создание свойств для testim-container: ширина, выравнивание по центру, применение флекса 04:38 flex-wrap свойство для переноса карточек, если они не будут помещаться на экране 05:00 Размеры картинок в отзывах 05:31 Размеры контейнеров в карточках, чтобы картинки уместились в контейнеры 06:07 Скругляем углы картинок 06:23 Задаем отступы между картинкой, текстом и ссылкой внутри карточки с помощью флексов 07:09 Моя ошибка с отсутпами gap 07:25 Отступы между карточками в родительском контейнре testim-container 07:47 Выравнивание содержимого карточек по центру 08:07 Изменяем длину текста (для естественности) 08:43 Как выровнять по одной линии ссылки, чтобы они прижимались к низу 09:18 Замена цвета ссылок 09:33 Проверяем смотрибельность блока на мобильных устройствах 09:44 Проблема с выбросом последнего отзыва и его крупностью 10:20 Медиа-запрос для устранения проблемы 10:50 Флекс 0 0 значит, что карточка не может быть больше или меньше 11:47 Если хотим отцентрировать пятую карточку 12:23 Адаптив для смартфонов 13:15 Медиа-запрос под широкие смартфоны (меняем только размер текста и ссылок) 14:07 Медиа-запрос для выстраивания карточек по одной в ряд 15:24 Уменьшение отступов вокруг карточек 16:36 Уменьшаем шрифт текста и ссылок на десктопной версии