важная тема

[html]<style>
<style>
/* Общий сброс и базовые стили */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--body-bg: #5E3831;
--pun-bg: #C6A785;
--sec-bg: #7E4E2D;
--link: #B54E27;
--link-hover: #937C30;
--textcolor: #372010;
--overlay: rgba(181, 78, 39, 0.5);
--topic-overlay: rgba(126, 78, 45, 0.5);
--accent1: #662424;
--accent2: #232A3F;
--accent3: #B54E27;
--pwidth: 240px;
--pad1: 10px 20px;
--pad2: 5px 20px;
--pad3: 5px 10px;
--rad1: 5px;
--pun-radius: 30px;
--rad2: 20px;
--rad3: 3px;
--rad-profile: 10px;
--msr: "Material Symbols Rounded";
--fa: "Font Awesome 6 Pro", "Font Awesome 6 Brands";
--zagolovok: "Crevia";
--body-bg-image: url(https://forumstatic.ru/files/001c/ba/0d/58244.png);
--shapka: url(https://forumstatic.ru/files/001c/ba/0d/26572.png);
--new: url(https://forumstatic.ru/files/001c/ba/0d/12173.png?v=1);
--old: url(https://forumstatic.ru/files/001c/ba/0d/12634.png);
--profile-bg-img: url(https://forumstatic.ru/files/001c/ba/0d/47488.png);
--plashka-img: url(https://forumstatic.ru/files/001c/ba/0d/42813.png);
--up: url(https://forumstatic.ru/files/001c/ba/0d/53092.png);
--down: url(https://forumstatic.ru/files/001c/ba/0d/18248.png);
--b-post-bg: url(https://forumstatic.ru/files/001c/ba/0d/64130.png);
}

/* Контейнер гостевой книги */
.guestbook-main {
width: 100%;
margin: 0 auto;
background: var(--sec-bg);
border-radius: 25px;
position: relative;
margin-top: 50px;
overflow: hidden;
}

/* Шапка с картинкой */
.guestbook-header {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 271px;
height: 66px;
z-index: 10;
top: 5px;
}

.guestbook-header img {
width: 271px;
height: 66px;
object-fit: contain;
}

/* Двухколоночная секция */
.guestbook-table {
display: flex;
flex-wrap: nowrap;
gap: 10px;
padding: 0;
}

/* Левая колонка (сайдбар) — фиксированная ширина */
.column1 {
flex: 0 0 550px;
max-width: 550px;
padding: 0 10px 10px 10px;
display: flex;
flex-direction: column;
border-radius: 16px;
justify-content: flex-start;
}

/* Верхняя строка с AMS и links */
.top-row {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
gap: 15px;
}

/* Правая колонка — занимает всё оставшееся место */
.column2 {
flex: 1;
padding: 20px;
border-radius: 16px;
display: flex;
min-width: 0;
}

/* Блоки внутри левой колонки */
.guestbook-links-item {
background: var(--accent2);
border-radius: 5px;
min-width: 50px;
height: 15px;
text-align: center;
display: flex;
align-items: center;
padding: 0px 5px 3px 5px;
font-weight: 700;
}

.guestbook-links-item a {
color: var(--pun-bg);
text-decoration: none;
}

.guestbook-links-item:hover {
background: var(--link-hover);
}

/* AMS блок - прижат к верху */
.guestbook-ams {
padding: 0;
margin: 0;
display: flex;
gap: 10px;
justify-content: center;
align-items: flex-start;
flex-shrink: 0;
}

/* Links блок - flex с переносом и центром */
.guestbook-links {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
align-items: center;
padding-top: 20px;
flex: 1;
margin-top: 10px;
}

.guesbook-description {
padding: 20px;
margin-top: 0;
color: var(--pun-bg);
}

.guestbook-subtable {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: stretch;
}

.sub1, .sub2 {
flex: 1;
min-width: 140px;
display: flex;
flex-direction: column;
background: transparent;
padding: 0;
}

.sub-text {
background: var(--accent2);
border-radius: 5px;
padding: 15px;
color: var(--pun-bg);
flex: 1;
}

.sub1 .guestbook-banner,
.sub2 .guestbook-banner {
width: 100%;
margin-top: 15px;
}

.sub1 .guestbook-banner img,
.sub2 .guestbook-banner img {
width: 100%;
height: auto;
display: block;
border-radius: 5px;
}

.guestbook-banner {
width: 100%;
margin-top: 15px;
}

.guestbook-banner img {
width: 100%;
height: auto;
display: block;
border-radius: 5px;
}

.guestbook-faces-roles {
background: var(--link-hover);
border-radius: 15px;
padding: 25px;
width: 100%;
text-align: center;
}

.guestbook-faces-roles span {
font-weight: 700;
line-height: 13px;
text-align: center;
color: var(--textcolor);
}

.guestbook-faces-roles a {
color: var(--pun-bg);
}

.guestbook-faces-roles a:hover {
color: var(--accent2);
}

/* Стили для картинок AMS */
.guestbook-ams a {
position: relative;
display: inline-block;
width: 47px;
height: 76px;
text-decoration: none;
}

.guestbook-ams a img {
width: 47px;
height: 76px;
object-fit: cover;
display: block;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
filter: grayscale(100%);
transition: filter 0.3s ease;
}

/* Оверлей поверх картинки */
.guestbook-ams a .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--topic-overlay);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
pointer-events: none;
transition: background 0.3s ease;
}

/* Ховер эффект — возвращаем цвет и убираем затемнение */
.guestbook-ams a:hover img {
filter: grayscale(0%);
}

.guestbook-ams a:hover .overlay {
background: transparent;
}
</style>

<div class="guestbook-main">
<div class="guestbook-table">
<div class="column1">

<div class="top-row">
<div class="guestbook-ams">
<a href="">
<img src="https://forumavatars.ru/img/avatars/001c/3b/dd/215-1775627478.png">
<div class="overlay"></div>
</a>
<a href="">
<img src="https://forumavatars.ru/img/avatars/001c/3b/dd/215-1775627478.png">
<div class="overlay"></div>
</a>
<a href="">
<img src="https://forumavatars.ru/img/avatars/001c/3b/dd/215-1775627478.png">
<div class="overlay"></div>
</a>
</div>

<div class="guestbook-links">
<div class="guestbook-links-item"><a href="">новости</a></div>
<div class="guestbook-links-item"><a href="">нужные</a></div>
<div class="guestbook-links-item"><a href="">ещё какая-то ссылка</a></div>
<div class="guestbook-links-item"><a href="">и ешё</a></div>
<div class="guestbook-links-item"><a href="">новости</a></div>
<div class="guestbook-links-item"><a href="">ещё одна ссылка</a></div>
</div>
</div>

<div class="guesbook-description">Добро пожаловать в Лили-Дейл, штат Нью-Йорк — крупнейший спиритуалистический центр США. Население: 2000 постоянных жителей и примерно втрое больше непостоянных. Мёртвых, бессмертных и тех, кто ещё не определился. Внешне — открыточный викторианский городок с кружевной резьбой, утопающий в зелени и цветах. Узкие мощёные улочки, где нет ни одного фонаря — только мягкий свет из окон. Воздух пахнет озерной водой, соснами и... чем-то, от чего волоски на руках встают дыбом. Для обычных туристов это уникальная возможность посетить сеанс медиума, почитать ауру или получить предсказание. Но для тех, кто знает — это единственное место на континенте, где можно расслабиться и не бояться, что твои крылья или клыки вызовут панику.</div>

<div class="guestbook-subtable">
<div class="sub1">
<div class="sub-text">
Время действия: 2026 год<br>
Место действия: Лили-Дейл и его окрестности (Буффало, Джеймстаун, Питтсбург — и дальше, если хватит смелости).<br>
Жанр: городское фэнтези, мистика, "повседневность с клыками".<br>
Мастеринг: смешанный<br>
Система: эпизодическая.<br>
Внешности: реальные<br>
Рейтинг: 18+.
</div>
<div class="guestbook-banner">
<a href="https://samply.app/player/8XOak6zbKtLBUg4TX6bz?si=kxOoLFkNWvbT1geBsiq756QymGj2"><img src="https://upforme.ru/uploads/001c/b5/f3/2/955843.png"></a>
</div>
</div>
<div class="sub2">
<div class="sub-text">
<b>ЧТО ВЫ МОЖЕТЕ СДЕЛАТЬ ПРЯМО СЕЙЧАС:</b><br>
— Забронировать внешность на неделю (с возможностью продления).<br>
— Изучить список акций и нужных для игры.<br>
— Рассказать о себе и своих желаниях, если не определились.<br>
— Задать вопрос администрации — мы не кусаемся. Ну, или кусаемся, но строго в рамках Кодекса.
</div>
<div class="guestbook-banner">
<a href="https://samply.app/p/EidBAvrKjHY8pKZb85XC?si=kxOoLFkNWvbT1geBsiq756QymGj2"><img src="https://upforme.ru/uploads/001c/b5/f3/2/657657.png"></a>
</div>
</div>
</div>
</div>

<div class="column2">
<div class="guestbook-faces-roles">
<span>список придержанных <br>внешностей & ролей</span> <br><br>
<span>внешности</span><br>
имя - за <a href="">ссылка на профиль</a> [до ...]<br><br>
<span>роли</span><br>
имя - за <a href="">ссылка на профиль</a> [до ...]<br>
</div>
</div>
</div>
</div>[/html][hideprofile]

lily dale design

Меню навигации

Пользовательские ссылки

Информация о пользователе

важная тема

Сообщений 1 страница 1 из 1

Поделиться12026-06-05 10:30:50