Нужные персонажи [XX век]

[html]<div class="wanted-character">

<div class="wanted-photo">

</div>

<div class="wanted-content">

<div class="wanted-kicker">
НУЖНЫЙ ПЕРСОНАЖ
</div>

<div class="wanted-name">
Имя персонажа
</div>

<span>
Возраст
</span>

</div>

<span>
Социальный статус
</span>

<strong>
Герцогиня
</strong>

</div>

<span>
Внешность
</span>

<strong>
Генерация
</strong>

</div>

<div class="wanted-section-title">
Биография
</div>

Здесь можно написать краткую биографию
персонажа, его историю, характер,
отношения с другими героями и всё,
что важно знать потенциальному игроку.

</div>

<div class="wanted-section-title">
Сюжет
</div>

<a
href="ССЫЛКА_НА_СЮЖЕТ"
class="wanted-story-link"
>
Читать сюжет
<span>→</span>
</a>

</div>

<div class="wanted-section-title">
Полезные ссылки
</div>

<a
href="ССЫЛКА"
class="wanted-link"
>
<span>Отношения</span>
<b>→</b>
</a>

<a
href="ССЫЛКА"
class="wanted-link"
>
<span>Семья</span>
<b>→</b>
</a>

<a
href="ССЫЛКА"
class="wanted-link"
>
<span>Анкета</span>
<b>→</b>
</a>

<a
href="ССЫЛКА"
class="wanted-link"
>
<span>Музыка персонажа</span>
<b>→</b>
</a>

</div>

.wanted-character {

width: 900px;
max-width: 100%;

min-height: 500px;

margin: 30px auto;

display: grid;

grid-template-columns:
1fr 1fr;

box-sizing: border-box;

background: #f1efed;

border:
1px solid rgba(70,55,35,.25);

box-shadow:
0 8px 25px rgba(0,0,0,.12);

font-family: Georgia, serif;

color: #40382d;

overflow: hidden;

}

/* =========================
ФОТО
========================= */

.wanted-photo {

position: relative;

min-height: 500px;

overflow: hidden;

background: #292720;

}

.wanted-photo img {

width: 100%;
height: 100%;

display: block;

object-fit: cover;

}

/* =========================
ИНФОРМАЦИЯ
========================= */

.wanted-content {

padding: 42px 40px;

box-sizing: border-box;

display: flex;

flex-direction: column;

}

/* =========================
МАЛЕНЬКИЙ ЗАГОЛОВОК
========================= */

.wanted-kicker {

margin-bottom: 10px;

font-size: 9px;

letter-spacing: 2.5px;

text-transform: uppercase;

color: #806b48;

}

/* =========================
ИМЯ
========================= */

.wanted-name {

font-size: 28px;

line-height: 1.2;

color: #5b4a32;

}

/* =========================
ЛИНИЯ
========================= */

.wanted-line {

width: 55px;

height: 1px;

margin: 16px 0 25px;

background: #806b48;

}

/* =========================
ИНФОРМАЦИЯ
========================= */

.wanted-info {

display: grid;

grid-template-columns:
1fr 1fr;

gap: 15px 20px;

margin-bottom: 25px;

}

.wanted-info-item {

display: flex;

flex-direction: column;

gap: 5px;

}

.wanted-info-item span {

font-size: 9px;

letter-spacing: 1.3px;

text-transform: uppercase;

color: #9a8a70;

}

.wanted-info-item strong {

font-size: 13px;

font-weight: normal;

color: #40382d;

}

/* =========================
РАЗДЕЛ
========================= */

.wanted-section {

margin-bottom: 22px;

}

.wanted-section-title {

margin-bottom: 9px;

font-size: 10px;

letter-spacing: 1.8px;

text-transform: uppercase;

color: #806b48;

}

/* =========================
БИОГРАФИЯ
========================= */

.wanted-bio {

font-size: 12px;

line-height: 1.7;

color: #665b4b;

}

