Магазин

Поделиться12025-08-29 20:35:31

род деятельности: Антиванский ворон
убийца
Уважение: +0
Сообщений: 129
Автор: Lorenzo Arainai
anyone can betray anyone
рассказчик
if i open my eyes
will it all unravel?
come what may
i'm here at the end
Зарегистрирован: 2025-07-29
Позитив: +8

[html]
<style>
.post-author-wrapper {
display: flex;
justify-content: center;
position: relative;
align-items: flex-start;

.post-author ul {
padding: 10px 15px 30px 15px !important;
margin: 33px 16px 20px 16px !important;
}

.post-author ul li.pa-fld3 .plash div p {
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
line-height: 13px !important;
}
}

.tabcontent-wrapper {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
}

.store {
background-image: url(https://forumstatic.ru/files/001c/7b/1c/28566.png);
background-size: cover;
width: 640px;
border-radius: 10px;
}

.bg-content-main {
height: 400px;
background: var(--background-primary);
border-radius: 0 0 10px 10px;
padding: 10px;
}

.bg-content-main-ins {
display: flex;
flex-wrap: wrap;
gap: 4px;
max-height: 400px;
overflow: auto;
margin: auto;
justify-content: space-around;
}

.s-bg-ins {
width: 80px;
height: 80px;
width: 104px;
height: 140px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 5px;
cursor: pointer;
}

.s-bg-ins.empty {
background: url(https://forumstatic.ru/files/001c/7b/1c/83333.png?v=1) no-repeat;
}

.single-ic {
width: 34px;
height: 34px;
border-radius: 100%;
background: var(--background-secondary);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.s-ic-ins {
height: 20px;
background-size: contain;
background-position: center;
width: 20px;
}

.s-ic-ins.empty {
background: url(https://forumstatic.ru/files/001c/7b/1c/77796.png?v=1) no-repeat;
background-size: contain !important;
}

.ic-content-main {
height: 400px;
background: var(--background-primary);
border-radius: 0 0 10px 10px;
padding: 10px;
}

.ic-content-main-ins {
display: flex;
gap: 2px;
flex-wrap: wrap;
max-height: 400px;
overflow: auto;
margin: auto;
justify-content: space-around;
}

.store-main {
padding: 80px 10px 20px;
}

.tab {
overflow: hidden;
background-color: transparent;
flex-direction: row;
justify-content: center;
display: flex;
margin-bottom: 10px;
}

.pl-content-main {
height: 400px;
background: var(--background-primary);
border-radius: 0 0 10px 10px;
padding: 10px;
}

.pl-content-main-ins {
display: flex;
gap: 4px;
flex-wrap: wrap;
max-height: 400px;
overflow: auto;
justify-content: space-around;
}

.single-pl {
cursor: pointer;
width: calc(50% - 4px);
height: 36px;
background-position: center center !important;
}

.single-ic {
margin-top: 2px;
margin-bottom: 3px;
}

.top-pl {
color: white;
font-family: 'Playfair Display';
font-size: 10px !important;
font-weight: 600;
padding: 4px 0 0 0 !important;
text-align: center !important;
}

.top-pl.bottom {
font-weight: normal !important;
padding-top: 0px !important;
margin-top: -3px;
}

.tab button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 4px;
height: 23px;
background: #D3D3D3;
border-radius: 4px;
border: 0px;
color: black;
font-family: playfair display;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 4px;
height: 23px;
background: #343D47;
box-shadow: 0px 0.815028px 0.815028px rgba(40, 44, 41, 0.5);
border-radius: 4px;
border: 0px;
color: white;
font-family: playfair display;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
}

.tabcontent {
display: none;
// width: 619px;
}

.pl-header-main,
.ic-header-main,
.bg-header-main {
font-family: inter;
font-size: 12px;
font-weight: bolder;
background: var(--background-secondary);
border-radius: 10px 10px 0 0;
padding: 4px;
text-align: center;
}

.bg-header-description {
font-family: inter;
font-size: 10px;
line-height: 1.2;
font-weight: 400;
}
</style>

<div class="store-main-descr" style="height: 130px; display: inline-block; vertical-align: middle; align-content: center; overflow-y: scroll; margin-bottom: 10px;text-align: justify; background: var(--background-primary); padding:22px; border-radius:10px;">
<span style="font-family: Playfair Display; font-weight: 700; font-size: 24px; font-style: italic;">В</span><span style="font-family:inter; font-size:12px; line-height:140%;"> магазине вы можете приобрести оформление для кастомизации своего профиля: фон, плашку, иконку. Фон обрамляет профиль по рамке слева и сверху, плашка внизу содержит текст и также кастомный фон, а анимированная иконка находится над плашкой по центру; индивидуальное оформление пока что не предусмотрено, но ассортимент магазина будет регулярно меняться/пополняться, чтобы у вас было больше вариантов сочетаний для профиля. Оформление также можно выиграть в конкурсах. Все полученные фоны, плашки и иконки хранятся во втором сообщении вашей анкеты.</span>
</div>

<div class="tab">
<button id="defaultOpen" class="tablinks active" onclick="openCity(event, 'Backgrounds')">фоны</button>
<button class="tablinks" onclick="openCity(event, 'Plashki')">плашки</button>
<button class="tablinks" onclick="openCity(event, 'Iconki')">иконки</button>
</div>

<div class="tabcontent-wrapper">
<div class="post-author-wrapper">
<div class="post-author online">
<ul>
<li class="pa-fld1" style="display: none;"></li>
<li class="pa-fld4"><span class="fld-name">род деятельности:</span> Антиванский ворон</li>
<li class="pa-fld5">убийца</li>
<li class="pa-respect"><span class="fld-name"><a href="/respect.php?id=7" rel="nofollow">Репутация</a>:</span> <span>+0</span></li>
<li class="pa-posts"><span class="fld-name">Сообщений:</span> 35</li>
<li class="pa-fld6"><span class="fld-name">постов:</span> 10</li>
<li class="pa-fld7"><span class="fld-name">золото:</span> 1000</li>
<li class="pa-author"><span class="acchide">Автор: </span><span class="flag-i" style="background-image: url(/i/flags/de.svg);" original-title="Germany"></span><a href="javascript:to('Lorenzo Arainai')" rel="nofollow">Storyteller</a></li>
<li class="pa-title"></li>
<li class="pa-avatar item2"><img src="https://forumavatars.ru/img/avatars/001c/7a/01/7-1755193654.png" alt="Lorenzo Arainai"></li>
<li class="pa-fld2"></li>
<li class="pa-fld3"></li>
<li class="pa-reg"><span class="fld-name">Зарегистрирован</span>: 2025-07-29</li>
<li class="pa-positive"><span class="fld-name"><a href="/positive.php?id=7" rel="nofollow">Позитив</a>:</span> <span>+5</span></li>
<li class="pa-online online"><strong>Активен 12 минут</strong></li><img src="/i/blank.gif" class="indOnline" original-title="Lorenzo ArainaiLorenzo Arainai в таверне 12 минут">
<li class="pa-ua">
<div class="user-agent" "=""><i class=" ua-icon-apple"></i><i class="ua-icon-chrome"></i></div>
</li>
</ul>
</div>
</div>

<div class="bg-header-main">
Фоны — 50
<div class="bg-header-description">Кликните, чтобы примерить и скопировать код</div>
</div>
<div class="bg-content-main">
<div class="bg-content-main-ins">
<div class="s-bg-ins" style="background-image :url(https://upforme.ru/uploads/001c/7d/10/2/524543.png)"></div>

</div>
</div>

</div>

<div id="Plashki" class="tabcontent">
<div class="plashechki">
<div class="pl-header-main">Плашки — 30
<div class="bg-header-description">Кликните, чтобы примерить и скопировать код</div>
</div>
<div class="pl-content-main">
<div class="pl-content-main-ins">
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/469236.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/96359.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/899026.png) no-repeat;background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/614328.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/808493.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/310417.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/133740.png) no-repeat;background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/202666.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/146241.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/261510.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/621153.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;">

</div>
<div class="single-pl" style="background: url(https://upforme.ru/uploads/001c/7d/10/2/933186.png) no-repeat; background-size: cover;border-radius: 10px 10px 5px 5px;"></div>

</div>
</div>
</div>
</div>

<div id="Iconki" class="tabcontent">
<div class="iconchiki">
<div class="ic-header-main">Иконки — 10
<div class="bg-header-description">Кликните, чтобы примерить и скопировать код</div>
</div>
<div class="ic-content-main">
<div class="ic-content-main-ins">