Для того что бы подать хотелку, Вам необходимо зарегистрироваться (можно первоначально любым ником) и заполнить шаблон, представленный ниже, не  вносите изменения в шаблон, изменённый шаблон рассматриваться не будет и будет убран в архив, без исправления через сутки после подачи заявки.
[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(https://forumstatic.ru/files/001c/af/02/93733.png)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>Имя и фамилия, ** лет </span>
     <div>
       <b>Внешность:</b> вашего героя. <b> Биография, характер: </b> персонажа в свободном стиле, тестом не более 940 слов
      </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/15px 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: 1; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 25px 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(https://forumstatic.ru/files/001c/af/02/93733.png)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>Имя и фамилия, ** лет </span>
     <div>
       <b>Внешность:</b> вашего героя. <b> Биография, характер: </b> персонажа в свободном стиле, тестом не более 940 слов
      </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/15px 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: 1; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 25px 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]