/* =========================
СЮЖЕТ
========================= */

.wanted-story {

padding-top: 17px;

padding-bottom: 17px;

border-top:
1px solid rgba(70,55,35,.14);

border-bottom:
1px solid rgba(70,55,35,.14);

}

.wanted-story-link {

display: flex;

align-items: center;

justify-content: space-between;

padding: 11px 13px;

box-sizing: border-box;

background:
rgba(128,107,72,.07);

border:
1px solid rgba(70,55,35,.15);

color: #705b3b;

text-decoration: none;

font-size: 12px;

transition: .2s ease;

}

.wanted-story-link span {

font-size: 16px;

color: #806b48;

}

.wanted-story-link:hover {

background:
rgba(128,107,72,.13);

border-color: #806b48;

}

/* =========================
ПОЛЕЗНЫЕ ССЫЛКИ
========================= */

.wanted-links {

display: flex;

flex-direction: column;

gap: 6px;

}

.wanted-link {

display: flex;

align-items: center;

justify-content: space-between;

padding: 9px 11px;

border-bottom:
1px solid rgba(70,55,35,.12);

color: #665b4b;

text-decoration: none;

font-size: 11px;

transition: .2s ease;

}

.wanted-link b {

font-size: 14px;

font-weight: normal;

color: #927c5b;

}

.wanted-link:hover {

padding-left: 15px;

color: #5b4a32;

}

.wanted-link:hover b {

color: #6b4d2c;

}

/* =========================
МОБИЛЬНАЯ ВЕРСИЯ
========================= */

