Испытание: карточка курса [9/18]

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

Добрый день. Я выполнил задание на 100%, но хотелось бы услышать замечания по вёрстке, если таковые имеются. А то у меня есть особенность всё усложнять:)

`

Испытание: карточка курса

Курс «Фоны»

Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов. 
    </div>
</body>
`

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;
}
.block{
width:240px;
padding:0;
color:#fff;
background-color:#1abc9c;
height:235px;

}
h1{
font-weight:normal;
font-size:20px;
padding:20px 20px;
margin:0;
}
span{
display:inline-block;
padding:0 20px;
}
.soc{
margin:25px 20px;
}
.sprite{
background-color:#16a085;
background-image:url("/assets/course14/social-challenge.png");
display:inline-block;
width:30px;
height:30px;
margin-right:5px;
}
.fb{
background-position:0 0;
}
.tw{
background-position:-30px 0;
}
.gg{
background-position:-60px 0;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

2

И немного не понятно поведения блока, когда задаём заголовку margin. Т.е. получается, что решил методом тыка.Я помню, что кажется что-то было на эту тему, но не могу вспомнить, где.

3

Вставьте код, как полагается. Напоминаю, это кнопка </> в редакторе сообщений.

4

`


Контакты, шаг 1




Наш адрес



Россия, Санкт-Петербург,

Невский пр., дом 1



+7 (921) 555-33-22



`

Я нажимал ту клавишу, чего-то заключило.

5

Что-то напутали. Html-код не из того испытания.

6

`


Испытание: карточка курса



Курс «Фоны»


Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.




    </div>
</body>
`

Что-то я не попадаю… Прошу прощения)

7

что же это такое, не вставляется код

8

Воспользуйтесь песочницей какой-нибудь.

9

`

    <div class="block">

        <h1>Курс Фоны</h1>
        <span>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</span>
        <div class="soc">
            <a href="" class="sprite fb"></a>
            <a href="" class="sprite tw"></a>
            <a href="" class="sprite gg"></a>
        </div>
        
    </div>
</body>`

В общем как-то так) Боди открывающее не скопировалось, не знаю, что за баг…

10

Просто padding: 20px; раз значение одинаково для всех сторон. А так замечаний нет.

11

Точно, у меня сначала стоял другой отступ, но я потом выравнивал размеры блока и видимо пришлось редактировать отступы, а я и не обратил внимание. Неужто всё нормально ?)) Просто я считаю, что 100% это не показатель) У меня что-то не особо получается решать задачи простыми путями, я вечно намудрю, что потом сам разобраться не могу:) Даже не верится, что вы без критики…)

12

Не всегда же критиковать… Иногда и похвалить можно. когда есть за что.

13

Благодарю=) Можете только пожалуйста сбросить ссылочку на урок про замечание, что я написал в 2-ом сообщении? Про margin в заголовке. Перемещается не только сам заголовок, но и весь блок, в котором он находится. Мне немного не понятен этот момент. В заранее благодарю)

14

Что-то тоже не припомню. Завтра с утра поищу.

15

Может вот это: https://htmlacademy.ru/courses/44/run/10