Испытание 27/32

Курсы §15. Сетки
1

Мое решение. Не знаю правильно ли, ну как понял.

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


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

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

.raw {
  background-color: #34495e;
  min-height: 170px;
  }
  .header {
    background-color:#c0392b;
    float: left;
    width:350px;
    min-height:35px;
    margin: 10px 50px;
    }
    
  .menu {
    background-color:#3498db;
    clear:both;
    min-height: 35px;
    }
    
  .centr-menu {
    width:350px;
    min-height: inherit;
    margin: auto;
    }
      
  .promo {
    background-color:#c0392b;
    float:left;
    width:170px;
    min-height: 60px;
    margin: 10px;
    margin-left: 50px;
    }
    
  .promo:last-child {
    float:right;
    margin-right: 50px;
    margin-left: 0px;
    }
    
.man {
  min-height: 130px;
  }
  .main .layout-column{
    background-color:#3498db;
    float:left;
    min-height: 110px;
    width: 70px;
    margin: 10px 5px;
    }
  .main .left{
    margin-left: 50px;
    }
  .main .centr{
    width: 190px;
    }
 
.footer {
  background-color: #34495e;
  min-height: 35px;
  }
  .footer .layout-column {
    float: left;
    width: 350px;
    height: 35px;
    margin: 0 50px;
    }

.layout-column{
  padding: 5px;
  box-sizing:border-box;
  }
  
.clearfix::after { 
  content: "";
  display: table;
  clear: both;
  }
2

Вот моё решение (100%):

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

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

.layout-positioner {
  width: 450px;
  margin: 0 auto;
}
.layout-positioner::after {
  content: "";
  display: table;
  clear: both;
}
.head-block {
  padding: 10px 0px;
  background-color: #34495e;
}
.header {
  width: 345px;
  min-height: 30px;
  padding-top: 5px;
  padding-left: 5px;
  margin: 0px auto;
  background-color: #c0392b;  
}
.menu {
  margin: 10px 0;
  padding-top: 5px;
  padding-left: 55px;
  width: 395px;
  min-height: 30px;
  background-color: #3498db;  
}
.promo {
  float: left;
  width: 165px;
  min-height: 55px;
  padding-top: 5px;
  padding-left: 5px;
  margin-left: 50px;
  background-color: #c0392b;  
}
.promo:last-child {
  margin-left: 10px;
}
.column {
  float: left;
  width: 65px;
  min-height: 105px;
  padding-top: 5px;
  padding-left: 5px;
  background-color: #3498db;  
}
.column:first-child {
  margin: 10px 5px 10px 50px;
}
.column:nth-child(2) {
  margin: 10px 5px;
  width: 185px;
}
.column:last-child {
  margin: 10px 5px;
}
.footer{
  clear: both;
  padding: 5px 55px;
  height: 25px;
  background-color: #34495e;
}
1 лайк