27/32

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

У меня вот такие 99% вышли.
В чем ошибка?

problem.png599×653 17.7 KB 

<!DOCTYPE html>
<html>
<head>
   <title>Испытание: строим сетку</title>
   <meta charset="utf-8">
</head>
<body>
    <div class="conteiner clearfix">
        <div class="layout-positioner">
            <div class="header">Header</div>
        </div>
    
    <div class="menu">Menu</div>
    
    <div class="layout-positioner">
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
    </div>
    </div>
    
    <div class="content">
        <div class="layout-positioner">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div>
        </div>
    </div>
    <div class="footer">Footer</div>
</body>

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

.layout-positioner {
    margin: auto;
    width: 350px;
}
.conteiner {
    width: 450px;
    background-color: #34495e;
    float: left;
    height: 170px
}
.header {
    width: 345px;
    height: 30px;
    background-color: #c0392b;
    margin-top: 10px;
    padding: 5px 0px 0px 5px
}
.menu {
    background-color: #3498d8;
    float: left;
    width: 395px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 55px;
    padding-top: 5px;
    height: 30px;
}
.promo1 {
    background-color: #c0392b;
    width: 165px;
    float: left;
    margin-right: 10px;
    padding: 5px 0px 0px 5px;
    height: 55px;
}
.promo2 {
    background-color: #c0392b;
    width: 165px;
    float: left;
    padding: 5px 0px 0px 5px;
    height: 55px;
}
.content {
    width: 450px;
    height: 120px;
    float: left;
}
.left {
    background-color: #3498d8;
    float: left;
    margin-right: 10px;
    width: 65px;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;
    height: 105px;
}
.main {
    background-color: #3498d8;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    width: 185px;
    padding: 5px 0px 0px 5px;
    height: 105px;
}
.right {
    background-color: #3498d8;
    width: 65px;
    float: left;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;
    height: 105px;
}
.footer {
    background-color: #34495e;
    float: left;
    width: 395px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 55px;
    padding-top: 5px;
    height: 30px;
}


/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

.layout-positioner {
    margin: auto;
    width: 350px;
}
.conteiner {
    width: 450px;
    background-color: #34495e;
    float: left;
    height: 170px
}
.header {
    width: 345px;
    height: 30px;
    background-color: #c0392b;
    margin-top: 10px;
    padding: 5px 0px 0px 5px
}
.menu {
    background-color: #3498d8;
    float: left;
    width: 395px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 55px;
    padding-top: 5px;
    height: 30px;
}
.promo1 {
    background-color: #c0392b;
    width: 165px;
    float: left;
    margin-right: 10px;
    padding: 5px 0px 0px 5px;
    height: 55px;
}
.promo2 {
    background-color: #c0392b;
    width: 165px;
    float: left;
    padding: 5px 0px 0px 5px;
    height: 55px;
}
.content {
    width: 450px;
    height: 120px;
    float: left;
}
.left {
    background-color: #3498d8;
    float: left;
    margin-right: 10px;
    width: 65px;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;
    height: 105px;
}
.main {
    background-color: #3498d8;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    width: 185px;
    padding: 5px 0px 0px 5px;
    height: 105px;
}
.right {
    background-color: #3498d8;
    width: 65px;
    float: left;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;
    height: 105px;
}
.footer {
    background-color: #34495e;
    float: left;
    width: 395px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 55px;
    padding-top: 5px;
    height: 30px;
}


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

У вас не тот синий цвет. Обратите внимание, что последний символ в подсказке не “8”, а “B”

2 лайка
3

:joy:
Мне нужно больше концентрироваться на мелочах.
Спасибо!

2 лайка