Добрый день. Прошел на 100%, но меня терзают смутные сомнения по поводу загроможденности кода. Прошу знающих просмотреть и дать советы.
<body>
<div class="header">
<div class="layout-positioner">
<div class="header-top layout-column">Header</div>
</div>
<div class="header-menu">
<div class="layout-positioner">
<div class="menu layout-column">Menu</div>
</div>
</div>
<div class="layout-positioner header-promo">
<div class="layout-column header-promo1">Promo 1</div>
<div class="layout-column header-promo2">Promo 2</div>
</div>
</div>
<div class="features">
<div class="layout-positioner">
<div class="layout-column column-left">Left</div>
<div class="layout-column column-main">Main</div>
<div class="layout-column column-right">Right</div>
</div>
</div>
<div class="footer">
<div class="layout-positioner">
<div class="footer-top layout-column">Footer</div>
</div>
</div>
</body>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
}
.layout-column {
padding: 5px 0 0 5px;
box-sizing: border-box;
}
.header {
background: #34495e;
padding: 10px 0 10px 0;
}
.header-top {
height: 35px;
width: 350px;
background: #c0392b;
}
.header-menu {
height: 35px;
width: 450px;
background: #3498DB;
margin: 10px 0px 10px 0px;
}
.menu {
width: 350px;
}
.header-promo1,
.header-promo2 {
float: left;
height: 60px;
width: 170px;
background: #c0392b;
}
.header-promo1 {
margin-right: 10px;
}
.features {
background: white;
margin: 10px 0px 10px 0px;
}
.features .layout-column {
float: left;
height: 110px;
background: #3498DB;
margin-right: 10px;
}
.column-left,
.column-right {
width: 70px;
}
.column-main {
width: 190px;
}
.features .layout-column:last-child {
margin: 0px;
}
.footer {
height: 35px;
background: #34495e;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.layout-positioner::after {
content: "";
display: block;
clear: both;
}