Тут размещается текст важного поста, объявления
или лучшего сообщения. Если текста станет много,
внутри этой области появится вертикальная прокрутка.
Ссылка внизу при этом останется на своём месте.
Читать пост
Хтмл шаблоны: Занятые внешности
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12026-08-26 11:43:00
- Администратор
- Эдлин Миллер
- Победе грош цена, коль не дает нам радости она. Милей судьбой с убитым поменяться, чем страхами, убив его, терзаться.
- Сообщений: 224
- Уважение: +0
[html]<div class="tgd-faces fullwidth-template">
<header class="tgd-faces__header">
<div class="tgd-faces__issue">THE GLORY DAYS · DATABASE</div>
<div class="tgd-faces__heading">
<div class="tgd-faces__title">занятые внешности</div>
<div class="tgd-faces__mark">FACE CLAIM</div>
</div>
<div class="tgd-faces__subtitle">
Сначала указывается фандом и внешность, затем имя персонажа.
</div>
</header>
<div class="tgd-faces__columns">
<!-- ЖЕНСКИЕ ВНЕШНОСТИ -->
<section class="tgd-faces__section tgd-faces__section--female">
<h3 class="tgd-faces__section-title">
<i class="fa-solid fa-bolt"></i>
женские
<span>female faces</span>
</h3>
<div class="tgd-faces__scroll">
<div class="tgd-faces__group">
<div class="tgd-faces__letter">a — d</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">e — h</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">i — l</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">m — p</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">q — t</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">u — x</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">y — z</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
</div>
</section>
<!-- МУЖСКИЕ ВНЕШНОСТИ -->
<section class="tgd-faces__section tgd-faces__section--male">
<h3 class="tgd-faces__section-title">
<i class="fa-solid fa-bolt"></i>
мужские
<span>male faces</span>
</h3>
<div class="tgd-faces__scroll">
<div class="tgd-faces__group">
<div class="tgd-faces__letter">a — d</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">e — h</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">i — l</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">m — p</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">q — t</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">u — x</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
<div class="tgd-faces__group">
<div class="tgd-faces__letter">y — z</div>
<div class="tgd-faces__list">
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<style>
/* ======================== TGD FACE CLAIMS ======================== */
.post-content .tgd-faces {
position: relative;
isolation: isolate;
width: 100%;
max-width: none;
margin: -1em 0;
padding: 25px;
box-sizing: border-box;
overflow: hidden;
color: var(--text-color2);
font-family: var(--font-base);
background:
/* свет поверх точек для читаемости */
linear-gradient(
135deg,
rgba(251, 239, 224, .96),
rgba(242, 222, 196, .91)
),
/* комиксные точки */
radial-gradient(
circle,
rgba(115, 23, 2, .13) 1px,
transparent 1.3px
)
0 0 / 7px 7px,
var(--main-white);
border: 1px solid rgba(115, 23, 2, .24);
border-radius: var(--radius-large);
box-shadow:
7px 7px 0 var(--main-red),
12px 12px 0 rgba(24, 77, 89, .28);
}
/* декоративная полоса на фоне */
.post-content .tgd-faces::before {
content: "";
position: absolute;
z-index: -1;
top: 78px;
right: -85px;
width: 430px;
height: 80px;
pointer-events: none;
background: rgba(141, 166, 157, .14);
transform: rotate(-7deg);
}
/* точки в правом нижнем углу */
.post-content .tgd-faces::after {
content: "";
position: absolute;
z-index: -1;
right: -15px;
bottom: -20px;
width: 230px;
height: 170px;
pointer-events: none;
background:
radial-gradient(
circle,
rgba(115, 23, 2, .16) 2px,
transparent 2.5px
)
0 0 / 11px 11px;
-webkit-mask-image:
linear-gradient(
315deg,
#000,
transparent 72%
);
mask-image:
linear-gradient(
315deg,
#000,
transparent 72%
);
}
/* ======================== HEADER ======================== */
.post-content .tgd-faces__header {
position: relative;
margin-bottom: 22px;
padding: 0 0 17px;
border-bottom: 1px dashed rgba(115, 23, 2, .36);
}
.post-content .tgd-faces__issue {
display: inline-block;
margin-bottom: 8px;
padding: 5px 9px;
color: var(--main-white);
font: 700 8px/1 var(--rus);
letter-spacing: 1.3px;
text-transform: uppercase;
background: var(--main-blue);
border-radius: var(--radius-small);
box-shadow: 3px 3px 0 rgba(115, 23, 2, .17);
transform: skew(-7deg);
}
.post-content .tgd-faces__heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
}
.post-content .tgd-faces__title {
color: var(--main-red);
font: 700 27px/1 var(--rus);
letter-spacing: .6px;
text-transform: uppercase;
}
.post-content .tgd-faces__mark {
flex-shrink: 0;
color: rgba(24, 77, 89, .25);
font: 700 21px/1 var(--rus);
letter-spacing: 1px;
text-transform: uppercase;
}
.post-content .tgd-faces__subtitle {
margin-top: 9px;
color: var(--text-color2);
font: 400 10px/1.5 var(--font-base);
}
/* ======================== COLUMNS ======================== */
.post-content .tgd-faces__columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
/* ======================== SECTIONS ======================== */
.post-content .tgd-faces__section {
position: relative;
min-width: 0;
padding-top: 18px;
}
.post-content .tgd-faces__section-title {
position: absolute;
z-index: 5;
top: 0;
left: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 8px;
min-height: 38px;
margin: 0;
padding: 0 13px;
box-sizing: border-box;
color: var(--main-white);
font: 700 13px/1 var(--rus);
letter-spacing: 1px;
text-transform: uppercase;
background: var(--main-red);
border-radius: var(--radius-small);
box-shadow:
4px 4px 0 var(--accent-color2);
transform: rotate(-.7deg);
}
.post-content .tgd-faces__section--male
.tgd-faces__section-title {
background: var(--main-blue);
transform: rotate(.7deg);
}
.post-content .tgd-faces__section-title i {
color: var(--accent-color2);
font-size: 11px;
}
.post-content .tgd-faces__section-title > span {
margin-left: auto;
color: rgba(251, 239, 224, .62);
font: 700 8px/1 var(--eng);
letter-spacing: 1.2px;
}
/* ======================== SCROLL AREA ======================== */
.post-content .tgd-faces__scroll {
height: 510px;
padding: 35px 12px 13px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, .24),
transparent 35%
),
rgba(242, 222, 196, .77);
border: 1px solid rgba(115, 23, 2, .20);
border-radius: var(--radius-medium);
box-shadow:
inset 0 0 30px rgba(115, 23, 2, .045),
4px 4px 0 rgba(24, 77, 89, .13);
scrollbar-width: thin;
scrollbar-color: var(--main-red) transparent;
}
.post-content .tgd-faces__section--male
.tgd-faces__scroll {
scrollbar-color: var(--main-blue) transparent;
}
.post-content .tgd-faces__scroll::-webkit-scrollbar {
width: 5px;
}
.post-content .tgd-faces__scroll::-webkit-scrollbar-track {
background: transparent;
}
.post-content .tgd-faces__scroll::-webkit-scrollbar-thumb {
background:
linear-gradient(
to bottom,
var(--accent-color2),
var(--main-red)
);
border-radius: 5px;
}
.post-content .tgd-faces__section--male
.tgd-faces__scroll::-webkit-scrollbar-thumb {
background:
linear-gradient(
to bottom,
var(--accent-color2),
var(--main-blue)
);
}
/* ======================== LETTER GROUP ======================== */
.post-content .tgd-faces__group {
margin-bottom: 16px;
}
.post-content .tgd-faces__group:last-child {
margin-bottom: 0;
}
.post-content .tgd-faces__letter {
position: sticky;
z-index: 3;
top: -1px;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
padding: 5px 9px;
color: var(--main-red);
font: 700 9px/1 var(--rus);
letter-spacing: 1.2px;
text-transform: uppercase;
background:
linear-gradient(
to right,
rgba(251, 239, 224, .98),
rgba(251, 239, 224, .90)
);
border-left: 3px solid var(--main-red);
border-radius:
0
var(--radius-small)
var(--radius-small)
0;
box-shadow: 2px 2px 0 rgba(115, 23, 2, .08);
}
.post-content .tgd-faces__letter::after {
content: "";
flex: 1;
height: 1px;
background:
repeating-linear-gradient(
to right,
rgba(115, 23, 2, .35) 0 3px,
transparent 3px 6px
);
}
.post-content .tgd-faces__section--male
.tgd-faces__letter {
color: var(--link-color);
border-left-color: var(--main-blue);
}
.post-content .tgd-faces__section--male
.tgd-faces__letter::after {
background:
repeating-linear-gradient(
to right,
rgba(24, 77, 89, .35) 0 3px,
transparent 3px 6px
);
}
/* ======================== LIST ======================== */
.post-content .tgd-faces__list {
display: flex;
flex-direction: column;
gap: 5px;
}
.post-content .tgd-faces__list > div {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-width: 0;
padding: 8px 10px;
box-sizing: border-box;
color: var(--text-color2);
font: 400 10px/1.45 var(--font-base);
background: rgba(251, 239, 224, .68);
border: 1px solid rgba(115, 23, 2, .12);
border-radius: var(--radius-small);
transition:
border-color .2s ease,
background .2s ease,
transform .2s ease;
}
.post-content .tgd-faces__list > div::before {
content: "";
position: absolute;
top: 50%;
right: 9px;
width: 4px;
height: 4px;
background: var(--accent-color2);
transform:
translateY(-50%)
rotate(45deg);
}
.post-content .tgd-faces__list > div:hover {
background: var(--main-white);
border-color: rgba(115, 23, 2, .30);
transform: translateX(2px);
}
.post-content .tgd-faces__section--male
.tgd-faces__list > div:hover {
border-color: rgba(24, 77, 89, .34);
}
.post-content .tgd-faces__list > div > span {
min-width: 0;
padding-right: 8px;
}
.post-content .tgd-faces__list a {
position: relative;
margin-right: 11px;
padding-left: 12px;
color: var(--link-color) !important;
font-weight: 700;
white-space: nowrap;
}
.post-content .tgd-faces__list a::before {
content: "—";
position: absolute;
left: 0;
color: var(--accent-color2);
}
.post-content .tgd-faces__list a:hover {
color: var(--link-hover-color) !important;
}
/* пустые строки-заглушки */
.post-content .tgd-faces__empty {
opacity: .48;
font-style: italic;
}
.post-content .tgd-faces__empty:hover {
opacity: .72;
}
</style>[/html]
Поделиться22026-08-26 22:16:08
- Администратор
- Эдлин Миллер
- Победе грош цена, коль не дает нам радости она. Милей судьбой с убитым поменяться, чем страхами, убив его, терзаться.
- Сообщений: 224
- Уважение: +0
Для админов!
каждый новый игрок
Код:
<div>
<span>Название англ. | Имя персонажа англ.</span>
<a href="ссылка">
Имя
</a>
</div>каждая пустая ячейка
Код:
<div class="tgd-faces__empty">
<span>имя внешности</span>
<a href="#">игрок</a>
</div>Страница: 1
