09.06.2025
Идея карточки
Памятуя тот шаблон главной страницы. Там был такой элемент
Этот элемент называется Read more card но он простинький.
Шарясь по бутстрапу я накопал эти карточки по сложнее
Но этот вид все видали. В общем я посмотрел, и решил переделать у меня будут такие карточки но вид будет другим, более подходящим под мою страницу сайта.
Но на этот раз я не буду создавать отдельный файл для карточек, а сделаю карточки прям в коде слайдера который я сделал.
HTML код
Заголовок карточек я помещу в секцию, для этого, в коде слайдера делаем тег <section> с классом news-header
И тег заголовка с классом news-title помещаем туда
И прописываем заголовок
Под заголовком ставим тег <p> и пишем описание
Дальше я сделал краски заголовку
И вот он
Теперь остались карты
Карточку будем делать через секцию с возможностью покрасить фон, создаём секцию, она будет отвечать за все карты.
И внутри этой секции делаем див с классом карта на инязе
Внутрь него помещаем тег с картинкой
Запихиваем в него заголовок с описанием карточки
Под описанием делаем пробел
и там делаем див с классом подвал карты на инязе
И прописываем туда дату и кнопку читать дальше
В итоге код карточки такой
И если посмотреть она пока выглядит так
Осталось придать красивый вид карте
CSS код
Для начала обозначил секцию карточек чтобы её было видно
Вот так
Дальше сделал цвет для карточки, округлил углы добавил тень.
После этого карточка стала здоровой
Ладно урезал ей высоту
Получилось так
Сделал приличный вид содержанию карточки
О как
И подвалу карточки
Вот он результат
Теперь добавлю ещё две карты в HTML
Они естественно добавились, но в разрешении для компудатора они выглядят растянутыми в столбик
Потому что растягиваются на всю ширину секции карточек серого цвета
Добавляем медиа запросы
Результат
И вот так они выглядят на компудаторе
А вот так на телефоне
Я всё перенёс как есть без изменений в релизный файл
Но в последний момент добавил эту строчку
Чтобы был эффект выбора карточки при наведении
Можно переходить созданию нормального хедера.