известные и установленные проводники в круге. своего добавить очень даже можно, |
неписанные люди
Сообщений 1 страница 5 из 5
Поделиться12021-02-01 09:27:00
Поделиться22021-02-01 09:27:14
[html]
<style>
.box
{
position: relative;
margin: auto;
height: 355px;
width: 500px;
background: url('https://i.imgur.com/Pfg4PCm.png');
z-index: 1;}
.title {font-size: 16px;
border-bottom: 2px dashed #ebebeb;
font-family: pangolin;
color: #ebebeb;
position: absolute;
margin: 50px 40px;
z-index: 2;}
.preferences {
font-size: 10px;
width: 120px;
color: #ebebeb;
position: absolute;
margin: 80px 40px;
}
.h2_block
{-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
display: block;
height: 250px;
width: 30px;
background: #171717;
margin: 50px 270px 0px 270px;
position: absolute;
z-index:5;
}
.h2 {
font-size: 25px;
height: 250px;
text-align: center;
writing-mode:tb-rl;
color: #ebebeb;}
.h1_block
{-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
overflow: auto;
margin: 98px 180px;
width: 289px;
height: 100px;
background: #efefef;
opacity: 0;
position: absolute;
display: block!important;
z-index: 3;
clip-path: polygon(0% 0%, -100% 50%, 0% 100%, -70% 100%, 0% 100%, 0% 0%);
}
.h1{font-size:10px;
padding:40px 10px 10px 10px;}
.box:hover .h2_block
{
transform: rotate(-80deg) translate(80px,50px);
}
.box:hover .h1_block {
clip-path: polygon(0 0, 15% 0, 100% 25%, 100% 100%, 0 100%, 0% 50%);
height: 150px;
opacity:0.7!important;
}
</style>
<div class="box"><div class="title">ДОРОГА РЕК</div>
<div class="preferences"><p><b>любимый подарок:</b> хризантема;</p>
<p><b>любит:</b> овощи (любые), листья салата, чай;</p>
<p><b>не любит:</b> кофе, животная продукция, жаренная еда;</p>
<p><b>направление:</b> коммуна, всегда коммуна;</p></div>
<div class="h2_block"><div class="h2">ОВЕЧКА ММЕ</div></div>
<div class="h1_block"><div class="h1">овечка мме всегда говорит ласково и нежно, как мимолётный весенний ветерок. на своей гондоле она переправляет пассажиров через реку — осторожно: глубоко! — предпочитая выбирать людей с инвалидностью, пожилых и вообще тех, кто испытывают трудности с передвижением. овечка всегда доставляет только в коммуну.</div></div>
</div></div>
[/html]
[icon]https://i.imgur.com/pbiDT0G.png[/icon][nick]Мме[/nick][status]полезай в гондолу, синдзи[/status][path]ДОРОГА РЕК[/path]
Поделиться32021-02-01 09:27:25
[html]
<style>
.box
{position: relative;
margin: auto;
height: 355px;
width: 500px;
background: url('https://i.imgur.com/dGu6BXV.png');
z-index: 1;}
.title {font-size: 16px;
border-bottom: 2px dashed #ebebeb;
font-family: pangolin;
color: #ebebeb;
position: absolute;
margin: 50px 40px;
z-index: 2;}
.preferences {
font-size: 10px;
width: 120px;
color: #ebebeb;
position: absolute;
margin: 80px 40px;
}
.h2_block
{-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
display: block;
height: 250px;
width: 30px;
background: #171717;
margin: 50px 270px 0px 270px;
position: absolute;
z-index:5;
}
.h2 {
font-size: 25px;
height: 250px;
text-align: center;
writing-mode:tb-rl;
color: #ebebeb;}
.h1_block
{-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
overflow: auto;
margin: 98px 180px;
width: 289px;
height: 100px;
background: #efefef;
opacity: 0;
position: absolute;
display: block!important;
z-index: 3;
clip-path: polygon(0% 0%, -100% 50%, 0% 100%, -70% 100%, 0% 100%, 0% 0%);
}
.h1{font-size:10px;
padding:40px 10px 10px 10px;}
.box:hover .h2_block
{
transform: rotate(-80deg) translate(80px,50px);
}
.box:hover .h1_block {
clip-path: polygon(0 0, 15% 0, 100% 25%, 100% 100%, 0 100%, 0% 50%);
height: 150px;
opacity:0.7!important;
}
</style>
<div class="box"></div>
[/html]
[icon]https://i.imgur.com/DhZ4Ive.png[/icon][nick]Сорока[/nick][status]туда вам и дорога, петушары[/status][path]НЕПРАВИЛЬНАЯ ДОРОГА[/path]
Поделиться42021-02-01 09:27:34
[html]
<style>
.box:hover {
animation: shake 0.6s}
.hand {margin: 500px 0px 0px 210px;
z-index: 5;
position: absolute;}
.box:hover .hand {margin: 200px 0px 0px 210px;
-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
}
.box
{position: relative;
margin: auto;
height: 355px;
width: 500px;
background: url('https://i.imgur.com/zQMJ25b.gif');
z-index: 1;}
.title {font-size: 16px;
border-bottom: 2px dashed #ebebeb;
font-family: pangolin;
color: #ebebeb;
position: absolute;
margin: 50px 40px;
z-index: 2;}
.preferences {
font-size: 10px;
width: 120px;
color: #ebebeb;
position: absolute;
margin: 80px 40px;
}
.h2_block
{display: block;
height: 250px;
width: 30px;
background: #171717;
margin: 50px 270px 0px 270px;
position: absolute;
z-index:5;
}
.h2 {
font-size: 25px;
height: 250px;
text-align: center;
writing-mode:tb-rl;
color: #ebebeb;}
.h1_block
{overflow: auto;
margin: 98px 180px;
width: 289px;
height: 100px;
background: #efefef;
opacity: 0;
position: absolute;
display: block!important;
z-index: 3;
clip-path: polygon(0% 0%, -100% 50%, 0% 100%, -70% 100%, 0% 100%, 0% 0%);
}
.h1{font-size:10px;
padding:40px 10px 10px 10px;}
.box:hover .h2_block
{
animation: ease-out 1s owie 1 forwards;
}
.box:hover .h1_block {
clip-path: polygon(0 0, 15% 0, 100% 25%, 100% 100%, 0 100%, 0% 50%);
height: 150px;
opacity:0.7!important;
transition:1s;
transform: rotate(10deg);
}
.box:hover .preferences
{transform: rotate(-10deg);
transition: linear 0.5s;}.box:hover .title
{transform: rotate(10deg);
transition: linear 0.5s;}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes owie {
0% {}
15% {transform: rotate(-80deg) translate(80px,50px);}
25% {transform: rotate(-100deg)translate(80px,50px);}
30% { transform: rotate(-80deg) translate(80px,50px);}
45% {transform: rotate(0deg)translate(70px,70px);}
50% {transform: rotate(0deg)translate(70px,70px);}
60% {transform: rotate(0deg)translate(70px,80px);}
96% {transform: rotate(75deg)translate(140px,-145px);}
100%{transform: rotate(90deg)translate(165px,-175px);}
}
</style>
<div class="box"><div class="title">???????? ????</div>
<div class="preferences"><p><b>любимый подарок:</b> ????</p>
<p><b>любит:</b> ????</p>
<p><b>не любит:</b> ????</p>
<p><b>направление:</b> ????</p></div>
<div class="h2_block"><div class="h2">???????</div></div>
<div class="h1_block"><div class="h1">ты сюда никогда не попадёшь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь забудь;</div></div>
<div class="hand"><img src="https://i.imgur.com/UKU4i82.png"></div>
</div></div>
[/html]
[icon]https://i.imgur.com/5eN7RyY.png[/icon][nick]????[/nick][status]необъяснимо но факт[/status][path]???????? ????[/path]
Поделиться52021-02-09 19:18:42
[html]
<style>
.box
{
position: relative;
margin: auto;
height: 355px;
width: 500px;
background: url('https://i.imgur.com/SuaQcRw.png');
z-index: 1;}
.title {font-size: 16px;
border-bottom: 2px dashed #ebebeb;
font-family: pangolin;
color: #ebebeb;
position: absolute;
margin: 50px 40px;
z-index: 2;}
.preferences {
font-size: 10px;
width: 120px;
color: #ebebeb;
position: absolute;
margin: 80px 40px;
}
.h2_block
{-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
display: block;
height: 250px;
width: 30px;
background: #171717;
margin: 50px 270px 0px 270px;
position: absolute;
z-index:5;
}
.h2 {
font-size: 25px;
height: 250px;
text-align: center;
writing-mode:tb-rl;
color: #ebebeb;}
.h1_block
{-webkit-transition: all ease-in-out 1s;
-o-transition.: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
overflow: auto;
margin: 98px 180px;
width: 289px;
height: 100px;
background: #efefef;
opacity: 0;
position: absolute;
display: block!important;
z-index: 3;
clip-path: polygon(0% 0%, -100% 50%, 0% 100%, -70% 100%, 0% 100%, 0% 0%);
}
.h1{font-size:10px;
padding:40px 10px 10px 10px;}
.box:hover .h2_block
{
transform: rotate(-80deg) translate(80px,50px);
}
.box:hover .h1_block {
clip-path: polygon(0 0, 15% 0, 100% 25%, 100% 100%, 0 100%, 0% 50%);
height: 150px;
opacity:0.7!important;
}
</style>
<div class="box"><div class="title">ДОРОГА КАМНЕЙ</div>
<div class="preferences"><p><b>любимый подарок:</b> грибной суп;</p>
<p><b>любит:</b> мясо, грибы, чеснок, охотиться;</p>
<p><b>не любит:</b> салаты, ОЗХИИП;</p>
<p><b>направление:</b> исключительно кланы;</p></div>
<div class="h2_block"><div class="h2">ЧУДИЛА</div></div>
<div class="h1_block"><div class="h1">у чудилы такое странное имя, потому что его имя — говорящее; чудила любит есть сырое мясо (серьёзно), воровать яйца перепёлок (тоже сырыми ест, кстати). у чудилы на плечах какая-то чудная накидка с вороньими (?) перьями и на лице свежая небритая глядь (щекочется). чудила — охотник и в свободное время от прогулок проводит его вместе с кланами. говорят, он доставляет только таких же чудаковатых и диких, как он сам, но это не точно/</div></div>
</div></div>
[/html]