[27/32]100%.Пожалуйста, гляньте код, буду рад замечаниям и советам)

Курсы §15. Сетки
1 
</head>
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="header-columb">
            <p>Header</p>
            </div>
        </div>
    </div>    
    <div class="menu">
        <div class="layout-positioner">
            <p>Menu</p>
        </div>
        
    </div>
    <div class="promo">
        <div class="layout-positioner">
            <div class="promo-columb">
                <p>Promo 1</p>
            </div>
            <div class="promo-columb">
                <p>Promo 2</p>
            </div>
        </div>
    </div>    
    <div class="osnova">
        <div class="layout-positioner">
           <div class="osnova-columb">
            <p>Left</p>
            </div>
        <div class="osnova-columb">
            <p>Main</p>
            </div> 
         <div class="osnova-columb">
            <p>Right</p>
            </div> 
        </div>
    </div>
    <div class="footer">
        <div class="layout-positioner">
            <p>Footer</p>
        </div>
    </div>    
</body>
2

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.header{
background-color: #34495e;
color: white;

}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.header-columb {
background-color: #c0392b;
min-height: 35px;
float: left;
width: 350px;
margin: 10px 0px;
}
.menu {
background-color: #3498DB;
min-height: 35px;
}
.promo {
background-color: #34495e;
}
.promo-columb {
float: left;
background-color: #c0392b;
width: 170px;
min-height: 60px;
margin: 10px 0px;
}
.promo-columb:last-child{
margin-left: 10px;
}
.osnova-columb {
float: left;
background-color: #3498DB;
width: 70px;
min-height: 110px;
margin: 10px 0px 10px 0px;
}
.osnova-columb:nth-child(2) {
width: 190px;
margin-right: 10px;
margin-left: 10px;
}
.footer {
background-color: #34495e;
min-height: 35px;
}
p{
margin: 0;
padding: 5px;
}
.header p{
margin: 0;
padding: 5px;
}

3

В целом неплохо.
Уделяйте больше внимания названиям классов. Никакого транслита быть не должно. Так же хотелось бы обратить ваше внимание на слово “columb”, которое достаточно часто встречается в вашем коде, но не имеет необходимого смыслового содержания. Возможно, вы имели в виду “column”.
Последние два правила совершенно одинаковы. Непонятно, зачем второе.

1 лайк
4

Последнее правило это после исправления ошибки забыл удалить.
Буду совершенствоваться), спасибо за замечания)