[html]<div class="anketa-naruto">
<div class="anketa-title">анкета персонажа</div>
<div class="anketa-info">
<div>
<b>Клан и Имя:</b>
Учиха Саске
</div>
<div>
<b>Возраст:</b>
<span class="character-profile">
<span class="birth-date" data-birth="01-03-611"></span>
<span class="character-age">...</span>
</span>
</div>
<div>
<b>Деревня:</b>
Скрытый Лист
</div>
<div>
<b>Ранг:</b>
Джонин
</div>
</div>
<div class="anketa-block">
<div class="anketa-subtitle">описание персонажа</div>
<img src="https://i.pinimg.com/736x/ab/a5/b7/aba5b7432bf6eb894bb81d3e3d8f3a8c.jpg" class="anketa-img" alt="">
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
</p>
</div>
<div class="anketa-block">
<div class="anketa-subtitle">связь с вами</div>
<p>Telegram / ЛС / Discord — что удобно.</p>
</div>
<div class="anketa-block">
<div class="anketa-subtitle">пробный пост</div>
<p>Текст пробного поста.</p>
</div>
</div>
<style>
.anketa-naruto {
width: 100%;
padding: 18px;
box-sizing: border-box;
background: var(--fondark);
color: var(--textcolor);
font: 12px/1.55 var(--font-base);
text-align: justify;
border: 1px solid var(--accentcolor1);
box-shadow:
inset 0 0 0 1px var(--accent-color-light),
-4px 4px 10px var(--whit);
}
.light .anketa-naruto {
width: 100%;
padding: 18px;
box-sizing: border-box;
background: var(--foncat);
color: var(--textcolor);
font: 12px/1.55 var(--font-base);
text-align: justify;
border: 1px solid var(--menucolor);
/* box-shadow: inset 0 0 0 1px var(
--grey),
-4px 4px 10px var(--white); */
}
.anketa-title {
margin: -2px auto 18px;
text-align: center;
font: 700 25px/1 var(--rus);
text-transform: lowercase;
background: linear-gradient(
-90deg,
var(--accentcolor1),
var(--accent-color-light),
var(--accentcolor2)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.anketa-title::after {
content: "";
display: block;
width: 70%;
height: 1px;
margin: 10px auto 0;
background: linear-gradient(
to right,
transparent,
var(--accentcolor1),
transparent
);
}
.anketa-info {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.anketa-info > div {
padding: 9px 10px;
color: var(--buttontextcolor);
text-align: center;
font-size: 11px;
}
.anketa-info b {
display: block;
margin-bottom: 3px;
font: 700 13px var(--rus);
text-transform: lowercase;
color: var(--accent-color-light);
}
.character-profile {
display: inline-block;
padding: 0;
background: transparent;
border: none;
font: inherit;
color: inherit;
}
.character-profile .birth-date {
display: none;
}
.character-profile .character-age {
color: var(--buttontextcolor);
font-weight: 600;
}
.character-profile .character-age::before {
content: "";
}
.anketa-block {
margin-top: 14px;
padding: 15px;
background: var(--white);
border: 1px solid var(--quotecolor);
box-shadow: inset 0 0 0 1px var(--accent-color-light);
overflow: hidden;
}
.anketa-subtitle {
margin: -4px 0 12px;
text-align: center;
font: 700 20px/1 var(--rus);
text-transform: lowercase;
color: var(--accentcolor1);
}
.anketa-img {
float: left;
width: 200px;
height: 100%;
margin: 3px 10px 10px 0;
object-fit: cover;
border-radius: 5px;
}
.anketa-block p {
margin: 0 0 0px;
}
.anketa-block p:last-child {
margin-bottom: 0;
}
@media (max-width: 600px) {
.anketa-info {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
justify-items: center;
}
.anketa-info > div {
padding: 8px 6px;
font-size: 10.5px;
width: 100%;
max-width: 160px;
}
/* верхний ряд */
.anketa-info > div:nth-child(1),
.anketa-info > div:nth-child(2) {
grid-column: span 1;
}
/* нижний ряд — центрируем */
.anketa-info > div:nth-child(3),
.anketa-info > div:nth-child(4) {
text-align: center;
}
.anketa-img {
float: none;
display: block;
width: 100%;
max-width: 295px;
height: auto;
margin: 0 auto 12px;
border-radius: 10px;
}
.anketa-block {
text-align: justify;
}
}
</style>
[/html]
