[html]
<style>
/* список занятых */
charlist {
width: 1015px;
height: 830px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 55px 12px;
padding: 60px 8px 0;
box-sizing: border-box;
position: relative;
background: rgba(237, 237, 237, 1);
margin-top: 65px !important;
margin-left: -30px !important;
}
charlist::before {
content: '';
position: absolute;
left: 0px;
top: -78px;
width: 180px;
height: 192px;
background: url(https://forumstatic.ru/files/001c/80/b1/72687.png) no-repeat center / 100%;
background-size: 100%;
mix-blend-mode: darken;
}
charlist::after {
content: '';
position: absolute;
right: 0px;
top: -72px;
width: 192px;
height: 146px;
background: url(https://forumstatic.ru/files/001c/80/b1/81424.png);
background-size: 100%;
}
charlist div:nth-child(even)::before {
content: attr(data-title);
position: absolute;
top: -35px;
left: 1px;
width: 998px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
z-index: 10;
font-weight: 700;
padding: 5px 18px 6px;
font-size: 24px;
text-transform: lowercase;
letter-spacing: 2px;
}
charlist div:nth-of-type(2)::before {
left: auto;
right: 6px;
}
charlist div:nth-of-type(2)::after {
left: auto;
right: 25px;
}
charlist div p {
position: relative;
width: 461px;
height: 169px;
overflow: auto !important;
}
charlist div {
display: block;
width: 493px;
height: 232px;
padding: 5px 25px 13px;
position: relative;
border-radius: 4px;
box-sizing: border-box;
background: rgba(230, 230, 230, 1);
border: 1px solid rgba(0, 0, 0, 1);
z-index: 1;
}
visages {
display: block;
position: absolute;
font-size: var(--fs12);
left: 260px;
top: -70px;
}
visages span {
font-weight: 700;
font-size: 48px;
display: block;
color: rgba(0, 0, 0, 0.2);
}
charlist div span {
display: block;
width: 100%;
text-align: center;
border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
font-weight: 700;
font-size: 14px;
padding-bottom: 5px;
margin-bottom: 8px !important;
}
</style>
<charlist data-title='list of characters'>
<visages>
<span>ВНЕШНОСТИ</span>
[sn] — заняты имя и фамилия, [s] — занята фамилия, [n] — занято имя
</visages>
<!----- abcdefghi -------------------------->
<div data-title='abcdefghi'>
<!----- boys -------------------------->
<span> boys </span>
<p>
bang chan — <a href='https://hanahaki.rusff.me/profile.php?id=6'>christopher langley</a><br>
benjamin barnes— <a href='https://hanahaki.rusff.me/profile.php?id=13'>carolus magnus</a><br>
david dastmalchian — <a href='https://hanahaki.rusff.me/profile.php?id=50'>barty the old man</a><br>
freddy carter — <a href='https://hanahaki.rusff.me/profile.php?id=37'>bertilak hautdesert</a><br>
choi san — <a href='https://hanahaki.rusff.me/profile.php?id=18'>ezreal fontana</a><br>
michael fassbender — <a href='https://hanahaki.rusff.me/profile.php?id=3'>bryce stokes</a><br>
david giuntoli — <a href='https://hanahaki.rusff.me/profile.php?id=63'>branan crawford</a><br>
hwang hyunjin — <a href='https://hanahaki.rusff.me/profile.php?id=67'>sebastian crow</a><br>
</p></div>
<!----- girls -------------------------->
<div>
<span> girls </span>
<p>
sabrina carpenter — <a href='https://hanahaki.rusff.me/profile.php?id=29'>porcelain</a><br>
olivia cooke — <a href='https://hanahaki.rusff.me/profile.php?id=48'>dahlia ni glenmor</a><br>
yeji hwang— <a href='https://hanahaki.rusff.me/profile.php?id=35'>whydah conrie</a><br>
</p>
</div>
<!----- jklmnopqr -------------------------->
<div data-title='jklmnopqr'>
<!----- boys -------------------------->
<span> boys </span>
<p>
jeong seongil — <a href='https://hanahaki.rusff.me/profile.php?id=43'>kim seonghoon </a><br>
woobin kim — <a href='https://hanahaki.rusff.me/profile.php?id=60'>akayo komisato</a><br>
jooyeon lee — <a href='https://hanahaki.rusff.me/profile.php?id=66'>renard cross</a><br>
lee soo-hyeok— <a href='https://hanahaki.rusff.me/profile.php?id=4'>kim saram</a><br>
ewan mcgregor — <a href='https://hanahaki.rusff.me/profile.php?id=23'>glenn aveden</a><br>
robert pattinson — <a href='https://hanahaki.rusff.me/profile.php?id=51'>dmitry o'glenmor</a><br>
alan ritchson — <a href='https://hanahaki.rusff.me/profile.php?id=62'>ralph merrill</a><br>
</p></div>
<!----- girls -------------------------->
<div><span> girls </span><p>
lim jiyeon — <a href='https://hanahaki.rusff.me/profile.php?id=46'>yeonjin park</a><br>
emily mei — <a href='https://hanahaki.rusff.me/profile.php?id=9'>hana namasaki</a><br>
shin-hyo park — <a href='https://hanahaki.rusff.me/profile.php?id=59'>justitia wang</a><br>
ella purnell — <a href='https://hanahaki.rusff.me/profile.php?id=39'>marceline mccormick</a><br>
</p>
</div>
<!----- stuvwxyz -------------------------->
<div data-title='stuvwxyz'>
<!----- boys -------------------------->
<span> boys </span>
<p>
robert sheehan — <a href='https://hanahaki.rusff.me/profile.php?id=57'>rudyard albergue</a><br>
yang jeong-in — <a href='https://hanahaki.rusff.me/profile.php?id=11'>cheon sang-kyu</a><br>
</p></div>
<!----- girls -------------------------->
<div><span> girls </span><p>
sydney sweeney — <a href='https://hanahaki.rusff.me/profile.php?id=22'>dolly del rey</a><br>
anya taylor-joy — <a href='https://hanahaki.rusff.me/profile.php?id=10'>kira doe</a><br>
sophie thatcher — <a href='https://hanahaki.rusff.me/profile.php?id=58'>gwendolyn caulfield</a><br>
sophie turner — <a href='https://hanahaki.rusff.me/profile.php?id=69'>nephilim-zero</a><br>
</p>
</div>
</charlist>[/html][hideprofile]
