[9/18] Мастерская: декоративные элементы

Курсы §14. Мастерская: декоративные элементы
1

Задание выполнено на 97%.
Подскажите, пожалуйста, как вставить все ссылки на соц. сети, потому что как не получается вообще ((
И сразу посмотрите код, что не так и как его можно оптимизировать.
Заранее спасибо.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="content">
            <h3>Курс &laquo;Фоны&raquo;</h3>
            <div class="text">Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</div>
            <div class="links">
                    <a class="social fb" href="#"></a>
                    <a class="social tw" href="#"></a>
                    <a class="social go" href="#"></a>
            </div>
        </div>
    </body>
</html>

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    background: #ecf0f1;
}

.content {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 235px;
    background: #1abc9c;
    color: white;
    padding: 0px 20px;
}

h3 {
    font-size: 20px;
    font-weight: normal;
}

.social {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    height: 30px;
    width: 30px;
    background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
    margin-right: 10px;    
}

.social .fb {
    background-position: 0 0;
}

.social .tw {
    background-position: 0px -30px;
}

.social .go {
    background-position: 0 -60px;
}
2

Ошибок много:

  1. .social - не надо делать абсолютным а нужно просто инлайн блочным
  2. margin-right: 8px
  3. .social и .fb и.д они оба родители из-за этого не могут найти друг друга, сделай вместо .social - .links
3

спасибо большое )
все исправил, супер просто ))
добра тебе :slight_smile: