Создай современный адаптивный шаблон карточки материала для блога (HTML + CSS).
1. Адаптивная логика
Сделай 3 версии макета:
- Десктоп (от 1024px):
- Карточка в две колонки.
- Слева фиксированная обложка (ширина 300–320px).
- Справа текст и элементы карточки, описание обтекает картинку.
- Кнопка «Читать далее» справа снизу.
- Планшет (768–1024px):
- Сохраняй расположение как на десктопе (картинка слева, текст справа),
- но уменьши ширину картинки (240–260px) и шрифт заголовка/описания,
- сделай больше вертикальных отступов, чтобы элементы не слипались.
- Мобильная (до 768px):
- Переключи карточку в одну колонку.
- Обложка идёт сверху на всю ширину, ниже — описание и кнопка.
- Блок мета-информации остаётся над описанием, но выравнивается по центру.
2. Обложка материала
- Кликабельна и ведёт на страницу материала.
- Снизу на обложке чёрная полупрозрачная плашка (opacity ~0.7 или background: rgba(0,0,0,0.7)). Плашка должна полностью вмещать в себя текст до 3 строк и иметь снизу от обложки небольшой отступ.
- На плашке название материала (до 3 строк, белый текст, text-overflow: ellipsis).
- Если текст не помещается — обрезать многоточием.
- Мягкие скругления углов картинки (border-radius: 12px).
- Если краткое описание большое, выравнивать обложку по вертикали.
- Название материала: только на обложке. Не нужно выводить его над кратким описанием заголовком. Панель управления материалом оставь в верхнем правом углу.
- Обложка должна быть не прибита к краю и верху, а быть выравнена по центру по вертикали и находиться непосредственно по центру текста краткого описания по вертикали.
3. Рейтинг
- Бейдж ⭐️ по центру над картинкой.
- Лёгкая тень, закруглённые углы, белый или контрастный фон.
- Рейтинг должен помещаться и не обрезаться, быть с небольшим отступом от верха обложки.
4. Блок мета-информации
- 👁 просмотры, 📅 дата, 💬 комментарии в одной строке.
- Используй flex для аккуратного выравнивания.
5. Категория
- Под обложкой, с эмодзи вместо иконки.
- Кликабельная ссылка на категорию.
6. Описание
- Справа от картинки (на десктопе/планшете).
- Хорошие отступы, комфортная ширина текста.
7. Кнопка «Читать далее»
- Справа под описанием. С отступом от описания.
- Современный стиль, скругления, плавный hover-эффект (изменение цвета/тени).
8. Дополнительно
- Используй шрифт Inter, Roboto или system-ui.
- У всей карточки мягкая тень и скругления.
- Код раздели на HTML и CSS.
|
