[hideprofile]
[html]<style>
.fc{max-width:659px;margin:16px auto;background:var(--border);border-radius:13px;font-family:var(--font-main);color:var(--text);overflow:hidden}
.fc-banner{position:relative;padding:16px 21px 12px;background-image:var(--faces-banner);background-size:cover;background-position:center;background-repeat:no-repeat}
.fc-head{width:223px;max-width:80%;margin:0 auto 12px;padding:5px 0;background:var(--border);box-shadow:-1px 1px 1px rgba(175,143,129,.67),0 0 1px rgba(175,143,129,.3);border-radius:5px;text-align:center;font-family:var(--font-main);font-style:italic;font-weight:500;font-size:15px;letter-spacing:-.02em;text-transform:lowercase;color:#808080}
.fc-intro{background:var(--panel);border-radius:10px;padding:22px 28px;font-family:var(--font-main);font-style:italic;font-weight:500;font-size:10px;line-height:161%;letter-spacing:-.01em;text-align:justify;text-transform:lowercase;color:#878787}
.fc-search{display:block;width:100%;max-width:280px;margin:14px auto 4px;height:30px;padding:0 14px;border:1px solid var(--border);border-radius:6px;background:var(--panel);font-family:var(--font-main);font-style:italic;font-size:11px;color:#7D7D7D;outline:none;text-align:center}
.fc-search:focus{border-color:var(--accent)}
.fc-search::placeholder{color:#a8a8a8;font-style:italic}
.fc-cols{display:flex;gap:33px;justify-content:center;padding:14px 40px 24px}
.fc-col{position:relative;flex:0 0 270px;max-width:270px;background:var(--panel);border-radius:10px;padding:32px 0 18px}
.fc-coltitle{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:164px;height:16px;display:flex;align-items:center;justify-content:center;background:var(--border);box-shadow:0 1px 1.9px rgba(0,0,0,.36);border-radius:5px;font-family:var(--font-gropled);font-style:italic;font-weight:500;font-size:10px;letter-spacing:-.07em;text-transform:lowercase;color:#5F5F5F}
.fc-list{display:flex;flex-direction:column;max-height:417px;overflow:auto;padding:0 6px}
.fc-letter{margin:12px 0 6px;text-align:center;font-family:var(--font-main);font-style:italic;font-weight:500;font-size:12px;letter-spacing:-.01em;text-transform:lowercase;color:var(--accent)}
.fc-letter:first-child{margin-top:0}
.fc-row{padding:3px 0;text-align:center;font-family:var(--font-main);font-style:italic;font-weight:500;font-size:11px;letter-spacing:.04em;line-height:1.5;text-transform:lowercase;color:#7D7D7D}
.fc-name{color:var(--accent)}
.fc-empty{padding:12px 0;text-align:center;font-style:italic;color:#a8a8a8}
</style>
<div class="fc" data-sep="//" data-empty="ничего не найдено">
<div class="fc-banner">
<div class="fc-head">занятые внешности</div>
<div class="fc-intro">далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. вдали от всех живут они в буквенных домах на берегу семантика большого языкового океана…</div>
</div>
<input class="fc-search" type="text" placeholder="поиск внешности или персонажа…">
<div class="fc-cols">
<div class="fc-col"><div class="fc-coltitle">женские внешности</div><div class="fc-list" id="fcF"></div></div>
<div class="fc-col"><div class="fc-coltitle">мужские внешности</div><div class="fc-list" id="fcM"></div></div>
</div>
</div>[/html]
Отредактировано Storm Wilder (2026-07-06 22:38:41)