[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]
ШАБЛОН «ХОЧУ ВИДЕТЬ»:
|
