Оформление локаций

Страница: 1

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

Поделиться12025-05-01 22:59:58

Автор: Черника
Проверка максимально длинного статуса, который тол
Предводитель
13 лун
Какая-то красивая цитата персонажа тут ссылка и еще немного текста
Сообщений: 124
Уважение: +9

[hideprofile]

[sign][/sign]

Описание

Травы

Добыча

Особенности места

У более теплого течения размещаются нагретые камни, которые так любят старики. Здесь создана небольшая плотина для задержания течения реки с помощью камней разной величины и веток, чтобы можно было учить котят плавать в любое, даже самое холодное время года. Это небольшой закуток водоема, который является частью локации - Река и тесно связан с ним.

ЛЕКАРСТВЕННЫЕ РАСТЕНИЯ
• Алтей, листья и корни [юные листья - листопад]
• Крестовник, листья и стебли [юные листья - листопад]
• Кровохлебка, листья [зеленые листья - листопад]
• Ноготки, цветки [зеленые листья]
• Окопник, листья [зеленые листья - листопад]
• Осока, листья и корневища [юные листья - листопад]
• Чистец, листья [зеленые листья]

ЯДОВИТЫЕ РАСТЕНИЯ/ГРИБЫ
• Отсутствуют

ПРОЧЕЕ
• Отсутствуют

УСЛОВИЯ МЕСТА
• Дичь знает, что место обживаемое котами, но подходит для тренировок на легкую добычу.

ОПАСНЫЕ/ХИЩНИКИ
• Отсутствуют

ДОБЫЧА
• Отсутствует

ПРОСТЕЙШАЯ ДОБЫЧА
• Стрекозы
• Улитки
• Мотыльки
• Мальки

• Заводь для плесканий в Реке когда-то собрал бывший глашатай Речного племени, благодаря теплым водам это место приняло много лекарственных свойств, стоит только взглянуть какой мягкий пар собирается в заливе в суровый сезон Голых деревьев.

Проверить под камнями

Пусто

Поделиться22026-03-08 20:34:08

Автор: Разгром
Администратор
Сообщений: 20
Уважение: +0

[html]
<div class="forest-adaptive-wrapper">
<style>
/* 1. КОНТЕЙНЕР И ТЕМЫ */
.forest-adaptive-wrapper { background: transparent !important; padding: 0; margin: 10px auto; max-width: 750px; }

.forest-card {
--f-bg: #ffffff; --f-txt: #333; --f-acc: #556b2f; --f-brd: #eeeeee;
border-radius: 15px; background: var(--f-bg); color: var(--f-txt);
font-family: 'Georgia', serif; border: 1px solid var(--f-brd);
overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); position: relative;
}

/* Переключатели тем */
#theme-dark:checked ~ .forest-card { --f-bg: #1a241a; --f-txt: #d1d8d1; --f-acc: #3d5e3d; --f-brd: #2d3a2d; }
#theme-winter:checked ~ .forest-card { --f-bg: #f4f7f9; --f-txt: #2c3e50; --f-acc: #5dade2; --f-brd: #d6eaf8; }

