This system is sucks, guys!

Поделиться12018-05-03 00:07:08

Автор: Отвёртка
meow
Уважение: +26
Сообщений: 16
Зарегистрирован: 2018-04-10
Последний визит:
2021-12-02 00:26:27
Провел на форуме:
4 дня 7 часов
Информация:
Досье
Раса: человек
Возраст: 17 лет
Род деятельности: инженер, анархистка и просто заноза в заднице
Ссылки: Анкета | Хронология
Юниты:
000 юнитов
приобретения

Код:

<!--HTML-->
<div class="htmldemo">
<style>
#dv::-webkit-scrollbar { width: 5px!important; } 
#dv::-webkit-scrollbar-track { background-color: #780e00; border-radius: 10px; } 
#dv::-webkit-scrollbar-thumb { background-color: #0e1417; border-radius: 10px; }

#character {
width: 680px; 
height: 425px; 
position: relative; 
overflow: hidden;
}

#character .left { 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
position: absolute; 
left: 0px; 
bottom: 0px; 
width: 340px; 
height: 425px; 
}

#character:hover .left { 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
left: -345px;
}

#character .right {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
position: absolute; 
right: 340px; 
bottom: 0px; 
width: 340px; 
height: 425px;
}

#character:hover .right { 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
right: 0px;
}

#content {
width: 680px;
height: 425px;
padding: 7px 7px 7px 7px;
border-radius: 20px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
color: #111111; 
font-family: arial;
font-size: 11px;
text-align: center;
letter-spacing: 1px; 
line-height: 100%; 
opacity: 0;
}

.character { 
width: 300px; 
opacity: 0; 
-webkit-transform: scale(0) rotate(0deg); 
-moz-transform: scale(0) rotate(0deg); 
-ms-transform: scale(0) rotate(0deg); 
-o-transform: scale(0) rotate(0deg); 
transform: scale(0) rotate(0deg); 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
}

#character:hover #content {
opacity: 1;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
}


#content:hover .character { 
opacity: 1; 
-webkit-transform: scale(1) rotate(360deg); 
-moz-transform: scale(1) rotate(360deg); 
-ms-transform: scale(1) rotate(360deg); 
-o-transform: scale(1) rotate(360deg); 
transform: scale(1) rotate(360deg);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
}

#content:hover .info { 
-webkit-transform: scale(1) rotate(0deg); 
-moz-transform: scale(1) rotate(0deg); 
-ms-transform: scale(1) rotate(0deg); 
-o-transform: scale(1) rotate(0deg); 
transform: scale(1) rotate(0deg); 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease; 
}

.info1 { 
color: #bfbfbf; 
font-family: 'Snowstorm';
font-size: 16px;
font-weight: 600;
}

.info2 { 
color: #808080; 
font-family: 'palatino linotype';
font-size: 12px;
font-style: italic;
font-weight: 600;
}

.info2_1 { 
color: #000000; 
font-family: 'palatino linotype';
font-size: 18px;
font-style: italic;
font-weight: 600;
}

.info3 { 
color: #bfbfbf; 
font-family: 'comic sans ms';
font-size: 12px;
font-weight: 600;
}

.info4 { 
color: #bfbfbf; 
font-family: 'courier new';
font-size: 18px;
}

.info5 { 
font-family: 'trebuchet ms';
font-size: 12px;
}

.info5_orley { 
color: #bfbfbf;
font-family: 'trebuchet ms';
font-size: 10px;
}

.block_for_orley {
padding: 2px;
background: #611d1d;
width: 300px;
opacity: 0.4;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}
</style>
<style>
.info1 { 
color: #bfbfbf; 
font-family: 'palatino linotype';
font-size: 16px;
font-weight: 600;
}

.info2 { 
color: #808080; 
font-family: 'palatino linotype';
font-size: 12px;
font-style: italic;
font-weight: 600;
}

.info2_1 { 
color: #000000; 
font-family: 'palatino linotype';
font-size: 12px;
font-style: italic;
font-weight: 600;
}

.info3 { 
color: #bfbfbf; 
font-family: 'comic sans ms';
font-size: 12px;
font-weight: 600;
}

.info4 { 
color: #bfbfbf; 
font-family: 'courier new';
font-size: 12px;
}

.info5 { 
font-family: 'trebuchet ms';
font-size: 12px;
}

.info5_orley { 
color: #bfbfbf;
font-family: 'trebuchet ms';
font-size: 12px;
}

.block_for_bottom {
padding: 2px;
background: #00242e;
width: 390px;
opacity: 0.7;
filter: alpha(Opacity=70); /прозрачность под IE/
}

