[html]<div class="wanted-character">
<!-- ФОТО -->
<div class="wanted-photo">
<img
src="https://i.pinimg.com/736x/42/fe/bc/42febce359bc06bfd6dc7e31cfb824c6.jpg"
alt="Имя персонажа"
>
</div>
<!-- ИНФОРМАЦИЯ -->
<div class="wanted-content">
<div class="wanted-kicker">
НУЖНЫЙ ПЕРСОНАЖ
</div>
<div class="wanted-name">
Имя персонажа
</div>
<div class="wanted-line"></div>
<!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
<div class="wanted-info">
<div class="wanted-info-item">
<span>
Возраст
</span>
<strong>
35 лет
</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">
<div class="wanted-section-title">
Биография
</div>
<div class="wanted-bio">
Здесь можно написать краткую биографию
персонажа, его историю, характер,
отношения с другими героями и всё,
что важно знать потенциальному игроку.
</div>
</div>
<!-- СЮЖЕТ -->
<div class="wanted-section wanted-story">
<div class="wanted-section-title">
Сюжет
</div>
<a
href="ССЫЛКА_НА_СЮЖЕТ"
class="wanted-story-link"
>
Читать сюжет
<span>→</span>
</a>
</div>
<!-- ДОПОЛНИТЕЛЬНЫЕ ССЫЛКИ -->
<div class="wanted-section">
<div class="wanted-section-title">
Полезные ссылки
</div>
<div class="wanted-links">
<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>
</div>
</div>
</div>
<style>/* =========================
НУЖНЫЙ ПЕРСОНАЖ
========================= */
.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">
<div class="wanted-generator-section-title">Основная информация</div>
<div class="wanted-generator-grid">
<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>
<!-- ФОТО -->
<div class="wanted-generator-section">
<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">
<div class="wanted-generator-section-title">Биография</div>
<label>
Текст биографии
<textarea id="wanted-bio" rows="7" placeholder="Напишите здесь биографию персонажа..."></textarea>
</label>
</div>
<!-- СЮЖЕТ -->
<div class="wanted-generator-section">
<div class="wanted-generator-section-title">Сюжет</div>
<div class="wanted-generator-grid">
<label>
Название ссылки
<input type="text" id="wanted-story-name" value="Читать сюжет">
</label>
<label>
Ссылка на сюжет
<input type="text" id="wanted-story-link" placeholder="https://...">
</label>
</div>
</div>
<!-- ДОПОЛНИТЕЛЬНЫЕ ССЫЛКИ -->
<div class="wanted-generator-section">
<div class="wanted-generator-section-title">Дополнительные ссылки</div>
<div class="wanted-generator-hint">
Добавьте столько ссылок, сколько нужно. Если ничего не добавить,
блок «Полезные ссылки» не появится в готовом коде.
</div>
<div id="wanted-links-generator">
<div class="wanted-link-form">
<div class="wanted-link-fields">
<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>
</div>
<button type="button" id="wanted-add-link" class="wanted-add-link">
+ Добавить ссылку
</button>
</div>
<!-- КНОПКА -->
<div class="wanted-generator-actions">
<button type="button" id="wanted-generate" class="wanted-generate">
Сгенерировать шаблон
</button>
</div>
<!-- РЕЗУЛЬТАТ -->
<div id="wanted-result-block" class="wanted-result-block">
<div class="wanted-result-title">Готовый код</div>
<textarea id="wanted-result" readonly></textarea>
<button type="button" id="wanted-copy" class="wanted-copy">
Скопировать код
</button>
</div>
</div>
<script type="text/javascript" src="https://forumstatic.ru/files/0011/93/3d/86698.js?v=2"></script>
[/html]
