В целом норм? Какие замечания? Иконки умышленно не через список делал.
Интересует еще вопрос, я текст внутри ссылок скрыл через hidden.
Есть ли разница между visibility: hidden и font-size: 0?
<div class="conteiner">
<h1 class="title">Курс «Фоны»</h1>
<p class="text">Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
<a href="#" class="social social-fb">
<span class="hidden">face-book</span>
</a>
<a href="#" class="social social-tw">
<span class="hidden">twitter</span>
</a>
<a href="#" class="social social-gl">
<span class="hidden">google+</span>
</a>
</div>
.conteiner {
width: 200px;
background-color:#1abc9c;
padding: 20px;
}
.conteiner .title {
padding: 0;
margin: 0;
margin-bottom: 20px;
font-size: 20px;
font-weight: normal;
color: #ffffff;
}
.conteiner .text {
color: #ffffff;
padding: 0;
margin: 0;
}
.conteiner .social {
display: inline-block;
height: 30px;
width: 30px;
margin-top: 25px;
margin-right: 5px;
background: #16a085 url(social-challenge.png) no-repeat;
}
.conteiner .hidden {
white-space: nowrap;
visibility: hidden;
}
.conteiner .social-fb {
background-position: 0 0;
}
.conteiner .social-tw {
background-position: -30px 0;
}
.conteiner .social-gl {
background-position: -60px 0;
}