[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>Ciel de Arrana</h2>
<br>
<span>• <strong>ПОЛ: </strong>Мужской</span>
<br>
<span>• <strong>ДАТА РОЖДЕНИЯ: </strong>29.12.1994</span>
<span>• <strong>ДАТА ВСЕЛЕНИЯ: </strong>16.09.2013</span>
<span>• <strong>ВИЗУАЛЬНЫЙ ВОЗРАСТ: </strong>31 год</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/001c/89/a0/4/204500.png"></div>
</div>
</div>
</div>
</div>
<span>• <strong>ВНЕШНОСТЬ: </strong> Twisted Wonderland — Divus Crewel</span>
<span>• <strong>РОСТ/ВЕС: </strong>172/71 • <strong>ЦВЕТ ВОЛОС/ГЛАЗ: </strong>пепельные и черные/ голубые</span><br>
<span>Невысокий, очень импозантный и видный молодой человек. При первом знакомстве совершенно непонятно, что цепляет больше: то ли волосы, чётко разделенные на чёрную и белую стороны, то ли перчатки, извечный атрибут де Арраны, то ли пристальный взгляд и словно замороженные в усмешке губы.<br>
Внешность — бунт подросткового периода, направленный против привычных устоев семьи, позже переросший в фирменный стиль. Брюки, рубашки, жилетки, вычищенные до блеска классические ботинки на работе. Тёмные водолазки с горлом, уютные свитера, футболки, джинсы и кроссовки в неформальной обстановке. Неизменными остаются разве что перчатки и мундштук, который Сиэль использует и как указку, и как предупреждение “вот за эту линию не заступай”, и как продолжение среднего пальца.<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> >2 млн лет</span><br>
<span>• <strong>ПОЛ:</strong> Мужской</span><br>
<span>• <strong>ФРАКЦИЯ:</strong> Конвентум (Демоны)</span><br>
<span>• <strong>ДОЛЖНОСТЬ:</strong> Архидемон </span>
<br>
<span>• <strong>ВНЕШНОСТЬ: </strong>AI Art</span>
</div>
<img src="https://upforme.ru/uploads/001c/89/a0/4/514031.jpg" class="avatar" style="object-fit: cover;">
</div>
<span>Первичная внешность неизвестна, однако со временем она трансформировалась в человекоподобную. Вполне вероятно, смертные списали образ дьявола именно с Асмодея, в зависимости от своих верований, добавляя ему те или иные черты.
Маленький, юркий, с широкой улыбкой, густыми вьющимися волосами и длинным хвостом, заканчивающимся самой настоящей кисточкой. Небольшие аккуратные рога обрамлены золотыми кольцами, словно двумя коронами. Руки от локтя и до кончиков длинных когтей черные.<br>
В общем, со стороны не скажешь, что перед тобой древнейшее зло и старший из Иерархов Конвентума.
Нередко изображает из себя ничего не понимающего малолетнего засранца, однако стоит ощутить, что собеседник всерьез воспринимает игривую манеру общения, не понимая, кто перед ним, мгновенно меняет тактику, не скупясь ни на ауру, ни на нецензурщину.<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>
Ранее не умел регулировать уровень воздействия, что нередко создавало слишком увлеченных людей, а на фоне заключения контракта имело глобальные последствия для отдельных категорий человечества.
На сегодня способен контролировать внушаемую степень зависимости от крошечного “хочу”, удовлетворяемого приобретением желаемого, до полного убеждения человека в собственных эмоциях и мыслях, способного вести за собой толпу.
<br><br>
<b>Ограничения/откаты:</b> Может повторно использовать способность не ранее чем через 72 часа, однако чем глубже уровень погружения — тем больше временной разрыв
При небольших воздействиях чувствует головокружение, появляется тремор рук, нарушение координации.
На более серьезных уровнях воздействия появляются провалы в памяти, дезориентация в пространстве, могут случаться длительные обмороки. Последние лет 100 подобные игры не практикует.
</div>
<br>
<div class="history">
<h3>История персонажа</h3><br>
Вначале было что-то. Совершенно точно было. Асмодей этого, конечно не помнит, да и как, если вся крошечная хтоническая песочница в те века толком не обладала сознанием, ведомая лишь двумя инстинктами: “выжить” и “жрать”.
Однако шли века, тысячелетия и другие цифры для исчисления времени, которые обычному человеческому разуму неподвластны. Те, кто был посильнее, не только смогли остаться вживых, пожирая себе подобных, но и возмужали, со временем обретая зачатки разума.<br>
Человечество, внезапно оказавшееся “вкусненьким”, неторопливо развивалось, чему никто не противился, но и контроль за популяцией не устанавливал. Поэтому, несмотря на всегда и везде присутствующий самый сладкий для Асмодея грех, со временем он ощутил, что запасы пополняются не так быстро. Пришлось собирать круглый стол. Идея была прекрасна, но не то чтобы это закончилось чем-то хорошим, потому что вспыльчивого засранца из переговорного зала вытаскивала вся будущая демоническая братия, а Люцифер еще и своим эго помахал, пообещав, что наказаны будут буквально все без исключения.
Не соврал.<br>
То, что случилось более 75 тысяч лет назад — осталось в прошлом на 75 тысяч лет назад. Ну и в памяти тех, кто выжил. С тех пор переговоры в песочнице шли туго, напряжение росло, а сепарация стала неизбежна (почему такие цифры — можете почитать <a href="https://brim.1bb.ru/viewtopic.php?id=37#p5067">тут</a>, рекомендую, очень весёленькая статья).<br>
Пройдя все её этапы, Асмодей лишился своего друга Азариэля и кого-то там своего Сефириона, навсегда вычеркнув обоих из списка единомышленников. Впрочем, второй из этого самого списка вылупился еще раньше. По определенным причинам.
Потом многие века Асмодей восстанавливал ментальное здоровье, растил сотни тысяч отродий, которых отчасти считал своими отпрысками, рушил и восстанавливал человеческие цивилизации, изредка вспоминал общее прошлое с Сефирионом, а из-за вспыльчивости однажды едва не уронил весь Орднунг на пару с Конвентумом в период, который человеки потом назвали “Бронзовый коллапс”.<br>
Больше Люцифер Асмодея к переговорам не допускал.<br>
Да, любимой фразе “фу, что-то ангелами пахнет” что-то около 40 тысяч лет.<br>
Однако, наблюдая за развитием людей и стоя во главе собственной расы, именно он был из тех, кто выступил за создание Бюро, а следом и Договора, отдавая контроль в руки третьей стороне, способной отслеживать перевес и поддерживать баланс сил на арене.
<br><br>
За последние пару тысяч лет какие только жизни Асмодей не прожил на Земле. Очень быстрое развитие последней цивилизации умиляло старого демона, периодами возвращая вкус к повседневности и жизни. Охота за людскими душами давно перестала быть необходимостью для пропитания, оставаясь в основном сугубо удовольствием. Четко отлаженная структура Кругов давала возможность жить на нехилое пособие, занимаясь наблюдениями за людьми в комфортном для себя темпе.
<br><br>
Нынешняя оболочка была выдана Асмодею уже в возрасте 19 лет. По легенде, он из Франции, сынок богатеньких родителей, вышедший из-под контроля и слинявший в Брим от большой ответственности семейного бизнеса. Воспитанный в духе старых европейских традиций, истрепал нервы нянькам, нахамил отцу, не услышал слёзы матери, в 18 лет схватил чемодан то ли шмоток, то ли денег, и со словами “я буду учить детей!” оставил полуобморочную семью разбираться со своими неоправданными ожиданиями самостоятельно. Впрочем, его зад прикрыл старший брат, поэтому со временем Сиэль вышел на относительно нейтральное общение с родственниками. А после смерти отца, когда Габриэль занял место главы семьи, и вовсе стал проводить отпуска в альма матер.<br>
В Бриме поступил в университет, с успехом окончил исторический, после выпуска оставшись на нём преподавать и к 30 годам заняв должность заместителя декана факультета.<br>
Несмотря на достаточно не классическую для такой должности внешность, имеет прекрасные показатели посещаемости и уважение сотрудников. Очень любит своё дело, студентов, коллег (поменьше) и своего декана (совсем нет).
Живет в шикарных апартаментах в самом центре города, владеет раритетным автомобилем Shelby Cobra 427 Super Snake 1966 года и на все вопросы “а как?..” непринужденно ведёт плечом со словами “детка, да тебе и не снилось, как”.
<br><br>
<details><summary>Факты:</summary><br>
* Хтонических детей из Нигиля не вытаскивал, однако в прошлом воплощении тоже был весьма влиятельным человеком, который на фоне не то “живём один раз”, не то старческой деменции, ближе к 60 годам заделал некой мадам ребёночка. Потом выплатил денег и помер, совершенно не интересуясь жизнью своего ребенка.<br>
* Обожает легенды с богатенькими наследниками и папиками, потому что именно в высших кругах самые вкусные грехи и души, которые не только приятно потреблять, но и просто любоваться.<br>
* Курит как паровоз, от чего вынужден иногда менять свои кожаные перчатки на новую пару, поскольку от старых разит табачным дымом.<br>
* Литрами пьет кофе, несмотря на вписанную бюрошниками в историю жизни язву.<br>
* Любит собак. Перед ними теряет буквальное всё свое самообладание, становясь сюсюкающим пупсиком.
</details>
</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]
- Подпись автора
__________________________
Есть нюансы
