[html]
<style>
@font-face {
font-family: "Genshin";
src: url("https://forumstatic.ru/files/0014/98/d3/50051.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
#ship1 {
--sh1mr: auto !important;
/* отступ слева, auto - для отцетровки */
--sh1w1: 600px;
/* ширина карточки */
--sh1bg: #1B5745;
/* фон карточки */
--sh1br: #E5D2B5;
/* цвет текста и рамки */
--sh1cl1: #CBAC7E;
/* цвет заголовка */
--bgSrc: url(https://i.gyazo.com/309f7c0caa58444926b … e4c11f.jpg);
/* ссылка на фон внизу */
--bgPos: 40% 0%;
/* смещение фона внизу */
}
#ship1 {
display: block;
padding: 40px;
margin-top: 11px;
margin-bottom: 11px;
margin-left: 34px;
margin-right: auto;
background: var(--sh1bg);
outline: 1px solid var(--sh1bg);
outline-offset: 10px;
width: var(--sh1w1);
}
/* shipovnik */
#ship1,
#ship1 * {
box-sizing: border-box;
}
/* АВАТАРКИ КАРТИНКИ */
.shiav {
width: 70px;
height: 70px;
margin: auto 8% auto auto;
display: inline-block;
border-radius: 50%;
background: var(--sh1bg);
border: 1px solid var(--sh1br);
transform: translate(0%, -50%);
transition: all 0.3s ease;
background-position: 50% 50%;
background-size: cover;
}
.shiav:last-child {
margin-right: 0px;
}
.shiav:hover {
transition: all 0.3s ease;
transform: scale(1.2) translate(0%, -40%);
}
/* БЛОК АВАТАРОК */
.shiprs {
display: block;
border-top: 1px solid var(--sh1br);
text-align: center;
margin: 20px auto auto;
}
/*** ЗАГОЛОВОК ***/
#ship1>em {
display: block;
margin: -10px auto 16px auto;
text-align: center;
font-style: normal !important;
letter-spacing: 1px;
color: var(--sh1cl1);
font-family: Genshin;
font-size: 20px;
}
/*** БЛОК ТЕКСТА ***/
#ship1>.btext {
padding: 0 50px;
font-size: 12px;
color: var(--sh1br);
font-family: Arial, Tahoma, sans-serif;
text-align: center;
}
/*** ПЕРСОНАЖИ ***/
.btext>p {
margin: auto !important;
text-align: center !important;
font-style: normal;
font-size: 12px !important;
opacity: 0.65;
font-family: 'Genshin';
}
.charsblock {
text-align: center !important;
margin-bottom: -15px;
margin-left: auto;
margin-right: auto;
display: block;
}
.chars {
font-family: Genshin;
font-size: 16px !important;
text-align: center !important;
margin-bottom: -15px;
display: inline;
}
.chars:before {
content: '\2726 ';
color: var(--sh1cl1);
margin-right: 5px;
margin-left: 5px;
}
.chars:after {
content: '\2726 ';
color: var(--sh1cl1);
margin-left: 5px;
margin-right: 5px;
}
.topicDescription {
background-image: linear-gradient(var(--sh1bg) 30%, transparent), var(--bgSrc);
background-size: cover;
background-position: var(--bgPos);
text-align: center;
font-size: 14px;
line-height: 1.2em;
width: var(--sh1w1);
margin-bottom: -40px;
margin-left: -90px;
padding: 0px 30px 100px 30px;
font-family: 'Genshin';
}
</style>
<div id="ship1">
<div class="shiprs">
<!-- ЗДЕСЬ АВАТАРЫ -->
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/5c/ … 810924.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/5c/ … 191109.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/5c/ … 323205.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/5c/7f/194/73244.png)"></div>
</div>
<em>Эпистолярное правосудие</em>
<div class="btext">
<div class="charsblock">
<div class="chars">Сайно</div>
<div class="chars">Тигнари</div>
</div>
<p><br>в разное время,
<br>письмами, отчётами, посылками
</p>
<div class="topicDescription">Архив всех бумаг, пересылаемых между Гандхарвой и крылом матр в Академии. Ничего необычного в них на первый взгляд нет: данные об экспедициях учёных в лес, обратные сведения патрульных, сводка преступников или мест повышенной опасности, обычная рутина хранителей безопасности Сумеру.<br><br>Но стоит применить к письму в верном порядке воздействие энергий Электро и Дендро, как с обратной стороны бумаги, между строк, поверх очевидных записей проявятся другие слова, выведенные чернилами секретного состава.</div>
</div>
</div>
[/html]
Отредактировано Tighnari (2022-11-08 07:40:21)