9/18 100%

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

.head{
display:inline-block;
background-color:#1abc9c;
color:white;
width:240px;
height:235px;
}
h1{
font-size:20px;
font-weight:normal;
padding:20px 0px 10px 20px;
margin:0;
}
p{
margin:10px 20px 0 20px;
}
.knop{
margin:25px 0 0 20px;
}
.social{
display:inline-block;
width:30px;
height:30px;
background-color:#16a085;
margin-right:5px;
background-image:url("/assets/course14/social-challenge.png");
}
.fb{
background-position:0 0;
}
.tw{
background-position:-30px 0;
}
.gl{
background-position:-60px 0;
}

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

Кнопка для вставки html-кода </>, в редакторе сообщений.

4

Не закрыт[quote=“Vika_Saratova, post:2, topic:4509”]
<div class=“knop”>
[/quote]

5

или div.head

6

HTML5 прощает. Иногда.:grinning:

7

А валидатор?

8

А это что за зверь?

9

Cтрашный)

10

Тогда у “академиков” он не работает!:grin:

11

Почему?..

12

При проверке вложенности тегов, должен обозначить ошибку. Я так понял.

13

Показывает. На сайте валидатора. И в текстовых редакторах подсвечиваются ошибки.
Можно проверить при желании.

14

Спасибо! Понято.

1 лайк