Прошел испытания на 100, сначала сделал чисто все элементы на абсолюте, но потом прочитал на форуме, что .v и .h желательно должны быть relative, поморочился немного и сделал, прошел так же на 100% , только вот если брать и смотреть разницу в картинке , то она как минимум нормальная такая , а при проверке все отлично,
и как вообщем то сам код написан, сносно?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: собери слово «вечность»</title>
<link rel="stylesheet" href="/assets/course10/style1.css">
</head>
<body>
<div class="scene">
<div class="h h1"></div>
<div class="h h2"></div>
<div class="h h3"></div>
<div class="v v1"></div>
<div class="v v2"></div>
<div class="v v3"></div>
<div class="v v4"></div>
<div class="v v5"></div>
<div class="v v6"></div>
<div class="corner-top"></div>
<div class="corner-bottom"></div>
<div class="logo"></div>
</div>
</body>
</html>
CSS
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;
width: 50px;
height: 10px;
}
.h1
{
bottom:-150px;
left:20px;
}
.h2
{
bottom:-130px;
left:26px;
}
.h3 {
bottom:-170px;
left:92px;
width: 40px;
}
/* вертикальные элементы */
.v {
position:relative;
top:104px;
left:50px;
width: 10px;
height: 50px;
}
.v1
{
top:170px;
left:-132px;
}
.v2
{top:170px;
left:-106px;
}
.v3
{
top:170px;
left:-79px;
}
.v4
{
top:170px;
left:-53px;
}
.v5
{
top:170px;
left:-27px;
}
.v6
{
top:170px;
left:-21px;
}
/* уголки */
.corner-top {
position:absolute;
top:170px;
left:150px;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
}
.corner-bottom {
position:absolute;
top:190px;
left:150px;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
}
/* лого */
.logo {
top:80px;
left:87px;
position:absolute;
width: 64px;
height: 64px;
background: url('/assets/course10/logo.png');
}