Задание не сложное. Для начала напишем HTML-код. Я создал общий контейнер с классом share в котором будет находится все необходимое содержимое, далее в тег span обернул название, в тег p обернул текст, далее создал общий контейнер для иконок и поместил в него 3 ссылки. Вот, что из этого вышло:
<body>
<div class="share">
<span>Курс «Фоны»</span>
<p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
<div class="social-pack">
<a href="" class="social facebook"></a>
<a href="" class="social twitter"></a>
<a href="" class="social google"></a>
</div>
</div>
</body>
Теперь перейдем в наш CSS-код и начнем работу над оформлением. Напишем стили для общего контейнера: ширину, высоту, цвет фона, цвет текста, внутренние отступы и свойство box-sizing: border-box; чтобы контент не влиял на заданный размер блока.
.share { width: 240px; min-height: 235px; background-color: #1abc9c; color: white; padding: 20px; padding-bottom: 0; box-sizing: border-box; }
Далее стили для параграфа, тут все просто.
p { margin-top: 20px; margin-bottom: 25px; }
Теперь размер текста заголовка:
span { font-size: 20px; }
Я не использовал для этого теги заголовков, хотя можно использовать и их, но в таком случае нужно будет обнулить все отступы, и задать толщину шрифта. Пример ниже, если бы вместо span мы бы использовали h1.
h1 { padding: 0; margin: 0; font-weight: normal; font-size: 20px; }
Теперь оформим иконки социальных сетей. Для этого я задал им всем по 2 класса, один из которых общий, что задает общий стиль для всех иконок, и различные классы для индивидуальных стилей. Сначала зададим общие стили. Поскольку ссылки по-умолчанию строчные элементы, то их нужно превратить в блочно-строчные, далее уже можем задать высоту и ширину, задать фон и фоновое изображение без повторения, в конце марджин справа:
.social { display: inline-block; width: 30px; height: 30px; background: #16a085 url("/assets/course14/social-challenge.png") no-repeat; margin-right: 5px; }
Теперь осталось только спозиционировать наш спрайт (фоновое изображение), для каждой отдельной иконки:
.facebook { background-position: 0 0; } .twitter { background-position: -30px 0; } .google { background-position: -60px 0; }
Готово! Задание выполнено на 100%. Буду рад услышать комментарии. Спасибо за внимание!