шаблон магаз

[html]
<style>
.soul-shop {
display: flex;
flex-direction: column;
width: 619px;
height: 595px;
gap: 10px;
color: white;
background: linear-gradient(180deg, #232528 0%, #3F4247 100%);
border: 1px solid #222222;
border-radius: 10px;
}

.soul-kn {
margin: 20px;
display: flex;
gap: 20px;
justify-content: center;
}

.soul-vkl {
margin: 0 10px 20px;
padding: 15px 25px;
border-radius: 10px;
height: 100%;
}

.soul-ic, .soul-pl, .soul-bg {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-content: flex-start;
height: 475px;
overflow-y: auto;
width: 547px;
}

.soul-ic > li, .soul-pl > li, .soul-bg > li {
counter-increment: item;
position: relative;
}

.soul-ic > li {
width: 53px;
height: 53px;
box-sizing: border-box;
border: 1px solid rgba(162, 162, 162, .1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-bottom: 10px;
}
.soul-ic > li img {
width: 32px;
height: 32px;
object-fit: contain;
}

.soul-ic > li::before, .soul-pl > li::before, .soul-bg > li::before {
content: counters(item, ".");
position: absolute;
left: 50%;
transform: translatex(-50%);
bottom: -17px;
font-weight: 400;
font-family: moisette;
font-style: italic;
}

.soul-bg > li {
height: 80px;
width: 80px;
display: flex;
border-radius: 5px;
margin-bottom: 10px;
border: 1px solid rgba(162, 162, 162, .1);
justify-content: center;
align-items: center;
}

.soul-bg li img {
width: 70px;
object-fit: cover;
object-position: center;
height: 70px;
border-radius: 5px;
}

.soul-bg {
display: flex;
gap: 20px 12px;
flex-wrap: wrap;
align-content: flex-start;
overflow-y: auto;
}

.soul-gift {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-content: flex-start;
height: 260px;
overflow-y: auto;
/* border: red 1px solid; */
}

.soul-gift > li {
counter-increment: item;
position: relative;
padding-left: 2em;
}

.soul-gift > li::before {
content: counters(item, ".") ".";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-weight: 500;
font-family: var(--main-font);
}

.soul-pl .pl0 {
line-height: 12px;
display: flex;
height: 32px;
justify-content: center;
align-items: center;
flex-direction: column;
filter: grayscale(1);
width: 200px;
}

.soul-pl .pl0::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 45%);
z-index: 1;
}

.soul-pl #pl1, .soul-pl #pl2 {
position: relative;
z-index: 2;
text-transform: uppercase;
font-family: var(--main-font);
font-size: 10px;
}

.soul-pl #pl2 {
text-transform: lowercase;
font-size: 9px;
}

.soul-pl {
justify-content: center;
}

section.sl-shop {
width: 1040px;
height: 690px;
position: relative;
background-image: url(https://forumstatic.ru/files/001c/9b/66/85732.png);
padding: 41px 54px;
box-sizing: border-box;
display: flex;
gap: 16px;
}

section.sl-shop * {
box-sizing: border-box;
}

div.soul-shop {
position: relative;
}

div.shop-desc::before,
div.soul-shop::before {
content: attr(data-title);
height: 27px;
box-sizing: border-box;
top: -14px;
left: 20px;
position: absolute;
background: rgba(77, 77, 89, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px 10px;
font-family: Playfair Display;
font-weight: 400;
font-size: 11px;
line-height: 120%;
border-radius: 30px;
color: white;
}

.oformlenie_knopki {
background: rgba(77, 77, 89, 1);
height: 20px;
font-family: 'Playfair Display';
padding: 0px 10px;
border-radius: 30px;
font-style: italic;
cursor: pointer;
}

.oformlenie_knopki.open {
background: linear-gradient(90deg, #A28C68 0%, #4E3F36 100%);
box-shadow: 0px 4px 21.5px 0px rgba(143, 103, 68, 1);
}

div.shop-desc {
width: 298px;
height: 595px;
position: relative;
background: linear-gradient(180deg, #232528 0%, #3F4247 100%);
border-radius: 10px;
padding: 31px 15px 20px;
white-space: pre-line;
color: white;
}

sline {
display: block;
width: 100%;
height: 1px;
background: rgba(63, 66, 71, 1);
}

</style>

<div class="soul-shop" data-title='магазин'>
<div class="soul-kn">
<div class="oformlenie_knopki" id="banner_1">иконки</div>
<div class="oformlenie_knopki" id="banner_2">плашки</div>
<div class="oformlenie_knopki" id="banner_3">фоны</div>
</div>

<div id="vkladka1">

</div>

<div id="vkladka2" style="display:none">

<div class="soul-pl">
<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/171547.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">НИТИВО НЕ ПОНИМАЮ</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">помогити!</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/581804.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">кофе в руке</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">идеи в голове</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/540356.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">под защитой кота</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">тьма боится лап и когтей</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/337725.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">здесь могла быть ваша реклама</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">пожалуйста, не зевайте</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/528470.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">осторожно</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">избыточная харизма в действии</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/652639.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">загрузка настроения</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">… 99%</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/116584.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">здесь живёт</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">король по прокрастинации</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/532472.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">запасись попкорном</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">будет интересно</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/36359.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">не пытайся читать мысли</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">они заняты</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/749855.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">я не ленивый</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">я в режиме энергосбережения</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/381600.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">не беспокоить</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">творческий процесс</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/59706.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">в тени ночи </div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">рождаются темные мечты</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/343191.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">секреты вселенной</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">на паузе</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/973117.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">включи фантазию</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">выключи стресс</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/272172.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">не трогать!</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">я в поисках смысла жизни</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/173785.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">вдохновение на связи</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">.. или нет</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/531209.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">режим кота</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">спать и мурлыкать</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/567985.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">на связи</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">но не в сети</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/123582.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">ошибка 404</div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">муза потерялась в тумане</div></div></a>
</li>

<li>
<a id="ID личной страницы [заполняем администратор]" class="modal-link" href="#" data-reveal-id="character"><div class="pl0" style="background: url(https://upforme.ru/uploads/000e/5d/50/2/82257.gif) no-repeat;"><div id="pl1" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">думай, как маг </div><div id="pl2" style ="color: #C9C0BB; text-shadow: 1px 1px #000;">создавай, как художник</div></div></a>
</li>
</div>

</div>

<div id="vkladka3" style="display:none">

</div>
</div>


<div class='shop-desc' data-title='заказать'>Авторская плашка — <span style='color: rgba(160, 138, 103, 1);font-weight:bold'>200 клыкастиков</span>, готовая — 150 клыкастиков, дефолтная — бесплатная. Размер картинки [гиф или статика] плашки — 200х32.

Авторская иконка — 150 клыкастиков, готовая — 100 клыкастиков, дефолтная — бесплатная. Размер иконки [гиф или статика] плашки — 35х35.

Авторский фон — 200 клыкастиков, готовый — 150 клыкастиков, дефолтный — бесплатный. Размер фона — 230х200, можно статику и гиф [только, чтоб сильно не дергалась].

<sline></sline>
перенос работает, как в обычном контейнере - просто энтером
скролла нет
</div>

</section>

$("#banner_1").click();
});
</script>[/html][hideprofile]