Lemur
1
Посмотри код, что тут нужно изменить или поменять ?
<html lang="ru">
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="row">
<div class="head tex">
Header
</div>
</div>
<div class="menu ">
<div class="row">
Menu
</div>
</div>
<div class="row">
<div class="column1">
<div class="promo1 tex">
Promo 1
</div>
<div class="promo2 tex">
Promo 2
</div>
</div>
</div>
</div>
<div class="column2">
<div class="row">
<div class="promo-le tex">Left</div>
<div class="promo-ma tex">Main</div>
<div class="promo-ri tex">Right</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="footer">
Footer
</div>
</div>
</div>
</body>
</html>
/*
/* css
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
}
.container{
margin-bottom: 10px;
padding:10px 0px;
background: #34495e;
}
.row {
width: 350px;
margin: 0 auto;
}
.row::after {
display: table;
content: "";
clear: both;
}
.tex{
padding: 5px 5px;
}
.head{
height: 25px;
background: #c0392b;
min-height: 25px;
}
.menu{
padding: 5px 0px 5px 5px;
margin:10px 0px;
background: #3498db;
min-height: 25px;
}
.column1{
margin-bottom: 10px;
background: #c0392b;
}
.promo1{
margin:0px auto;
background: #c0392b;
float:left;
width: 160px;
height: 50px;
}
.promo2{
margin-left: 10px;
background: #c0392b;
float: left;
height: 50px;
width: 160px;
}
.column2{
margin:10px;
background: white;
}
.promo-le{
width:60px;
height: 100px;
margin: 0px 0px;
float:left;
background: #3498db;
}
.promo-ma{
width:180px;
height: 100px;
margin: 0px 10px;
float: left;
background: #3498db;
}
.promo-ri{
width:60px;
height: 100px;
margin: 0px;
float: left;
background: #3498db;
}
.footer{
padding: 0px 5px;
padding-bottom: 10px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/Текст "как есть" (без применения форматирования)