[html]<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="картинка персонажа 190х490"></div>
<div class="spiritfirsttitle">имя
<subtitle>статус</subtitle></div>
<div class="spiritfirsttext"><subtitle> всплывает при наведении на имя - заголовок</subtitle>
<about> всплывает при наведении на имя - тело</about></div>
</div>
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">закладка 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"> закладка 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"> закладка 3</label>
<section id="content-tab1">
<p>
заголовок абзаца 1
● Повышенная сила: Новым пределом поднимаемой массы стала отметка в 60 тонн;<br>
● Устойчивость к телепатическому, телекинетическому и пирокинитическому воздействиям;<br>
●Повышенная ловкость, выносливость, скорость и реакция;<br>
● Иммунитет к ядам, токсинам, многим болезням;<br>
● Ночное зрение;<br>
● Улучшенный исцеляющий фактор: Восстановление после любого ущерба для организма стало происходить в несколько десятков раз быстрее;<br>
● Жала: На запястьях расположены острые выдвижные жала;<br>
● Выделение органической паутины;<br>
● Телепатический контроль пауками;<br>
● Трансформация в «Другого»;<br>
Другой<br> этого парня лучше не злить<br>
● Сверхчеловеческая сила (более 100 тонн), реакция, скорость, выносливость. В несколько раз выше, чем у Каина в человеческой форме;<br>
● Ядовитая слюна;<br>
● Звериная ярость;<br>
● Практически мгновенная регенерация;<br>
● Полный контроль пауками;<br>
● Неуязвим к магии.<br>
● <a href="http://s8.uploads.ru/t/oICib.jpg">внешний вид</a><br>
Костюм<br>
● Omni-гармоничная сетка, из которой состоит костюм, позволяет преломлять световые и звуковые волны, что придает костюму великолепные возможности незаметного перемещения - режим "Стелс";<br>
● Костюм восстанавливает сам себя;<br>
● Костюм огнеупорный т.к. изготовлен из нестабильных молекул.<br>
● Не имеет никаких (!) шутеров, только свою смекалку;<br>
● <a href="http://sg.uploads.ru/t/xd09m.png">внешний вид</a>
</p>
</section>
<section id="content-tab2">
<p>
<img src="http://s7.uploads.ru/t/ceCGf.png">
<img src="http://ipic.su/img/img7/fs/Kejn01.1557084703.png">
<img src="http://ipic.su/img/img7/fs/Kaine010.1561496079.png">
<img src="http://s8.uploads.ru/t/gXvGl.png">
<img src="http://s3.uploads.ru/t/r3Uc5.png">
</p>
</section>
<section id="content-tab3">
<p>
[size=10]0. До января проживал в Хьюстоне, где был сам себе героем;<br>
0.1 В личностной хронологии не учитываются многие события из комиксов, такие как: конфликт с Дональдом и Уолии из-за резни с Крейвеном; переезд из Хьюстона и скитание в дальнейшем в компании с Арасели (она же Колибри); отречение от костюма Алого Паука. Учитывается дополнительно: смерть из-за оборотней и первая встреча с Другим, а в дальнейшем способность его использовать при пики агрессии в дальнейшем будет пополняться;<br>
1. <a href="http://marvelbreak.ru/viewtopic.php?id=2045#p243706">21 января</a> находился на Диких землях, где участвовал в потасовке с симбиотом по имени Риот;<br>
2. Участвовал в происшествии с паучьим вирусом начиная с 1 по 15 марта 2017 года;<br>
3. Участник <a href="http://marvelbreak.ru/viewtopic.php?id=2818#p331547">W.E.B.</a>, а так же по совместительству тотем из-за «Другого» — воплощение мистического бога пауков, который поселился в сознании Каина в образе Другого. Узнает об этом в начале февраля 2017 года;<br>
4. Обосновался в одном из домиков на окраине города начиная с 16.03;<br>
5. В начале апреля начинается масштабная <a href="http://marvelbreak.ru/viewtopic.php?id=2978#p347579">Охота</a> за Паучьими Тотемами;<br>
6. 1. 06 поучаствовал частично в файтинге с Темным Орденом, побывав на их корабле;<br>
7. Был одержим собственным <a href="http://marvelbreak.ru/viewtopic.php?id=3607#p401756">бесом</a> из-за вмешательство в собственную голову (Другой пытался заполучить тело носителя);<br>
8. Впервые увидел собственного клона от <a href="http://marvelbreak.ru/viewtopic.php?id=3868">23 июня</a>, который в дальнейшем исчез с кровью Мун в неизвестном направлении;<br>
9. В следствии щелчка <a href="http://marvelbreak.ru/viewtopic.php?id=3482&p=6#p448214">Таноса</a> от 4.07.17 происходят координальные изменения в его голове: половина воспоминаний стираются и заменятся на альтернативные. Теперь он помнит себя как укушенного студента, что проживал долгое время в Хьюстоне, а после переселился в НЙ. И уже во втором начал свою активную деятельность героя в красно-черном костюме. Одновременно с этим чуть ранее лишился своего дома (эп от 26 июня);<br>
10. <a href="http://marvelbreak.ru/viewtopic.php?id=4234#p448610">Событие</a> от 26 июля. Питер Паркер в розыске, а все внимание людей теперь обращено на Каина. Его называют героем, несмотря на траву пауков и приказа снять с них со всех маски. Алый уходит в подполье, дабы скрыться от ненавистного лишнего внимания и раскрытия своей личности.
<br>
</p>
</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: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px 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 #fefefe}
.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
}
.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
transform: translate(0,0px)}
.spiritsecond {background: #fefefe;
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: #fefefe;
width: 131px;
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: 123px;
height: 3px;
background: #dfdfdf;
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: #888;}
.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: 123px;
height: 3px;
background: #888;
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]
