- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пользовательские свойства. Знакомство</title>
<link rel="stylesheet" href="card.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<article class="card">
<img class="card__image" src="karpovka-400.jpg" width="200" height="100" alt="Набережная Карповки">
<div class="card__content">
<h2 class="card__title">Набережная Карповки</h2>
<p class="card__description">
Одно из живописных мест Санкт-Петербурга, идеально подходящее для прогулок.
</p>
<a class="card__button" href="#">Узнать больше</a>
</div>
</article>
</body>
</html>
CSS
:root {
--page-color: #203044;
}
body {
background-color: var(--page-color);
}
.card {
--card-color: #14a76c;
--card-radius: 12px;
border-radius: var(--card-radius);
--card-spacing: 20px;
padding: var(--card-spacing);
}
.card__title {
color: var(--card-color);
}
.card__button {
background-color: var(--card-color);
}
.card__image {
border-radius: var(--card-radius);
margin-bottom: var(--card-spacing);
}
.card__description {
margin-bottom: var(--card-spacing);
}
Вы перешли на другую страницу
ЗадачиВыполнено
0
- В правиле
:rootобъявите--color-primaryсо значением#14a76c. - В правиле
.cardзамените значение--card-colorнаvar(--color-primary).