Теория
Теория

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

В этом испытании задача очень простая:

Нужно построить схематичную сетку макета, как в образце. Вы можете писать любой HTML и любой CSS, без каких-либо ограничений.

Единственная тонкость — учитывайте общую ширину макета, которая задана в body. Это сделано, чтобы упростить проверку. И не забывайте пользоваться инструментами для сравнения результата и образца.

Как обычно, все размеры и отступы кратны 5, а используемые цвета перечислены в комментарии в CSS.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

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

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

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

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

.container {
  width: 350px;
  margin: 0 auto;
}

.header {
  background: #34495e;
  padding: 10px;
}

.header .container {
  height: 25px;
  background: #c0392b;
  padding: 5px;
  width: 340px;
}

.menu {
  background: #3498db;
}

.menu .container {
  width: 340px;
  height: 25px;
  padding: 5px;
}

.promo {
  margin-bottom: 10px;
  background: #34495e;
  padding: 10px;
}

.promo .promo-1 {
  float: left;
  width: 160px;
  padding: 5px;
  height: 50px;
  background: #c0392b;
}

.promo .promo-2 {
  float: right;
  height: 50px;
  width: 160px;
  padding: 5px;
  background: #c0392b;
}

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

.right {
  float: right;
  width: 60px;
  padding: 5px;
  height: 100px;
  background: #3498db;
  margin-bottom: 5px;
}

.main {
  width: 180px;
  float: left;
  height: 100px;
  background: #3498db;
  margin-bottom: 5px;
  padding: 5px;
}

.clear {
  clear: both;
}

.footer {
  background: #34495e;
}

.footer .container {
  height: 25px;
  padding: 5px;
  width: 340px;
}

Минимальный вид табов

index.html

HTML

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

Притормози, дружище