[html]<link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rouge+Script&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->
<div class="prusheen-some" style="background: url(http://forumupload.ru/uploads/001b/03/35/2/274269.png)">
<div class="prusheen-inner">
<div class="prusheen-text">
<span>Dead of Night</span>
<div>
Непогода заставляет случайных прохожих провести вечер в старой лавке на окраине Косой Аллеи и, как это обычно случается, все случайности становятся закономерны стоит часа пробить полночь. Таков закон всех страшных историй, но поймут ли это гости лавки до того, как станет слишком поздно? Всему своё время - отвечает старый дом, сиротливо скалясь на гостей скрипом половиц в пустых коридорах. Сейчас, например, время историй. Ответы будут потом <b>///</b>
<br><u>В квест требуется</u> от трёх, до пяти смельчаков. Мастеринг активный, в ходе квеста можно пострадать как физически, так морально. На пост дается три дня, в случае пропуска - круг заканчивается без вас. В случае повторного пропуска - вы заканчиваетесь без круга. Сюжетные Penny dreadful.
</div></div>
</div>
</div>
<style>
/* css черти чего от вещего духа*/
.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}
.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute;
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text > div {
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}
.prusheen-text > span {
display: block;
text-align: center;
font: 40px rouge script; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}
.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}
.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>[/html]
[html]<link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rouge+Script&display=swap" rel="stylesheet">
<!-- хтмл черти-чего от вещего духа-->
<div class="prusheen-some" style="background: url(http://forumupload.ru/uploads/001b/03/35/2/913774.png)">
<div class="prusheen-inner">
<div class="prusheen-text">
<span>Azkaban Calling</span>
<div>
Так исторически сложилось, что из тюрьмы должны бежать заключенные, а не стражи, однако, в ночь на тринадцатое апреля среди дементоров прокатилась волна несвойственного им оживления. Выглядит это так, словно крысы бегут с тонущего корабля. Министерство отправляет лучших специалистов, чтобы задушить бунт в колыбели, только кто бы не задушил самих специалистов - пленникам не нужно повторять дважды<b>///</b>
<br><u>В квест требуется</u> один/два аврора, один/два специалиста по магическим тварям/ритуалиста и узник замка, готовый к сотрудничеству. Мастеринг активный, в ходе квеста можно пострадать как физически, так морально. На пост дается три дня, в случае пропуска - круг заканчивается без вас. В случае повторного пропуска - вы заканчиваетесь без круга. Сюжетный Escape From Alcatraz.
</div></div>
</div>
</div>
<style>
/* css черти чего от вещего духа*/
.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}
.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute;
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text > div {
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}
.prusheen-text > span {
display: block;
text-align: center;
font: 40px rouge script; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}
.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}
.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>[/html]
