[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
<style>#ship1 {
--sh1mr: auto; /* отступ слева, auto - для отцетровки */
--sh1w1: 590px; /* ширина карточки */
--sh1bg: #d4d4d3; /* фон карточки */
--sh1br: #141513; /* цвет текста и рамки */
--sh1cl1: #252525; /* цвет заголовка */
}
#ship1 {display:block; padding:40px; margin: 1.2em auto 1.2em var(--sh1mr); background:var(--sh1bg); outline: 1px solid var(--sh1bg); outline-offset:0px; width:var(--sh1w1); border-radius: 10px 10px 10px 10px;} /* 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 rgba(112, 190, 108, 0.15); text-align: center; margin: 35px auto auto;}
/*** ЗАГОЛОВОК ***/
#ship1 > em {display:block; margin: -10px auto 16px auto; text-align: center; font-style: normal !important; letter-spacing:1px; color: #252525!important); font-family: Oranienbaum, Georgia, sans-serif; font-size: 32px;}
/*** БЛОК ТЕКСТА ***/
#ship1 > .btext { color: #141513!important font-family: verdana text-align:justify;}
/*** ПЕРСОНАЖИ ***/
.btext > p {display:block; grid-column:-2 / -1; grid-row:1 / -1; padding-left:14px; text-align:justify;}
</style>
<div id="ship1"><div class="shiprs">
<!-- ЗДЕСЬ АВАТАРЫ -->
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/d2/26/3/290871.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/d2/26/3/103736.png)"></div>
<div class="shiav" style="background-image:url(https://forumupload.ru/uploads/001b/d2/26/3/938801.png)"></div>
</div>
<em> хэдканоны </em>
<div class="btext"><p>
</p>
<p>Изменить можно любой факт из написанного: внешность, биографию, имя.
</p>
</div></div>
[/html]
