Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html,
- body {
- margin: 0;
- padding: 0;
- }
- body {
- width: 450px;
- height: 335px;
- font-family: "Arial", sans-serif;
- font-size: 10px;
- color: white;
- }
- /*
- Используемые цвета:
- #34495e – мокрый асфальт
- #c0392b – красный
- #3498DB – синий
- */
- * {
- box-sizing: border-box;
- }
- .wrapper {
- background-color: #34495e;
- width: 450px;
- height: 160px;
- }
- .header {
- background-color: #c0392b;
- padding: 5px;
- float: left;
- width: 325px;
- height: 40px;
- margin-top: 10px;
- margin-left: 60px;
- }
- .menu {
- background-color: #3498DB;
- height: 35px;
- width: 450px;
- float: left;
- margin-top: 10px;
- padding-left: 65px;
- padding-top: 5px;
- }
- .promo1 {
- float:left;
- width: 150px;
- height: 50px;
- background-color: #c0392b;
- margin-top: 25px;
- margin-left: px;
- margin-right: 0 auto;
- padding: 5px;
- }
- .promo2 {
- float: left;
- width: 150px;
- height: 50px;
- background-color: #c0392b;
- margin-top: 25px;
- margin-left: 5px;
- padding: 5px;
- }
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <title>Испытание: строим сетку</title>
- <meta charset="utf-8">
- </head>
- <body>
- <div class="wrapper">
- <div class="header">Header</div>
- <div class="menu">Menu<div>
- <div class="promo1">Promo 1</div>
- <div class="promo2 clearfix">Promo 2</div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement