шаблон от шиповника с рено
[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet"><style>
.ship10 {
--sh1: 80px; /* ширина и минимальная высота картинки */
--sh2: #ffffff; /* цвет карточки */
--sh3: 700px; /* максимальная ширина шаблона */
}
.ship10 {display:flex; flex-wrap: wrap; position:relative; width:100%; height:auto; box-sizing:border-box; padding: 8px 0 0 8px;
max-width: var(--sh3);} .ship10 * {box-sizing:border-box; /*shipovnik*/}
.ship10 .karta {display:block; width: calc(50% - 20px); text-align: justify; margin-right: 30px !important; margin-bottom: 28px !important;}
.ship10 .karta:nth-child(2n) {margin-right: 0px !important;}
.ship10 .karta:last-child {margin-bottom: 8px !important;}
.ship10 .kartin {display:inline-block; float:left; padding: 10px 10px 8px 10px; margin: auto 10px 4px auto !important; width: calc(var(--sh1) + 20px); height:auto; transform: rotate(4deg); text-align:center; background: var(--sh2); box-shadow: 0 1px 4px rgba(0,0,0,0.35);}
.ship10 .kart {display:block; width: var(--sh1); height: var(--sh1); background: 50% 50% no-repeat transparent; background-size:cover;}
.ship10 p {display: inline; padding: 0 !important; margin: 0px !important; text-align:justify; line-height:120%;}
/* описание в карточке */
.ship10 .pers {display:block; margin-top: 10px !important; word-wrap: break-word; line-height: 110%; font-style: italic; font-family: Arial, Tahoma, sans-serif; font-size: 12px;}
/* имя персонажа в ссылке */
.ship10 .namp {display:block; text-align:center; margin-bottom: 10px !important; line-height: 110%; font-family: 'Oswald', Tahoma, sans-serif; font-size: 22px;}</style>
<div class="ship10"><!-- START -->
<!-- ПЕРСОНАЖ_1 -->
<div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://forumupload.ru/uploads/001a/0f/73/101/11596.png)"></div>
<div class="pers"> мама </div></div>
<div class="namp"><a href="https://zovpiemen.rusff.me/viewtopic.php?id=3&p=2#p3246"> Лучезарная </a></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</p></div>
<!-- ПЕРСОНАЖ_2 -->
<div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://forumupload.ru/uploads/001a/0f/ … 810212.png)"></div>
<div class="pers"> папа </div></div>
<div class="namp"><a href="https://zovpiemen.rusff.me/viewtopic.php?id=3&p=2#p3246"> Зубоскал </a></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</p></div>
<!-- ПЕРСОНАЖ_1 -->
<div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://forumupload.ru/uploads/001a/0f/ … 812149.png)"></div>
<div class="pers"> кузен </div></div>
<div class="namp"><a href="https://zovpiemen.rusff.me/profile.php?id=100"> Пересмешник </a></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</p></div>
<!-- ПЕРСОНАЖ_2 -->
<div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://forumupload.ru/uploads/001a/0f/73/100/15871.png)"></div>
<div class="pers"> кузина </div></div>
<div class="namp"><a href="https://zovpiemen.rusff.me/viewtopic.php?id=3#p2826"> Опалённая </a></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</p></div>
<!-- ПЕРСОНАЖ_1 -->
<div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://forumupload.ru/uploads/001a/0f/ … 377058.png)"></div>
<div class="pers"> кузина </div></div>
<div class="namp"><a href="https://zovpiemen.rusff.me/profile.php?id=106"> Орешенка </a></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</p></div>
<!-- ПЕРСОНАЖ_2 -->
<div class="karta"><div class="kartin"><div class="kart" style="background-image:url(https://forumupload.ru/uploads/001a/0f/ … 480255.png)"></div>
<div class="pers"> бабушка </div></div>
<div class="namp"><a href="https://zovpiemen.rusff.me/viewtopic.php?id=3#p2826"> Слеза </a></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</p></div>
<!-- END --></div>[/html]