Найти в Дзене
Avi xo games

Карточка на HTML и CSS

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

09.06.2025

Идея карточки

Памятуя тот шаблон главной страницы. Там был такой элемент

Этот элемент называется Read more card но он простинький.

Шарясь по бутстрапу я накопал эти карточки по сложнее

-2

Но этот вид все видали. В общем я посмотрел, и решил переделать у меня будут такие карточки но вид будет другим, более подходящим под мою страницу сайта.

Но на этот раз я не буду создавать отдельный файл для карточек, а сделаю карточки прям в коде слайдера который я сделал.

HTML код

Заголовок карточек я помещу в секцию, для этого, в коде слайдера делаем тег <section> с классом news-header

-3

И тег заголовка с классом news-title помещаем туда

-4

И прописываем заголовок

-5

Под заголовком ставим тег <p> и пишем описание

-6

Дальше я сделал краски заголовку

-7

И вот он

-8
Теперь остались карты

Карточку будем делать через секцию с возможностью покрасить фон, создаём секцию, она будет отвечать за все карты.

-9

И внутри этой секции делаем див с классом карта на инязе

-10

Внутрь него помещаем тег с картинкой

-11

Запихиваем в него заголовок с описанием карточки

-12

Под описанием делаем пробел

-13

и там делаем див с классом подвал карты на инязе

-14

И прописываем туда дату и кнопку читать дальше

-15

В итоге код карточки такой

-16

И если посмотреть она пока выглядит так

-17
Осталось придать красивый вид карте

CSS код

Для начала обозначил секцию карточек чтобы её было видно

-18

Вот так

-19

Дальше сделал цвет для карточки, округлил углы добавил тень.

-20

После этого карточка стала здоровой

-21

Ладно урезал ей высоту

-22

Получилось так

-23

Сделал приличный вид содержанию карточки

-24

О как

-25

И подвалу карточки

-26

Вот он результат

-27

Теперь добавлю ещё две карты в HTML

-28

Они естественно добавились, но в разрешении для компудатора они выглядят растянутыми в столбик

-29

Потому что растягиваются на всю ширину секции карточек серого цвета

Добавляем медиа запросы

-30

Результат

И вот так они выглядят на компудаторе

-31

А вот так на телефоне

-32

Я всё перенёс как есть без изменений в релизный файл

-33

Но в последний момент добавил эту строчку

-34

Чтобы был эффект выбора карточки при наведении

-35

Можно переходить созданию нормального хедера.