Оцените код [27/32], результат 100%

Курсы §15. Сетки
1 
 <!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header-layout">
      <div class="header">Header</div>
      <div class="menu">Menu</div>
      <div class="promo1">Promo 1</div>
      <div class="promo2">Promo 2</div>
    </div>
    <div class="main-layout">
      <div class="left-column">Left</div>
      <div class="main-column">Main</div>
      <div class="right-column">Right</div>
    </div>
    <div class="footer">Footer</div>
  </body>
</html>

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

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

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}
.header-layout {
  background-color: #34495e;
  padding-top: 10px;
  content: "";
  display: table;
  width: 100%;
}
.header {
  background-color: #c0392b;
  margin: 0 50px 10px;
  padding: 5px;
  height: 25px;
}
.menu {
  background-color: #3498db; 
  padding: 5px 55px;
  height: 25px;
}
.promo1, .promo2 {
  background-color:  #c0392b;
  float: left;
  width: 160px;
  padding: 5px;
  margin: 10px 0;
  height: 50px;
}
.promo1 {
  margin-left: 50px;
  margin-right: 10px;
}
.main-layout {
  display: table; 
}
.left-column, .main-column, .right-column {
  background-color: #3498db;
  float: left;
  margin: 10px 0;
  padding: 5px;
  width: 60px;
  height: 100px;
}
.main-column {
  margin: 10px;
  width: 180px;
}
.left-column {
  margin-left: 50px;
}
.footer {
  background-color: #34495e;
  padding: 5px 55px;
  height: 30px;
}
/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/
3

Много ошибок.
Чтобы правильно пройти испытание – должно быть всё понятно в предыдущем задании 26/32.

1 лайк