[html]<leliana>
<lheader>
Орден Рассвета
</lheader>
<card>
<img src="https://i.imgur.com/2pGNntR.jpg">
<div id="caption">
Сумерки Богов
</div>
<div id="infobox">
<span>
ВСТАВИТЬ ФРАКЦИЮ
</span>
<span>
ВСТАВИТЬ СВЯЗЬ СТУПЕНЬ
</span>
<span>
ВСТАВИТЬ РУНУ
</span>
<span>
ОРУЖИЕ
</span>
<span>
АЛЬТЕР-ЭГО
</span>
</div>
</card>
<style type="text/css">leliana {
--background:url(https://i.imgur.com/B7KRqKg.jpg);
--border:whitesmoke;
--text:#000;
--transparency: rgba(255,255,255,0.8);
display:flex;
align-items:center;
justify-content:space-evenly;
flex-wrap:wrap;
width:600px;
height:auto;
box-sizing:border-box;
border:1px solid var(--border);
outline:0px solid var(--text);
margin: auto;
padding: 100px 0 40px;
background:var(--background);
background-size:cover;
position:relative;
}
lheader {
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:50px;
position:absolute;
top:0px;
left:0px;
background:var(--border);
text-align:center;
font:bold 14px times, serif;
color:var(--text);
font-variant:small-caps;
letter-spacing:2px;
}
card {
display:block;
width:225px;
height:400px;
margin:auto;
border-radius:10px 50px;
border:2px solid var(--border);.
background:var(--border);
overflow:hidden;
position:relative;
transition-duration:1s;
}
card:hover {
transform: rotateY(180deg);
}
card img {
width:225px;
height:440px;
object-fit:cover;
background-color:var(--border);
}
#caption {
display:flex;
align-items:center;
justify-content:center;
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:25px;
background:var(--transparency);
text-align:center;
font:bold 12px times, serif;
color:var(--text);
font-variant:small-caps;
letter-spacing:1px;
transition-duration:1s;
}
card:hover #caption{
opacity:0;
}
#infobox {
display:block;
width:100%;
height:400px;
box-sizing:border-box;
padding:20px;
position:absolute;
top:0;
left:0;
background:var(--transparency);
transform: rotatey(-180deg);
opacity:0;
transition-duration:0.2s;
transition-delay:0.3s;
overflow-y:scroll;
}
#infobox span {
display:block;
width:90%;
padding:24px 0;
margin: 5px auto;
background: var(--border);
text-align:center;
font:bold 12px times, serif;
color:var(--text);
letter-spacing:1px;
font-variant:small-caps;
}
#infobox div {
width:100%;
height:auto;
text-align:justify;
font:11px arial, sans-serif;
color:var(--text);
letter-spacing:0.5px;
line-height:150%;
}
card:hover #infobox {
opacity:1;
}
#infobox::-webkit-scrollbar {
width:5px;
background:transparent;
border:0;
}
#infobox::-webkit-scrollbar-track {
width:5px;
background:transparent;
border:0;
}
#infobox::-webkit-scrollbar-thumb {
width:5px;
background:var(--text);
border:0;
}</style>[/html]
[/float]Не зря Суспирия олицетворяла собой предательство. Она напала на Синистера, желая стать еще сильнее и стать главой его ордена. Ей казалось, что трусливый братец падет ниц, когда окажется один против нее. Только она сама помогла ему обратить свой страх в силу. Синистер одолел ее, поглощая сестру. В ту тихую безлунную ночь деос остался без единственного существа к которому у него было доверие. Бессмертный избавился от фэдэлесов сестрицы, не доверяя прихвостням предательницы. После опустошения появилась одержимость обрести больше силы и вернуться к идее создать собственную расу. Синистер был одним из первых существ, которые создали первых балионтаров. Тогда он активно сотрудничал с другими ученами, работая над искусственно созданных существами. И пусть он был горд общей работой, но это было не тем. Синистер не бросил эту идею, а потому продолжает совершенствовать рецепты создания балионтаров и по сей день. 
