Код:
<!--HTML--><style type="text/css">
#honey-askme { width: 500px; height: 600px; position: relative; overflow: hidden; }
.namesur {padding: -25px; font-family: 'Book Antiqua'; font-size: 20px;}
.namesur b {font-family: 'Book Antiqua'; font-size: 20px; text-style: bold; color: #3e0303;}
.honey-familiar { position: relative; left: 0px; top: 0px;background-color: transparent; transition-: 0.8s all ease-in-out; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; opacity: 0.0; }
#honey-askme:hover .honey-familiar { top: -600px; opacity: 1.0; }
.honeyeden-text { font-family: 'Open Sans', sans-serif; text-align: justify; font-size: 10px; color: #888; line-height: 120%; padding: 5px; margin-top: 10px; }
.honeyeden-text b { font-family:Arial; font-size: 12px; color: #480a13; font-weight: 800; font-style: italic; line-height: 120%; }
.honeyeden-text1 { font-family: 'Open Sans', sans-serif; text-align: center; font-size: 12px; color: #888; line-height: 80%; padding-bottom: -25px; margin-top: 5px; }
.honeyeden-text1 b { font-family:Arial; font-size: 11px; color: #87afb9; font-weight: 800; font-style: italic; line-height: 80%; }
.honeyeden-lyrics { width: 270px; height: 270px; overflow: hidden; font-family: 'Old Standard TT', sans-serif; text-align: justify; font-size: 31px; text-transform: uppercase; letter-spacing: -2px; color: #fff; line-height: 100%; text-shadow: 1px 1px 0px rgba(16, 11, 15, 1); padding: 115px; }
.honeyeden-tragic { width: 478px; height: 578px; margin: 5px; padding: 5px; border: 1px solid #fff; }
.honeyeden-lonesome { width: 458px; height: 558px; background: #fff; padding: 10px; }
.honeyeden-mirror { width: 458px; height: 380px; overflow: auto; padding-right: 5px; }
.osnova { width: 530px; padding: 10px; background-color: #d8d9e0; border: 2px solid#480a13;}
.osnova1 { width: 568px; padding-top: 8px; padding-bottom: 8px; background-color: #d8d9e0; border: 10px solid#480a13;}
.info { width: 500px; border: 2px dashed#480a13; padding: 10px; text-align: justify; padding: 15px; background-color: #bdbdbd;}
.info1 { width: 510px; border: 1px dashed#2a1d40; padding: 5px; text-align: justify; background-color: #8f8f8d;}
.info2 { width: 310px; border: 2px dashed#2a1d40; padding: 5px; text-align: justify; background-color: #8f8f8d;}
.info3 { width: 190px; border: 2px dashed#2a1d40; padding: 5px; text-align: justify; background-color: #8f8f8d;}
.xxx { font-size: 8px; padding-bottom: 5px;}
.xxx h { font-size: 8px; text-style: bold; color: #3e0303;}
.cat {font-family: 'Book Antiqua'; font-size: 20px;}
.cat b {font-family: 'Book Antiqua'; font-size: 20px; text-style: bold; color: #3e0303;}
.name {font-family: 'Book Antiqua'; font-size: 18px; text-align: center;}
.name b {font-family: 'Book Antiqua'; font-size: 18px; text-style: bold; color: #3e0303;}
/* слайдер */
#thtabcontainer { width: 460px; padding: 20px; background-color: #a7b6e8; } /* фон */
.thtabtopper { width: 410px; height: 20px; margin-top: 5px; line-height: 16px; font-family: lekton; font-size: 10px; opacity: 0.9; filter: alpha(opacity=60); text-transform: uppercase; letter-spacing: 2px; word-spacing: 2px; color: #090C13; border-top: 3px double #090C13; border-bottom: 3px double #090C13; }
.tans { position: relative; height: 620px; width: 540px; clear: both; margin: 15px 0; background-color: #cbcccc; }
.tan { float: left; }
.tan label { display: block; background: #480a13; color: #fff; height: 22px; width: 178px; font: 16px Book Antiqua; padding-top: 0px; -margin: px; position: relative; border: 1px solid#000; }
.tan [type=radio] { display: none; }
.tabs { position: relative; height: 410px; width: 540px; margin: 15px; background-color: #cbcccc; }
.tab { float: left; }
.tab label { display: block; background: #480a13; color: #fff; height: 22px; width: 268px; font: 16px Book Antiqua; padding-top: 0px; -margin: px; position: relative; border: 1px solid#000; }
.tab [type=radio] { display: none; }
.tass { position: relative; height: 770px; width: 540px; margin: 15px; background-color: #cbcccc; }
.tas { float: left; }
.tas label { display: block; background: #480a13; color: #fff; height: 22px; width: 268px; font: 16px Book Antiqua; padding-top: 0px; -margin: px; position: relative; border: 1px solid#000; }
.tas [type=radio] { display: none; }
[type=radio]:checked ~ label { background: #cbcccc; color: #090C13; border-bottom: 1px double #090C13; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }
.thcontent { position: absolute; width: 540px; top: 24px; background: #cbcccc; right: 0; bottom: 0; padding: 0px; border: 0px; text-align: justify; }
[type=radio]:checked ~ label { background: #cbcccc; color: #090C13; border-bottom: 1px double #090C13; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }
.thappcontent { width: 450px; height: 400px; overflow: auto; font-family: Arial; padding: 15px; font-size: 11px; line-height: 12px; color: #a7b6e8; }
.faces div { font-family: 'Kaushan Script'; font-size: 18px; line-height: 120%; text-align: center; color: #2a1d40; }
.faces div:before { content: ''; width: 25px; height: 1px; display: inline-block; background-color: #2a1d40; vertical-align: middle; all elements after; margin-right: 6px;}
.faces div:after { content: ''; width: 25px; height:1px; display: inline-block; background-color: #2a1d40; vertical-align: middle; all elements after; margin-left: 6px;}
.job div { font-family: 'Kaushan Script'; font-size: 18px; line-height: 120%; text-align: center; color: #2a1d40; }
.job div:before { content: ''; width: 15px; height: 1px; display: inline-block; background-color: #2a1d40; vertical-align: middle; all elements after; margin-right: 6px;}
.job div:after { content: ''; width: 15px; height:1px; display: inline-block; background-color: #2a1d40; vertical-align: middle; all elements after; margin-left: 6px;}
.job1 div { font-family: 'Kaushan Script'; font-size: 24px; line-height: 120%; text-align: center; color: #2a1d40; }
.job1 div:before { content: ''; width: 35px; height: 1px; display: inline-block; background-color: #2a1d40; vertical-align: middle; all elements after; margin-right: 6px;}
.job1 div:after { content: ''; width: 35px; height:1px; display: inline-block; background-color: #2a1d40; vertical-align: middle; all elements after; margin-left: 6px;}
<link href='https://fonts.googleapis.com/css?family=Timmana' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</style>Код:
<!--HTML--><center><div class="osnova1">
<div class="osnova"><div class="cat"><i><b>G</b>lowing in the dark</i></div>
<table><tr><td><div style="width: 250px; height: 100px; border: 1px solid#fff; background-image: url(http://funkyimg.com/i/2dXmj.png)"></div></td><td> <div style="width: 250px; height: 100px; border: 1px solid#fff; background-image: url(http://funkyimg.com/i/2dXmi.gif)"></div></td></tr></table>
<div class="xxx">✕✕<h>✕</h>✕✕</div><img src="http://funkyimg.com/i/2dNp4.png">
</div></div>
<div class="tans">
<div class="tan">
<input type="radio" id="tan-1" name="tan-group-1" checked>
<label for="tan-1">Странные люди</label>
<div class="thcontent">
<center><br>
<img src="http://funkyimg.com/i/2dUkg.gif"><img src="http://funkyimg.com/i/2dUBj.gif">
<div class="xxx">✕✕<h>✕</h>✕✕</div>
<div class="info1"> Странные люди, или как их называли в древности Syndrigasti (в переводе шаманы/духи) – люди, обладающие сверхъестественными способностями, или же аномальными отличиями от человеческой анатомии. Так же существует и другое, научное название вида – крипто сапиенс.
<br>Каждый странный обладает уникальной способностью, проявляющейся в свое время. Человек может с пеленок обладать тем, что не могут объяснить взрослые, а может всю жизнь провести как обычный хомо сапиенс, не подозревая о своем внутреннем даре. Странность передается по наследству, но при этом (из-за многовекового смешения крови) у странных родителей может появиться простой человек, а у обычных – странный, если в роду хотя-бы у одного из родителей был синдригаст.</div><div class="xxx">✕✕<h>✕</h>✕✕</div>
<div class="cat"><i><b>О</b>рганизация странных людей</i></div>
<div class="info1"><br>Спасаясь от жестокости и непонимания простых людей, синдригасты создали по всему миру петли времени, в которых смогли спрятаться. В петле раз за разом происходит один и тот же день, что позволяет странным без опасений за собственные жизни спокойно сосуществовать рядом с людьми. На людей петля времени не действует, они так же не могут и попасть в нее.
<br>Временную петлю может создать только имбрина – странная женщина, способная превращаться в птицу. Именно на ее плечи ложится забота и защита странных детей. Для обычных людей имбрины представляются директрисами приютов и частных школ, дабы объяснить любопытным, почему в их доме полно детей.
<br>У синдригастов так же есть совет – своего рода правительство странных людей, который, ради безопасности, находится в петле. В обязанности совета входит хранить историю странных, обучать молодых имбрин и поддерживать порядок в странном мире. В каждой стране совет странных расположен в столице, куда раз в год имбрины, проживающие на территории данной страны, должны являться для отчета о прошедшем годе.
</div><div class="xxx">✕✕<h>✕</h>✕✕</div></center>
</div>
</div>
<div class="tan">
<input type="radio" id="tan-2" name="tan-group-1">
<label for="tan-2">Охотники на пустот</label>
<div class="thcontent">
<center><br>
<img src="http://funkyimg.com/i/2dUAV.gif"><img src="http://funkyimg.com/i/2dUAW.gif">
<div class="xxx">✕✕<h>✕</h>✕✕</div>
<div class="info1"> После провального эксперимента в Сибири и появлении на свет пустот, многие странные решили не пытаться прятаться от угрозы, а наоборот, дать отпор. Именно с этой целью, 40 лет назад и был создан орден охотников на пустых. В данный орден допускаются странные, достигшие совершеннолетия, идеально владеющие собственной способностью и имеющие отличную физ. подготовку.
<br>Охотники делятся на группы по 6 человек так, чтобы в каждой группе были локаторы (синдригасты, способные определять пустот), бойцы и медики. Охотиться на пустоту в одиночку – запрещено, хотя бы потому, что это сравни суициду.
<br>В связи с тем, что после определенного времени покидать петлю времени становится невозможным, орден охотников всегда находится в настоящем времени, живя как обычные люди.
<br>Средняя продолжительность обучения: 2-3 года, за это время странные учатся работать в команде и пользоваться оружием. На более долгий срок обучения попросту нет времени.
<br>Отряды охотников – не элита странных людей, они постоянно ходят за руку со смертью и каждый день может оказаться последним. Большинство синдригастов считает их суицидниками и не поощряет сделанный ими выбор. Однако, им всегда рады в любой петле.
<br>Орден спонсирует совет имбрин, пусть и не высказывает восторг от того, чем занимаются охотники. Однако, благодаря их деятельности, мир странных стал чуточку безопаснее.
</div><div class="xxx">✕✕<h>✕</h>✕✕</div></center></div>
</div>
<div class="tan">
<input type="radio" id="tan-3" name="tan-group-1">
<label for="tan-3">Пустоты и твари</label>
<div class="thcontent">
<center><br>
<img src="http://funkyimg.com/i/2dUAX.gif"><img src="http://funkyimg.com/i/2dUd4.gif">
<div class="xxx">✕✕<h>✕</h>✕✕</div>
<div class="info1"> Пустоты – невидимые (можно обнаружить лишь в тени) человекоподобные существа, имеющие во рту до 8 щупалец с острыми зубами и испытывающие постоянный голод, утоляемый только плотью странных. Не имеют разума, однако, могут жить вечно. Одна из слабостей – не могут проникнуть в петлю времени.
<br>Твари – бывшие пустоты, полностью сожравшие странного человека и сумевшие обрести разум. Их отличительная особенность – белоснежная радужка с сероватой каймой и отсутствие зрачков. Так же могут жить вечно, но, в отличии от пустот, могут проникать в петли. Способностей не имеют.
<br>Изначально в мире не существовало ни пустот, ни тем более тварей. В далеком 1908 году группа странных вознамерилась с помощью петель времени стать бессмертными и управлять обычными людьми. Эксперимент проводился в Сибири и был строжайше засекречен. Что-то пошло не так и, как итог, петля, в которой проходило сие действо, взорвалась. Взрыв был огромной мощности и вошел в историю как падение тунгусского метеорита. Все участники, как считалось в начале, погибли в петле. На деле же их откинуло в то прошлое, когда даже души еще не существовали, а мир покрывала лишь одна тьма.
<br>Через 20 лет после этих событий, пустотам, в которых превратились участники эксперимента, удалось вырваться в настоящее (1928 год). Ведомые одним лишь голодом, они стали охотиться на странных людей. Сожрав достаточно странных, они становились тварями, и могли управлять своими не обратившимися собратьями.
<br>Цель пустот и тварей – хаос во всем мире. Они могут убивать как странных, для того, чтобы утолить голод, так и простых людей, чисто ради забавы.
</div><div class="xxx">✕✕<h>✕</h>✕✕</div></center>
</div>
</div>
</div>
</div></center>
