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

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

Недавно прошел курс HTML5 и спустя много времени вернулся к декоративным элементам и вообще к HTML/CSS. Прошел испытание на 100%, но возникает ряд вопросов. Я использую(пытаюсь) теги HTML5 и меня смущает что в итоге у меня main заключает в себя header , и отсутствует footer , так как полезного применения я не нашел, если разделить main header , точнее если хедер выше , то там возникают не понятные отступы и фон надо задавать каждому отдельно , что я считаю не хорошо. И вопросы по поводу применения article здесь, насколько это уместно? Ну и про CSS , как он вообще , сильно ли плох?

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
    <main>
        <header class="page-header">Курс &laquo;Фоны&raquo;</header>
      <article class="info">
        Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
      </article>
    
          <div class=" image first">
          </div>
         <div class=" image second">
          </div>
            <div class=" image third">
          </div>
       
  </main>
    </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;
}

   
main {
    padding:20px;
    background-color:#1abc9c;
    color:white;
    width:200px;
    height:195px;
        }
article.info {
    padding-top:20px;
    padding-bottom:25px;
            }
        
header.page-header {
    font-size:20px;
            }
.image {
    background:#16a085;
    display:inline-block;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-image: url("/assets/course14/social-challenge.png");
    background-color: #16a085;
    margin-right:5px;
                }
                
.image.first {
       background-position: 0 0;
                    }
.image.second {
       background-position: -30px 0;
                    }
.image.third {
       background-position: -60px 0;
                    }
2

Задание включает часть разметки страницы, поэтому футера нет. Разметка могла начинаться с article, внутри заголовок, параграф и секция со ссылками.
Семантические теги - это только обертки, замена обычным div-ам. Внутри них всё равно нужно оборачивать текст отдельно.

3

Чтобы не плодить темы спрошу здесь. Из спортивного интереса прошел это задание на 100% не через div, а через ul. Кратность размеров не совпадает с условием задания, но все же имеет ли право на существование такой вариант или нет?

4

Понял что футер тут и так не нужен, но не понял остального.Вы имеете ввиду что вместо тега main , можно было все обернуть в article , с секцией h1,p и несколькими a ? Если да, то понял, в скором времени исправлю.

1 лайк
5

Покажите код.

6 
Сделал как вы сказали, но тут незадача с размерами, никак не могу настроить нужный масштаб, выходит 91%, в чем проблема, по моему я погряз в padding-гах.

<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
    <article class="main">
        <h1>Курс &laquo;Фоны&raquo;</h1>
      <p class="info">
        Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
      </p>
    
          <a class=" image first">
          </a>
         <a class=" image second">
          </a>
            <a class=" image third">
          </a>
       
  </article>
    </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;
}

   
.main {
    padding:5px 20px 30px 20px;
    background-color:#1abc9c;
    color:white;
    width:200px;
    height:200px;

        }
p.info {
     
    
    padding:5px 0px 10px 0px;
            }
        
h1 {
    font-size:20px;
    font-weight:normal;
    
    
            }
.image {
    background:#16a085;
    display:inline-block;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-image: url("/assets/course14/social-challenge.png");
    background-color: #16a085;
    margin-right:5px;
                }
                
.image.first {
       background-position: 0 0;
                    }
.image.second {
       background-position: -30px 0;
                    }
.image.third {
       background-position: -60px 0;
                    }
7

Помните о внешних отступах по умолчанию у заголовка и параграфа. Их нужно обнулить и выставить свои.

8

Спасибо)
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;
}

   
.main {
    padding:5px 20px 30px 20px;
    background-color:#1abc9c;
    color:white;
    width:200px;
    height:200px;

        }
p.info {
     
      margin:auto;
    padding:20px 0px 25px 0px;
            }
        
h1 {
    margin:auto;
    font-size:20px;
    font-weight:normal;
    padding-top:15px;
    
            }
.image {
    background:#16a085;
    display:inline-block;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-image: url("/assets/course14/social-challenge.png");
    background-color: #16a085;
    margin-right:5px;
                }
                
.image.first {
       background-position: 0 0;
                    }
.image.second {
       background-position: -30px 0;
                    }
.image.third {
       background-position: -60px 0;
                    }

100%

9

Не задавайте фиксированную высоту блоку .main. И добавьте ссылкам атрибут href.

1 лайк