Испытание: собери слово «вечность»

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

Всем привет! Сделала на 100%. Но мне кажется logo по середине можно разместить и по другому. Я подогнала с помощью left и top. Для всех div у меня position: absolute;
Может кто по другому сделал. Подскажите.

вот мой код:

Сводка

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;
position: absolute;
background-color: white;
}

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

.h2 {
bottom: 80px;
left:80px
}

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

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

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

.v1 {
bottom: 40px;
left: 20px;
}
.v2 {
bottom: 40px;
left: 60px;
}

.v3 {
bottom: 40px;
left: 100px;
}

.v4 {
bottom: 40px;
left: 140px;
}

.v5 {
bottom: 40px;
right: 70px;
}

.v6 {
bottom: 40px;
right: 50px;
}

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

}

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

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

1 лайк
2

100% на relative

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 {
  width: 50px;
  height: 10px;
  
}

.h1 {
 position: relative;
 top: 130px;
 left: 80px; 
}

.h2 {
 position: relative;
 top: 150px;
 left: -34px;
}

.h3 {
  width: 40px;
  position: relative;
  top: 170px;
 left: 92px;
}


/* вертикальные элементы */
.v {
  width: 10px;
  height: 50px;
  position: relative;
  top: 170px;
  left: -132px;
}

.v2 {
  position: relative;
  left: -106px;
  
} 

.v3 {
  position: relative;
  left: -79px;
  
} 

.v4 {
  position: relative;
  left: -53px;
  
} 

.v5 {
  position: relative;
  left: -27px;
  
} 

.v6 {
  position: relative;
  left: -21px;
  
} 

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

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

/* лого */
.logo {
  width: 64px;
  height: 64px;
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-color: transparent;
  position: relative;
  top: 24px;
  left: 19px;
}
3

100% на абсолюте)

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.h1 {
position: absolute;
top: 190px;
left: 20px;
width: 50px;
height: 10px;
}

.h.h2 {
position: absolute;
top: 170px;
left: 80px;
width: 50px;
height: 10px;
}

.h.h3 {
position: absolute;
top: 210px;
left: 200px;
width: 40px;
height: 10px;
}

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

.v.v2 {
top: 170px;
left: 60px;
position: absolute;
width: 10px;
height: 50px;
}

.v.v3 {
top: 170px;
left: 100px;
position: absolute;
width: 10px;
height: 50px;
}

.v.v4 {
top: 170px;
left: 140px;
position: absolute;
width: 10px;
height: 50px;
}

.v.v5 {
top: 170px;
left: 180px;
position: absolute;
width: 10px;
height: 50px;
}

.v.v6 {
top: 170px;
left: 200px;
position: absolute;
width: 10px;
height: 50px;
}

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

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

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

4

100% на абсолюте

Спойлер

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 {
bottom: 60px;
left: 20px;
}

.h2 {
bottom: 80px;
left: 80px;
}

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

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

.v1 {
left:20px;
}

.v2 {
left: 60px;
}

.v3 {
left: 100px;
}

.v4 {
left: 140px;
}

.v5 {
left: 180px;
}

.v6 {
left: 200px;
}

.v1 {

}

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

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

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

5

Я сделала так. 100%

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;
right: 130px;
bottom: 80px;
width: 50px;
height: 10px;
}

.h2 {
position: absolute;
right: 200px;
bottom: 60px;
width: 40px;
height: 10px;
}

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

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

.v2 {
position: absolute;
right: 70px;
bottom: 40px;
width: 10px;
height: 50px;
}

.v3 {
position: absolute;
right: 110px;
bottom: 40px;
width: 10px;
height: 50px;
}

.v4 {
position: absolute;
left: 60px;
bottom: 40px;
width: 10px;
height: 50px;
}

.v5 {
position: absolute;
left: 100px;
bottom: 40px;
width: 10px;
height: 50px;
}

.v6 {
position: absolute;
left: 20px;
bottom: 40px;
width: 10px;
height: 50px;
}

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

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

/* лого */
.logo {
position: absolute;
right: 109px;
bottom: 116px;
width: 64px;
height: 64px;
background-image: url(“logo.png”);
background-repeat: no-repeat;
background-color: transparent;
}

6

100% + оптимизация CSS

Посмотреть код 
.scene div{position:absolute}
.h3,.v1,.v2,.v3,.v4,.v5,.v6{bottom:40px}
.corner-top,.corner-bottom{right:80px}
.h1,.v1{left:20px}
.logo{top:80px;left:87px}
.h1{bottom:60px}
.h2{bottom:80px;left:80px}
.h3{right:20px}
.v2{left:60px}
.v3{left:100px}
.v4{right:110px}
.v5{right:70px}
.v6{right:50px}
.corner-top{bottom:70px}
.corner-bottom{bottom:50px}
7

Сделал таким образом, вроде тоже на 100% зашло
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 {
width: 50px;
height: 10px;
}
.h1{
position:relative;
bottom:-150px;
left:20px;
}
.h2 {
position:relative;
bottom:-130px;
left:26px;
}
.h3 {
position:relative;
bottom:-170px;
left:92px;
width:40px;
}
.v {
width: 10px;
height: 50px;
}
.v1 {
position:relative;
bottom:-170px;
left:-132px;
}
.v2{
position:relative;
bottom:-170px;
right:106px;
}
.v3{
position:relative;
bottom:-170px;
right:79px;
}
.v4{
position:relative;
bottom:-170px;
right:53px;
}
.v5{
position:relative;
bottom:-170px;
left:-27px;
}
.v6{
position:relative;
bottom:-170px;
left:-21px;
}
.corner-top {
position:relative;
bottom:-70px;
right:-150px;
background: none;
border: 15px solid white;
border-top-width: 20px;
border-top-color: transparent;
border-bottom-width: 0;
}
.corner-bottom {
position:relative;
bottom:-90px;
right:-116px;
background: none;
border: 15px solid transparent;
border-top-width: 20px;
border-top-color: white;
border-bottom-width: 0;
}
.logo {
width: 64px;
height: 64px;
position:relative;
bottom:-24px;
right:-19px;
background-image: url(“logo.png”);
background-repeat: no-repeat;
background-color: transparent;
}

8

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

}
.h2 {
width: 50px;
height: 10px;
position: absolute;
left: 80px;
bottom: 80px;
}

.h3 {
width: 40px;
position: absolute;
left: 20px;
bottom: 60px;
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
margin: 10px;
position: relative;
bottom: -160px;

}
.v1 {
left: 10px;
}
.v2 {
left: 16px;
}
.v3 {
left: 22px;
}
.v4 {
left: 28px;
}
.v5 {
left: 34px;
}
.v6 {
left: 21px;
}
/* уголки */
.corner-top {
background: none;
border: 15px solid white;
border-top-width: 20px;
border-top-color: transparent;
border-bottom-width: 0;
position: relative;
bottom: -120px;
right: 53px;
}

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

/* лого */
.logo {
width: 64px;
height: 64px;
background-image: url(“logo.png”);
background-repeat: no-repeat;
background-color: transparent;
position: absolute;
right: 109px;
bottom: 116px;
}

9

Благодаря этому испытанию я отлично поняла как использовать position: absolute, и так и не поняла, как - position: relative.