9/18 [100%] - прошу посмотреть код

Выполнил на 100%, но смущает, что у класса “block” пришлось ставить отступ 7px, прошу указать на ошибки.

HTML:

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

.block {
    background-color: #1abc9c;
    color: white;
    width: 200px;
    padding: 7px 20px;
}

h1 {
    font-weight: normal;
    font-size: 20px;
    margin-bottom: 20px;
}

p {
    margin-bottom: 25px;
}

    .social {
    width: 30px;
    height: 30px;
    background-color: #16a085;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 10px;
    background-image: url("/assets/course14/social-challenge.png");
    background-repeat: no-repeat;
}        

.fb {
    background-position: 0 0;
}

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

.gp {
    background-position: -60px 0;
}

Не обнулили отступы по умолчанию у заголовка и параграфа.

1 лайк

Благодарю за подсказку, исправил 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;
}

.block {
    background-color: #1abc9c;
    color: white;
    width: 200px;
    padding: 0 20px;
    min-height: 235px;
}

h1 {
    font-weight: normal;
    margin: 0;
    font-size: 20px;
    padding: 20px 0;
}

p {
    margin: 0;
    padding-bottom: 25px;
 
}

    .social {
    width: 30px;
    height: 30px;
    background-color: #16a085;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 15px;
    background-image: url("/assets/course14/social-challenge.png");
    background-repeat: no-repeat;
}        

.fb {
    background-position: 0 0;
}

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

.gp {
    background-position: -60px 0;
}
1 лайк
Посмотрите, пожалуйста, код...есть ли какие-либо замечания?
 <!DOCTYPE html>
<html lang="ru">
     <head>
         <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
     </head>
     <body>
         <div class="bg">
             <h1>Курс &laquo;Фоны&raquo;</h1>
             <h3>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</h3>
             <div class="bottom">
                <a href="#fb" class="social social-fb"></a>
                <a href="#tw" class="social social-tw"></a>
                <a href="#g" class="social social-g"></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;
}

.bg {
    width:200px;
    padding:20px;
    background:#1abc9c;
    color:white;
}

h1 {
    font-weight:normal;
    font-size:20px;
    margin-bottom: 20px;
    margin-top:0;
}

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

.social {
    display:inline-block;
    width:30px;
    height:30px;
    background:#16a085 url(/assets/course14/social-challenge.png) no-repeat;
    margin-right:5px;
    vertical-align: middle;
} 

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

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

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

.bottom {
    margin-top: 25px;
}

Почему два заголовка? Поясните свой выбор.

Вы имеете ввиду, что вместо заголовка 3-го уровня лучше обычный абзац использовать?

А вы как считаете? Есть заголовки, а что тогда содержимое?

Лично для меня, текст в испытании логически не закончен. В данном случае, я думаю, что содержимого просто нет. Есть только как бы анонс, аннотация курса. Попробую пояснить свой выбор на примере. Например, если бы было так:

Курс “Фоны” - заголовок 1-го уровня;
Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов. - заголовок 3-го уровня;
Начнём изучение с цвета фона. Цвет фона можно задать с помощью CSS-свойства background-color.
Цвета в CSS можно задавать в разных форматах: в шестнадцатеричном (или HEX), в RGB или RGBA, а также с помощью цветовых констант, таких как red или green. - содержимое (обычный абзац)

В любом случае, мне кажется это не принципиально (или я ошибаюсь?) Есть другие недочеты, не касающиеся заголовка??

Вы сами говорите “анонс”, то есть краткое содержание курса. Для заголовка это уже много текста, по моему мнению.
Других замечаний, кроме спора по семантике, нет.

Спасибо:)

Кончилось терпение, прошу, подскажите в чем ошибка?

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


html,
body {
    margin: 0;
    padding: 0;
    background:#fff;
}

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

.card{
    padding:0 20px;
    height:235px;
    width:200px;
    color:white;
    background-color:#1ABC9C;  
}

.clearfix::before{
    content:"";
    display:table;
    clear:both;
    }

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

.social a {
    display:inline-block;
    height:30px;
    width:30px;
    margin:10px 5px 0 0;
    padding:0;
    background-color:#16A085;
    }
    
.social a:first-child{
    margin-left:0;
   
    }    
    
.fb{
    background:url(/assets/course14/social-challenge.png) no-repeat 0 0; 
} 
     
.tw{
    background:url(/assets/course14/social-challenge.png) no-repeat -30px 0; 
}  
     
.goo{
    background:url(/assets/course14/social-challenge.png) no-repeat -60px 0; 
    
}

Для чего в коде псевдораспорка, если нет ни одного плавающего элемента?
У параграфа, который вы для верности обернули в div (хотя это и так блочный элемент), как и у заголовка есть отступы по умолчанию. Их нужно переопределить или обнулить, если они не нужны.