9/18, 100%, посмотрите, пожалуйста, кому не трудно.

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

Кажется, я перемудрил с маргинами, но не знаю как сделать код лучше.
P.S. Если есть и другие замечания, то буду рад услышать.

    <html lang="ru">
        <head>
            <meta charset="utf-8">
            <title>Испытание: карточка курса</title>
        </head>
        <body>
            <div class="course-card">
                <h2>Курс &laquo;Фоны&raquo;</h2>
                <span>
                    Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
                </span>
                <div class="buttons">
                    <a class="button button-fb">FB</a>
                    <a class="button but-!>ton-tw">TW</a>
                    <a class="button button-gg">GG</a>
                </div>
            </div>
        </body>
    </html>

CSS

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;
}

.course-card {
background-color:#1abc9c;
width: 200px;
padding: 5px 20px 5px 20px;
color: white;
}

h2 {
margin: 15px 0 20px 0;
font-weight: normal;
font-size: 20px;
}

.buttons {
margin: 25px 0 15px 0;
}

.button {
display: inline-block;
min-width: 20px;
padding: 5px;
margin-right: 5px;
background-image: url(/assets/course14/social-challenge.png);
background-repeat: no-repeat;
background-color: #16a085;
line-height: 20px;
text-indent: -1000px;
}

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

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

.button-gg {
background-position: -60px 0;
}

2

HTML тоже нужен.

3

Извините, забыл, что сам его писал

4

Есть, немного…

Странновато Вы обошлись с кнопками...

<a class="button button-fb">FB</a>
<a class="button button-tw">TW</a>
<a class="button button-gg">GG</a>

button {
display: inline-block;
min-width: 20px; width: 30px; height: 30px
padding: 5px;
margin-right: 5px;
background-image: url(/assets/course14/social-challenge.png);
background-repeat: no-repeat;
background-color: #16a085;
line-height: 20px;
text-indent: -1000px;
}

Вместо <span> лучше использовать <p>.

Маржины и паддинги попробуйте подобрать сами.

5

Здесь правильно. Есть такой прием, когда текст ссылки убирается с помощью text-indent.

6

Насколько целесообразно в данном испытании использовать такой приём?

7

Так правильно делать. В идеале в разметке не должно быть пустых текстовых элементов. Но если в стилях текст не нужен, то он скрывается. font-size: 0; отрицательный text-indent или как здесь - .visually-hidden.

1 лайк
8

А line-height: 20px; нужен?

9

Нет, это вынужденное дополнение к min-width: 20px;