100% 20/20 На оценку!

Курсы §11. Позиционирование
1

html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {position:relative;top:120px;
width:50px;
height: 10px;
}
.h1{width:40px;right:-200px;top:170px}
.h2{width:50px;right:-36px;top:130px;}

.h3 {
width: 40px;top:150px;right:70px;
}

/* вертикальные элементы */
.v {position:relative;top:170px;
width: 10px;
height: 50px;
}
.v1{right:122px;}
.v2{right:96px;}
.v3{right:69px;}
.v4{right:43px;}
.v5{right:17px;}
.v6{right:11px;}

/* уголки */
.corner-top {position:relative;right:75px;top:140px;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
}

.corner-bottom {position:relative;left:150px;top:90px;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
}

/* лого */
.logo {position:relative; top:24px;right:-53px;
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
}

2

для элементов всех классов необходимо задать абсолютное позиционирование, чтобы отталкиваться от координат относительного .scene;

для классов v1, v2 итд отталкивайтесь от левой стороны, т.к. по сетке видно, что вертикальные палочки “прижаты” и аккуратно лежат на клетках на своей левой стороне, тогда не нужно будет гадать с пикселями (будут ровные значения 60px, 100px итд);

ширину для горизонтальных задавать не нужно, они уже заданы - избыточный код; отталкиваться лучше от bottom, чем от top, чтоб не мучаться с подбором пикселей;

3

Интересно) Вот мой вариант

html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background-color: white;
}

/* горизонтальные элементы */
.h {
position:absolute;
width: 50px;
height: 10px;
}

.h1,
.h2{
bottom: 60px;
left: 20px;
}

.h1{
margin-left: 60px;
margin-bottom: 20px;
}

.h3 {
bottom: 40px;
right: 20px;;
width: 40px;
}

/* вертикальные элементы */
.v {
position:absolute;
width: 10px;
height: 50px;
bottom:40px;
left: 20px;
}

.v2{
margin-left: 40px;
}

.v3{
margin-left: 80px;
}

.v4{
margin-left: 120px;
}

.v5{
margin-left: 160px;
}

.v6{
margin-left: 180px;
}

/* уголки */
.corner-top {
position: absolute;
background: none;
border: 15px solid white;
border-top-width: 20px;
border-top-color: transparent;
border-bottom-width: 0;
bottom: 70px;
right: 80px;
}

.corner-bottom {
position: absolute;
background: none;
border: 15px solid transparent;
border-top-width: 20px;
border-top-color: white;
border-bottom-width: 0;
bottom: 50px;
right: 80px;
}

/* лого */
.logo {
position: absolute;
width: 64px;
height: 64px;
background-image: url(“logo.png”);
background-repeat: no-repeat;
background-color: transparent;
top: 80px;
left: 87px;
}