27/32 Оцените пожалуйста

Курсы §15. Сетки
1
Испытание: строим сетку 
<div class="header">
  <div class="layout-positioner">
    <div class="layout-column layuot-column-header">
      Header
    </div>
  </div>
</div>

<div class="menu">
  <div class="layout-positioner">
    <div class="layout-column layuot-column-menu">
      Menu
    </div>
  </div>
</div>

<div class="promo">
  <div class="layout-positioner">
    <div class="layout-column promo-1">
     Promo 1
    </div>
    <div class="layout-column promo-2">
      Promo 2
    </div>
  </div>
</div>

<div class="content">
  <div class="layout-positioner">
    <div class="content-layout sidebar-left layout-column">
      Left
    </div>
    <div class="content-layout main layout-column">
     Main
    </div>
    <div class="content-layout sidebar-right layout-column">
      Right
    </div>
  </div>
</div>

<div class="footer">
  <div class="layout-positioner">
    <div class="layout-column">
    Footer
   </div>
  </div>
</div>

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-left:auto;
margin-right:auto;
}

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

.layout-column {
padding-top:5px;
padding-left:5px;
}

.header {
background-color:#34495e;
padding-top:5px;
}

.layuot-column-header {
background-color: #c0392b;
min-height:30px;
margin-top:5px;
margin-bottom:10px;
}

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

.layuot-column-menu {
background-color: #3498db;
min-height:30px;

}

.promo {
background-color: #34495e;
}

.promo-1 {
background-color: #c0392b;
width:155px;
padding-right:10px;
float:left;
min-height:55px;
margin-bottom:10px;
margin-top:10px;
}

.promo-2 {
background-color: #c0392b;
width:165px;
float:right;
min-height:55px;
margin-bottom:10px;
margin-top:10px;
}

.content-layout {
margin-right:10px;
}

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

.sidebar-left {
background-color: #3498db;
width:65px;
min-height:105px;
float:left;
margin-top:10px;
}

.main {
background-color: #3498db;
width:185px;
min-height:105px;
float:left;
margin-top:10px;
}

.sidebar-right {
background-color: #3498db;
width:65px;
min-height:105px;
float:right;
margin-top:10px;
}

.footer {
background-color:#34495e;
min-height:35px;
margin-top:10px;
}

2

Внешние отступы у колонок promo могли быть прописаны для родительского элемента, тогда не было бы дублирования.
Много классов в разметке блока с тремя колонками. Попробуйте сократить.

1 лайк