.block_for_getto {
padding: 2px;
background: #611d1d;
width: 390px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_middle {
padding: 2px;
background: #7a728c;
width: 390px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_top {
padding: 2px;
background: #1f003d;
width: 390px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_rivein {
padding: 2px;
background: #692348;
width: 390px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_antiva {
padding: 2px;
background: #450900;
width: 310px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_marka {
padding: 2px;
background: #611d1d;
width: 310px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_ferelden {
padding: 2px;
background: #8c610f;
width: 310px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.block_for_dolls {
padding: 2px;
background: #06631f;
width: 310px;
opacity: 0.7;
filter: alpha(Opacity=70); /* Прозрачность в IE */
}

.notebook2 {
width: 673px;
height: 425px; /* 606 300 */
position: relative;
}

.notebook2 > input {
display: none;
}

.notebook2 > div {
position: absolute;
box-sizing: content-box;
left: 0px;
bottom: 0px;
right: 0px;
top: 30px;
border-radius: 10px;
padding: 0px 1em;
z-index: 0;
transition: all 0.5s ease 0s, z-index 0s 0.5s;
}

.notebook2 > div > *:first-child {
display: block;
position: relative;
box-sizing: inherit;
width: 160px;
height: 30px;
top: -30px;
font-family: 'Snowstorm';
font-size: 15px;
font-weight: 600;
border-radius: 10px 10px 0px 0px;
background-color: #0b0d12;
color: #bfbfbf;
line-height: 28px;
cursor: pointer;
text-align: center;
transition: all 0.5s ease 0s;
}

.notebook2 > div > *:not(:first-child) {
opacity: 0;
top: -30px;
transition: all 0.5s ease 0s;
}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 0px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 160px; }
.notebook2 > div:nth-of-type(3) > *:first-child { left: 320px; }
.notebook2 > div:nth-of-type(4) > *:first-child { left: 480px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6),
.notebook2 > input:nth-of-type(7):checked ~ div:nth-of-type(7),
.notebook2 > input:nth-of-type(8):checked ~ div:nth-of-type(8),
.notebook2 > input:nth-of-type(9):checked ~ div:nth-of-type(9) {
z-index: 10;
background-image: url(http://i104.fastpic.ru/big/2018/0503/96/d1b7c9999a603253ddc463431aebb796.png);
transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child, 
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:first-child,
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6) > *:first-child,
.notebook2 > input:nth-of-type(7):checked ~ div:nth-of-type(7) > *:first-child,
.notebook2 > input:nth-of-type(8):checked ~ div:nth-of-type(8) > *:first-child,
.notebook2 > input:nth-of-type(9):checked ~ div:nth-of-type(9) > *:first-child {
color: #fff;
transition: all 0.5s ease 0.5s;
}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child),
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:not(:first-child),
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6) > *:not(:first-child),
.notebook2 > input:nth-of-type(7):checked ~ div:nth-of-type(7) > *:not(:first-child),
.notebook2 > input:nth-of-type(8):checked ~ div:nth-of-type(8) > *:not(:first-child),
.notebook2 > input:nth-of-type(9):checked ~ div:nth-of-type(9) > *:not(:first-child) {
opacity: 1;
transition: all 0.5s ease 0.5s;
}
</style>
<div id="character">
<div class="left"><img src="http://i104.fastpic.ru/big/2018/0503/58/7aceb49968570d0fe6587c6ea79dbf58.png"></div>
<div class="right"><img src="http://i104.fastpic.ru/big/2018/0503/91/72c247abf449e9fb537c8eb57361d991.png"></div>
<div id="content">
<div class="character">
<div class="notebook2">
<input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
<input type="radio" name="notebook2a" id="notebook2a_2">
<input type="radio" name="notebook2a" id="notebook2a_3">
<input type="radio" name="notebook2a" id="notebook2a_4">
<input type="radio" name="notebook2a" id="notebook2a_5">
<input type="radio" name="notebook2a" id="notebook2a_6">
<input type="radio" name="notebook2a" id="notebook2a_7">
<input type="radio" name="notebook2a" id="notebook2a_8">
<input type="radio" name="notebook2a" id="notebook2a_9">
<div>
<label for="notebook2a_1">Гетто</label>
<div id="dv" style="position:relative; width:640px; height: 425px; line-height: 180%; overflow:auto; background-image: url(http://i104.fastpic.ru/big/2018/0503/0a/_cd7a5afaf90ffcb0c303b9ee61cbc00a.png?noht=1);"><table>
<tr>
<td width="250px"; bgcolor="#611d1d"><p align="middle"><font class="info1">НАЗВАНИЕ ЭПИЗОДА</font><br>
<font class="info2">Участник ● Участник</font></p></td>
<td bgcolor="#611d1d"><p align="right"><font class="info3">Дата</font><br>
<font class="info4">Место действия</font></p></td>
</tr>
<tr>
<td width="250px"></td>
<td><div class="block_for_getto"><p align="middle"><font class="info5_orley">описание событий</font></p></div></td>
</tr>
</table></div>
</div>
<div>
<label for="notebook2a_2">Нижний уровень</label>
<div id="dv" style="position:relative; width:640px; height: 425px; line-height: 180%; overflow:auto; background-image: url(http://i105.fastpic.ru/big/2018/0503/be/_fee6a75ae622f22ff8bc39cddd8e4bbe.png?noht=1);"><table>
<tr>
<td width="250px"; bgcolor="#00242e"><p align="middle"><font class="info1">НАЗВАНИЕ ЭПИЗОДА</font><br>
<font class="info2">Участник ● Участник</font></p></td>
<td bgcolor="#00242e"><p align="right"><font class="info3">Дата</font><br>
<font class="info4">Место действия</font></p></td>
</tr>
<tr>
<td width="250px"></td>
<td><div class="block_for_bottom"><p align="middle"><font class="info5_orley">описание событий</font></p></div></td>
</tr>
</table></div>
</div>
<div>
<label for="notebook2a_3">Средний уровень</label>
<div id="dv" style="position:relative; width:640px; height: 425px; line-height: 180%; overflow:auto; background-image: url(http://i104.fastpic.ru/big/2018/0503/d1/_2f96456c98c3aa4aa29efb8cc0c858d1.png?noht=1);"><table>
<tr>
<td width="250px"; bgcolor="#7a728c"><p align="middle"><font class="info1">НАЗВАНИЕ ЭПИЗОДА</font><br>
<font class="info2">Участник ● Участник</font></p></td>
<td bgcolor="#7a728c"><p align="right"><font class="info3">Дата</font><br>
<font class="info4">Место действия</font></p></td>
</tr>
<tr>
<td width="250px"></td>
<td><div class="block_for_middle"><p align="middle"><font class="info5_orley">описание событий</font></p></div></td>
</tr>
</table></div>
</div>
<div>
<label for="notebook2a_4">Верхний уровень</label>
<div id="dv" style="position:relative; width:640px; height: 425px; line-height: 180%; overflow:auto; background-image: url(http://i105.fastpic.ru/big/2018/0503/49/_2ef2697a670fb14e5ae378b52e699349.png?noht=1);"><table>
<tr>
<td width="250px"; bgcolor="#1f003d"><p align="middle"><font class="info1">НАЗВАНИЕ ЭПИЗОДА</font><br>
<font class="info2">Участник ● Участник</font></p></td>
<td bgcolor="#1f003d"><p align="right"><font class="info3">Дата</font><br>
<font class="info4">Место действия</font></p></td>
</tr>
<tr>
<td width="250px"></td>
<td><div class="block_for_top"><p align="middle"><font class="info5_orley">описание событий</font></p></div></td>
</tr>
</table></div>
</div>
</div>
</div></div></div></div>

Отредактировано Отвёртка (2018-05-14 23:57:45)

+1

Поделиться22018-05-19 11:43:50

Автор: Отвёртка
meow
Уважение: +26
Сообщений: 16
Зарегистрирован: 2018-04-10
Последний визит:
2021-12-02 00:26:27
Провел на форуме:
4 дня 7 часов
Информация:
Досье
Раса: человек
Возраст: 17 лет
Род деятельности: инженер, анархистка и просто заноза в заднице
Ссылки: Анкета | Хронология
Юниты:
000 юнитов
приобретения

Место жительства

гетто, территория "Штекеров" на старых складских помещениях

Код:

<!--HTML-->
<img style="max-width:100%" src="//cdn.thinglink.me/api/image/1054308784630923265/1024/10/scaletowidth#tl-1054308784630923265;'" class="alwaysThinglink"/><script async charset="utf-8" src="//cdn.thinglink.me/jse/embed.js"></script>

0

Поделиться32018-07-31 23:56:26

Автор: Отвёртка
meow
Уважение: +26
Сообщений: 16
Зарегистрирован: 2018-04-10
Последний визит:
2021-12-02 00:26:27
Провел на форуме:
4 дня 7 часов
Информация:
Досье
Раса: человек
Возраст: 17 лет
Род деятельности: инженер, анархистка и просто заноза в заднице
Ссылки: Анкета | Хронология
Юниты:
000 юнитов
приобретения

Маруся Прихлоп ААА-1

робот из соплей и палок, построенный на инженерном таланте, двух ящиках пива и шести энергетиках

Код:

<!--HTML-->
<img style="max-width:100%" src="//cdn.thinglink.me/api/image/1080952045676003331/1024/10/scaletowidth#tl-1080952045676003331;'" class="alwaysThinglink"/><script async charset="utf-8" src="//cdn.thinglink.me/jse/embed.js"></script>

0

Жизнь в Новом Дамносе

Меню навигации

Пользовательские ссылки

Информация о пользователе

This system is sucks, guys!

Сообщений 1 страница 3 из 3

Поделиться12018-05-03 00:07:08

Поделиться22018-05-19 11:43:50

Поделиться32018-07-31 23:56:26