- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Социальные кнопки, шаг 3</title>
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="share">
<b>Соцсети</b>
<a class="social social-vk" href="https://vk.com/htmlacademy"></a>
<a class="social social-fb" href="https://www.facebook.com/htmlacademy"></a>
<a class="social social-tw" href="https://twitter.com/htmlacademy_ru"></a>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "PT Sans", sans-serif;
}
.share {
width: 270px;
margin: 0 auto;
margin-top: 120px;
padding: 10px;
padding-left: 20px;
background-color: #ecf0f1;
}
.share b {
margin-right: 15px;
font-weight: normal;
color: #7f8c8d;
text-transform: uppercase;
}
.social {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
background-color: #bdc3c7;
}
.social-vk {
}
.social-fb {
}
.social-tw {
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Задайте для класса
.socialфоновое изображениеsocial.pngбез повторения. - Для класса
.social-vkцвет фона#6d8fb3и расположение фонового изображения0 0. - Для класса
.social-fbцвет фона#526da3и расположение-40px 0. - Для класса
.social-twцвет фона#73bfe6и расположение-80px 0.