[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: #000000;
/* фон карточки */
--sh1br: #f9f9f9;
/* цвет текста и рамки */
--sh1cl1: #99001e;
/* цвет заголовка */
--bgSrc: url(https://forumupload.ru/uploads/001b/5c/ … 603555.png);
/* ссылка на фон внизу */
--bgPos: 40% 65%;
/* смещение фона внизу */
}
#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.5) 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/7f/209/26030.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/5c/ … 752007.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/5c/ … 203857.png)"></div>
</div>
<em>Все их [ночи] вместе</em>
<div class="btext">
<div class="charsblock">
<div class="chars">Свят</div>
<div class="chars">Заки</div>
<div class="chars">Софи</div>
</div>
<p><br>все те ночи в приюте госпожи Арлекино
<br>все эти ночи в лесах Спрингвэйла этим летом
<br><br>Внимание! Эпизод содержит сцены, не рекомендуемые к ознакомлению кому-либо.
</p>
<div class="topicDescription">Порочный альманах страстей человеческих. <br>Из подпола вытащенные детские сокровища, — кости птиц, девичьи ленты, краденные конфеты, отрубленные пальцы, — да из карманов вывернутые загадки грешной людской натуры.</div>
</div>
</div>
[/html]