Готовые адаптивные карточки: установка и использование
В этой статье мы научимся создавать адаптивные карточки с использованием HTML и CSS. Эти карточки будут автоматически адаптироваться к различным устройствам и экранам, обеспечивая удобство просмотра на мобильных устройствах.
Карточки являются важным элементом веб-дизайна и используются для представления коротких статей, описаний продуктов или профилей пользователей.
Создание адаптивных карточек с помощью HTML и CSS
Они могут содержать различные элементы, такие как изображения, тексты и другие интерактивные компоненты.
Если вы только начинаете изучать веб-разработку, создание адаптивных карточек может стать отличным проектом для изучения основ CSS, включая позиционирование, flexbox и grid-макеты.
К счастью, в этом примере мы предоставляем готовые адаптивные карточки, которые можно легко интегрировать на ваш сайт или страницу.
Код HTML и CSS адаптивных карточек
В первую очередь нам с Вами необходимо подключить font-awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">Далее рассмотрим HTML код адаптивных карточек:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<div class="card-list">
<a href="#" class="card-item">
<img src="/images/demo/product1.jpg" alt="Дизайн и графика">
<span class="developer">Дизайн и графика</span>
<h3>Дизайн и графика для сайтов.</h3>
<div class="arrow">
<i class="fas fa-arrow-right card-icon"></i>
</div>
</a>
<a href="#" class="card-item">
<img src="/images/demo/product2.jpg" alt="Разработка сайтов">
<span class="designer">Разработка сайтов</span>
<h3>Разработка и создание сайтов.</h3>
<div class="arrow">
<i class="fas fa-arrow-right card-icon"></i>
</div>
</a>
<a href="#" class="card-item">
<img src="/images/demo/product3.jpg" alt="Продвижение сайтов">
<span class="editor">Продвижение сайтов</span>
<h3>Профессиональное продвижение сайтов.</h3>
<div class="arrow">
<i class="fas fa-arrow-right card-icon"></i>
</div>
</a>
</div>
</body>
</html>Здесь все понятно и просто, Вам только заменить ссылки на картинки и описание. Конечно Вы можете добавить все что захотите - кнопки,иконки,соцсети и др.
Вы также можете добавить дополнительную информацию или сделать карточки более привлекательными, в зависимости от ваших потребностей и предпочтений.
Теперь сами стили CSS адаптивных карточек:
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
max-width: 100%;
margin: 0px auto;
padding: 0px;
gap: 20px;
}
.card-list .card-item {
background: #fff;
padding: 26px;
border-radius: 8px;
box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
list-style: none;
cursor: pointer;
text-decoration: none;
border: 2px solid transparent;
transition: border 0.5s ease;
}
.card-list .card-item:hover {
border: 2px solid #000;
}
.card-list .card-item img {
width: 100%;
aspect-ratio: 16/9;
border-radius: 8px;
object-fit: cover;
}
.card-list span {
display: inline-block;
background: #F7DFF5;
margin-top: 32px;
padding: 8px 15px;
font-size: 0.75rem;
border-radius: 50px;
font-weight: 600;
}
.card-list .developer {
background-color: #F7DFF5;
color: #B22485;
}
.card-list .designer {
background-color: #d1e8ff;
color: #2968a8;
}
.card-list .editor {
background-color: #d6f8d6;
color: #205c20;
}
.card-item h3 {
color: #000;
font-size: 1.438rem;
margin-top: 28px;
font-weight: 600;
}
.card-item .arrow {
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-35deg);
height: 40px;
width: 40px;
color: #000;
border: 1px solid #000;
border-radius: 50%;
margin-top: 40px;
transition: 0.2s ease;
}
.card-list .card-item:hover .arrow {
background: #000;
color: #fff;
}
@media (max-width: 1200px) {
.card-list .card-item {
padding: 15px;
}
}
@media screen and (max-width: 980px) {
.card-list {
margin: 0 auto;
}
}Стили тоже можно подправить как Вам угодно, под цвет , размер , то есть как душе будет угодно!
Смотрите также в этой категории:
