[html]<style>
fairyreq,
dragonreq {
width: 654px;
height: auto;
display: block;
background: rgba(248, 248, 247, 1);
border-radius: 15px;
box-sizing: border-box;
padding: 20px;
margin: auto!important;
}
fairyreq *,
dragonreq * {
box-sizing: border-box;
}

dragonreq reqwrapper::before {
content:'';
background: url(https://forumstatic.ru/files/001c/72/80/64884.png) no-repeat;
width: 638px;
height: 127px;
position: relative;
    top: -9px;
    left: -37px;
display: block;
}

fairyreq reqwrapper::before {
content:'';
background: url(https://forumstatic.ru/files/001c/72/80/63009.png) no-repeat;
width: 638px;
height: 127px;
position: relative;
    top: -15px;
    left: -42px;
display: block;
}

reqwrapper {
display: block;
width: 615px;
height: fit-content;
border-radius: 10px;
background: rgba(232, 232, 232, 1);
overflow: visible;
position: relative;
padding: 0 23px 45px;
font-family: Inter;
font-weight: 400;
font-size: 11px;

}

reqcharname::before {
content:attr(data-title);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: EightiesComeback It;
font-weight: 700;
font-style: italic;
font-size: 20px;
color: rgba(36, 44, 53, 1);
top: -13px;
}

reqcharname {
width: 100%;
display: block;
position: absolute;
font-family: EightiesComeback It;
font-weight: 700;
font-style: italic;
font-size: 28px;
text-align: center;
top: 50px;
text-transform: lowercase;
color: rgba(99, 117, 130, 1);
}

reqcharimgs {
display: grid;
    grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 10px;
}

reqcharimgs span {
display: block;
font-weight: 400;
font-size: 10px;
line-height: 120%;
text-align: center;
color: rgba(99, 117, 130, 1);
grid-column: span 2;
margin-bottom: 10px;
}

reqcharimgs img {
width: 245px;
height: 150px;
object-fit: cover;
}

reqcharimgs img:first-of-type {
  justify-self: end;
}

reqcharimgs img:last-of-type {
  justify-self: start;
}

reqcharbase {
margin-top: 10px!important;
display: block;
width: 100%;
text-align: center;
font-family: Moisette;
font-size: 15px;
line-height: 120%;
text-transform: lowercase;

}

reqtitle {
background: linear-gradient(90deg, #D5D5D5 0%, #FFFFFF 100%);
border: 1px solid rgba(255, 255, 255, 1);
width: fit-content;
border-radius: 50px;
padding: 4px 14px;
color: rgba(36, 44, 53, 1);
display: block;
margin: 15px auto!important;
font-family: Moisette;
font-weight: 600;
font-style: italic;
font-size: 13px;
text-transform: lowercase;
}

reqtitle span {
color: rgba(99, 117, 130, 1);
}

reqtext {
border-radius: 10px;
font-family: Inter;
font-weight: 400;
font-size: 11px;
padding: 15px;
display: block;
background: rgba(206, 208, 209, 1);
margin-bottom: 10px!important;
}

.reqgift {
display: flex;
width: fit-content;
height: 51px;
border: 1px solid rgba(255, 255, 255, 1)!important;
background: linear-gradient(90deg, #D5D5D5 0%, #FFFFFF 100%);
background-size: 100%;
color: rgba(36, 44, 53, 1);
font-family: EightiesComeback It;
font-weight: 700;
font-style: italic;
font-size: 16px;
text-transform: lowercase;
padding: 4px;
padding-right: 10px;
border-radius: 100px;
    align-items: center;
gap: 8px;
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
transition: background-size var(--anim-hover);
}

.reqgift:hover {
background-size: 200%;
}

.reqgift img {
width: 35px;
height:35px;
padding: 4px;
border-radius: 50%;
background: rgba(146, 169, 183, 1);
box-sizing: content-box;
}

</style>

<dragonreq>

<reqwrapper>

<!----- имя и фамилия персонажа. в data-title можно написать свою фразу но только(!) на английском ----------------->
<reqcharname data-title='i need you'>
Name Surname
</reqcharname>

<!----- размер картинок фиксирован. хочется больше? Их число должно быть кратно двум (2, 4, etc)  ----------------->

<reqcharimgs>

<img src='https://i.pinimg.com/736x/01/9d/ee/019dee09fa4271d003ec66a4048d5563.jpg' />
<img src='https://i.pinimg.com/736x/26/0b/e4/260be41dc7ad369d9329d5a29e78798f.jpg' />

<span>Имя внешности (можно просто удалить весь span)</span>

</reqcharimgs>

<!----- способности, возраст, печать  ----------------->

<reqcharbase>

Имя персонажа(На русск. языке, прозвища), Возраст (дд.мм.гг.)<br>
печать (Уникальные способности всадника)


</reqcharbase>

<!----- заголовок (текст можно менять, в span - голубоватый текст)  ----------------->

<reqtitle>

Tell <span>your story</span> as if it's a <span>fairytale</span>

</reqtitle>

<reqtext>
Джек встречает Вайолет и других курсантов на парапете. Отличается уже на парапете, дождавшись следующего переходящего кандидата и сбросив его. Ставит перед собой задачу лично убить Вайолет, чего бы это ни стоило. Позже его назначают в Третий отряд, Секция пламени, Первое крыло. Он распределен в общежитие на третьем этаже. В свой первый день в Квадранте всадников Джек убивает другого кадета во время спарринговой части их аттестации. Это продолжает оставаться тенденцией, и постепенно он становится ответственным за большую часть имен, зачитываемых в списке погибших каждое утро.
</reqtext>

Даин, Даин, Даин. Ты – мой самый близкий и дорогой друг с детства. Мы знаем друг друга... с пяти лет? Серьёзно? Всадники иногда столько не живут, сколько мы с тобой уже дружим! Ты – глоток воздуха по ту сторону парапета, потому что родной. Потому что от тебя-то я точно могу не ждать какой-то подставы. Я ведь могу тебе доверять, да? Как в детстве, как раньше.
Ты, как самая переживательная мама-утка стараешься уберечь меня от всех опасностей с самого первого дня. Кажется, тебя чуть инфаркт не хватил, когда ты понял, что это именно я преодолела ту самую смертельную полосу, которую должны пересечь все, кто желал поступить в квадрант всадников. Понимаю, ведь ты был на тысячу процентов уверен, что я пойду к писцам. Я тоже, но толку? Когда Лилит Сорренгейл хочет чего-то, то это точно исполняется. Ты ведь понимаешь, Даин? Понимаешь, что всем твоим мечтам, где я всё же соглашаюсь смыться к писцам не суждено сбыться?
Поскольку мы стартуем с Молотьбы моего года, то ты ещё не натворил делов с помощью своей шпионской печати, а значит, ещё не заслужил моего полного негодования. То есть, у тебя есть куча вариантов того, куда двигаться, чью сторону занять. Хочешь подставлять Риорсона? Милости прошу, приходи и тяни свои руки ко мне, чтобы вновь всё прочесть. Не нравится этот финт? Хочешь реанимироваться? А мы и не против! Давай обменяемся всеми хэдами и накашеварим самую вкусную конфетку!

<!----- заголовок  ----------------->

<reqtitle>

<span>My heart </span>is now <span>yours</span>. Please, keep it safe.

</reqtitle>

В нашем миролюбивом коллективе не хватает такого вот гада. Обещаю лично поставлять печеньки для вот такого "зла". Убивайте, исправляйтесь, снова убивайте.  В общем, приходите и поиграйте на нервах кадетов Басгиата.

<a href='#' class='reqgift'> <img src='https://forumstatic.ru/files/001c/72/80/31808.png' /> take your gift </a>

</reqwrapper></dragonreq>[/html]

НАСТРОЙКА ЛЕЙБЛ

[html]<style>
fairyreq,
dragonreq {
width: 654px;
height: auto;
display: block;
background: rgba(248, 248, 247, 1);
border-radius: 15px;
box-sizing: border-box;
padding: 20px;
margin: auto!important;
}
fairyreq *,
dragonreq * {
box-sizing: border-box;
}

dragonreq reqwrapper::before {
content:'';
background: url(https://forumstatic.ru/files/001c/72/80/64884.png) no-repeat;
width: 638px;
height: 127px;
position: relative;
    top: -9px;
    left: -37px;
display: block;
}

fairyreq reqwrapper::before {
content:'';
background: url(https://forumstatic.ru/files/001c/72/80/63009.png) no-repeat;
width: 638px;
height: 127px;
position: relative;
    top: -15px;
    left: -42px;
display: block;
}

reqwrapper {
display: block;
width: 615px;
    height: -webkit-fill-available;
border-radius: 10px;
background: rgba(232, 232, 232, 1);
overflow: visible;
position: relative;
padding: 0 23px 45px;
font-family: Inter;
font-weight: 400;
font-size: 11px;

}

reqcharname::before {
content:attr(data-title);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: EightiesComeback It;
font-weight: 700;
font-style: italic;
font-size: 20px;
color: rgba(36, 44, 53, 1);
top: -13px;
}

reqcharname {
width: 100%;
display: block;
position: absolute;
font-family: EightiesComeback It;
font-weight: 700;
font-style: italic;
font-size: 28px;
text-align: center;
top: 50px;
text-transform: lowercase;
color: rgba(99, 117, 130, 1);
}

reqcharimgs {
display: grid;
    grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 10px;
}

reqcharimgs span {
display: block;
font-weight: 400;
font-size: 10px;
line-height: 120%;
text-align: center;
color: rgba(99, 117, 130, 1);
grid-column: span 2;
margin-bottom: 10px;
}

reqcharimgs img {
width: 245px;
height: 150px;
object-fit: cover;
}

reqcharimgs img:first-of-type {
  justify-self: end;
}

reqcharimgs img:last-of-type {
  justify-self: start;
}

reqcharbase {
margin-top: 10px!important;
display: block;
width: 100%;
text-align: center;
font-family: Moisette;
font-size: 15px;
line-height: 120%;
text-transform: lowercase;

}

reqtitle {
background: linear-gradient(90deg, #D5D5D5 0%, #FFFFFF 100%);
border: 1px solid rgba(255, 255, 255, 1);
width: fit-content;
border-radius: 50px;
padding: 4px 14px;
color: rgba(36, 44, 53, 1);
display: block;
margin: 15px auto!important;
font-family: Moisette;
font-weight: 600;
font-style: italic;
font-size: 13px;
text-transform: lowercase;
}

reqtitle span {
color: rgba(99, 117, 130, 1);
}

reqtext {
border-radius: 10px;
font-family: Inter;
font-weight: 400;
font-size: 11px;
padding: 15px;
display: block;
background: rgba(206, 208, 209, 1);
margin-bottom: 10px!important;
}

.reqgift {
display: flex;
width: fit-content;
height: 51px;
border: 1px solid rgba(255, 255, 255, 1)!important;
background: linear-gradient(90deg, #D5D5D5 0%, #FFFFFF 100%);
background-size: 100%;
color: rgba(36, 44, 53, 1);
font-family: EightiesComeback It;
font-weight: 700;
font-style: italic;
font-size: 16px;
text-transform: lowercase;
padding: 4px;
padding-right: 10px;
border-radius: 100px;
    align-items: center;
gap: 8px;
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
transition: background-size var(--anim-hover);
cursor: pointer;
}

.reqgift:hover {
background-size: 200%;
}

.reqgift img {
width: 35px;
height:35px;
padding: 4px;
border-radius: 50%;
background: rgba(146, 169, 183, 1);
box-sizing: content-box;
}

.hcontainer {
  margin: 0 auto;
  text-align: center;
}

.hcontent {
  display: none;
}

#toggle-content:not(:checked) ~ .content1 {
  display: block;
}

#toggle-content:checked ~ .content2 {
  display: block;
}

</style>

<dragonreq>

<!------------ тут не трогать --------------------------------------->
<div class="hcontainer">
  <div class="hcontent reqcontent1">

<!------------ ОКОШКО ЗАЯВКИ --------------------------------------->
<reqwrapper>

<!----- имя и фамилия персонажа. в data-title можно написать свою фразу но только(!) на английском ----------------->
<reqcharname data-title='i need you'>
Name Surname
</reqcharname>

<!----- размер картинок фиксирован. хочется больше? Их число должно быть кратно двум (2, 4, etc)  ----------------->

<reqcharimgs>

<img src='https://i.pinimg.com/736x/01/9d/ee/019dee09fa4271d003ec66a4048d5563.jpg' />
<img src='https://i.pinimg.com/736x/26/0b/e4/260be41dc7ad369d9329d5a29e78798f.jpg' />

<span>Имя внешности (можно просто удалить весь span)</span>

</reqcharimgs>

<!----- способности, возраст, печать  ----------------->

<reqcharbase>

Имя персонажа(На русск. языке, прозвища), Возраст (дд.мм.гг.)<br>
печать (Уникальные способности всадника)


</reqcharbase>

<!----- заголовок (текст можно менять, в span - голубоватый текст)  ----------------->

<reqtitle>

Tell <span>your story</span> as if it's a <span>fairytale</span>

</reqtitle>

<!------------ краткое описание --------------------------------------->
<reqtext>
Джек встречает Вайолет и других курсантов на парапете. Отличается уже на парапете, дождавшись следующего переходящего кандидата и сбросив его. Ставит перед собой задачу лично убить Вайолет, чего бы это ни стоило. Позже его назначают в Третий отряд, Секция пламени, Первое крыло. Он распределен в общежитие на третьем этаже. В свой первый день в Квадранте всадников Джек убивает другого кадета во время спарринговой части их аттестации. Это продолжает оставаться тенденцией, и постепенно он становится ответственным за большую часть имен, зачитываемых в списке погибших каждое утро.
</reqtext>

Даин, Даин, Даин. Ты – мой самый близкий и дорогой друг с детства. Мы знаем друг друга... с пяти лет? Серьёзно? Всадники иногда столько не живут, сколько мы с тобой уже дружим! Ты – глоток воздуха по ту сторону парапета, потому что родной. Потому что от тебя-то я точно могу не ждать какой-то подставы. Я ведь могу тебе доверять, да? Как в детстве, как раньше.
Ты, как самая переживательная мама-утка стараешься уберечь меня от всех опасностей с самого первого дня. Кажется, тебя чуть инфаркт не хватил, когда ты понял, что это именно я преодолела ту самую смертельную полосу, которую должны пересечь все, кто желал поступить в квадрант всадников. Понимаю, ведь ты был на тысячу процентов уверен, что я пойду к писцам. Я тоже, но толку? Когда Лилит Сорренгейл хочет чего-то, то это точно исполняется. Ты ведь понимаешь, Даин? Понимаешь, что всем твоим мечтам, где я всё же соглашаюсь смыться к писцам не суждено сбыться?
Поскольку мы стартуем с Молотьбы моего года, то ты ещё не натворил делов с помощью своей шпионской печати, а значит, ещё не заслужил моего полного негодования. То есть, у тебя есть куча вариантов того, куда двигаться, чью сторону занять. Хочешь подставлять Риорсона? Милости прошу, приходи и тяни свои руки ко мне, чтобы вновь всё прочесть. Не нравится этот финт? Хочешь реанимироваться? А мы и не против! Давай обменяемся всеми хэдами и накашеварим самую вкусную конфетку!

<!----- заголовок  ----------------->

<reqtitle>

<span>My heart </span>is now <span>yours</span>. Please, keep it safe.

</reqtitle>

В нашем миролюбивом коллективе не хватает такого вот гада. Обещаю лично поставлять печеньки для вот такого "зла". Убивайте, исправляйтесь, снова убивайте.  В общем, приходите и поиграйте на нервах кадетов Басгиата.

</reqwrapper>
  </div>
<!------------ КОНЕЦ ЗАЯВКИ --------------------------------------->

<!------------ ОКОШКО ПОДАРКА --------------------------------------->
  <div class="hcontent reqcontent2">
<reqwrapper>

<!------------ вот тут любой контент для подарков, я оставлю картинки мелкие для примера - никакой обработки или ограничений у контейнера и картинок нет, высота ему присваивается с высоты заявки  --------------------------------------->

<img src="https://forumstatic.ru/files/001c/72/80/31808.png"> <img src="https://forumstatic.ru/files/001c/72/80/31808.png"> <img src="https://forumstatic.ru/files/001c/72/80/31808.png"> <img src="https://forumstatic.ru/files/001c/72/80/31808.png"> <img src="https://forumstatic.ru/files/001c/72/80/31808.png">

</reqwrapper>
  </div>
 
<!------------ тут не трогать --------------------------------------->
<a href="#" class="toggle-button reqgift"><img src='https://forumstatic.ru/files/001c/72/80/31808.png' /></a>
</div>

</dragonreq>[/html]