А мы не ангелы.

[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> Уровень доступа: E </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://i.ibb.co/CJSQsRn/ezgif-4-fa71bb36f5.png"></center>
Sung Jinwoo – Solo leveling<br>
Пол: мужской.<br>
Дата рождения: 01.04.2102<br>
Возраст: 21 год.<br>
Рост и вес: 185/83.<br>
<br>

Семейное положение: холост.<br>
Должность/Статус: студент 4 курса факультета «Стратегическое планирование и конфликтология».<br>
Ник в чате академии: @mr_y0<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>
Ограничения: Смертельный урон можно перекинуть лишь 1 раз в сутки, средний – 2 раза, мелкие царапины и ушибы – до 100 раз. Физический контакт не требуется, цель должна быть в поле зрения. Превысить лимиты невозможно, способность не сработает. При максимальном использовании возможна усталость и потеря ориентации. Активируется по желанию владельца.<br><br>

</div>

► Сюрприз <br><br>
Применение: активная способность, применяется на других, область применения – до 20 метров.
<br><br>
Описание способности: способность позволяет в течение часа видеть будущее на 5 секунд вперед.
<br><br>
Ограничения: способность может быть использована раз в сутки в течение часа (час может быть «разбит» на разные отрезки времени или использован полностью). Если использовать способность весь час без остановки, то возможны усталость и помутнение рассудка. Активируется по желанию владельца.

</div>

<div class="body-left-5">
Успеваемость: высокая.<br><br>
Драгомир удачлив и знает это. Он объясняет это тем, что всегда любил жизнь, и она отвечала ему взаимностью, прикрывала со всех сторон. К тому же еще с детства Стригой был достаточно умен, чтобы понимать, когда стоит что-то сделать или скрыть, а когда остановиться. Он всегда умел быть вежливым, когда это надо, и не скупился на улыбки – родители говорили, что хороших детей очень любят. Несмотря на то, что в детстве они виделись не часто в связи с их занятостью на работе, мальчик не страдал. Наоборот, это давало ему возможность привыкнуть к редким встречам и больше их ценить.
Драгомир постоянно пользуется своими способностями, никому не спускает обид и не стесняется мстить. Он никогда и ничего не делает просто так. Даже если покажется, что произошла случайность, что он не подумал о чем-то, в 90% случаях это будет никакая не ошибка, Стригой абсолютно точно подумал о последствиях.<br>
Ему не нравится бесполезно рисковать собственной жизнью, но он всегда сделает все от него зависящее, чтобы помочь другим. Он упрям, целеустремлен и предпочитает не раскидываться словами и обещаниями.<br>
Когда-то в прошлом он проиграл в дурацком подростковом пари, и должен был надеть наряд, в котором одежда не сочеталась друг с другом. Для Драгомира уже тогда это звучало как катастрофа всей его жизни. Так что мало того, что он перестал участвовать в спорах, в которых не мог победить, так еще внимательно и придирчиво стал следить за своим внешним видом. Считает, что если ты чего-то не знаешь или не умеешь, следует поднять свой тощий зад и изучить.

</div>

<div class="body-left-6">
Драгомир родился в Цюрихе, в семье инноваторов, которые работали в научно-исследовательском центре Охры. Они не слишком часто виделись с сыном, но ребенок из-за этого особо не страдал, потому что его любили и окружали заботой при каждой встрече. В другое время о Драгомире заботилась няня.<br>
Стригой и сам бы не смог сказать, в каком возрасте появилась его первая способность, в четыре года или чуть позже. Впервые, о ее существовании узнали, когда в возрасте пяти лет он свалился с качели и отделался обычным испугом, а перелом руки получил проходящий мимо человек. Известие о том, что их ребенок измененный, конечно же, не обрадовало родителей мальчика. Они также понимали, что скрыть ее тоже не получится, ведь сын у них был еще та егоза, так что Драгомиру придется уехать в интернат.<br>
Несмотря на то, что дети, попавшие в интернат больше не могли видеться с семьей, родители мальчика нашли способ косвенно помочь сыну. Они воспользовались своими знакомствами и попросили других сотрудников Охры, работающих в интернате Цюриха, присмотреть за сыном.<br>
Впрочем, никаких трудностей в адаптации в новом месте или в знакомстве с другими детьми у Драгомира не возникло. Да, он не был слишком дружелюбным и общительным, но явных конфликтов у него почти ни с кем не возникало.<br>
В возрасте четырнадцати лет у Стригоя появилась вторая способность, с помощью которой он мог предсказывать будущее, из-за чего его даже отправляли на проверку перспективности, но, признав бесполезной, вернули в интернат.<br>
Драгомир не зря причисляет себя к счастливчикам. Он родился в успешной семье, в благополучном городе, он обладает способностью, которая помогает ему обходиться без разных ранений и увечий. Он не испытывает трудностей в общении, не стесняется знакомиться и заговаривать с незнакомцами. Подтвердить теорию о собственной удачливости Стригой смог в свои пятнадцать лет, когда Марк Шейн, признанный впоследствии террористом, уничтожил почти все Академии в мире, а также большую часть интернатов. Уничтожил он и интернат Драгомира. Стригой оказался одним из тех счастливчиков, которым удалось выжить в эту Красную неделю.<br>
Спасла его не случайность, не удача, а собственные способности. Драго использовал тогда свои способности на максимуме, избегая приближающуюся опасность, уворачиваясь от атак, прячась, убегая и перекидывал урон на окружающих. Он был единственным выжившим, но в тому моменту как его нашли, уже потерял сознание из-за перенапряжения.<br>
Оставшиеся три с половиной года он провел в другом интернате, пока не попал в единственную оставшуюся в мире Академию в Бразилии.<br>
Конечно же случившееся в интернате не прошло для пятнадцатилетнего подростка бесследно - он стал осторожнее и хладнокровнее. Но несмотря ни на что, не растерял своей человечности и не замкнулся в себе.
<br><br>
Секретная информация: -
</div>
</div>
[/html]

Отредактировано Dragomir Strigoi (2024-05-15 15:10:13)

+12