- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Магазин товаров для дома</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<div class="container">
<h1>Gloevk</h1>
<p>Разнообразные товары для дома с доставкой по всей планете</p>
<img src="img/gloevk-examples.png" width="510" height="80" alt="Примеры интерьеров">
</div>
</header>
<section class="features">
<h2>Что поможет вам создать домашний уют?</h2>
<p class="feature-furniture">Мебель и фурнитура</p>
<p class="feature-lighting">Лампы и торшеры</p>
<p class="feature-accessories">Аксессуары и мелочи</p>
</section>
<section class="advantages">
<h2>Что выделяет нас среди конкурентов?</h2>
<ul class="advantages-list">
<li class="advantages-item">Используем только природные материалы</li>
<li class="advantages-item">Ежедневные отчёты о ходе работ</li>
<li class="advantages-item">Сами соберём мебель для вас</li>
<li class="advantages-item">Бесплатное гарантийное обслуживание в течение 10 лет</li>
<li class="advantages-item">Доставка в день заказа</li>
</ul>
</section>
<footer class="site-footer">
<div class="container">
<p>© Кекс, 2020</p>
<p>Магазин товаров для дома</p>
</div>
</footer>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 14px;
line-height: 20px;
color: #444444;
}
h1 {
width: 255px;
margin: 0 auto 8px;
font-family: "Georgia", serif;
text-align: center;
font-weight: normal;
font-size: 56px;
line-height: 64px;
}
h2 {
border-bottom: 2px solid #cccccc;
padding-bottom: 12px;
}
.container {
width: 510px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
min-width: 550px;
height: 186px;
margin-bottom: 70px;
padding-top: 30px;
background: #847462 no-repeat center url("img/gloevk-bg.jpg");
background-size: cover;
color: #ffffff;
}
.site-header p {
width: 255px;
margin: 0 auto 26px;
text-align: center;
font-size: 16px;
line-height: 24px;
}
.site-header img {
display: block;
margin: 0 auto;
}
.features {
width: 510px;
margin: 0 auto 30px;
padding: 0 20px;
}
.features p {
display: inline-block;
vertical-align: top;
width: 30%;
margin: 0 5px;
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}
.feature-furniture {
padding-top: 65px;
background-image: url("img/furniture.svg");
}
.feature-lighting {
padding-top: 65px;
background-image: url("img/lighting.svg");
}
.feature-accessories {
padding-top: 65px;
background-image: url("img/accessories.svg");
}
.advantages {
width: 510px;
margin: 0 auto 40px;
padding: 0 20px;
}
.advantages-list {
padding: 0;
list-style: none;
}
.advantages-item {
margin-bottom: 15px;
/* Добавьте свойства сюда */
}
.site-footer {
min-width: 550px;
background-color: #847462;
color: #ffffff;
}
.site-footer .container {
text-align: center;
}
.site-footer p {
display: inline-block;
vertical-align: middle;
padding: 0 20px;
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- В правило
.advantages-itemдобавьте свойствоpadding-left: 20px;. - Затем свойство
border-leftсо значением20px solid #e2e2e2;. - И в конце свойство
colorсо значением#999999;.