Личная страница битвин

[html]<style>

:root {
--pp-main-bg: 255, 255, 255;
--pp-second-bg: 229, 229, 229;
--pp-third-bg: 238, 238, 238;
--pp-font-color: 0, 0, 0;
--pp-secondary-color: 66, 64, 63;
}

pptwinks div::-webkit-scrollbar,
ppbgs > div::-webkit-scrollbar,
ppplaques > div::-webkit-scrollbar,
ppachiev div::-webkit-scrollbar,
ppcoupons > div::-webkit-scrollbar,
ppcollections > div::-webkit-scrollbar,
collection div::-webkit-scrollbar {
width: 3px;
height: 3px;
}

pptwinks div::-webkit-scrollbar-track,
ppbgs > div::-webkit-scrollbar-track,
ppplaques > div::-webkit-scrollbar-track,
ppachiev div::-webkit-scrollbar-track,
ppcoupons > div::-webkit-scrollbar-track,
ppcollections > div::-webkit-scrollbar-track,
collection div::-webkit-scrollbar-track {
background: rgb(var(--pp-second-bg)) !important;
border-radius: 10px;
}

.pptwinks div::-webkit-scrollbar-thumb,
.ppbgs > div::-webkit-scrollbar-thumb,
.ppplaques > div::-webkit-scrollbar-thumb,
.ppachiev div::-webkit-scrollbar-thumb,
.ppcoupons > div::-webkit-scrollbar-thumb,
.ppcollections > div::-webkit-scrollbar-thumb,
.collection div::-webkit-scrollbar-thumb {
background: rgb(var(--pp-font-color)) !important;
border-radius: 10px;
}

/* ВРЕМЕННЫЙ КУСОК */

.plashkadura {
width: 200px;
box-sizing: border-box;
display: flex !important;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
height: 30px;
border-radius: 0 0 0px 0px;
}

.plashkadura p {
font-size: 6px;
font: Nunito;
line-height: 120% !important;
color: #e2e2e2;
letter-spacing: 0.2px;
font-weight: bold;
text-transform: uppercase;
}

/* КОНЕЦ ВРЕМЕННЫЙ КУСОК */

