Код Удемана

[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/ynmfwb1/diara-square345.png"></center>
art<br>
Пол: ♀<br>
Дата рождения: 03.03.2103<br>
Возраст: 21 <br>
Рост и вес: 169 / 58
<br><br>

Семейное положение: свободна как ветер<br>
Должность/Статус: студентка 4 курса факультета Стратегического планирования и конфликтологии<br>
Ник в чате академии: blackbird<br>
<br>
Отличительные признаки
<br>
Цвет глаз: hazel-mokko<br>
Цвет волос: чёрные, с редким вкраплением серебристых<br>
Татуировки/Шрамы/Пирсинг/Пигментация: имеется тату-вязь символов, напоминающих иероглифы: на правой руке - закрученных по спирали вокруг предплечья, на левой руке - вертикальные ряды вдоль предплечья. белёсый шрам от аппендицита (вырезан и зашит в полевых условиях). микро-тоннели в ушах (чёрный титан), иногда крепит к ним кольца; проколоты соски (серебристый титан - серьги-кольца). тёмное родимое пятно, напоминающее очертаниями рваный треугольник у левой лопатки<br>
</div>

<div class="body-left-2"><br>
Стройная, спортивная фигура. Сухой, но достаточно выраженный пресс. Смуглая кожа. Густые тёмные брови. Очень лёгкая, едва заметная, раскосость глаз. Волосы немного вьются. Ногти всегда аккуратно подстрижены - иногда покрыты чёрным матовым или серебристым лаком. Не пользуется косметикой, за исключением гигиенической помады-бальзама (губы часто обветриваются).
</div>

<div class="body-left-3">
<center><img src="https://i.ibb.co/ZhLxjH8/diara-cards.png"></center>
► Wild cards / Дикие карты<br><br>
Применение: Активная. Применяется в зоне видимости объекта, предмета (необходим зрительный контакт). <br><br>
Описание способности: Способность представляет собой словесное “заклинание”, напоминающее игру, которое превращает один предмет в другой. Обладатель произносит мысленно или шёпотом, вслух цепочку слов.<br>
Пример: rope - hope - hop - top - cop - cap (верёвка превращается в итоге в чашку)<br>
Правила: 1) первое слово - видимый объект, предмет 2) промежуточные слова могут быть абстрактными и не абстрактными существительными, одушевлёнными и неодушевлёнными 3) последнее слово - предмет, объект, который получится и может поместиться в пространство 4) можно добавлять, заменять, либо убирать по одной букве 5) язык для преобразования может быть выбран любой (английский, русский, португальский и т.д.)<br><br>
Ограничения: Работает только с неживыми объектами, предметами, материалами (первое и последнее слово). Максимальный уровень воздействия - растения, грибы. Побочный эффект: за каждый шаг преобразования - требуется потом лишний час сна в сутки для восстановления сил. Каждое преобразование может отзываться болью в районе сердца (как удары) - условия при которых подключается боль не всегда ясны.
<br><br>

</div>

<div class="body-left-4">
<center><img src="https://i.ibb.co/719CNMN/diara-figures.png"></center>
► Glass animals / Стеклянные звери <br><br>
Применение: Активация кровью - хотя бы капля крови хозяйки должна попасть на стеклянную фигурку (например прокол пальца, порез ладони - касание).<br><br>
Описание способности: У Дьяры в карманах можно найти стеклянные фигурки зверей. Это “тотемы”. Выбрав и активировав кого-то из них - она вызывает что-то вроде образа соответствующего животного (едва заметного, прозрачного, в свой полный рост). Животное не обладает той же силой и всеми свойствами как настоящее, но может издавать звуки той же силы и мощности. Также, его можно ощутить поверхностно (колючесть клыков, мягкость шерсти и т.д.), хотя рука проходит через него насквозь, без усилия. В итоге, активированный “тотем” можно использовать, например, просто чтобы кого-то привлечь или отпугнуть (другое животное или человека). Также - Дьяра всегда на “связи” с активированным тотемом - она получает информацию из его органов чувств, будто сама этот зверь.<br><br>
Ограничения: Время “жизни” вызванного зверя: 1 час (может исчезнуть раньше по желанию хозяйки - по хлопку). Вызов: до трёх животных в сутки.
<br><br>

</div>

