Эльф чёкнутый!!!

[html]
<style>
.tablet {
background-image: url(https://forumupload.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>

<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> Уровень доступа: C </div>

<div class="tabbed">


<input type="radio" name="tabs-body" id="nav-left-1" checked>
<label for="nav-left-1">Личные данные</label>

<input type="radio" name="tabs-body" id="nav-left-2">
<label for="nav-left-2">Внешность</label>

<input type="radio" name="tabs-body" id="nav-left-3">
<label for="nav-left-3">Способность 1</label>

<input type="radio" name="tabs-body" id="nav-left-4">
<label for="nav-left-4">Способность 2</label>

<input type="radio" name="tabs-body" id="nav-left-5">
<label for="nav-left-5">Характер</label>

<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://forumupload.ru/uploads/001b/fb/3e/191/345870.jpg"></center>
Fuuchouin Kazuki/Get backers<br>
Пол:мужской<br>
Дата рождения: 28.02.2099<br>
Возраст: 25 (на 24й год) <br>
Рост и вес: 1,77м/77кг<br>
<br>

Семейное положение: свободен, как сопля в полёте<br>
Должность/Статус: Куратор 2 курса и миссий/куратор танцевального клуба<br>
Ник в чате академии: s’il;)f<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>
Ограничения: *по временив «бытовом применении» (с помощью волос придержать чашку/достать книгу с полки) действует почти постоянно, так как требует коротких точечных воздействий на окружающее, в непрерывном применении (в рамках боевой ситуации) – около полутора часов. Далее следует вялость, головные боли, заторможенность движений. Не способен пользоваться способностью ближайшие 13 часов.*Сложность – длинна волос. Стрижка – не для Лика. Потому что отрастают его волосы до прежней длины примерно за 12-13 часов, даже если побрить налысо. Так что смена имиджа или избавление от «лишнего веса» путём стрижки ему недоступно. *проблема – довольно ограниченная дистанция, из-за чего в случае любого сражения нужно «лезть в самую гущу событий»*Намокшие волосы становятся тяжелее, менее подвижны и слушаются хуже

</div>

► Металлическая Хари-онаго <br><br>
Применение: активная способность, применяемая на себя<br><br>
Описание способности: данная способность позволяет металлизировать волосы за счёт металла, извлечённого из окружающего пространства, а так же, в экстренных ситуациях дополнительно удлинять их на длину, равную длине волос. <br><br>
Ограничения: *Действует только на те волосы, что на голове<br>
*Среди побочных эффектов при переутомлении – сильная слабость минимум на несколько часов и жуткий голод, при умеренном использовании – лёгкое головокружение и небольшая головная боль<br>
*Действует не дольше часа в беспрерывном режиме с последующим перерывом в сутки<br>
*Несколько уменьшает пластичность волос за счёт металлической структуры (действие, требовавшие доли секунд занимает от одной до десяти секунд в зависимости от сложности) *Сильно утяжеляет волосы. Прям ощутимо.
<br><br>

</div>

<div class="body-left-5">
То, что видят окружающие:Для каждого – своя индивидуальная грань и своя «сторона медали» –с кем-то общительный и улыбчивый, с кем-то вечно замкнуты и угрюмый. Кому-то с охотой строит глазки и флиртует без малейших стеснений, с кем-то краснеет от пары слов. Но какими бы ни были его поступки, эмоции и поведение, многие часто могут посчитать их честными, даже если противоречат друг другу. Словно нет никакой ширмы, отгораживающей настоящие чувства от реальных и с каждым Лик правдив до крайности и честен до болезненности. Многие могут счесть его мягким и нежным, заботливым и, как правило, тактичным.<br>
Что есть на самом деле:Чёткое понимание того, с кем и до каких граней отношений готов дойти сам, с кем хотел бы достичь определённых отношений, но никогда на это не пойдёт, с кем хочет быть по настоящему честным, а с кем предпочтёт скрыть свои истинные мысли и придержать при себе. Бывает жестким и даже жестоковатым. Склонен к изрядному пофигизму в отношении того, что его мало интересует, а следовательно – скорее всего, не запомнит, даже если для другого это – величайшая тайна. Ненавидит тех, кто любит унижать других морально или физически.<br>
Защитник по натуре и большой поклонник «совать нос в самое пекло».<br>
Опасен в любви и почти любых серьёзных отношениях – тех, кто дорог, будет стараться опекать и защищать даже от них же самих, на грани совершенно безумных поступков типа сталкерства, гиперопеки и прочих не для всех приятных моментов, при этом совершенно не заморачиваясь ревностью – пусть лучше дорогой человек достанется не ему, главное – чтобы был в порядке.
</div>

<div class="body-left-6">
- Родился в одном из не самых благополучных районов Атланты.<br>
– Своего отца не знает, да и знать не хочет.<br>
– У матери приобретённая ещё до рождения Лика слепота.Потому как только мальчик начал хоть как-то самостоятельно передвигаться, начала крепить к нему колокольчики, находя своего малыша по их звону, а так же именно её слепотой стала причиной и вечно не стриженных длинных волос её сына – женщине нравилось ощущать его волосы под пальцами и возиться с тогда ещё не очень длинной, но густой причёской.<br>
– первое проявление способности – примерно в семь лет – попытался выставить из дому пришедшего к его матери и очень не понравившегося человека, закрывая её собой и «ощерившись» волосами, словно Горгона – змеями.<br>
– Без малейших обид или протеста позволил забрать себя в интернат. О матери после этого знает лишь то, что она переехала в другой район города в обществе кого-то из старых подруг.<br>
– Во время небольшого «межличностного инцидента» между изменёнными в интернате сломал дверью мизинец.<br>
– Как и любой изменённый, после интерната был отправлен в академию, покидать которую оказалось не целесообразным. Тем более, с любовью Лика оберегать жизни других, а что может быть важнее, чем оберегать будущих защитников чужих жизней?<br>
– Получил должность в академии. В качестве доп.нагрузки взял шефство над танцевальным кружком, в котором ранее состоял сам.
<br><br>
Секретная информация: Если перебрал с алкоголем, становится по настоящему откровенным и не держит язык за зубами от слова «совсем». Норму же свою не ощущает, потому старается отказываться от посиделок в компании или пить с теми, с кем не готов быть откровенным во всём.
<br><br>

</div>
</div>
[/html]