personalpage {
display: block;
width: 874px;
height: 454px;
border-radius: 10px;
position: relative;
overflow: visible;
background: url(https://forumstatic.ru/files/001c/72/80/29330.png) no-repeat center / 100%;
margin: auto!important;
}

personalpage::after,
personalpage::before {
content: '';
width: 136px;
height: 136px;
background: url(https://forumstatic.ru/files/001c/72/80/50278.png) no-repeat center / 100%;
display: block;
position: absolute;
}

personalpage::before {
left: -39px;
bottom: -41px;
}

personalpage::after {
right: -27px;
top: -22px;
}

personalpage * {
box-sizing: border-box;
}

ppchar {
width: 125px;
height: 60px;
top: 42px;
left: 52px;
border-radius: 5px;
display: block;
position: absolute;
box-shadow: 0px 11px 29px 0px rgba(0, 0, 0, 0.4);
z-index: 3;
}

ppchar img {
width: 125px;
height: 40px;
border-radius: 5px 5px 0 0 ;
object-fit: cover;
}

ppname {
width: 125px;
height: 20px;
position: relative;
border-radius: 0 0 5px 5px;
background: rgb(var(--pp-main-bg));
font: 700 10px Verdana ;
text-transform: uppercase;
display: flex;
align-items: center;
padding-left: 23px;
}

ppsign {
position: absolute;
display: block;
top: 1px;
left: 4px;
color: rgb(var(--pp-font-color), .7);
font-size: 13px;
}

pptwinks {
width: 300px;
height: 320px;
top: 119px;
left: 15px;
border-radius: 10px;
position: absolute;
z-index: 1;
background: rgb(var(--pp-main-bg), .7);
backdrop-filter: blur(7px)
}

pptwinks div {
width: 138px;
height: 278px;
display: flex;
flex-direction: column;
gap: 4px;
overflow: auto;
margin: 25px 11px 17px !important;
box-sizing: content-box;
scrollbar-gutter: stable;
}

pptwinks ppchar {
position: relative;
top: 0px;
left: 0px;
box-shadow: none;
}

pptwinks a {
border-bottom: none!important
}

.char_0::before,
.char_1::before {
top: 5px;
left: 11px;
font-family: Verdana;
font-weight: 700;
font-size: 12px;
color: rgb(var(--pp-font-color), .8);
position: absolute;
}

.char_1::before{
content: 'твины';
}

.char_0::before {
content: 'основа';
}

.vtab-wrapper {
font-family: verdana;
width: 692px;
height: 408px;
bottom: 15px;
right: 17px;
border-radius: 5px;
position: absolute;
z-index: 2;
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
background: url(https://forumstatic.ru/files/001c/72/80/54802.png) no-repeat center / 100%;
}

.vtab-labels {
display: flex;
justify-content: flex-start;
position: absolute;
top: -15px;
left: 83px;
gap: 10px;
}

.vtab-labels label {
background: rgb(var(--pp-main-bg), 1);
color: rgb(var(--pp-font-color), .5);
text-align: center;
cursor: pointer;
transition: background 0.4s ease-in-out, box-shadow 0.2s ease-in-out, color 0.4s ease-in-out;
height: 26px;
width: fit-content;
border-radius: 100px;
padding: 5px 16px;
font-family: Verdana;
font-weight: 700;
font-size: 10px;
text-transform: lowercase;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

}

.vtab-labels label:hover {
background: rgb(240 240 240);
}

input[name="vtabset"] {
display: none;
}

.vtab-content {
display: none;
width: 602px;
height: 344px;
top: 41px;
left: 42px;
position: relative;
}

#vtab1:checked ~ .vtab-content-wrapper .vtab1,
#vtab2:checked ~ .vtab-content-wrapper .vtab2,
#vtab3:checked ~ .vtab-content-wrapper .vtab3 {
display: block;
}

#vtab1:checked ~ .vtab-labels label[for="vtab1"],
#vtab2:checked ~ .vtab-labels label[for="vtab2"],
#vtab3:checked ~ .vtab-labels label[for="vtab3"] {
background: rgba(var(--pp-second-bg), 1);
color: rgb(var(--pp-font-color), 1);
box-shadow: 3px 4px 12px 0px rgba(0, 0, 0, 0.25);

}

ppabout {
width: 366px;
height: 165px;
border-radius: 5px;
padding: 8px;
position: absolute;
top: 0px;
left: 0px;
background: rgb(var(--pp-third-bg));
}

ppabout p {
font-weight: 900;
font-size: 10px !important;
color: rgb(var(--pp-secondary-color));
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 4px !important;
}

ppabout p i {
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
}

ppabout div {
width: 355px;
height: 130px;
overflow: auto;
scrollbar-gutter: stable;
font-weight: 400;
font-size: 9px;
padding-right: 3px;
line-height: 120%;
color: rgb(var(--pp-secondary-color));
}

ppplaques {
width: 222px;
height: 321px;
position: absolute;
right: 0px;
top: 21px;
background: rgb(var(--pp-main-bg));
padding: 5px 2px 5px;
border-radius: 5px;
}

ppplaques::before {
content: attr(data-title);
font-weight: 700;
font-size: 12px;
text-align: right;
color: rgb(var(--pp-font-color), .4);
position: absolute;
top: -21px;
right: 0px;
}

ppplaques > div {
display: flex;
flex-direction: column;
width: 207px;
height: 302px;
gap: 4px;
overflow: auto;
margin: 4px 7px 8px !important;
}

ppplaques > div > div {
flex-shrink: 0;
}

ppbgs {
width: 366px;
height: 140px;
position: absolute;
left: 0px;
bottom: 0px;
background: rgb(var(--pp-main-bg));
border-radius: 5px;
}

ppbgs::before {
content: attr(data-title);
font-weight: 700;
font-size: 12px;
text-align: right;
color: rgb(var(--pp-font-color), .4);
position: absolute;
top: -21px;
right: 0px;
}

ppbgs > div {
display: flex;
width: 350px;
height: 128px;
gap: 4px;
overflow-x: auto;
overflow-y: hidden;
margin: 8px 8px 8px !important;
padding-bottom: 4px;
white-space: nowrap;
scroll-behavior: smooth;
}

ppbgs > div > img {
flex-shrink: 0;
width: 55px;
height: 120px;
object-fit: cover;
}

ppachiev {
width: 574px;
height: 341px;
top: 0px;
right: -15px;
padding: 8px 4px 8px 8px;
background: rgb(var(--pp-main-bg), 1);
display: block;
position: relative;
border-radius: 5px;
}

achievement {
width: 275px;
height: 43px;
border-radius: 10px;
display: block;
background: rgb(var(--pp-third-bg));
padding: 5px 5px 5px 87px;
position: relative;
overflow: hidden;
}

achievement img {
width: 80px;
height: 43px;
object-fit: cover;
position: absolute;
top: 0px;
left: 0px;
}

achievement span:first-of-type {
font-weight: 700;
font-size: 10px;
display: block;
margin-bottom: 4px;
}

achievement span:last-of-type {
font-weight: 400;
font-size: 9px;
display: block;
}

ppachiev div {
display: flex;
flex-wrap: wrap;
gap: 4px;
height: 325px;
overflow: auto;
}

ppcoupons {
width: 218px;
height: 323px;
position: absolute;
display: block;
left: 0px;
top: 21px;
background: rgb(var(--pp-main-bg));
padding: 5px 2px 5px;
border-radius: 5px;
}

ppcoupons::before {
content: attr(data-title);
font-weight: 700;
font-size: 12px;
text-align: right;
color: rgb(var(--pp-font-color), .4);
position: absolute;
top: -21px;
right: 0px;
}

ppcoupons > div {
display: flex;
flex-direction: column;
width: 209px;
height: 308px;
padding-right: 2px;
gap: 4px;
scrollbar-gutter: stable;
overflow: auto;
margin: 4px 5px 8px !important;
}

coupon {
width: 202px;
border-radius: 5px;
gap: 4px;
padding: 8px;
display: flex;
background: rgb(var(--pp-third-bg));
}

coupon i {
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
}

coupon span:first-of-type {
font-weight: 900;
font-size: 10px;
}

coupon span:last-of-type {
font-weight: 400;
font-size: 9px;
}

ppcollections {
width: 364px;
height: 323px;
position: absolute;
display: block;
right: 0px;
top: 21px;
padding: 5px 2px 5px;
border-radius: 5px;
}

ppcollections::before {
content: attr(data-title);
font-weight: 700;
font-size: 12px;
text-align: right;
color: rgb(var(--pp-font-color), .4);
position: absolute;
top: -21px;
right: 0px;
}

ppcollections > div {
display: flex;
flex-direction: column;
width: 350px;
height: 308px;
padding-right: 2px;
gap: 4px;
scrollbar-gutter: stable;
overflow: auto;
margin: 4px 5px 8px !important;
}

collection {
width: 340px;
height: 105px;
border-radius: 10px;
background: rgb(var(--pp-main-bg));
padding: 8px;
}

collection span:first-of-type {
font-weight: 700;
font-size: 12px;
color: rgb(var(--pp-secondary-color));
display: block;
}

collection span:last-of-type {
font-weight: 400;
font-size: 10px;
color: rgb(var(--pp-secondary-color));
display: block;
}

collection div {
display: flex;
width: 324px;
height: 55px;
padding-bottom: 2px;
gap: 4px;
scrollbar-gutter: stable;
overflow: auto;
margin: 8px 0px !important;
white-space: nowrap;
scroll-behavior: smooth;
}

collection img {
width: 50px;
height: 50px;
border: 0.8px solid rgba(0, 0, 0, 1)!important;
object-fit: cover;
}
</style>

<ppname>
<ppsign>♏︎</ppsign> whoopie, 24
</ppname>

</ppchar>

<pptwinks class='char_1'> <div>

<a href='#'><ppchar>
<img src='https://i.pinimg.com/736x/11/68/57/116857835759159d60b880abb6cb4b87.jpg'>
<ppname>
<ppsign>♐︎</ppsign> unico uni, 24
</ppname>
</ppchar></a>

<a href='#'><ppchar>
<img src='https://i.pinimg.com/736x/e5/0a/05/e50a05453957503007ea56f4d0cd6323.jpg'>
<ppname>
<ppsign>♒︎</ppsign> champion, 24
</ppname>
</ppchar></a>

<a href='#'><ppchar>
<img src='https://i.pinimg.com/736x/e7/62/9d/e7629d9e23a75ff7791c23fabbc3aa7a.jpg'>
<ppname>
<ppsign>♓︎</ppsign> whoopie, 24
</ppname>
</ppchar></a>

<a href='#'><ppchar>
<img src='https://i.pinimg.com/736x/74/e6/ee/74e6eed932f9eccfda8ce0bec1ad3213.jpg'>
<ppname>
<ppsign>♋︎</ppsign> champion, 24
</ppname>
</ppchar></a>

<a href='#'><ppchar>
<img src='https://i.pinimg.com/736x/e7/62/9d/e7629d9e23a75ff7791c23fabbc3aa7a.jpg'>
<ppname>
<ppsign>♊︎</ppsign> champion, 24
</ppname>
</ppchar></a>

</div></pptwinks>

<div class="vtab-labels">
<label for="vtab1">главная</label>
<label for="vtab2">ачивки</label>
<label for="vtab3">купоны и коллекции</label>
</div>

<div class="vtab-content-wrapper">

<div class="vtab-content vtab1">

<p><i class="fa-solid fa-sun"></i> информация о персонаже </p>
<div>

Под ледяным покровом неподвижно спало море, а глубоко в земле среди древесных корней всем мелким зверюшкам и насекомым снилась весна. Но до весны было еще очень далеко — новый год только-только вступил в свои права.<br><br>

На том самом месте, где долина мягко и естественно начинала подниматься в гору, стоял, утонув в снегу, дом. Он напоминал причудливый снежный сугроб и выглядел очень одиноким. Совсем рядом, среди обледенелых берегов, извивалась черная как уголь река: быстрое течение не позволяло ей замерзнуть зимой. На мосту же не видно было никаких следов, да и вокруг дома лежали никем не тронутые снежные сугробы.

</div>
</ppabout>

<div class="plashkadura" style="background: #a13d39"> <p> some plaque </p></div>

<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>
<div class="plashkadura" style="background: rgba(135, 135, 135, 1)"> <p> однажды здесь будет плашка </p></div>

</div></ppplaques>

</div></ppbgs>

</div>

<div class="vtab-content vtab2">

<achievement>
<img src='https://forumstatic.ru/files/001c/72/80/48093.png'>
<span> название достижения </span>
<span> за что получено достижение </span>
</achievement>

</div></ppachiev>

</div>

<div class="vtab-content vtab3">

<coupon><i class="fa-solid fa-sun"></i>
<span> 01 </span>
<span> бесплатный твинк </span>
</coupon>

<coupon><i class="fa-solid fa-sun"></i>
<span> 02 </span>
<span> выкуп внешности пожизненно </span>
</coupon>

<coupon><i class="fa-solid fa-sun"></i>
<span> 01 </span>
<span> участие в голосовании за активистов недели с амс </span>
</coupon>