Код:
<!--HTML--><!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">
<div class="world-block">
<div class="header">
<span>защитники: описание</span>
</div>
<img src="http://forumupload.ru/uploads/001a/fb/19/74/651561.gif">
</div>
<div class="info1 closed">
<div class="close-btn">— свернуть —</div>
<div>
<h5>Defenders</h5>
<em><a href="https://mayhem.rusff.me/viewtopic.php?id=1412#p191310">American</a> •
<s><a href="https://mayhem.rusff.me/viewtopic.php?id=1412#p191311">Nova</a></s> •
<s><a href="https://mayhem.rusff.me/viewtopic.php?id=1412#p191312">Killjoy</a></s> •
<a href="https://mayhem.rusff.me/viewtopic.php?id=1412#p191313">Hecate</a> •
<a href="https://mayhem.rusff.me/viewtopic.php?id=1412#p191314">Samson</a> •
<s><a href="https://mayhem.rusff.me/viewtopic.php?id=1412#p191315">Viper</a></s></em>
Защитники – новая, главная и самая сильная геройская группа <a href="https://mayhem.rusff.me/viewtopic.php?id=3#p1409">Либерти</a>, созванная как ответ на бедствия последних месяцев. В число бед входит: неконтролируемое <a href="https://mayhem.rusff.me/viewtopic.php?id=3#GiftedEGO">распространение вещества</a>, временно дающего способности простым людям; уничтожение <a href="https://mayhem.rusff.me/viewtopic.php?id=3#HeroesLife">Цитадели</a>, геройской базы и смерть части героев руками бывшего героя; уход из корпорации прежних сильнейших героев в свободное плаванье и <a href="https://mayhem.rusff.me/">создание ими своей организации</a>; цепочка нападений неизвестных одаренных по прозвищу <a href="https://mayhem.rusff.me/viewtopic.php?id=656#p163692">Азиатские Дьяволы</a>, унесшая за собой тысячи невинных жизней; общее поднятие криминальной активности в стране.
Главным критерием отбора в группу была лояльность. Либерти больше не хотят предательств и старались подобрать команду так, чтобы, даже при наличии внутренних разногласий, герои четко следовали приказам и работали на благо не столько страны, сколько корпорации. Да, даже если все они знают о некоторых темных секретах начальства, а часть долгие годы выполняла грязную работу.
У Защитников как проекта большой штат работников – техники, разведчики, координаторы, медики, пиарщики, прочий обслуживающий персонал. В их руках передовые технологии и множество других ресурсов, дающих обширные возможности по выполнению поставленных задач. Они готовы к любой проблеме. Почти к любой.
Пока они ничего не могут сделать с <a href="https://mayhem.rusff.me/">Часовыми</a>, независимой группой героев, только-только получающей официальный юридический статус. Часовые и Защитники являются прямыми соперниками, у некоторых участников по обе стороны есть общие связи из прошлого, уровень симпатии стремится к полному нулю. Смогут они найти общий язык или останутся непонятыми друг другом до конца?
Возможные сюжетные ветки: внутренние отношения; попытки завоевать любовь публики; конфронтации и/или объединение с Часовыми; охота на Азиатских Дьяволов; охота <a href="https://mayhem.rusff.me/viewtopic.php?id=152#p155708">на создателей</a> <a href="https://mayhem.rusff.me/viewtopic.php?id=3#GiftedEGO">ЭГО</a>; впишите свой вариант, ведь историю персонажей будете создавать ВЫ.
***Большую часть информации о персонажах можно изменить по вашему желанию, с удовольствием ответим на все вопросы в гостевой.
</div></div>
</div>
<style>
/* css мироописания от духа */
.world-container {
column-gap: 4px;
margin: 0 auto;
column-count: 2;
width: 808px;
height: 580px;
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.world-block {
margin: 1px 0px; /* нижний и верхний отступ между блоками*/
padding: 0px;
display: inline-block;
line-height: 0;
width: auto; /* ширина блоков */
overflow: hidden;
position: relative;
cursor: pointer;
transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
border-radius: 20px;
}
.world-block .header {
position: absolute;
/* background: linear-gradient(to bottom, rgba(41,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 100%); */
color: #fefefe;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
font: normal 22px/150% 'russo one';
text-transform: uppercase;
z-index: 1;
}
.world-block:hover {
filter: grayscale(100%)
}
.world-block img {
transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
border-radius: 20px;
}
.world-block:hover img {
transform: scale(1.05);
filter: blur(1px)
}
.world-block .header span {
display: flex;
margin-bottom: 20px;
text-align: center;
background: var(--punbbLightBG);
position: absolute;
top: 260px;
width: 500px;
height: 50px;
align-items: center;
justify-content: center;
color: var(--primary-TEXT);
letter-spacing: 2px;
}
.closed {
background: var(--punbbLightBG);
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: calc(100% - 50px);
height: calc(100% - 50px);
padding: 25px;
text-align: left;
display: none;
box-shadow: inset 0 0 0 9px var(--punbbTransBG), inset 0 0 0 10px var(--LightBorder);
border-radius: 25px;
}
.closed > div:not(.close-btn) {
overflow-y: auto;
height: calc(100% - 35px);
white-space: pre-line;
text-align: justify;
color: var(--primary-TEXT);
padding: 0 50px;
font-size: 14px;
}
.close-btn {
background: var(--LightBorder);
height: 18px;
text-transform: uppercase;
text-align: center;
cursor: pointer;
letter-spacing: 2px;
border-radius: 0 0 10px 10px;
margin: -15px 0 10px 0;
font-size: 9px;
font-family: 'Jost';
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.closed h5 {
font: normal 30px russo one; /* шрифт заголовков описания */
margin: 20px 0px 10px;
position: relative;
padding-left: 45px
}
.closed h5:before {
content: "";
height: 10px;
width: 10px;
background: var(--primary-TEXT);
position: absolute;
left: 28px;
top: 50%;
transform: translateY(-50%);
border-radius: 20px;
opacity: 0.7;
}
.closed h5:first-child {
margin-top: 0
}
.closed em {
/* border-right: 15px solid var(--primary-LINK);*/
padding: 0 9px;
font-family: 'Open Sans';
font-style: normal !important;
font-size: 12px;
font-weight: bold;
border-radius: 10px;
text-align: right;
line-height: 0;
height: 6px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
</style>[hideprofile]
