[hideprofile][html]<!-- === ЗАНЯТЫЕ ВНЕШНОСТИ — вставить в пост === -->
<div id="faces-roster" style="--bg:url(https://i.imgur.com/yourImage.jpg)">
<div class="fr-wrap">
<h1 class="fr-title">Список занятых внешностей</h1>
<div class="fr-columns">
<!-- Колонка: Женские -->
<section class="fr-col">
<h2>ЖЕНСКИЕ ВНЕШНОСТИ</h2>
<!-- КАРТОЧКА -->
<article class="face-card">
<div class="face-photo">
<img src="https://i.postimg.cc/X7mRzp2m/sophia-bw.jpg" alt="Anya Taylor-Joy">
</div>
<div class="face-meta">
<div class="celebrity">Anya Taylor-Joy</div>
<div class="character">— <a href="https://1920.rusff.me/profile.php?section=view&id=83">Sophia Cohen</a></div>
</div>
</article>
<article class="face-card">
<div class="face-photo">
<img src="https://forumavatars.ru/img/avatars/0019/49/95/89-1753197307.jpg" alt="Deborah Grover">
</div>
<div class="face-meta">
<div class="celebrity">Deborah Grover</div>
<div class="character">— <a href="https://1920.rusff.me/profile.php?id=89">Astoria M. Gilbert</a></div>
</div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/105/812467.jpg" alt="Elizabeth Debicki"></div>
<div class="face-meta"><div class="celebrity">Elizabeth Debicki</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=105">Vanessa Crane</a></div></div>
</article>
<article class="face-card">
<div class="face-photo">
<img src="https://forumavatars.ru/img/avatars/0019/49/95/67-1753198741.jpg" alt="Holliday Grainger">
</div>
<div class="face-meta">
<div class="celebrity">Holliday Grainger</div>
<div class="character">— <a href="https://1920.rusff.me/profile.php?id=67">Amy Carroll</a></div>
</div>
</article>
<article class="face-card"> <div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/106/987144.png" alt="Jaimie Alexander"></div> <div class="face-meta"><div class="celebrity">Jaimie Alexander </div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=106">Cleo Bainbridge</a></div></div> </article>
<article class="face-card">
<div class="face-photo"><img src="https://i.pinimg.com/1200x/1c/7b/2f/1c7b2fb0792ec6986998e760c29630d8.jpg" alt="Jean Harlow"></div>
<div class="face-meta"><div class="celebrity">Jean Harlow</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=109">Tatiana Ditkovskite</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/115/857705.png" alt="Jenna Coleman"></div>
<div class="face-meta"><div class="celebrity">Jenna Coleman</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=115">Olivia Norwood</a></div></div>
</article>
<article class="face-card">
<div class="face-photo">
<img src="https://i.imgur.com/oAnZCtr.png" alt="Jessica Chastain">
</div>
<div class="face-meta">
<div class="celebrity">Jessica Chastain</div>
<div class="character">— <a href="https://1920.rusff.me/profile.php?id=93">Marta Rothstein</a></div>
</div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/113/437143.png" alt="Julia Roberts"></div>
<div class="face-meta"><div class="celebrity">Julia Roberts</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=113">Matilda O’Boyle</a></div></div>
</article>
<article class="face-card">
<div class="face-photo">
<img src="https://forumavatars.ru/img/avatars/0019/49/95/82-1753365273.jpg" alt="Kaya Scodelario">
</div>
<div class="face-meta">
<div class="celebrity">Kaya Scodelario</div>
<div class="character">— <a href="https://1920.rusff.me/profile.php?id=82">Nataly Fogelman</a></div>
</div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/2/276680.jpg" alt="Louis Brooks"></div>
<div class="face-meta"><div class="celebrity">Louis Brooks</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=94">Louise Sutherland</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/2/494494.png" alt="Michelle Dockery"></div>
<div class="face-meta"><div class="celebrity">Michelle Dockery</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=2">Ruth O'Donnell</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/111/146860.png" alt="Валя Ляпина"></div>
<div class="face-meta"><div class="celebrity">Valentina Lyapina</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=111">Nessie Rothstein</a></div></div>
</article>
<!-- добавляй новые <article class="face-card"> ... </article> -->
</section>
<!-- Колонка: Мужские -->
<section class="fr-col">
<h2>МУЖСКИЕ ВНЕШНОСТИ</h2>
<article class="face-card">
<div class="face-photo"><img src="https://i.gyazo.com/d89b4457c46053d9c520724ff7fc95d7.png" alt="Chris Hemsworth"></div>
<div class="face-meta"><div class="celebrity">Chris Hemsworth</div><div class="character">— <a href="https://1920.rusff.me/viewtopic.php?id=481">Donald Barnes</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://i.pinimg.com/736x/50/bc/d8/50bcd8336e45cfaca39ed0af111923d5.jpg" alt="Cory Michael Smith"></div>
<div class="face-meta"><div class="celebrity">Cory Michael Smith</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=114">Aron Klein</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/80-1753198030.jpg" alt="David Gandy"></div>
<div class="face-meta"><div class="celebrity">David Gandy</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=80">Sean O'Reilly</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/102/298369.png" alt="Domhnall Gleeson"></div>
<div class="face-meta"><div class="celebrity">Domhnall Gleeson</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=102">Jerry Moran</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/95-1756053975.jpg" alt="Филипп Янковский"></div>
<div class="face-meta"><div class="celebrity">Filipp Yankovskij</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=95">Sergei Volfert</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/68-1753197711.jpg" alt="Jack Roth"></div>
<div class="face-meta"><div class="celebrity">Jack Roth</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=68">Jack Donovan</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://i.postimg.cc/FzbbpWd8/20078438-ezgif-com-effects.png" alt="Jared Harris"></div>
<div class="face-meta"><div class="celebrity">Jared Harris</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=78">Aiden Finley</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/67/240423.png" alt="Jeff Bridges"></div>
<div class="face-meta"><div class="celebrity">Jeff Bridges</div><div class="character">— <a href="https://1920.rusff.me/viewtopic.php?id=92#p9212">James Carroll</a> [NPC]</div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://i.pinimg.com/736x/e1/6c/e9/e16ce93c0643e7a243cbc4e749197dfe--the-famous-famous-faces.jpg" alt="Jeff Goldblum"></div>
<div class="face-meta"><div class="celebrity">Jeff Goldblum</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=110">Исаак Гольдман</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/67/514131.png" alt="Jeremy Allen White"></div>
<div class="face-meta"><div class="celebrity">Jeremy Allen White</div><div class="character">— <a href="https://1920.rusff.me/viewtopic.php?id=92#p22703">Roy Brown</a> [NPC]</div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/81-1753366967.jpg" alt="Jon Bernthal"></div>
<div class="face-meta"><div class="celebrity">Jon Bernthal</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=81">John Whittaker</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/67/883270.gif" alt="Henry Cavill"></div>
<div class="face-meta"><div class="celebrity">Henry Cavill</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=98">Oliver O`Donnell</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/107-1758914818.png" alt="Hugh Bonneville"></div>
<div class="face-meta"><div class="celebrity">Hugh Bonneville </div><div class="character">— <a href="https://1920.rusff.me/viewtopic.php?id=480">Edward Barnes</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://upforme.ru/uploads/0019/49/95/67/295033.gif" alt="Nikolaj Coster-Waldau"></div>
<div class="face-meta"><div class="celebrity">Nikolaj Coster-Waldau</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=101">James Jackson</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/91-1753197537.jpg" alt="Ralph Fiennes"></div>
<div class="face-meta"><div class="celebrity">Ralph Fiennes</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=91">Charles M. Crane</a></div></div>
</article>
<article class="face-card">
<div class="face-photo"><img src="https://forumavatars.ru/img/avatars/0019/49/95/5-1753197083.jpg" alt="Viggo Mortensen"></div>
<div class="face-meta"><div class="celebrity">Viggo Mortensen</div><div class="character">— <a href="https://1920.rusff.me/profile.php?id=5">Nikolaus Rothstein</a></div></div>
</article>
<!-- добавляй новые карточки -->
</section>
</div>
</div>
</div>
<style>
/* === НАСТРОЙКИ (цвета/шрифт) === */
#faces-roster{
--bg: url(https://upforme.ru/uploads/0019/49/95/2/257050.jpg); /* фон-подложка (замени ссылку) */
--ink: #2b2015; /* основной текст */
--title: #1b140e; /* заголовки */
--paper: #e9dcc8; /* фон карточек/блоков */
--paper-2: #d9ccb6; /* фон заголовков секций */
--border: #b9a88e; /* бордюры */
--shadow: 0 10px 30px rgba(39,27,16,.25);
--radius: 18px;
--gap: 18px;
--font: "American Typewriter", "Roboto Slab", Georgia, "Times New Roman", serif;
}
/* === Каркас === */
#faces-roster{
background: var(--bg) center/cover no-repeat fixed;
padding: 24px;
}
#faces-roster .fr-wrap{
max-width: 1100px; margin: 0 auto;
background: rgba(233,220,200,.85);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(1px);
padding: 26px;
font-family: var(--font);
color: var(--ink);
}
/* Заголовок */
#faces-roster .fr-title{
text-align:center;
font-weight: 700;
letter-spacing:.5px;
color: var(--title);
font-size: 32px;
margin: 0 0 18px;
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 6px);
padding: 12px 16px;
}
/* Две колонки */
#faces-roster .fr-columns{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap);
}
#faces-roster .fr-col{
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
#faces-roster .fr-col > h2{
text-align:center; margin: 4px 0 12px;
font-size: 18px; letter-spacing: 1px;
color: var(--title);
background: var(--paper-2);
border: 1px solid var(--border);
border-radius: 12px; padding: 8px 10px;
}
/* Карточка */
#faces-roster .face-card{
display: grid; grid-template-columns: 70px 1fr;
gap: 12px; align-items:center;
border: 1px dashed var(--border);
border-radius: 14px;
padding: 10px 12px; margin-bottom: 10px;
background: #f1e6d3;
transition: transform .15s ease, box-shadow .15s ease;
}
#faces-roster .face-card:hover{
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
/* Фото */
#faces-roster .face-photo{ width:70px; height:70px; border-radius: 12px; overflow:hidden; }
#faces-roster .face-photo img{
width:100%; height:100%; object-fit:cover; display:block;
filter: sepia(.15) contrast(1.05);
}
/* Подписи */
#faces-roster .face-meta .celebrity{ font-weight:600; }
#faces-roster .face-meta .character{
font-weight:700;
}
#faces-roster .face-meta a{
color: #2a1f12; text-decoration: none; border-bottom: 1px dotted rgba(43,32,21,.45);
}
#faces-roster .face-meta a:hover{
border-bottom-color: transparent;
}
/* Адаптив */
@media (max-width: 900px){
#faces-roster .fr-columns{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
#faces-roster .face-card{ grid-template-columns: 56px 1fr; }
#faces-roster .face-photo{ width:56px; height:56px; border-radius:10px; }
#faces-roster .fr-title{ font-size:26px; }
}
</style>
<!-- === /ЗАНЯТЫЕ ВНЕШНОСТИ === -->[/html]
Для заполнения скопировать код:
Код:<article class="face-card"> <div class="face-photo"><img src="ссылка на фото в чб" alt="Имя Знаменитости"></div> <div class="face-meta"><div class="celebrity">Имя Знаменитости</div><div class="character">— <a href="ссылка на профиль">Имя Персонажа</a></div></div> </article>
