27/32 Просьба оценить код.


#1

Добрый вечер! Выполнил задание на 100%, особо сложностей не возникло, разве что интересно - насколько грамотно написан код, есть ли серьёзные недочёты или какие-нибудь замечания?

html:

<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header-block">
      <div class="layout-positioner">
        <div class="header">
          Header
        </div>
      </div>
    </div>
    <div class="menu-block">
      <div class="layout-positioner">
        <div class="menu">
          Menu
        </div>
      </div>
    <div>
    <div class="promo-block">
      <div class="layout-positioner">
        <div class="promo">
          Promo 1
        </div>
        <div class="promo">
          Promo 2
        </div>
      </div>
    </div>
    <div class="content-block">
      <div class="layout-positioner">
        <div class="content-box">
          Left
        </div>
        <div class="content-box">
          Main
        </div>
        <div class="content-box">
          Right
        </div>
      </div>
    </div>
    <div class="footer-block">
      <div class="layout-positioner">
        <div class="footer">
          Footer
        </div>
      </div>
    </div>
  </body>
</html>

css:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/

.layout-positioner {
  width: 350px;
  margin: 0 auto;
}

.layout-positioner::after {
  content: "";
  display: table;
  clear: both;
}

.header-block,
.promo-block,
.footer-block  {
  background-color: #34495e;
}

.header-block,
.promo-block {
  padding: 10px 0; 
}

.header {
  background-color: #c0392b;
  min-height: 25px;
  padding: 5px;
}

.menu-block {
  background-color: #3498db;
}

.menu {
  min-height: 25px;
  padding: 5px;
}

.promo {
  background-color: #c0392b;
  padding: 5px;
  float: left;
  width: 160px;
  min-height: 50px;
  margin-right: 10px;
}

.promo:last-child {
  margin-right: 0; 
}

.content-block {
 background-color: white;
 padding: 10px 0;
}

.content-box {
  background-color: #3498db;
  padding: 5px;
  float: left;
  width: 60px;
  min-height: 100px;
  margin-right: 10px;
}

.content-box:nth-child(2) {
  width: 180px; 
}

.content-box:last-child {
  margin-right: 0; 
}

.footer {
 min-height: 25px;
 padding: 5px;
}

#2

Закройте блок.


#3

охх, да, упустил момент, спасибо, но тем не менее, вопрос остаётся открытым, как качество кода? приемлемо или стоит поработать?