<div class="body-left-5">
Успеваемость:<br>
Отличница. Но это вовсе не тот, человечек, кто корпит над учебниками и конспектами или засиживается в библиотеке допоздна. Дьяра не даст вам списать, но сама всегда найдёт где, как, и за счёт чего выплыть, причём позаботившись об этом заранее. Она всегда знает - какой билет вытащит на экзамене, добиваясь своего различными способами. Часто вывозит просто за счёт наглой уверенности в себе и харизмы.<br>
Её принципы:<br>
Сдаёшь философию - заставь преподавателя задуматься о смысле собственного существования, а заодно вселенной и всего такого. Сдаёшь психологию - вынуди экзаменатора расплакаться. Сдаёшь литературу - посвяти написанную вместо ответа на билет поэму красавчику-учителю - написав её так, чтобы у него встал.
<br><br>
Умна, но не выпячивает это. Скрытная по своей природе, но тем не менее заметная личность. Её знают все - но такое чувство, что о ней самой (настоящих мотивов, желаний и пр.) не знает никто. На любой вопрос всегда может подобрать ответ: кажется, что исчерпывающий, но уходя - ты понимаешь, что теперь у тебя ещё больше вопросов, и интереса. Не душа компании - но всегда её яркая тень.
<br><br>
Никто никогда просто так не захочет обидеть Дьяру. А кто посмеет, видимо, не знает о тех довольно редких, но всегда странных случаях: вон тот например тактик, стоящий неподалёку с перебинтованной рукой - вчера показал ей “фак”, а сегодня утром стонал у медпункта с переломанными пальцами, при чём на распросы докторов, кто это сделал - отвечал упорно и уверенно: “я упал… я упал… я упал… я сам.” Чаще - защищает не себя, а других.
<br><br>
Никто никогда не слышал о том, чтобы она сама, первой, хотела кого-то обидеть. Дьяру любят. Она притягивает. Интуитивно - с ней все хотят подружиться. Отвечает всегда вежливой взаимностью, но держит границы. Самой ей - редко бывает кто-то по-настоящему нужен.
<br><br>
Любит медитативные занятия: шахматы, танцы, рисование и т.п. Не художник - но ей нравится водить кисточкой или карандашом по холсту. Не гроссмейстер - но её завлекает сам процесс игры на поле с клеточками, переставлять фигурки, делать иногда необдуманные, непредсказуемые ходы - и смотреть, что из этого получится. Играть с самой собой.
</div>

<div class="body-left-6">
Место рождения: Претория. Кровь - гремучая смесь рас и национальностей. Отец Грэйс - мулат из Банги, добытчик минералов. Мать - метиска из Чанши, учительница, лингвист.
<br><br>
Первая способность раскрылась в девочке, когда ей было 12. С малых лет девчушка старалась быть самостоятельной и помогать родителям. Денег семье на жизнь хватало, но на карманные - приходилось зарабатывать самой - Дьяра не чуралась любой работы, которую ей доверяли - такой как расклейка объявлений и что-нибудь такое же незатейливое, но утомительное. Но больше всего ей конечно же понравилось - на черепаховой ферме и в приюте для животных, куда её помог пристроить дядя, брат отца. Денег девочке платили немного, но за хорошую работу иногда награждали сувенирами из лавки - чаще всего стеклянными фигурками животных. Однажды поранив руку о решётку, спохватившись и рыская в кармане в поисках платка, девочка случайно вызвала свой первый в жизни “тотем” - огромного аллигатора. Саму её это не напугало. А вот другие работники заметили… и доложили - куда было по их мнению “надо”. Охровцы явились практически незамедлительно, на завтра же. Так Дьяра была изъята из семьи и попала в Интернат, где уже через год - открыла в себе ещё одну способность. Пробыла там до своего совершеннолетия. Затем - поступила в Академию в Рио.
<br><br>
С факультетом было определиться не просто. Талантов хватало ко всему и отборочные тесты говорили о том, что почти на любом - Дьяра Грэйс имела бы должный успех. Но как будто везде чего-то и не хватало. Ей самой не хватало… Любовь к шахматам и приличного вида мужчина-декан почти как случайные факторы - в конце концов качнули её выбор к Стратегии.
<br><br>
Сама жизнь в Академии казалась ей хоть и насыщенной - но достаточно однообразной: учёба, миссии, парни, девушки… снова девушки… И вот уже и несколько лет взрослой жизни промелькнули.
<br><br>
Секретная информация: Любит плавать в бассейне обнажённой (в основном по ночам, служба СБ знает об этом - но нарушения в этом не видит, или не хочет видеть).<br>
Желает сменить факультет, но пока не нашла для себя по-настоящему подходящий среди текущих.
</div>
[/html]

Отредактировано Diara Grace (2024-07-30 00:05:19)