[html]<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.anketa {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 690px;
background: Black;
background-image: url('https://forumstatic.ru/files/001c/89/a0/35701.jpg');
background-repeat: repeat-y;
background-position: top;
}
.infoblock {
display: flex;
background-color: #9ab9c0;
flex-direction: column;
flex-wrap: nowrap;
margin: -1em 6.05em 0 1.5em;
width: 650px;
padding-top: 1em;
}
.history {
display: block;
background-color: #a5c0c7;
border: 10px double #9ab9c0;
padding: 1em 1em;
margin: 8px;
font: 1.1em 'Roboto Condensed';
color: #15485a;
}
.shapka {
display: flex;
flex-wrap: nowrap;
position: relative;
left: 0;
width: 650px;
height: auto;
margin: 10px 0 10px 6px !important;
z-index: 999;
padding: 4em 1em 0 1em;
}
.avatar {
width: 200px;
height: 250px;
padding: 1em 1em 0.8em 0.5em;
}
h1 {
font: 2em 'Roboto Condensed' !important;
font-weight: 600 !important;
text-align: left;
text-transform: uppercase;
padding: 0.3em 0.3em 0 0.3em;
color: #15485a;
border-top: 1px solid #00848d;
border-left: 1px solid #00848d;
}
h2 {
font: 1.5em 'Roboto Condensed' !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-align: right;
text-transform: uppercase;
color: #00848d;
border-bottom: 1px solid #00848d;
border-right: 1px solid #00848d;
padding-bottom: 0.2em;
padding-right: 0.5em;
}
h3 {
font: 1.3em 'Roboto Condensed' !important;
font-weight: 600 !important;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
color: #00848d;
border-bottom: 1px solid #00848d;
padding-left: 1.5em;
}
span {
font: 1.1em 'Roboto Condensed' !important;
text-align: left;
color: #15485a;
text-align: justify;
padding-right: 1em;
}
strong {
font: 1.1em 'Roboto Condensed' !important;
text-align: left;
color: #15485a!important;
font-weight: 600 !important;
}
body {font-family: Arial;}
/* Стиль вкладок */
.tab {
display: flex;
flex-direction: column;
width: auto;
background-color: #9ab9c0;
}
/* Стиль кнопок внутри вкладок */
.tab button {
background-color: #a5c0c7;
border: none;
cursor: pointer;
width: 56px;
height: 50%;
max-height: 150px;
font-size: 1em;
font: 1.3em 'Roboto Condensed' !important;
color: #15485a;
font-weight: 600 !important;
writing-mode: vertical-rl;
}
/* Изменение цвета фона кнопок при наведении курсора мыши */
.tab button:hover {
background-color: transparent;
text-align: center;
color: #00848d;
}
/* Создание активного/текущего класса связей вкладок */
.tab button.active {
background-color: #9ab9c0;
}
/* Стиль содержимого вкладки */
.tabcontent {
width: 100%;
height: auto;
display: none;
background-color: #9ab9c0;
padding: 6px 6px;
}
.tabprofile {
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: #a5c0c7;
border: 10px double #9ab9c0;
padding-left: 1em;
}
.profile {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.parametry {
display: flex;
flex-direction: column;
line-height: 1.1;
width: 100%;
}
/* Основной контейнер слайдера */
.slider {
width: 200px; /* Фиксированная ширина слайдера */
height: 250px; /* Фиксированная ширина слайдера */
overflow: hidden; /* Обрезаем всё, что выходит за границы контейнера */
position: relative; /* Необходимо для правильного позиционирования кнопок */
}
/* Контейнер всех слайдов */
.slides {
display: flex; /* Размещаем слайды в одну линию */
transition: transform 0.5s ease-in-out; /* Анимация плавного смещения */
}
/* Каждый отдельный слайд */
.slide {
width: 100%; /* Занимает всю ширину контейнера */
flex-shrink: 0; /* Запрещаем уменьшение размера слайдов */
}
/* Стили для изображений */
.slide img {
object-fit: cover;
width: 200px;
height: 250px;
display: block; /* Убираем пробелы вокруг изображений */
}
/* Кнопки «Назад» и «Вперёд» */
.prev, .next {
position: absolute; /* Позволяет располагать кнопки поверх слайдов */
top: 50%; /* Размещаем по вертикали по центру */
transform: translateY(-50%); /* Сдвигаем кнопки вверх на половину их высоты */
background: rgba(0, 0, 0, 0.3); /* Полупрозрачный фон кнопок */
color: rgba(255, 255, 255, 0.5); /* Белый цвет текста */
border: none; /* Убираем границы */
padding: 9.1em 3px; /* Отступы внутри кнопки */
cursor: pointer; /* Изменяем курсор на указатель */
font-size: 1em; /* Размер шрифта */
font-weight: normal; /* Делаем текст жирным */
z-index: 2; /* Размещаем кнопки выше всех элементов */
}
/* Позиционируем кнопку «Назад» слева */
.prev {
left: 0px;
}
/* Позиционируем кнопку «Вперёд» справа */
.next {
right: 0px;
}
</style>
</head>
<body>
<div class="anketa">
<div class="shapka">
<div id="Man" class="tabcontent">
<div class="tabprofile">
<div class="profile">
<div class="parametry">
<br> <h1>Даниэл Лайт</h1>
<h2>Daniel Light</h2>
<br>
<span>• <strong>ПОЛ: </strong>мужской</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>08.11.1990</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>15.03.2009</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>35 лет</span>
<br>
<span style="text-align: left !important">• <strong>МЕСТО РАБОТЫ: </strong>Верховный Суд Брим-Ривер</span>
<span>• <strong>ДОЛЖНОСТЬ: </strong>уголовный судья</span>
</div>
<div class="avatar">
<div class="slider">
<!-- Контейнер, который содержит все слайды -->
<div class="slides">
<div class="slide"><img src="https://upforme.ru/uploads/000f/d2/81/2/98522.jpg"></div>
</div>
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong> Genshin Impact — Kamisato Ayato</span>
<span>• <strong>РОСТ/ВЕС: </strong>176/63 • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>голубые/светло-голубые</span><br>
<span>Светло-голубые волосы, голубые глаза и, на первый взгляд, добрая улыбка — то, что обычно видят все, кто с ним встретился, в первую очередь. Иногда ещё в глаза бросается родинка слева под губой. При своём росте и весе выглядит достаточно стройно и изящно.<br> <br></span>
</div>
</div>
<div id="Hton" class="tabcontent">
<div class="tabprofile">
<div class="profile">
<div class="parametry">
<br><h1>Страж Габриэль</h1>
<h2>Вестник Истины</h2>
<br>
<span>• <strong>ВОЗРАСТ:</strong> ~ 25000 лет</span><br>
<span>• <strong>ПОЛ:</strong> мужской</span><br>
<span>• <strong>ФРАКЦИЯ:</strong> Орднунг (Ангелы)</span><br>
<span>• <strong>ДОЛЖНОСТЬ:</strong> 2-ое Светило</span>
<br>
<span>• <strong>ВНЕШНОСТЬ: </strong>CrimsonChains OC — Arthur</span>
</div>
<img src="https://upforme.ru/uploads/000f/d2/81/2/833156.jpg" class="avatar" style="object-fit: cover;">
</div>
<span>Несколько глаз, отсутствие головы и щепотка изящности. С одной стороны кажется, что он похож на человека с крыльями, но потом он повернётся лицом к смотрящему, а лица нет. Но есть множество глаз, смотрящих в душу, и золотое кольцо, висящее вместе с этими глазами. Глазки, к слову, золотистого цвета с белыми зрачками. Рост и вес те же, что и у человеческого тела.<br> <br></span>
</div>
</div>
<div class="tab">
<button class="tablinks" onclick="openProfile(event, 'Man')"id="defaultOpen">ОБОЛОЧКА</button>
<button class="tablinks" onclick="openProfile(event, 'Hton')">ХТОНЬ</button>
</div>
</div>
<div class="infoblock">
<div class="history">
<h3>Способность: Пламя Нефилы</h3><br>
<b>Описание:</b> Активная. Способность к поджиганию любого предмета, до которого дотронется, включая человеческое тело. Достаточно лишь только хорошенько подумать о том, как что-то сгорает, и вещь тут же воспламеняется. Для активации способности нужно коснуться предмета любым открытым участком тела.
Само по себе пламя не сжигает цель мгновенно, всё происходит по законам физики: дерево вспыхивает быстро, вода будет испаряться.<br><br>
<b>Ограничения/откаты:</b><br>— Чем менее горючее вещество, тем больше сил тратит носитель на то, чтобы оно загорелось.<br>
— При использовании не наносит ущерб своему носителю, однако в случае перенапряжения и потери концентрации огонь может выйти из-под контроля и нанести ущерб Габриэлю.<br>
— При использовании почти сразу появляется головокружение. Если на способность затрачивается слишком много ресурсов, наступает сильнейшая жажда и кислородное голодание вплоть до обморока.<br>
— На полное восстановление и повторное использование уходит от 24 до 72 часов.<br>
</div>
<br>
<div class="history">
<h3>История персонажа</h3><br>
Уже и не помнит, сколько времени прошло с тех пор, как всё началось. Хотя правильнее будет сказать, что и не пытался запомнить подобное, ведь время течёт как песок сквозь пальцы.<br>
А ещё это скучно.<br>
Куда интереснее наблюдать за душами, что пытаются выставить свои слова за истину первой инстанции. Порой даже не скрывая, что они лгут.<br>
Одни рассказывают свою историю, стараясь обелить себя как можно сильнее, в итоге закапываясь ещё глубже в яму лжи, другие — отчаянно кричат, стараясь добиться правды.<br>
Даниэл, после вселения в человеческую оболочку, решил пойти работать в суд. Столь забавное место, считающееся оплотом истины в человеческом мире. Тот самый театр, где чаще лгут в надежде одолеть оппонента. И среди всего этого скрывается единственная в своём роде истина, которую нужно найти для вынесения вердикта. Что ни на есть идеальное место для такого ангела, как он. Ангел часто наблюдал за эмоциями на лицах других людей, запомнив со временем психологические и поведенческие структуры многих из них. Из-за сложившейся привычки, научился быстро понимать есть ли скрытые мотивы у его собеседника, пользуясь этим при желании или необходимости.<br>
Но и в каждой справедливой бочке мёда есть некоторая нежеланная посторонними ложка дёгтя. И этой ложкой стало то, что Лайт не терпит отклонений от "своего" плана. Его внешне идеальная система должна быть идеальной и внутри. А потому даже шаги в сторону у подчинённых должны быть строго в рамках, не влияющих на идеальную работу. Каждая шестерёнка системы должна работать без малейшего скрипа. Насколько это может сломать шестерёнку? Кто знает. Но трещины не будет видно, если хорошенько их обработать. А если шестерня попытается соскочить с её места — всегда можно прикрепить её обратно и затянуть получше. Ну а если шестерня сломалась — её нужно починить, пока это возможно. Габриэль несомненно готов заниматься починкой своих любимых "шестерёнок" снова и снова. Пока те не сломаются настолько, что починить их и вернуть к работе не станет невозможным.<br>
Но что же есть в его понимании "починка"? Конечно это значит убрать всё, что мешает работе. Даже если это другие люди.<br>
Даже если это дорогие люди для его шестерёнок.<br>
Ничто не должно влиять на его отлаженную систему. Особенно взгляд и мнение постороннего.<br>
Даниэл со старанием хирурга отделит всё лишнее, по его нескромному мнению, оставив только нужное. Не считаясь со мнением тех, кто этим "лишним" обладал.<br>
И как только закончит, он снова станет для всех бочкой мёда. Добрый, порядочный, спокойный и, быть может, даже немного изящный в действиях. С мягкой улыбкой на лице, предлагающей идти за ним в этот путь дальше. Путь белый, чистый и прекрасный, на котором ни за что не увидишь чёрную как ночь яму, способную утянуть любого оступившегося.
<br><br>
<u>Незначительные факты:</u><br>
— Почти всегда старается носить на руках перчатки.<br>
— Из напитков предпочитает чай.<br>
— Не любит острое, но любит сладкое.<br>
— Не любит запах палёных волос и шерсти (что весьма иронично, учитывая способность).<br>
</div> </div>
</div>
<script>
function openProfile(evt, Face) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(Face).style.display = "block";
evt.currentTarget.className += " active";
}
//Делаем активной одну вкладку
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>[/html]
