[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>
<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]
