Отношения
Наведи на картинку, чтобы узнать больше!
† - мёртв; * - НПС
Племя Бури
Приют. Привязанность
[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet">
<style>.shrama {
--shm0: 926px; /* ширина рамы-ограничителя */
--smp0: 270px; /* максимальная ширина карточки */
--shh1: 270px; /* высота блока */
--smp1: 30px; /* внутренний отступ от краев */
--clrp: #b6b4b1; /* цвет внутреннего текста */
--clrt: 1em; /* размер внутреннего текста */
--clrta: #ffc072; /* цвет имени */
--clrba: #949494; /* цвет краткого описания */
}
.shrama {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width:100%; max-width:var(--shm0); margin-left: 50px;} .shrama * {box-sizing:border-box;}
.ship18 {display:inline-block; position:relative; width: calc(100% - 8px); max-width: var(--smp0); height: var(--shh1); margin: auto 4px 10px 4px; font-size:var(--clrt); font-family: Tahoma, Verdana, sans-serif; overflow: hidden;}
/*** блок с картинкой shipovnik ***/
.shins {background: 50% 50% no-repeat; background-size: cover; box-sizing:border-box; position: absolute; width: 100%; height: 100%; filter: grayscale(0.5); mix-blend-mode: multiply; opacity: 1;}
/*** блок с подложкой-затемнением ***/
.shtext {display:flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; position:absolute; box-sizing: border-box; padding: calc(var(--smp1) * 1.5) var(--smp1) var(--smp1); height: 100%; width: 100%; background: rgba(0,0,0,0); transition: background 0.9s 0.5s;}
.shtext:hover {background: rgba(0,0,0,0.7); transition: background 0.95s;}
.shtext p {overflow: auto; padding: 0 6px 0 0 !important; line-height: 130% !important; text-align: center; box-sizing: border-box; width: 100%; text-shadow: 0 1px 3px #000; color: var(--clrp);}
.shtext p, .shtext:hover p:nth-child(2) {max-height: calc(var(--shh1) - var(--smp1) * 4.5);}
/*** подробный текст отношений-описаний ***/
.shtext p:nth-child(2){background:transparent; transform: scale(0); opacity: 0; transition: all 0.4s 0s;}
.shtext:hover p:nth-child(2){opacity: 1; height: auto; transform: scale(1); transition: all 0.6s 0.4s; }
.shtext p::-webkit-scrollbar {width: 3px; height:3px; background-color: transparent;}
.shtext p::-webkit-scrollbar-thumb {background: rgba(134,134,134, 0.35);}
/*** Имя и краткое описание ***/
.shtext p:first-child, .shtext p:last-child {width: calc(100% - var(--smp1) * 2);}
.shtext p:first-child, .shtext p:first-child a {font-family: 'Oranienbaum', Tahoma, serif; font-size: 18px; text-transform: uppercase; color: var(--clrta) !important;}
.shtext p:first-child a:hover {filter: brightness(1.2);}
.shtext p:first-child {transition: all 2s; position: absolute; top: calc(var(--shh1) - var(--smp1) * 3); transition: top 0.65s 0.2s;}
.shtext p:last-child {font-family: 'PT Sans', Tahoma, sans-serif; font-size: 11px; position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.8); color: var(--clrba); transition: top 0.5s 0.1s;}
.shtext:hover p:first-child{position: absolute; top: var(--smp1); transition: top 0.7s 0.1s;}
.shtext:hover p:last-child{position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.2); transition: top 0.6s 0.1s;}</style>
<div class="shrama"> <!--- START --->
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/299035.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=802">Беспорядок</a> </p>
<p>
Судя по всему, у этого деда совсем шарики за ролики заехали. Я предпочту держаться на дистанции.
</p><p>
Настороженность
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/175870.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=774">Всплеск</a> </p>
<p>
Слишком пугливая и, как я слышал, болтливая. В её возрасте уже нужно уметь отличать, когда нужно открывать пасть, а когда нужно помолчать.
</p><p>
Пренебрежение
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/309008.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=791">Затишье</a> </p>
<p>
Кажется неплохой кошкой, но она близка к Колючке, ещё и перешла из беззвёздных в культисты. С одной стороны, я сам иногда думаю о переходе, но...
</p><p>
Настороженность
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/599074.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=825">Колючка</a> </p>
<p>
Слишком миролюбива, такой политикой не добьёшься цели. Пока она под контролем власти, я готов с ней мириться, но за ней в качестве лидера я не пойду.
</p><p>
Настороженность, неприязнь
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/435500.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=575">Крылатка</a> </p>
<p>
Слишком горячная для меня, но, кажется, ей удалось очаровать Разрывающего Звёзды. Интересно, чем...
</p><p>
Настороженность, любопытство
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/182829.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=460">Мощный Вихрь</a> </p>
<p>
Взлохмаченный злой беззвёздный. Вполне соответствует своей должности. Вспыльчивый, но что поделать.
</p><p>
Нейтралитет
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/52369.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=772">Разрывающий Звёзды</a> </p>
<p>
Наш предводитель. Обладает твёрдой лапой и принципами, что делает из него неплохого лидера. Думаю, именно он является тем, кто приведёт племя Бури к величию.
</p><p>
Уважение
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/573683.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=842">Раскольчик</a> </p>
<p>
Маленький котёнок. Мордой похож на Разрывающего Звёзды. Наследственность, что сказать.
</p><p>
Нейтралитет
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/892014.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=813">Утонувший Карась</a> </p>
<p>
Мог бы и поменьше жрать. Не люблю настолько повёрнутых на религии. Верующие слишком мало думают головой и слишком много надеются на предков.
</p><p>
Неприязнь
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/186567.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=785">Цапелька</a> </p>
<p>
Будущий беззвёздный. Соотвествует имиджу. Выглядит чуть менее странно, чем его сиблинги, пусть даже и без хвоста.
</p><p>
Нейтралитет
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/808165.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=784">Цыпка</a> </p>
<p>
Отношусь к ней так же, как к Цапельке. Общаться близко с ней и её братом мне не приходилось и слава Сумраку.
</p><p>
Нейтралитет
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/444026.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=775">Эхо Бури</a> </p>
<p>
Я мало кого могу назвать другом, но, наверное, Эхо Бури попадёт под эту категорию. У нас есть что-то общее. Пусть я и не уважаю его слепую преданность Разрывающему Звёзды (при всём моём уважении к нему), в остальном он очень неплох.
</p><p>
Расположение
</p></div></div>
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/628549.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=783">Яйцелап</a> </p>
<p>
Наши травники такие стрёмные
</p><p>
почему
</p></div></div>
[/html]
Грозовое племя
Неприязнь
Пока что здесь пусто!
Небесное племя
Неприязнь, напряжение
Пока что здесь пусто!
Племя Ветра
Неприязнь
Пока что здесь пусто!
Племя Теней
Неприязнь
Пока что здесь пусто!
Речное племя
Открытая враждебность
[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet">
<style>.shrama {
--shm0: 926px; /* ширина рамы-ограничителя */
--smp0: 270px; /* максимальная ширина карточки */
--shh1: 270px; /* высота блока */
--smp1: 30px; /* внутренний отступ от краев */
--clrp: #b6b4b1; /* цвет внутреннего текста */
--clrt: 1em; /* размер внутреннего текста */
--clrta: #ffc072; /* цвет имени */
--clrba: #949494; /* цвет краткого описания */
}
.shrama {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width:100%; max-width:var(--shm0); margin-left: 50px;} .shrama * {box-sizing:border-box;}
.ship18 {display:inline-block; position:relative; width: calc(100% - 8px); max-width: var(--smp0); height: var(--shh1); margin: auto 4px 10px 4px; font-size:var(--clrt); font-family: Tahoma, Verdana, sans-serif; overflow: hidden;}
/*** блок с картинкой shipovnik ***/
.shins {background: 50% 50% no-repeat; background-size: cover; box-sizing:border-box; position: absolute; width: 100%; height: 100%; filter: grayscale(0.5); mix-blend-mode: multiply; opacity: 1;}
/*** блок с подложкой-затемнением ***/
.shtext {display:flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; position:absolute; box-sizing: border-box; padding: calc(var(--smp1) * 1.5) var(--smp1) var(--smp1); height: 100%; width: 100%; background: rgba(0,0,0,0); transition: background 0.9s 0.5s;}
.shtext:hover {background: rgba(0,0,0,0.7); transition: background 0.95s;}
.shtext p {overflow: auto; padding: 0 6px 0 0 !important; line-height: 130% !important; text-align: center; box-sizing: border-box; width: 100%; text-shadow: 0 1px 3px #000; color: var(--clrp);}
.shtext p, .shtext:hover p:nth-child(2) {max-height: calc(var(--shh1) - var(--smp1) * 4.5);}
/*** подробный текст отношений-описаний ***/
.shtext p:nth-child(2){background:transparent; transform: scale(0); opacity: 0; transition: all 0.4s 0s;}
.shtext:hover p:nth-child(2){opacity: 1; height: auto; transform: scale(1); transition: all 0.6s 0.4s; }
.shtext p::-webkit-scrollbar {width: 3px; height:3px; background-color: transparent;}
.shtext p::-webkit-scrollbar-thumb {background: rgba(134,134,134, 0.35);}
/*** Имя и краткое описание ***/
.shtext p:first-child, .shtext p:last-child {width: calc(100% - var(--smp1) * 2);}
.shtext p:first-child, .shtext p:first-child a {font-family: 'Oranienbaum', Tahoma, serif; font-size: 18px; text-transform: uppercase; color: var(--clrta) !important;}
.shtext p:first-child a:hover {filter: brightness(1.2);}
.shtext p:first-child {transition: all 2s; position: absolute; top: calc(var(--shh1) - var(--smp1) * 3); transition: top 0.65s 0.2s;}
.shtext p:last-child {font-family: 'PT Sans', Tahoma, sans-serif; font-size: 11px; position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.8); color: var(--clrba); transition: top 0.5s 0.1s;}
.shtext:hover p:first-child{position: absolute; top: var(--smp1); transition: top 0.7s 0.1s;}
.shtext:hover p:last-child{position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.2); transition: top 0.6s 0.1s;}</style>
<div class="shrama"> <!--- START --->
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/726792.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=657">Брусничка [???]</a> </p>
<p>
Из всех своих сиблингов я, пожалуй, больше всего хотел бы найти её. Мы через столькое прошли вместе. Я не смогу поверить в то, что она тоже могла бы меня предать.
</p><p>
Сестра; воспоминания
</p></div></div>
<!--- END ---></div>[/html]
Чужие Земли
Родной дом. Настороженный интерес
[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet">
<style>.shrama {
--shm0: 926px; /* ширина рамы-ограничителя */
--smp0: 270px; /* максимальная ширина карточки */
--shh1: 270px; /* высота блока */
--smp1: 30px; /* внутренний отступ от краев */
--clrp: #b6b4b1; /* цвет внутреннего текста */
--clrt: 1em; /* размер внутреннего текста */
--clrta: #ffc072; /* цвет имени */
--clrba: #949494; /* цвет краткого описания */
}
.shrama {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width:100%; max-width:var(--shm0); margin-left: 50px;} .shrama * {box-sizing:border-box;}
.ship18 {display:inline-block; position:relative; width: calc(100% - 8px); max-width: var(--smp0); height: var(--shh1); margin: auto 4px 10px 4px; font-size:var(--clrt); font-family: Tahoma, Verdana, sans-serif; overflow: hidden;}
/*** блок с картинкой shipovnik ***/
.shins {background: 50% 50% no-repeat; background-size: cover; box-sizing:border-box; position: absolute; width: 100%; height: 100%; filter: grayscale(0.5); mix-blend-mode: multiply; opacity: 1;}
/*** блок с подложкой-затемнением ***/
.shtext {display:flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; position:absolute; box-sizing: border-box; padding: calc(var(--smp1) * 1.5) var(--smp1) var(--smp1); height: 100%; width: 100%; background: rgba(0,0,0,0); transition: background 0.9s 0.5s;}
.shtext:hover {background: rgba(0,0,0,0.7); transition: background 0.95s;}
.shtext p {overflow: auto; padding: 0 6px 0 0 !important; line-height: 130% !important; text-align: center; box-sizing: border-box; width: 100%; text-shadow: 0 1px 3px #000; color: var(--clrp);}
.shtext p, .shtext:hover p:nth-child(2) {max-height: calc(var(--shh1) - var(--smp1) * 4.5);}
/*** подробный текст отношений-описаний ***/
.shtext p:nth-child(2){background:transparent; transform: scale(0); opacity: 0; transition: all 0.4s 0s;}
.shtext:hover p:nth-child(2){opacity: 1; height: auto; transform: scale(1); transition: all 0.6s 0.4s; }
.shtext p::-webkit-scrollbar {width: 3px; height:3px; background-color: transparent;}
.shtext p::-webkit-scrollbar-thumb {background: rgba(134,134,134, 0.35);}
/*** Имя и краткое описание ***/
.shtext p:first-child, .shtext p:last-child {width: calc(100% - var(--smp1) * 2);}
.shtext p:first-child, .shtext p:first-child a {font-family: 'Oranienbaum', Tahoma, serif; font-size: 18px; text-transform: uppercase; color: var(--clrta) !important;}
.shtext p:first-child a:hover {filter: brightness(1.2);}
.shtext p:first-child {transition: all 2s; position: absolute; top: calc(var(--shh1) - var(--smp1) * 3); transition: top 0.65s 0.2s;}
.shtext p:last-child {font-family: 'PT Sans', Tahoma, sans-serif; font-size: 11px; position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.8); color: var(--clrba); transition: top 0.5s 0.1s;}
.shtext:hover p:first-child{position: absolute; top: var(--smp1); transition: top 0.7s 0.1s;}
.shtext:hover p:last-child{position: absolute; top: calc(var(--shh1) - var(--smp1) * 1.2); transition: top 0.6s 0.1s;}</style>
<div class="shrama"> <!--- START --->
<div class="ship18">
<div class="shins" style="background-image: url(https://upforme.ru/uploads/001a/f4/24/616/528549.jpg);"></div>
<div class="shtext">
<p> <a href="https://cwnazare.mybb.ru/profile.php?id=44">Лис</a> </p>
<p>
Я тебе не доверяю.
</p><p>
Насмешка, неприязнь
</p></div></div>
<!--- END ---></div>[/html]
- Подпись автора





меня не отключить словами
"стоп" или "довольно";
плачь, я хочу понять, что значится слово больно.