[html]<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<style>
.tablet {
background-image: url(https://upforme.ru/uploads/001b/ce/b4/4/104993.png);
width: 700px;
height: 920px;
margin-left: 20px;
}
/* Строка имени */
.stim {
width: 578px;
border: 1px;
border-color: #000;
background-color: #959D9F;
font-family: Oswald;
text-align: center;
position: absolute;
margin-top: 40px;
margin-left: 55px;
text-transform: uppercase;
}
.tabbed > input {
display: none;
}
.tabbed > label {
width: 100px;
margin-top: 110px;
margin-left: 43px;
margin-bottom: -90px;
display: block;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Oswald;
text-size: 20px;
text-transform: uppercase;
}
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {cursor: pointer;z-index: 1;}
/* Оформление */
/* Оформление неактивного переключателя */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end) {
background: transparent;
color: #191970;
height: 30px;
}
/* Оформление активного переключателя и при наведении */
.tabbed > label:not(.nav-top-start):not(.nav-top-end):not(.nav-bottom-start):not(.nav-bottom-end):hover,
.tabbed > input:checked + label {
background: #A02223 !important;
color: azure !important;
}
/* Оформление поля с контентом */
.tabs-body {
background: transparent;
color: #000;
}
/* Даем имена переключателям и полю с контентом */
/* Имя поля с контентом */
.tabs-body {grid-area: tabs-body;}
/* Имена переключателей слева */
#nav-left-1 {grid-area: nav-left-1;}
#nav-left-2 {grid-area: nav-left-2;}
#nav-left-3 {grid-area: nav-left-3;}
#nav-left-4 {grid-area: nav-left-4;}
#nav-left-5 {grid-area: nav-left-5;}
#nav-left-6 {grid-area: nav-left-6;}
#nav-left-7 {grid-area: nav-left-7;}
#nav-left-8 {grid-area: nav-left-8;}
#nav-left-9 {grid-area: nav-left-9;}
#nav-left-10 {grid-area: nav-left-10;}
.tabs-body {
width: 470px;
position: relative;
}
.tabs-body > div {
position: absolute;
top: 0;
left: 0;
line-height: 1.4em;
opacity: 0;
width: 470px;
height: 726px;
padding: 10px;
z-index: 0;
margin-top: 110px;
margin-right: 55px;
text-align: justify;
overflow: auto;
}
/* Переключатели */
/* Слева */
#nav-left-1:checked ~ .tabs-body > .body-left-1,
#nav-left-2:checked ~ .tabs-body > .body-left-2,
#nav-left-3:checked ~ .tabs-body > .body-left-3,
#nav-left-4:checked ~ .tabs-body > .body-left-4,
#nav-left-5:checked ~ .tabs-body > .body-left-5,
#nav-left-6:checked ~ .tabs-body > .body-left-6,
#nav-left-7:checked ~ .tabs-body > .body-left-7,
#nav-left-8:checked ~ .tabs-body > .body-left-8,
#nav-left-9:checked ~ .tabs-body > .body-left-9,
#nav-left-10:checked ~ .tabs-body > .body-left-10,
/* Справа */
#nav-right-1:checked ~ .tabs-body > .body-right-1,
#nav-right-2:checked ~ .tabs-body > .body-right-2,
#nav-right-3:checked ~ .tabs-body > .body-right-3,
#nav-right-4:checked ~ .tabs-body > .body-right-4,
#nav-right-5:checked ~ .tabs-body > .body-right-5,
#nav-right-6:checked ~ .tabs-body > .body-right-6,
#nav-right-7:checked ~ .tabs-body > .body-right-7,
#nav-right-8:checked ~ .tabs-body > .body-right-8,
#nav-right-9:checked ~ .tabs-body > .body-right-9,
#nav-right-10:checked ~ .tabs-body > .body-right-10 {
transform: translateY(0px);
transform: translateX(0%);
opacity: 1;
z-index: 1;
}
input[id^=nav] ~ .tabs-body > div[class^=body] {
}
</style>
<!-- В пост. Только слева. (done by Kolobdur) -->
<style>
.tabbed {
display: grid;
grid-template: /* навигация слева и поле */
"nav-left-1 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-2 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-3 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-4 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-5 tabs-body tabs-body tabs-body tabs-body" 1fr
"nav-left-6 tabs-body tabs-body tabs-body tabs-body" 1fr
/* Коллонки */
/ 1fr 1fr 1fr 1fr 1fr;
width: 100%;
}
</style>
<div class="tablet">
<div class="stim"><td>Варго Лоран <br> Уровень доступа: F </div>
<div class="tabbed">
<!-- Навигация слева -->
<!-- Слева 1 -->
<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Личные данные</label>
<!-- Слева 2 -->
<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Внешность</label>
<!-- Слева 3 -->
<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Способность 1</label>
<!-- Слева 4 -->
<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Способность 2</label>
<!-- Слева 5 -->
<input type="radio" name="tabs-body" id="nav-left-5">
<label for="nav-left-5">Характер</label>
<!-- Слева 6 -->
<input type="radio" name="tabs-body" id="nav-left-6">
<label for="nav-left-6">Биография</label>
<div class="tabs-body">
<!-- Контент вкладок слева -->
<div class="body-left-1">
<center><img src="https://upforme.ru/uploads/001b/fb/3e/159/565144.jpg"></center>
AI generated<br>
Пол: мужской<br>
Дата рождения: 12.08<br>
Возраст: 21 y.o. <br>
Рост и вес: 186 см, вес 80 кг <br>
<br>
Семейное положение: одинок <br>
Должность/Статус: студент 3 курса, кризис менеджмент “криэйтеры” <br>
Ник в чате академии: JackFrost<br>
<br>
Отличительные признаки
<br>
Цвет глаз: голубой <br>
Цвет волос: пепельный блонд, но бреется под единичку обычно <br>
Татуировки/Шрамы/Пирсинг/Пигментация: <br>
Сплит языка. Проколоты уши в нескольких местах, включая хрящи. Множественные татуировки - на груди, спине и рукава на обеих руках. <br>
</div>
<div class="body-left-2"><br>
Поджарый высокий молодой человек. Видно, что Вар постоянно качается, его мышцы в хорошей форме. Бледная кожа идёт в контраст с угольно-чёрными густыми широкими бровями. А те, в свою очередь, контрастируют с пепельно-белыми волосами. Щетина растёт, но он её качественно сбривает. Приятные черты лица, нос чуть вздёрнут кончиком вверх.
</div>
<div class="body-left-3">
► Криокинез<br><br>
Применение: активная<br><br>
Описание способности: способен менять форму льда и создавать его из частиц влаги в воздухе. Делать изо льда как щит, так и оружие.
Регулировать температуру своего тела. <br><br>
Ограничения: если слишком низкая влажность, то не может генерировать лёд. Если слишком жарко - все конструкции из льда быстро таят, куда мягче, а то и вовсе превращаются в брызги водой. При постоянном использовании радиус и качество изделий изо льда уменьшается.
</div>
<div class="body-left-4">
► Укрепление <br><br>
Применение: пассивная <br><br>
Описание способности: может укрепить своё тело на время, равное не более 30 минут в сутки, покрыв себя толстым слоем льда. <br><br>
Ограничения: ограничение по времени. Из-за плотности защитного слоя с его собственными клетками тела, при слишком сильном ударе и отколовшимся частичкам льда, может потерять часть кожи. Могут остаться шрамы.
<br><br>
</div>
<div class="body-left-5">
Успеваемость: средняя. <br><br>
Горячий, сильный и безбашенный засранец. Он очень импульсивный и амбициозный парень. Если он поставил перед собой какую-то цель, то он достигнет её, так или иначе. Умеет добиваться своего, принуждать играть по его правилам. Несмотря на общий образ хулигана с района, он расчётливый и хорош в манипуляциях. <br>
Имеет весьма взрывоопасный характер. Его очень легко спровоцировать на конфликт. Никогда не знаешь, чем его можешь задеть и получить в морду. Но при этом, он человек чести - если он тебе надрал задницу, он тебя и дотащит до лазарета или будет с тобой, пока ты не очухаешься. У него есть принципы, у него есть убеждения, пускай со стороны кажется, что он абсолютно аморален. <br>
Он весьма непредсказуемый молодой человек. Наглый, дерзкий, самоуверенный и весьма обаятельный суки сын. Он умеет себя подать, обратить на себя взгляды и как бы мерзотно он себя не вёл, есть в нём какое-то обаяние "bad boy"а. Он не рыцарь, он никогда не пытался им быть, он скорее пират от рождения, а не по призванию. Поэтому то, что он исчезает так же быстро, как и появляется в жизни кого-то, это нормально, но все всё равно удивляются и обижаются. Трудно достучаться до настоящего Варго, до его сердца. Он кажется открытым и дружелюбным, но что творится в его душе и мыслях на самом деле - не дано знать никому. Но... если вы сумели забраться в его сердце, заслужили его доверие и стали для него значимым, то он за вас всем глотки порвёт, будьте уверены. Он очень дорожит такими важными человеческими отношениями как дружба. Он не способен предать человека, которому доверяет и с которым их связывают такие отношения, как дружба или любовь. И кинется на край света, и подставится под пулю, чтобы защитить того, кого он называет "другом". <br>
Себя обижать никогда не даст и никому. Очень горделивый и тщеславный, на его гордости можно похоронный марш ему же самому и сыграть. Но несмотря на то, что его спровоцировать на удар, он сначала подумает, как больнее всего будет ударить, прежде чем бить.
</div>
<div class="body-left-6">
Вар вырос в неблагополучной семье. Мать наркоманка, а отец алкоголик. Он рос в постоянных криках, ругани и насилии. Грязь, наркотики и блевотина. Как только он стал достаточно большим, чтобы выходить из дома, он почти никогда туда не возвращался. Его, буквально, вырастили улицы и их суровые законы. Он не связывался с плохой компанией, он её быстро возглавил. Будучи мелким, он занимался воровством. Мелкими карманными кражами и покупал себе еду, иногда принося что-то домой, для матери. Отца он ненавидел, так как тот, в порыве алкогольной горячки, не раз поднимал руку на него и на его мать. Страдая от постоянных побоев трудно любить своего родителя, да и другого, который никогда не заступался, тоже, если честно. Так что, понятия о семейных ценностях и человеческих моралях у него, в целом, сильно затёрлись. <br>
Когда стал постарше, неплохо так научился драться. И он не изучал бокс или капуэйру, он учился на самом кровавом из стилей - уличной драки, где нет правил и запретов, только победитель и проигравший. <br>
Дрался за деньги, дрался, чтобы подняться по бандитской иерархии выше. Да, знаете, он никогда не боялся запачкать руки, не боялся жестокости или боли. В этом же возрасте у него уже хватило сил, чтобы избить папашу до полусмерти и выселить из квартиры матери.<br>
Он помогал матери как мог, постоянно заботясь о ней. Однако, когда в очередную ломку он отказал ей в дозе, она сдала его в интернат, сделав всего один звонок. Он не дался без боя, но его всё же скрутили и отправили куда полагается.<br>
В интернат его отправили по специальному распределению, в самый опасный и жестокий по отношению к детям, из всех существующих. В том интернате Охра проводила свой особый эксперимент: за счет искусственно созданной жестокой среды для взросления, можно усилить детей измененных, сделать их менее склонными к эмпатии и сочувствию, эгоистичными, но при этом все еще управляемыми?<br>
Для подневольного участия в этом эксперименте собирались дети измененных из самых неблагополучных районов и семей, с детства знакомых с насилием, вынужденные научиться защищать себя сами. Варго стал одним из этих неудачливых детей, кто был выбран для участия в эксперименте.<br>
Оказавшись в интернате, благодаря опыту которым уже обладал, в том числе боях за деньги, Варго несмотря на свой юный возраст, сумел пробиться среди остальных. Он довольно быстро заработал себе пугающую репутацию, а его способности стали вишенкой на торте.<br>
В это же время он окружил себя преданными людьми, которых считал семьёй куда больше, чем кровных родственников.<br>
И все же в интернате он ерепенился как мог, часто отбывая в наказаниях, но репутацию главного хулигана поддерживал. В интернате поощрялась жестокость между подростками измененными, но одновременно именно там в конечном счете, ему достаточно доходчиво объяснили, как себя следует вести когда приказы отдает Охра. Он не привык подчиняться и играть по чужим правилам, однако тут его хорошо кормили, одевали и даже обучали. Обучали тому, чему он сам никогда бы не смог выучиться, учитывая своё происхождение. Когда он сумел доказать вышестоящим лицам, что им всё-таки можно управлять, его отправили в академию. <br><br>
Секретная информация: На самом деле ему нравится в академии больше, чем дома. Он не хочет этого признавать, но он не такой ублюдок, каким хочет для всех казаться.
</div>
[/html]
