[html]<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="http://sg.uploads.ru/o9RXn.png"></div>
<div class="spiritfirsttitle">виктор
<br>гроссерберг
<subtitle>— «добро пожаловать отсюда»</subtitle></div>
</div>
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">хронология</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">отношения</label>
<section id="content-tab1">
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=158#p9035" rel="nofollow" target="_blank"><span style="font-size: 18px">ЭФФЕКТ ОБМАНУТОГО ОЖИДАНИЯ</span></a><br /><span style="font-size: 10px">личный эпизод <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>рейнард</strong> × <strong>виктор</strong><br/><span style="font-size: 10px">1808, 26-ое число Ласточки<br/>о. Оста, Дагорт</span></p></td><td><p>Он явно был худшим объектом для разбойного ограбления, но что сделано, то сделано</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=236#p17430" rel="nofollow" target="_blank"><span style="font-size: 18px">ЛАТУННЫЕ КОСТИ</span></a><br /><span style="font-size: 10px">личный эпизод <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>муха</strong> × <strong>виктор</strong><br/><span style="font-size: 10px">1808, 6-ое число Жатвы<br/>о. Оста, окрестности Золотого Леса</span></p></td><td><p>Что может пойти не так, когда лезешь в подозрительный дом в компании подозрительного контрабандиста? Абсолютно все</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=244#p17992" rel="nofollow" target="_blank"><span style="font-size: 18px">ЛЕСНОЕ МОРЕ</span></a><br /><span style="font-size: 10px">личный эпизод <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>лисандр</strong> × <strong>виктор</strong><br/><span style="font-size: 10px">1809, 10-ое число Солнца<br/>о. Оста, лес Рурк</span></p></td><td><p>В черном-черном лесу была черная-черная яма и несколько черноруких людей</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=150#p8926" rel="nofollow" target="_blank"><span style="font-size: 18px">IT'S JUST ANOTHER WAY TO DIE</span></a><br /><span style="font-size: 10px">личный эпизод <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>миколаш</strong> × <strong>виктор</strong><br/><span style="font-size: 10px">1809, 7-ое число Охоты<br/>о. Оста, окрестности Мориона</span></p></td><td><p>Кое-что о малориятности спонтанных открытий и природе слуховых галлюцинаций</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=188#p11970" rel="nofollow" target="_blank"><span style="font-size: 18px">ПУСТЬ МУЗЫКА СТАНЕТ ДРОЖЬЮ</span></a><br /><span style="font-size: 10px">личный эпизод <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>илай</strong> × <strong>виктор</strong><br/><span style="font-size: 10px">1810, 14-ое число Ласточки<br/>о. Оста, Дагорт</span></p></td><td><p>Когда <span style="font-style: italic">такой</span> человек говорит тебе «добрый вечер», ты как-то сразу понимаешь, что вечер будет совсем не добрым</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=245#p17999" rel="nofollow" target="_blank"><span style="font-size: 18px">РАЗРУШЕННАЯ БАШНЯ</span></a><br /><span style="font-size: 10px">сюжетный эпизод <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>илай</strong> × <strong>клифф</strong> × <strong>рейнард</strong> × <strong>виктор</strong><br/><span style="font-size: 10px">1810, 14-ое число Солнца<br/>о. Оста, Редларт, Пустота</span></p></td><td><p>Сомнительные приключения в сомнительных местах для сомнительных людей</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=178#p10533" rel="nofollow" target="_blank"><span style="font-size: 18px">КОНСТРУКТОР</span></a><br /><span style="font-size: 10px">альтернатива <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>дисмас</strong> × <strong>рейнальд</strong><br/><span style="font-size: 10px">darkest dungeon<br/>—</span></p></td><td><p>Все они тут — убогие гамлетовы дворняги, с аппетитом жрущие требуху, а потом оттого хиреющие и сдыхающие.</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=179#p10542" rel="nofollow" target="_blank"><span style="font-size: 18px">БЕЗУМНОЕ</span></a><br /><span style="font-size: 10px">альтернатива <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>риз</strong> × <strong>тимоти</strong><br/><span style="font-size: 10px">borderlands<br/>—</span></p></td><td><p>Их ублюдочные недо_отношения.</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=182#p10810" rel="nofollow" target="_blank"><span style="font-size: 18px">ПОЕЗД ДАЛЬШЕ НЕ ИДЕТ</span></a><br /><span style="font-size: 10px">альтернатива <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>максим</strong> × <strong>дмитрий</strong><br/><span style="font-size: 10px">metro 2033<br/>—</span></p></td><td><p>Как нелегкой принесло, так нелегкой и унесет обратно.</p></td></tr></table>
<hr/>
<p>
<span style="display: block; text-align: center"><a href="http://dagort.ru/viewtopic.php?id=199#p13368" rel="nofollow" target="_blank"><span style="font-size: 18px">ТАНЦУЙ НА КОСТЯХ</span></a><br /><span style="font-size: 10px">альтернатива <sup>[ активен ]</sup></span></span></p><table style="table-layout:fixed;width:100%"><tr><td><p><strong>капитан аллен</strong> × <strong>rk900</strong><br/><span style="font-size: 10px">detroit: become human<br/>—</span></p></td><td><p>[ ч. II ] | Чуть ближе к мятежнику, чуть ближе к распаду, чуть ближе к пониманию о том, что такое ra9 на самом деле.</p></td></tr></table>
<hr/>
</section>
<section id="content-tab2">
<p>
<span style="font-size: 8px"><strong>общее:</strong> положительные, деловые, доверительные, романтический интерес</span>
<br/><span style="font-size: 10px">«<span style="font-style: italic">Если у дегенератизма есть вершина, то ты ее покорил</span>» — именно это, кажется, было первым, что я ему сказал. И, на самом деле, с учетом его рода деятельности, это было действительно много слов. Я неустанно напоминаю ему о его дурости, невоспитанности и несносности, и столь же неустанно возвращаюсь в его общество раз за разом. Это моя личная болезнь, которой я потворствую со скрытой приязнью. <a href="http://dagort.ru/profile.php?id=53"><strong>Рейнард</strong></a> — это прекрасный пример того, как люди могут выстроить отношения из ничего, и еще того, что некоторые драки и споры могут заканчиваться крайне неожиданно.</span>
</p>
<hr/>
<p>
<span style="font-size: 8px"><strong>общее:</strong> положительные, деловые, товарищеческие</span>
<br/><span style="font-size: 10px">Я никогда его не жалел, не бросал вслед сочувствующих взглядов и никогда не понимал, почему это делают другие. Жалеть стоит покойных, а <a href="http://dagort.ru/profile.php?id=47"><strong>Миколаш</strong></a> жив и нашел дело, которому посвящает эту самую жизнь. Наши интересы во многом схожи и мы часто обмениваемся мнениями, он интересный человек и хороший ученый. Пожалуй, он один из немногих в чью тайны я решил не лезть из искреннего уважения, и возможно... столь же искреннего нежелания знать о том, что с ним произошло в прошлом.</span>
</p>
<hr/>
<p>
<span style="font-size: 8px"><strong>общее:</strong> положительные, деловые, доверительные</span>
<br/><span style="font-size: 10px">Давняя подруга, которой я точно могу доверить кое-что из того, о чем другим знать совсем не обязательно. Она прятала по своим тайникам мои вещи — все эти запретные предметы, амулеты и книги, — о которых не должны узнать, а я дарил ей травы, каких не найти на Осте. Она интересный собеседник и, пожалуй, импонирует мне, несмотря на все ходящие о ней слухи (люди глупы и их россказням верить опасно). У <a href="http://dagort.ru/profile.php?id=32"><strong>Зоркой Мэгги</strong></a> много тайн, я чувствую это, и когда-нибудь, возможно, я рискну вызнать о них.</span>
</p>
<hr/>
<p>
???
</p>
<hr/>
</section>
</div>
</div>
</div>
<div class="clearer"></div>
<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');
#spiritworkroom {width: 610px;
height: 520px;
background: #d7d7d7;
margin:auto;
box-shadow: 0 0 0 0px rgba(0,0,0,.2)}
.spiritfirst {float: left;
margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #d7d7d7}
.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}
.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
text-align: center;
display: block;
width: 190px;
font-size: 9px;
font-family: pt sans;
color: #999;
opacity: 0;
transform: translate(0,400px);
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}
.spiritsecond {background: #d7d7d7;
width: 389px;
margin: 10px;
height: 500px;
margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
position: absolute;
margin-left: 211px
}
.tabs {
padding: 0px;
margin: 0 auto;
}
.tabs>section {
display: none;
padding: 10px;
height: 440px;
overflow-y: auto;
margin: 5px;
font-family: arial;
font-size: 11px;
text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@keyframes fadeIn {
from {
transform: translate(-400px,0);
transform-origin: 50% 0%;
}
to {
transform: translate(0px,0);
}
}
.tabs>input {
display: none;
position: absolute;
}
.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #f1f1f1;
width: 195px;
border: solid rgba(0,0,0,.2);
border-width: 0px 0px 1px 0px;
left: 3px;
top: 0px;
position: relative;
font-family: pt sans;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: lighter;
box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 188px;
height: 3px;
background: #fefefe;
left:3px;
bottom:3px;
transform: scaleX(0);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
.tabs>label:hover:after {transform: scaleX(1);
background: #b95f43;}
.tabs>label:hover {
color: #888;
cursor: pointer;
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}
.tabs>input:checked+label {
color: #555;
background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 188px;
height: 3px;
background: #581600;
left:3px;
bottom:3px;
transform: scaleX(1);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>[/html]
Отредактировано Виктор Гроссерберг (2019-10-15 16:18:58)