@media (max-width: 700px) {

.wanted-character {

grid-template-columns: 1fr;

}

.wanted-photo {

min-height: 350px;

height: 350px;

}

.wanted-content {

padding: 30px 25px;

}

.wanted-info {

grid-template-columns: 1fr 1fr;

}

@media (max-width: 450px) {

.wanted-info {

grid-template-columns: 1fr;

}

}</style>[/html][html]
<div class="wanted-generator">

<div class="wanted-generator-title">
Генератор нужного персонажа
</div>

<div class="wanted-generator-subtitle">
Заполните информацию о персонаже и получите готовый шаблон для форума.
</div>

<div class="wanted-generator-section-title">
Основная информация
</div>

<label>
Имя персонажа
<input type="text"
id="wanted-name"
placeholder="Имя персонажа">
</label>

<label>
Возраст
<input type="text"
id="wanted-age"
placeholder="35 лет">
</label>

<label>
Социальный статус
<input type="text"
id="wanted-status"
placeholder="Герцог">
</label>

<label>
Внешность
<input type="text"
id="wanted-place"
placeholder="Имя актера на кириллице">
</label>

</div>

<div class="wanted-generator-section-title">
Изображение
</div>

<label>
Ссылка на фото
<input type="text"
id="wanted-photo"
placeholder="https://...">
</label>

<div class="wanted-generator-hint">
Лучше использовать вертикальное или квадратное изображение.
</div>

</div>

<div class="wanted-generator-section-title">
Биография
</div>

<label>
Текст биографии
<textarea id="wanted-bio"
rows="7"
placeholder="Напишите здесь биографию персонажа..."></textarea>
</label>

</div>

<div class="wanted-generator-section-title">
Сюжет
</div>

<label>
Название ссылки
<input type="text"
id="wanted-story-name"
value="Читать сюжет">
</label>

<label>
Ссылка на сюжет
<input type="text"
id="wanted-story-link"
placeholder="https://...">
</label>

</div>

<div class="wanted-generator-section-title">
Дополнительные ссылки
</div>

<div class="wanted-generator-hint">
Добавьте столько ссылок, сколько нужно. Если ничего не добавить,
блок «Полезные ссылки» не появится в готовом коде.
</div>

<label>
Название
<input type="text"
class="wanted-extra-name"
placeholder="Например: Отношения">
</label>

<label>
Ссылка
<input type="text"
class="wanted-extra-url"
placeholder="https://...">
</label>

</div>

<button type="button"
class="wanted-remove-link">
Удалить
</button>

</div>

<button type="button"
id="wanted-add-link"
class="wanted-add-link">
+ Добавить ссылку
</button>

</div>

<button type="button"
id="wanted-generate"
class="wanted-generate">
Сгенерировать шаблон
</button>

</div>

<div class="wanted-result-title">
Готовый код
</div>

<button type="button"
id="wanted-copy"
class="wanted-copy">
Скопировать код
</button>

</div>

</div>
<style>```css
.wanted-generator {
width: 740px;
max-width: 100%;
margin: 30px auto;
padding: 30px;
box-sizing: border-box;

background: #f1efed;
border: 1px solid rgba(70,55,35,.25);
box-shadow: 0 8px 25px rgba(0,0,0,.12);

font-family: Georgia, serif;
color: #40382d;
}

/* ЗАГОЛОВОК */

.wanted-generator-title {
margin-bottom: 8px;

font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;

color: #5b4a32;
}

.wanted-generator-subtitle {
margin-bottom: 28px;
padding-bottom: 20px;

border-bottom: 1px solid rgba(70,55,35,.2);

font-size: 12px;
line-height: 1.6;

color: #8a7657;
}

/* СЕКЦИИ */

.wanted-generator-section {
margin-bottom: 28px;
}

.wanted-generator-section-title {
margin-bottom: 15px;

font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;

color: #806b48;
}

/* GRID */

.wanted-generator-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}

/* LABEL */

.wanted-generator label {
display: block;

font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;

color: #806b48;
}

/* INPUTS */

.wanted-generator input,
.wanted-generator textarea {
display: block;

width: 100%;
margin-top: 7px;

padding: 11px 12px;

box-sizing: border-box;

border: 1px solid rgba(70,55,35,.22);

background: rgba(255,255,255,.55);

font-family: Georgia, serif;
font-size: 12px;

color: #40382d;

outline: none;

transition: .2s ease;
}

.wanted-generator textarea {
min-height: 130px;
resize: vertical;
line-height: 1.6;
}

.wanted-generator input:focus,
.wanted-generator textarea:focus {
border-color: #806b48;
background: #fffdf8;
}

/* ПОДСКАЗКА */

.wanted-generator-hint {
margin-top: 8px;

font-size: 10px;
line-height: 1.5;

color: #9a8a70;
}

/* ДОПОЛНИТЕЛЬНЫЕ ССЫЛКИ */

.wanted-link-form {
margin-bottom: 12px;
padding: 16px;

border: 1px solid rgba(70,55,35,.18);
background: rgba(255,255,255,.35);

box-sizing: border-box;
}

.wanted-link-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}

/* УДАЛИТЬ ССЫЛКУ */

.wanted-remove-link {
margin-top: 13px;

padding: 7px 12px;

border: 1px solid rgba(70,55,35,.25);
background: transparent;

font-family: Georgia, serif;
font-size: 10px;

color: #927c5b;

cursor: pointer;

transition: .2s ease;
}

.wanted-remove-link:hover {
border-color: #806b48;
background: rgba(128,107,72,.08);
color: #6b4d2c;
}

/* ДОБАВИТЬ ССЫЛКУ */

.wanted-add-link {
margin-top: 5px;
padding: 10px 15px;

border: 1px solid rgba(70,55,35,.25);
background: transparent;

font-family: Georgia, serif;
font-size: 11px;

color: #806b48;

cursor: pointer;

transition: .2s ease;
}

.wanted-add-link:hover {
background: rgba(128,107,72,.08);
border-color: #806b48;
}

/* КНОПКА ГЕНЕРАЦИИ */

.wanted-generator-actions {
padding-top: 5px;
}

.wanted-generate {
width: 100%;
padding: 13px 20px;

border: 1px solid #806b48;

background: #806b48;

font-family: Georgia, serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;

color: #fff;

cursor: pointer;

transition: .2s ease;
}

.wanted-generate:hover {
background: #665338;
border-color: #665338;
}

/* РЕЗУЛЬТАТ */

.wanted-result-block {
display: none;

margin-top: 30px;
padding-top: 25px;

border-top: 1px solid rgba(70,55,35,.2);
}

.wanted-result-block.active {
display: block;
}

.wanted-result-title {
margin-bottom: 12px;

font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;

color: #5b4a32;
}

/* TEXTAREA С КОДОМ */

#wanted-result {
width: 100%;
min-height: 500px;

padding: 18px;

box-sizing: border-box;

resize: vertical;

background: #292720;
border: 1px solid #5c503c;

font-family: Consolas, Monaco, monospace;
font-size: 11px;
line-height: 1.6;

color: #e8dfcf;
}

/* КОПИРОВАТЬ */

.wanted-copy {
margin-top: 10px;

padding: 10px 17px;

border: 1px solid rgba(70,55,35,.3);

background: #5f523d;

font-family: Georgia, serif;
font-size: 11px;

color: white;

cursor: pointer;

transition: .2s ease;
}

.wanted-copy:hover {
background: #473d2e;
}

/* АДАПТИВ */

@media (max-width: 650px) {

.wanted-generator {
padding: 20px;
}

.wanted-generator-grid,
.wanted-link-fields {
grid-template-columns: 1fr;
}

}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/86698.js?v=2"></script>

[/html]

[html]

<div class="wanted-kicker">
НУЖНЫЙ ПЕРСОНАЖ
</div>

<div class="wanted-name">
АНСАЛ БРАНК
</div>

<div class="wanted-info-item">
<span>Возраст</span>
<strong> 30 лет</strong>
</div>

<div class="wanted-info-item">
<span>Социальный статус</span>
<strong>Фермер</strong>
</div>

<div class="wanted-info-item">
<span>Внешность</span>
<strong>на усмотрение игрока, но ты сильный и рыжий</strong>
</div>

</div>

<div class="wanted-section-title">
Биография
</div>

<div class="wanted-bio">
Ты — Ансал Бранк, старший сын в семье потомственных земледельцев и пастухов с острова Вагнарёк в Кельнском архипелаге. Твой род уходит корнями в глубокую тартумскую старину: поколения вашей семьи обрабатывали землю и пасли скот, не искав славы в ратных делах. Тебя назвали старинным именем Ансал, что означает «посвящённый Ансалхору»(Своего рода бог смерти). По рассказам близких, при рождении ты пережил кратковременную смерть и вернулся к жизни, из-за чего родители и сочли это имя единственно верным. Они передали тебе все семейные традиции и научили крепко стоять на ногах, а за младшую сестру ты готов порвать любого. Вместе вы регулярно отвозите плоды труда фермы на продажу в местное поселение где продаёте работающей на лавке‑складе Фьёрдис.
</div>

</div>

<div class="wanted-section-title">
Сюжет
</div>

<a href="https://lepidus.ru/viewtopic.php?id=7615#p310128" class="wanted-story-link">
Читать сюжет
<span>→</span>
</a>

</div>

<div class="wanted-section-title">
Полезные ссылки
</div>

<a href="https://lepidus.ru/viewtopic.php?id=7676" class="wanted-link">
<span>Сестра</span>
<b>→</b>
</a>

<a href="https://lepidus.ru/viewtopic.php?id=7619#p310263" class="wanted-link">
<span>Фьёрдис</span>
<b>→</b>
</a>

</div>

[/html]

Отредактировано Шульда Бранка (Вчера 14:57)

Танец Вечности

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

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

Объявление

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

Нужные персонажи [XX век]

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

Поделиться1Вчера 14:14

Поделиться2Вчера 14:55