<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Блочная верстка</title>
</head>
<body>
<div class="wrapper">
<div id="header">
<div class="logo"><a href="index.html">Ikurs</a></div>
</div>
<div id="nav">
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
<div id="content">
<div class="sqr"></div>
</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</div>
</body>
</html>
style.css
/*Универсальный селектор 0 б*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Calibri,sans-serif;
background:pink url(images/symphony.png) repeat;
background-position:100% 50%;
}
/*Селекторы тегов (элементов) 2 б*/
.wrapper{
max-width:960px;
margin:0 auto;
}
#header,#footer,#nav{
width:100%;
float:left;
background: rgba(0, 0, 0, 0.70);
padding:10px 20px;
border-bottom:#fff solid 2px;
}
#content{
width:calc(100% - 300px);
float:left;
background:#eee url(images/webmaster.jpg) no-repeat;
background-size:cover;
background-position: 50% 50%;
background-attachment:fixed;
padding:10px 20px;
height:700px;
}
#sidebar{
width:300px;
float:left;
background:#ddd;
padding:10px 20px;
}
/*Селекторы классов 10 б*/
.logo{
text-align:center;
}
.logo a{
color:#fff;
font-size:30px;
text-decoration:none;
}
#nav li{
float:left;
margin: 10px 0;
}
#nav a{
color:#000;
padding:10px;
text-decoration:none;
background:#fff;
border:2px transparent solid;
}
#nav a:hover{
/*background:#fff;*/
border:2px #333 solid;
}
#content{
position:relative;
}
.sqr{
width:100px;
height:100px;
background:red;
position:absolute;
}
/*Селекторы идентификаторов 100 б*/