[html]<div id="ship1">
<div class="shiprs">
<!-- ЗДЕСЬ АВАТАРЫ -->
<div class="shiav" style="background-image:url(https://i.gyazo.com/ff669ae7318e5c2bdc2 … 8577ca.png)"></div>
<div class="shiav" style="background-image:url(https://i.gyazo.com/e1b464e63d4d31996dc … c1ad64.png)"></div>
</div>
<em>Os Scaphoideum</em>
<div class="btext">
<div class="charsblock">
<div class="chars">Сказитель</div>
<div class="chars">Принцесса</div>
</div>
<p><br>14 марта
<br>Гавань Лиюэ
</p>
<div class="topicDescription">Тихая ночь, первая после пожарища и последняя перед фестивалем, как единственное время для прогулки двух призраков по сгоревшей Гавани. Неуловимая боль в костях запястий от неожиданно и пронзительно нежных касаний рук. Тёмный омут горячей ванны.
<br>
<div style="margin-left: -10px; margin-top: 32px;"><iframe width="560" height="315" src="https://www.youtube.com/embed/s0NME1GfbIc?si=NMemZ0kPozt7CjI_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
<p>ещё до людей здесь были кости<br>「срок написания постов: ∞」</p>
</div>
</div>
<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: #0B0C11;
/* фон карточки */
--sh1br: #DADADA;
/* цвет текста и рамки */
--sh1cl1: #3190BE;
/* цвет заголовка */
--bgSrc: url(https://c4.wallpaperflare.com/wallpaper … review.jpg);
/* ссылка на фон внизу */
--bgPos: 50% 0%;
/* смещение фона внизу */
}
#ship1 {
display: block;
padding: 40px 40px 10px 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: 4px auto 12px !important;
text-align: center !important;
font-style: normal;
font-size: 12px !important;
opacity: 0.65;
font-family: 'Genshin';
}
.charsblock {
text-align: center !important;
margin-left: auto;
margin-right: auto;
display: block;
line-height: 16px;
}
.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: -58px;
margin-left: -90px;
padding: 0px 30px 100px 30px;
font-family: 'Genshin';
}
</style>[/html]
Отредактировано Abyss Princess (2023-11-03 17:52:46)