.color-switches {
position: absolute; top: 15px; right: 15px; z-index: 20;
display: flex; gap: 8px; background: rgba(0,0,0,0.3); padding: 5px; border-radius: 20px;
}
.color-switches label { width: 15px; height: 15px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; transition: 0.3s; }
.btn-std { background: #556b2f; }
.btn-dark { background: #1a3c1a; }
.btn-winter { background: #5dade2; }

/* 2. ШАПКА И ЭФФЕКТ ЦИТАТЫ */
.f-header { position: relative; height: 280px; overflow: hidden; background: #000; }
.f-header img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease-in-out; }

.f-title-box {
position: absolute; bottom: 0; width: 100%; padding: 30px 20px;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
color: #fff !important; text-align: center; z-index: 5; transition: 0.4s;
}
.f-title-box h1 { margin: 0; font-size: 32px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 5px #000; }

.f-hover-quote {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center;
justify-content: center; padding: 40px; text-align: center; font-style: italic;
opacity: 0; transition: 0.5s; z-index: 10; pointer-events: none; line-height: 1.6;
font-size: 19px; font-family: Mak Light;
}

.f-header:hover img { transform: scale(1.1); filter: blur(2px); }
.f-header:hover .f-hover-quote { opacity: 1; }
.f-header:hover .f-title-box { opacity: 0; }

/* 3. НАВИГАЦИЯ И КОНТЕНТ */
.forest-adaptive-wrapper input[type="radio"] { display: none !important; }
.f-nav { display: flex; background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--f-brd); }
.f-nav label {
flex: 1; padding: 15px 5px; text-align: center; cursor: pointer;
font-size: 11px; text-transform: uppercase; font-weight: bold;
color: var(--f-txt); opacity: 0.5; transition: 0.3s; border-bottom: 2px solid transparent;
}
.f-content { display: none; padding: 25px; line-height: 1.7; font-size: 15px; min-height: 250px; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

#t-1:checked ~ .forest-card .f-nav label[for="t-1"], #t-2:checked ~ .forest-card .f-nav label[for="t-2"],
#t-3:checked ~ .forest-card .f-nav label[for="t-3"], #t-4:checked ~ .forest-card .f-nav label[for="t-4"] {
opacity: 1; color: var(--f-acc); border-bottom: 2px solid var(--f-acc);
}
#t-1:checked ~ .forest-card #c-1, #t-2:checked ~ .forest-card #c-2,
#t-3:checked ~ .forest-card #c-3, #t-4:checked ~ .forest-card #c-4 { display: block; }

/* Блоки цитат */
.f-block { margin-bottom: 15px; padding: 15px; border-left: 3px solid var(--f-acc); background: rgba(128,128,128,0.05); border-radius: 0 8px 8px 0; }
.f-block b { display: block; text-transform: uppercase; font-size: 12px; color: var(--f-acc); margin-bottom: 5px; }
.f-link { color: var(--f-acc); font-weight: bold; text-decoration: none; border-bottom: 1px dashed var(--f-acc); }
</style>

<div class="f-header">
<img src="https://upforme.ru/uploads/0004/e7/0d/3979/641006.jpg">
<div class="f-hover-quote">
«— Ну, по крайней мере, тут чуток попросторнее, — нехотя признал белый воин. — И вода не так близко».
</div>
<div class="f-title-box"><h1>Главная поляна</h1></div>
</div>

<div class="f-nav">
<label for="t-1">Описание</label>
<label for="t-2">Травы</label>
<label for="t-3">Добыча</label>
<label for="t-4">Особенности</label>
</div>

<div class="f-content" id="c-1">
Продолжение темы — <a href="https://cwotgoloski.ru/viewtopic.php?id=8054&p=51" class="f-link">Главная поляна #6</a><br><br>
Лагерь Тигриного племени окружён с одной стороны берёзовой рощей и высоким холмом, где проводят ночное бдение воители, с другой.<br><br>
Вместо величавой скалы собраний, на главную поляну отбрасывает тень согнутая берёза. В корнях дерева расположена пещера предводителя, раскидистые ветви выступают дополнительным прикрытием для сердца Тигриного племени. Палатками служат кусты лапчатки и шиповника, но территория лагеря достаточно просторна, чтобы спать под открытым небом.<br><br>
Если напрячь слух, можно услышать плеск реки вдалеке со стороны холма — там матери-королевы учат плавать котят, когда их лапы достаточно окрепнут.
</div>

<div class="f-content" id="c-2">
<div class="f-block"><b>Лекарственные растения</b> Отсутствуют</div>
<div class="f-block"><b>Ядовитые растения/грибы</b> Отсутствуют</div>
<div class="f-block"><b>Прочее</b> Отсутствуют</div>
</div>

<div class="f-content" id="c-3">
<div class="f-block"><b>Условия места</b> Территории лагеря не являются пригодными для охоты.</div>
<div class="f-block"><b>Опасные/Хищники</b> Отсутствуют</div>
<div class="f-block"><b>Добыча</b> Отсутствует</div>
<div class="f-block"><b>Простейшая добыча</b> Отсутствует</div>
</div>

<div class="f-content" id="c-4">
• <b>Главная поляна лагеря</b> — центр всего племени, отсюда начинается новый день воителя, новые истории и новые победы.
</div>
</div>
</div>
[/html]
[hideprofile]

Поделиться32026-03-08 20:50:44

Автор: Разгром
Администратор
Сообщений: 20
Уважение: +0

[html]
<div class="forest-adaptive-wrapper">
<style>
/* --- НАСТРОЙКА КАРТИНОК ПО СЕЗОНАМ --- */
:root {
--img-std: url('https://upforme.ru/uploads/0004/e7/0d/3979/641006.jpg');
--img-dark: url('https://img.freepik.com');
--img-winter: url('https://w.forfun.com');
}

/* 1. КОНТЕЙНЕР */
.forest-adaptive-wrapper { background: transparent !important; padding: 0; margin: 10px auto; max-width: 650px; }

.forest-card {
--f-bg: #ffffff; --f-txt: #333; --f-acc: #556b2f; --f-brd: #eeeeee;
--current-img: var(--img-std);
border-radius: 15px; background: var(--f-bg); color: var(--f-txt);
font-family: 'Georgia', serif; border: 1px solid var(--f-brd);
overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); position: relative;
}

#theme-dark:checked ~ .forest-card { --f-bg: #1a241a; --f-txt: #d1d8d1; --f-acc: #3d5e3d; --f-brd: #2d3a2d; --current-img: var(--img-dark); }
#theme-winter:checked ~ .forest-card { --f-bg: #f4f7f9; --f-txt: #2c3e50; --f-acc: #5dade2; --f-brd: #d6eaf8; --current-img: var(--img-winter); }

.color-switches {
position: absolute; top: 12px; right: 15px; z-index: 30;
display: flex; gap: 8px; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 20px;
}
.color-switches label { width: 12px; height: 12px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; transition: 0.3s; }
.btn-std { background: #556b2f; }
.btn-dark { background: #2d4d2d; }
.btn-winter { background: #5dade2; }

/* 2. УЗКАЯ ШАПКА И ПЛАВНАЯ ЦИТАТА */
.f-header { position: relative; height: 220px; width: 100%; overflow: hidden; background: #000; }

.f-img-layer {
width: 100%; height: 100%;
background-image: var(--current-img);
background-size: cover; background-position: center 30%;
transition: background-image 0.8s ease, transform 1.5s ease-out;
}

.f-info-panel {
position: absolute; bottom: 0; width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
padding: 15px 20px; text-align: center; color: #fff;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 70px; display: flex; flex-direction: column; justify-content: flex-end;
}

.f-title { margin: 0; font-size: 30px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 8px #000; transition: 0.6s; }

.f-quote-hidden {
opacity: 0; max-height: 0; font-style: italic; font-size: 13.5px; line-height: 1.5;
transition: opacity 0.8s ease-in-out, max-height 0.8s ease;
color: rgba(255,255,255,0.9); margin-top: 0; overflow: hidden;
}

.f-header:hover .f-info-panel { max-height: 220px; padding-bottom: 40px; }
.f-header:hover .f-quote-hidden { opacity: 1; max-height: 120px; margin-top: 12px; }
.f-header:hover .f-img-layer { transform: scale(1.1); filter: brightness(0.7); }

/* 3. НАВИГАЦИЯ */
.forest-adaptive-wrapper input[type="radio"] { display: none !important; }
.f-nav { display: flex; background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--f-brd); }
.f-nav label {
flex: 1; padding: 14px 5px; text-align: center; cursor: pointer;
font-size: 10.5px; text-transform: uppercase; font-weight: bold;
color: var(--f-txt); opacity: 0.5; transition: 0.3s; border-bottom: 2px solid transparent;
}
.f-content { display: none; padding: 22px; line-height: 1.7; font-size: 14.5px; min-height: 280px; animation: fadeIn 0.8s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.f-block { margin-bottom: 12px; padding: 12px 15px; border-left: 4px solid var(--f-acc); background: rgba(128,128,128,0.06); border-radius: 0 8px 8px 0; }
.f-block b { display: block; text-transform: uppercase; font-size: 11px; color: var(--f-acc); margin-bottom: 4px; letter-spacing: 0.5px; }
.f-hr { border: 0; border-top: 1px dashed var(--f-brd); margin: 12px 0; }
.f-link { color: var(--f-acc); font-weight: bold; text-decoration: none; border-bottom: 1px dotted var(--f-acc); }
</style>

<div class="f-header">
<div class="f-img-layer"></div>
<div class="f-info-panel">
<h1 class="f-title">Главная поляна</h1>
<div class="f-quote-hidden">
«— Ну, по крайней мере, тут чуток попросторнее, — нехотя признал белый воин. — И вода не так близко».
</div>
</div>
</div>

<div class="f-nav">
<label for="t-1">Описание</label>
<label for="t-2">Травы</label>
<label for="t-3">Добыча</label>
<label for="t-4">Особенности</label>
</div>

<div class="f-content" id="c-1">
Продолжение темы — <a href="https://cwotgoloski.ru" class="f-link">Главная поляна #6</a><br><br>
Лагерь Тигриного племени окружён с одной стороны берёзовой рощей и высоким холмом, где проводят ночное бдение воители, с другой.<br><br>
Вместо величавой скалы собраний, на главную поляну отбрасывает тень согнутая берёза. В корнях дерева расположена пещера предводителя, раскидистые ветви выступают дополнительным прикрытием для сердца Тигриного племени. Палатками служат кусты лапчатки и шиповника, но территория лагеря достаточно просторна, чтобы спать под открытым небом.<br><br>
Если напрячь слух, можно услышать плеск реки вдалеке со стороны холма — там матери-королевы учат плавать котят, когда их лапы достаточно окрепнут.
</div>

<div class="f-content" id="c-2">
<div class="f-block"><b>Лекарственные растения</b> • Отсутствуют</div>
<hr class="f-hr">
<div class="f-block"><b>Ядовитые растения/грибы</b> • Отсутствуют</div>
<hr class="f-hr">
<div class="f-block"><b>Прочее</b> • Отсутствуют</div>
</div>

<div class="f-content" id="c-3">
<div class="f-block"><b>Условия места</b> • Территории лагеря не являются пригодными для охоты.</div>
<hr class="f-hr">
<div class="f-block"><b>Опасные/Хищники</b> • Отсутствуют</div>
<hr class="f-hr">
<div class="f-block"><b>Добыча</b> • Отсутствует</div>
<hr class="f-hr">
<div class="f-block"><b>Простейшая добыча</b> • Отсутствует</div>
</div>

<div class="f-content" id="c-4">
• <b>Главная поляна лагеря</b> — центр всего племени, отсюда начинается новый день воителя, новые истории и новые победы.
</div>

</div>
</div>
[/html]

Поделиться42026-03-08 20:55:50

Автор: Разгром
Администратор
Сообщений: 20
Уважение: +0

[html]
<div class="forest-adaptive-wrapper">
<style>
/* --- ПРЯМЫЕ ССЫЛКИ НА КАРТИНКИ (ВЫНЕСЕНЫ В НАЧАЛО) --- */
:root {
/* ЛЕТО (Стандарт) — Ваша оригинальная картинка */
--img-std: url('https://upforme.ru/uploads/0004/e7/0d/3979/641006.jpg');
/* ВЕСНА (Яркие побеги) — Нежная молодая зелень */
--img-dark: url('https://i.ibb.co');
/* ЗИМА (Снег) — Заснеженная березовая роща */
--img-winter: url('https://i.ibb.co');
}

/* 1. КОНТЕЙНЕР И ТЕМЫ */
.forest-adaptive-wrapper { background: transparent !important; padding: 0; margin: 10px auto; max-width: 650px; }

/* 2. УЗКАЯ ПАНОРАМНАЯ ШАПКА */
.f-header { position: relative; height: 180px; width: 100%; overflow: hidden; background: #000; }

.f-img-layer {
width: 100%; height: 100%;
background-image: var(--current-img);
background-size: cover;
background-position: center 40%;
transition: background-image 0.8s ease, transform 1.5s ease;
}

.f-info-panel {
position: absolute; bottom: 0; width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 80%, transparent 100%);
padding: 15px 20px; text-align: center; color: #fff;
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 65px; display: flex; flex-direction: column; justify-content: flex-end;
}

.f-title { margin: 0; font-size: 28px; text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 8px #000; transition: 0.6s; }

.f-quote-hidden {
opacity: 0; max-height: 0; font-style: italic; font-size: 13.5px; line-height: 1.5;
transition: opacity 0.8s ease-in-out 0.2s, max-height 0.7s ease; /* Задержка появления текста */
color: rgba(255,255,255,0.9); margin-top: 0; overflow: hidden;
}

/* Эффект выдвижения */
.f-header:hover .f-info-panel { max-height: 180px; padding-bottom: 30px; }
.f-header:hover .f-quote-hidden { opacity: 1; max-height: 100px; margin-top: 10px; }
.f-header:hover .f-img-layer { transform: scale(1.1); filter: brightness(0.8); }

/* 3. НАВИГАЦИЯ */
.forest-adaptive-wrapper input[type="radio"] { display: none !important; }
.f-nav { display: flex; background: rgba(0,0,0,0.03); border-bottom: 1px solid var(--f-brd); }
.f-nav label {
flex: 1; padding: 12px 5px; text-align: center; cursor: pointer;
font-size: 10px; text-transform: uppercase; font-weight: bold;
color: var(--f-txt); opacity: 0.5; transition: 0.3s; border-bottom: 2px solid transparent;
}
.f-content { display: none; padding: 22px; line-height: 1.7; font-size: 14.5px; min-height: 300px; animation: fadeIn 0.8s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.f-block { margin-bottom: 12px; padding: 12px 15px; border-left: 4px solid var(--f-acc); background: rgba(128,128,128,0.06); border-radius: 0 8px 8px 0; }
.f-block b { display: block; text-transform: uppercase; font-size: 11px; color: var(--f-acc); margin-bottom: 4px; }
.f-link { color: var(--f-acc); font-weight: bold; text-decoration: none; border-bottom: 1px dotted var(--f-acc); }
</style>

<div class="f-nav">
<label for="t-1">Описание</label>
<label for="t-2">Травы</label>
<label for="t-3">Добыча</label>
<label for="t-4">Особенности</label>
</div>

<div class="f-content" id="c-2">
<div class="f-block"><b>Лекарственные растения</b> • Отсутствуют</div>
<div class="f-block"><b>Ядовитые растения/грибы</b> • Отсутствуют</div>
<div class="f-block"><b>Прочее</b> • Отсутствуют</div>
</div>

<div class="f-content" id="c-3">
<div class="f-block"><b>Условия места</b> • Территории лагеря не пригодны для охоты.</div>
<div class="f-block"><b>Опасные/Хищники</b> • Отсутствуют</div>
<div class="f-block"><b>Дополнительная добыча</b> • Отсутствует</div>
<div class="f-block"><b>Простейшая добыча</b> • Отсутствует</div>
</div>

</div>
</div>
[/html]

Поделиться52026-04-03 19:15:34

Автор: Черника
Проверка максимально длинного статуса, который тол
Предводитель
13 лун
Какая-то красивая цитата персонажа тут ссылка и еще немного текста
Сообщений: 124
Уважение: +9

/*Личная страница*/
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 9999;
display: none;
top: 0;
left: 0;
}

.reveal-modal.xlarge {
width: 900px;
}

.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
font-weight: bold;
cursor: pointer;
text-decoration: none;
top: -18px;
right: 10px;
color: var(--link-light);
transition: color 0.8s ease;
}

.reveal-modal .close-reveal-modal:hover {
color: var(--text);
transition: color 0.8s ease;
}

Страница: 1

Хранилище

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

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

Объявление

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

Оформление локаций

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

Поделиться12025-05-01 22:59:58

Поделиться22026-03-08 20:34:08

Поделиться32026-03-08 20:50:44

Поделиться42026-03-08 20:55:50

Поделиться52026-04-03 19:15:34