Заголовок: michael wheeler, 19
Внешний вид полного шаблона анкеты:
[html]
<style>
.custom-tpl-1 {
max-width: 520px;
margin: 0 auto;
background: #fbfbfb;
border: 1px solid #eaeaea;
padding: 30px;
font-family: 'Georgia', serif;
color: #333;
}
.tpl-1-header {
text-align: center;
margin-bottom: 25px;
}
.tpl-1-name {
font-size: 22px;
text-transform: lowercase;
letter-spacing: 2px;
color: #111;
border-bottom: 1px solid #111;
padding-bottom: 10px;
margin-bottom: 10px;
}
.tpl-1-subtitle {
font-size: 10px;
font-family: 'Arial', sans-serif;
letter-spacing: 2px;
color: #888;
text-transform: uppercase;
}
.tpl-1-flex {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.tpl-1-img-box {
width: 180px;
height: 250px;
flex-shrink: 0;
}
.tpl-1-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tpl-1-summary {
font-family: 'Arial', sans-serif;
font-size: 11px;
line-height: 1.6;
text-align: justify;
color: #555;
}
.tpl-1-tag {
font-weight: bold;
color: #222;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
display: block;
margin-top: 8px;
}
.tpl-1-main {
font-size: 13px;
line-height: 1.7;
text-align: justify;
padding-top: 20px;
border-top: 1px dotted #ccc;
}
.tpl-1-spoiler {
margin-top: 15px;
}
.tpl-1-spoiler input[type="checkbox"] {
display: none;
}
.tpl-1-spoiler label {
display: inline-block;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
user-select: none;
}
.tpl-1-spoiler label::before {
content: '▶ ';
font-size: 9px;
display: inline-block;
margin-right: 5px;
transition: transform 0.15s ease;
}
.tpl-1-spoiler input[type="checkbox"]:checked + label::before {
transform: rotate(90deg);
}
.tpl-1-spoiler-content {
display: none;
margin-top: 10px;
padding: 15px;
background: #ffffff;
border: 1px solid #eaeaea;
font-family: 'Arial', sans-serif;
font-size: 11px;
color: #555;
line-height: 1.6;
}
.tpl-1-spoiler input[type="checkbox"]:checked ~ .tpl-1-spoiler-content {
display: block;
}
</style>
<div class="custom-tpl-1">
<div class="tpl-1-header">
<div class="tpl-1-name">michael wheeler</div>
<div class="tpl-1-subtitle">fc: finn wolfhard</div>
</div>
<div class="tpl-1-flex">
<div class="tpl-1-img-box">
<img src="http://forumstatic.ru/files/001c/ba/bd/42878.gif" alt="">
</div>
<div class="tpl-1-summary">
<span class="tpl-1-tag">Краткая сводка:</span>
Здесь пишется та самая выжимка на 10-15 строк. Основная суть персонажа, его род деятельности, знак зодиака, навыки, мировоззрение. Ёмко и хлёстко.
<br><br>
<span class="tpl-1-tag">Принадлежность:</span>
сопротивление / выживший / фракция
</div>
</div>
<div class="tpl-1-main">
Здесь располагается подробная биография, ответы на вопросы, 5 фактов, психотип или любой другой формат, в котором привыкли раскрывать персонажа.
<div class="tpl-1-spoiler">
<input type="checkbox" id="spoiler-vibes">
<label for="spoiler-vibes">вайб</label>
<div class="tpl-1-spoiler-content">
здесь прячутся эстетика, плейлисты или описание атмосферы персонажа
</div>
</div>
<div class="tpl-1-spoiler">
<input type="checkbox" id="spoiler-memes">
<label for="spoiler-memes">мемы</label>
<div class="tpl-1-spoiler-content">
здесь прячутся мемы, гифки или любой другой контент
</div>
</div>
</div>
</div>
[/html]
Заголовок: michael wheeler, 19
Внешний вид:
[html]
<style>
.custom-tpl-1 {
max-width: 520px;
margin: 0 auto;
background: #fbfbfb;
border: 1px solid #eaeaea;
padding: 30px;
font-family: 'Georgia', serif;
color: #333;
}
.tpl-1-header {
text-align: center;
margin-bottom: 25px;
}
.tpl-1-name {
font-size: 22px;
text-transform: lowercase;
letter-spacing: 2px;
color: #111;
border-bottom: 1px solid #111;
padding-bottom: 10px;
margin-bottom: 10px;
}
.tpl-1-subtitle {
font-size: 10px;
font-family: 'Arial', sans-serif;
letter-spacing: 2px;
color: #888;
text-transform: uppercase;
}
.tpl-1-flex {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.tpl-1-img-box {
width: 180px;
height: 250px;
flex-shrink: 0;
}
.tpl-1-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.tpl-1-summary {
font-family: 'Arial', sans-serif;
font-size: 11px;
line-height: 1.6;
text-align: justify;
color: #555;
}
.tpl-1-tag {
font-weight: bold;
color: #222;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
display: block;
margin-top: 8px;
}
.tpl-1-main {
font-size: 13px;
line-height: 1.7;
text-align: justify;
padding-top: 20px;
border-top: 1px dotted #ccc;
}
.tpl-1-spoiler {
margin-top: 15px;
}
.tpl-1-spoiler input[type="checkbox"] {
display: none;
}
.tpl-1-spoiler label {
display: inline-block;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
user-select: none;
}
.tpl-1-spoiler label::before {
content: '▶ ';
font-size: 9px;
display: inline-block;
margin-right: 5px;
transition: transform 0.15s ease;
}
.tpl-1-spoiler input[type="checkbox"]:checked + label::before {
transform: rotate(90deg);
}
.tpl-1-spoiler-content {
display: none;
margin-top: 10px;
padding: 15px;
background: #ffffff;
border: 1px solid #eaeaea;
font-family: 'Arial', sans-serif;
font-size: 11px;
color: #555;
line-height: 1.6;
}
.tpl-1-spoiler input[type="checkbox"]:checked ~ .tpl-1-spoiler-content {
display: block;
}
</style>
<div class="custom-tpl-1">
<div class="tpl-1-header">
<div class="tpl-1-name">name surname персонажа</div>
<div class="tpl-1-subtitle">fc: имя внешности на англ с маленькой буквы</div>
</div>
<div class="tpl-1-flex">
<div class="tpl-1-img-box">
<img src="ссылка_на_гиф" alt="">
</div>
<div class="tpl-1-summary">
<span class="tpl-1-tag">Краткая сводка:</span>
Здесь пишется та самая выжимка на 10-15 строк. Основная суть персонажа, его род деятельности, знак зодиака, навыки, мировоззрение. Ёмко и хлёстко.
<br><br>
<span class="tpl-1-tag">Принадлежность:</span>
сопротивление / выживший / фракция
</div>
</div>
<div class="tpl-1-main">
Здесь располагается подробная биография, ответы на вопросы, 5 фактов, психотип или любой другой формат, в котором привыкли раскрывать персонажа.
<div class="tpl-1-spoiler">
<input type="checkbox" id="spoiler-vibes">
<label for="spoiler-vibes">вайб</label>
<div class="tpl-1-spoiler-content">
здесь прячутся эстетика, плейлисты или описание атмосферы персонажа
</div>
</div>
<div class="tpl-1-spoiler">
<input type="checkbox" id="spoiler-memes">
<label for="spoiler-memes">мемы</label>
<div class="tpl-1-spoiler-content">
здесь прячутся мемы, гифки или любой другой контент
</div>
</div>
</div>
</div>
[/html]