Сетка карточек
Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 42 из 43.
Задание
ЛегкоСоздайте простую двухколоночную разметку для карточек с помощью CSS Grid.
- Карточки должны отображаться в двух равных колонках.
- Между карточками должно быть некоторое расстояние.
Попробуйте сами
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Все уроки раздела CSS Mastery
1Мастерство селекторов — Комбинации
ВведениеСелектор потомковДочерний селекторСмежный селекторОбщий родственный селекторИтоговое испытание4Проект: Выпадающее меню
Добавление подменюОтображение подменюДополнительная стилизацияПоле ввода и кнопка2Интерактивные псевдоклассы
ПсевдоклассыЭффекты наведенияЭффекты фокусаАктивные стилиИтоговое испытание3Структурные псевдоклассы
Структурные псевдоклассыВыбор первого дочернего элементаВыбор последнего дочернего элементаСила шаблонов: использование nth-childЗадание на повторение9Финальные испытания
Подсветка активного пункта менюЧередование строк таблицыЭффект наведения на кнопкуСетка карточекРазмытое Hero-изображение