[html]<!-- Стиль для вкладок в постах (done by Kolobdur) -->
<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: auto;
position: relative;
}
.tabs-body > div {
position: absolute;
top: 0;
left: 0;
line-height: 1.4em;
opacity: 0;
width: auto;
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> Уровень доступа: C </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://forumupload.ru/uploads/001b/fb/3e/24/885173.png"></center>
Genshin Impact | Zhongli <br>
Пол: м<br>
Дата рождения: 13.08.2103 <br>
Возраст: 21 лет<br>
Рост и вес: 184 см / 80 кг. <br>
<br>
Семейное положение: холост. <br>
Должность/Статус: студент 4 курса факультета, инноватор / член дисциплинарного комитета. <br>
Ник в чате академии: Jan<br>
<br>
Отличительные признаки
<br>
Цвет глаз:Янтарный<br>
Цвет волос: Тёмный шоколад. <br>
Татуировки/Шрамы/Пирсинг/Пигментация: Проколоты уши. Есть татуировка на правом мизинце в виде красной нитки. Сделал в 18 лет, как символ, что они с братом связаны, невидимой нитью.
</div>
<div class="body-left-2"><br>
Первое, что бросается при встрече с Дженом – это его высокий рост. Хорошо очерченные скулы, небольшой нос. У него весьма интересная стрижка, вроде и короткая, но пикантность его виду придаёт небольшой длинный хвостик. Взгляд золотистых глаз словно пронизывают вас насквозь. От этого взгляда невозможно спрятаться и невозможно долго смотреть. Носит очки, но исключительно когда читает или работает за компьютером. Поддерживает себя в хорошей форме благодаря спорту. В одежде больше преобладает классический стиль, но вполне может позволить себе надеть и более свободную по стилю одежду. <br>
</div>
<div class="body-left-3">
► Пирокенез <br><br>
Применение: Активная способность. Очень хорошо ей владеет. Радиус применения от 2 до 15 м.
<br><br>Ограничения: Способность активируется с помощью мысли и визуальном контакте с объектом применения. Действует способность от получаса до двух часов. Использование способности по минимуму вызывает мигрени и тошноту. При максимальном использовании добавляется потемнение в глазах.
<br><br>Описание способности: Способность вызывать огонь или значительное повышение температуры на расстоянии силой мысли, а также возможность силой мысли управлять огнём. </div>
<div class="body-left-4">
► Аналитизм<br><br>
Применение: Активная способность. Может увидеть от 5 до 15 вариантов развития той или иной ситуации. Применяется только на окружающих на себе данную способность применить не может. <br><br>
Ограничения: Для активации нужно держать в поле зрения все объекты, сильная концентрация. Максимальное время использования 45 мин. Минусы : сильное истощение, чувство голода. <br><br>
Описание способности: Ускоренный анализ и продумывание ситуации и разных вариантов исхода событий.
</div>
<div class="body-left-5">
Успеваемость: Лучший на своём курсе. Грызёт гранит до потери пульса. <br>
Характер это отражение человека. Джен весьма добрый и мягкий человек. Легко и быстро отзывается на окружающие события, общителен. Он быстро приспосабливается к новым условиям и быстро сходится с людьми. Но если вы считаете, что он тряпка, то вы сильно ошибаетесь. Он не любит разгильдяев, никому не даёт расслабиться, даже самому себе. Увлекшись делом, склонен действовать изо всех сил, истощаться больше, чем следует. За родных и близких готов на самые необдуманные поступки. Очень пунктуален, он считает, что лучше прийти раньше, чем опоздать. Опоздание считает как выражением неуважения к собеседнику. Поэтому не любит, когда кто-то опаздывает. Если дал слово, даже если это слово самому себе, то никогда не пойдет на попятную и не откажется от своих. Бывает упрямым, и если вбил, что-то себе в голову, то его не переубедит. Не любит конфликтовать, всегда пытается все решить мирно и найдя компромисс. Но иногда может вспылить и даже повысить голос, но только если, словесные аргументы не увенчались успехом. Если при ссоре оказывается не прав, всегда просит извинения первым.
</div>
<div class="body-left-6">
Родился на 15 минут позже своего старшего брата Джуна. Мать китаянка, отец американец. Мать дала своим сыновьям молочные имена. Имя Джена – Бей, что означает белый. Родители были врачами и мечтали, что их мальчики пойдут по их стопам. Но их желаниям не суждено было сбыться. Когда Джену было 6 лет, в их доме ночью начался пожар. К сожалению когда прибыла помощь, в живых нашли только двух испуганных мальчиков. Мать погибла надышавшись дымом. Отец, вытащив сыновей, вернулся в дом, чтобы спасти жену, но был придавлен обрушившейся крышей. Заботу о воспитании братьев взял на себя, старший брат матери и его жена. Был весьма спокойным ребёнком, не доставляя проблем не дяде не тёте. Вечно сидел с книжками. В школе он был прилежным учеником, которого обожали учителя и терпеть не могли одноклассники. Вот только первые дни к нему стали приставать хулиганы, но до того момента, пока не познакомились с кулаками его брата. Когда опекуны узнали о том, что братья мутанты, долго обдумывали скрывать их или отдать в приют. Все же решили продолжать их воспитывать. А тем временем Джен пытался научиться управлять и контролировать свою способность. Но к 15 годам мальчиков, у их опекунов появился свой ребёнок. И тётушка так боялась за него, что дяде пришлось отдать братьев в интернат. Джен никогда не злился на такой поступок родных ему людей, наверное в их ситуации он бы тоже поступил так. Да и чего огорчаться, если рядом брат. Вот только спустя неделю по непонятным причинам Джена отправили в другой интернат. И это было тяжёлой ношей для молодого человека. И чтобы как-то справиться с душевной пустотой, он ещё больше погрузился в учёбу. Три года интерната, а по исполнению 18 лет, они с братом снова встретились, получив метку, были отправлены в Академию. Когда Джен снова встретился с братом, то дал себе слово, что теперь никто и ничто не разлучит их. <br><br>
Секретная информация: Только к 13 годам, узнал что пожар в их доме был не случайным. А, результатом проявившейся у него способности. Пару раз думал о самоубийстве, но выбил это из своей головы, понимая, что тогда брат останется совершенно один.
</div>
</div>
</div>
</div>
[/html]
Отредактировано Jen Foster (2023-10-14 01:41:45)
- Подпись автора
