[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship8 {
--sh1: 80px;   /* ширина и высота картинки */
--sh2: #464646;   /* цвет описания персонажа и рамки */
}

#ship8 {  max-width: 700px;  /*** ограничить ширину блока ***/
display:flex; flex-wrap: wrap; position:relative; overflow:hidden; width:100%; height:auto; box-sizing:border-box; padding-top: 10px;}
#ship8 * {box-sizing:border-box;}
/* весь блок карточки */
.shipp {display:flex; flex-direction: row; width: calc(100% - 14px); min-height: calc(var(--sh1) + 20px); margin-bottom: 28px !important; margin-right: 0px !important;}
.shipp:last-child {margin-bottom:0px !important;}
/* круг */
.krt {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; outline: 1px solid var(--sh2); outline-offset: 6px; margin: 6px 16px auto 10px !important;}
.kar {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; text-align: left;}
/* имя */
.namep {line-height:110%; font-family: 'Oswald', Tahoma, sans-serif; font-size: 20px;}
/* описание */
.namp {margin-top:4px !important; color: var(--sh2); font-size: 10px;}
/* текст */
.shipp p {display:block; padding:0 !important; margin-top:10px !important; font-family: Tahoma, Arial, sans-serif; line-height:130% !important; text-align: justify;}
</style><div id="ship8"><!-- START -->

<!-- ПЕРСОНАЖ_1 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/759043.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#"> СЛЕПОЙ</a></span>
   <div class="namp">Хозяин Дома, вожак четвёртой</div>
   <p>
● его слово реально – закон<br>
● шампунь?  что это?<br>
● нарушает заповеди, творит себе кумира<br>
● его вкусы весьма специфичны, вы можете не понять<br>
● спокойнее него только покойники<br>
● это не лохмотья, а стиль! <br>
● псс, парень! не хочешь немного изнанки?<br>
   </p></div></div>

<!-- ПЕРСОНАЖ_2 -->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/754760.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">РЫЖИЙ</a></span>
   <div class="namp">Вожак Крыс</div>
   <p>
● хоп, наколочки! хоп, татуировочки!<br>
● тот, кто в магазине всегда отвечает, что он со своим пакетом<br>
● живёт в мире зеленого цвета <br>
● уверяет, что смерти нет<br>
● специфическое представление о сочетании цветов<br>
● sex, drugs, rock-n-roll!<br>
● не для тебя его роза цвела
   </p></div></div>

<!-- ПЕРСОНАЖ_3-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/373840.jpg

)"></div>
</div>
   <div><span class="namep"><a href="#"> СТЕРВЯТНИК</a></span>
   <div class="namp">Вожак Птиц</div>
   <p>
● любитель  черного цвета и ключей<br>
● властелин колец<br>
● dead inside<br>
● фанат фильма «Двое: я и моя тень»<br>
● «называй меня папочка»<br>
● хороший музыкальный вкус<br>
● stressed, depressed but still well dressed
   </p></div></div>

<!-- ПЕРСОНАЖ_4-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/779682.png)"></div>
</div>
   <div><span class="namep"><a href="#">ЛОРД</a></span>
   <div class="namp">Эльфийский принц</div>
   <p>
● сын маминой подруги<br>
● голубая кровь, белая кость<br>
● однажды прибьёт кого-нибудь<br>
● пассивная агрессия или агрессивная пассия?<br>
● проиграл в карты ум, честь и совесть, но потом выиграл их обратно<br>
● стильный, модный, молодежный<br>
● не любит смотреться в зеркало
   </p></div></div>

<!-- ПЕРСОНАЖ_5-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/368879.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">ШАКАЛ ТАБАКИ</a></span>
   <div class="namp">Хранитель Времени</div>
   <p>
● способен задолбать кого угодно<br>
● источник бесконечных песен и историй<br>
● какие-то проблемы с измерительными механизмами<br>
● синдром Плюшкина<br>
● тащит в четвёртую всё, что не прибито к полу<br>
● скуп на подарки, но если что-то дарит, то от души<br>
● когда-нибудь он заткнется и вселенная схлопнется
   </p></div></div>

<!-- ПЕРСОНАЖ_6-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/53952.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">ЧЁРНЫЙ</a></span>
   <div class="namp">Будущий вожак Псов</div>
   <p>
● всем ЗОЖ!<br>
● подарите ему собаку<br>
● угоняет автобусы просто потому, что может<br>
● лучше 10 отжиманий могут быть только 20 отжиманий<br>
● ему лучше не наливать<br>
● недооценённый лидер<br>
● прыгунов и ходоков нет!
   </p></div></div>

<!-- ПЕРСОНАЖ_7-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/870051.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">ВОЛК</a></span>
   <div class="namp">Претендент</div>
   <p>
● не выступает в цирке<br>
● зато отлично выступает перед товарищами <br>
● за друзей и двор стреляет в упор<br>
● его мысли пахнут не так, как его слова<br>
● оригинальная причёска<br>
● почему-то не вожак, но хочет<br>
● ревность – плохое чувство
   </p></div></div>

<!-- ПЕРСОНАЖ_8-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/541521.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">СФИНКС</a></span>
   <div class="namp">Мать Дома</div>
   <p>
● «за мои зелёные глаза называешь ты меня колдуньей»<br>
● склонен говорить загадками<br>
● комфортный парень, но, как говорится, есть нюанс<br>
● повидал кое-какого дерьма<br>
● dead inside, да и снаружи не лучше <br>
● умеет слушать и слышать<br>
● плевать хотел на чужое мнение
   </p></div></div>

<!-- ПЕРСОНАЖ_9-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/855981.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">ГОРБАЧ</a></span>
   <div class="namp">Четвёртая</div>
   <p>
● диснеевская принцесса<br>
● не фокусник, но в его шляпе наверняка найдется пара кроликов<br>
● «ребята, давайте жить дружно!» <br>
● творческая натура<br>
● творческий, но застенчивый<br>
● Карлсон живёт на крыше, а он - на дереве<br>
● в переулках каждая собака знает его лёгкую походку
   </p></div></div>

<!-- ПЕРСОНАЖ_10-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/589241.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">КУРИЛЬЩИК</a></span>
   <div class="namp">Бывший Фазан</div>
   <p>
● минздрав уже устал предупреждать<br>
● любитель нестандартной обуви<br>
● «какой же Лорд красивый!..»<br>
● художник от слова «худо»<br>
● хочет задать миллион вопросов, но понимает, что себе дороже<br>
● а ещё он был котом!<br>
● «дорогой дневник!..»
   </p></div></div>

<!-- ПЕРСОНАЖ_11-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/224501.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">БАНДЕРЛОГ ЛЭРИ</a></span>
   <div class="namp">Вожак Логов</div>
   <p>
● не трепло, а коммуникабельный<br>
● узнает о происшествии до того, как оно случилось<br>
● стильные шмотки<br>
● в душе – романтик<br>
● два дебила - это сила<br>
● не трогайте его пластинки<br>
● лучше подскажите ему хорошее средство от акне
   </p></div></div>

<!-- ПЕРСОНАЖ_12-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/647860.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">КРЫСА</a></span>
   <div class="namp">Летун</div>
   <p>
● «гляжусь в тебя как в зеркало до головокружения…»<br>
● у нее лезвие под ногтями<br>
● но это не точно<br>
● не самая общительная девушка<br>
● зато может сгонять тебе за сигаретами в ларёк<br>
● проблемы с предками
   </p></div></div>

<!-- ПЕРСОНАЖ_13-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/263993.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">РЫЖАЯ</a></span>
   <div class="namp">Сестра Рыжего</div>
   <p>
● чайка Джонатан Ливингстон<br>
● мастер промышленного альпинизма с 11 лет<br>
● очень хочется на изнанку<br>
● материнский инстинкт<br>
● тот случай, когда сама согласна, чтобы парень был ходок<br>
● отхватила самого красивого парня, но рада не от души<br>
● или всё же рада?
   </p></div></div>

<!-- ПЕРСОНАЖ_14-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/798849.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">ДЛИННАЯ ГАБИ</a></span>
   <div class="namp">Мечта поэта</div>
   <p>
● низкая социальная ответственность <br>
● самые длинные ноги на диком западе<br>
● чем выше любовь, тем ниже поцелуи<br>
● чулки со стрелками как стиль<br>
● участвовала в «беременна в 16» до того, как это стало мейнстримом<br>
● зато человек хороший!<br>
● но это не точно
   </p></div></div>

<!-- ПЕРСОНАЖ_15-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/702817.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">РУСАЛКА</a></span>
   <div class="namp">Девушка Сфинкса</div>
   <p>
● то ли девочка, а то ли виденье<br>
● модные жилетки<br>
● хиппи приняли бы её за свою<br>
● сделала первый шаг и не прогадала <br>
● она Русалка только потому, что про Рапунцель в Доме не слышали<br>
● пока все ищут парней, она ищет любовника<br>
● милая, но может наорать и на воспитателей
   </p></div></div>

<!-- ПЕРСОНАЖ_16-->
<div class="shipp"><div class="krt">
   <div class="kar" style="background-image:url(https://forumupload.ru/uploads/001b/fb/40/3/388590.jpg
)"></div>
</div>
   <div><span class="namep"><a href="#">СПИЦА</a></span>
   <div class="namp">Девушка Лэри</div>
   <p>
● «как же тебе повезло, моей невесте!..»<br>
● не анорексичка, а стройная как модель<br>
● не ждёт предложения, а ходит сразу в фате<br>
● вязаные вещи – это тренд<br>
● внешне хрупкая, но запросто строит благоверного и его дружков<br>
● та самая скромница из класса, которая первая вышла замуж<br>
● королева Логов
   </p></div></div>
<!-- END --></div>[/html]

*Внешности, использованные в данной акции, применены исключительно в демонстрационных целях. Каждый, решивший играть канона, волен сам выбирать внешность для своего персонажа.