личная страница (4 страницы)

[html]
<style>

</style>

</div>

<div class='char-menu'><img src='https://upforme.ru/uploads/001c/ad/71/4/519411.png' class='page-bg'>
<div class='char-av-wrap mainchar'>
<img src='https://upforme.ru/uploads/001c/ad/71/4/271133.png' class='user-av'>
<a href='#'></a>
</div>
<charname>Name Surname</charname>
<charquote>Любая подходящая цитата или фраза</charquote>
<div class='char-basis'>
<loyalty>Лояльность</loyalty>
<charocc>Краткое описание деятельности...</charocc>
</div>
</div>

<div class="vtabs-wrapper"><div class="vtabs-cont"><div class="vtab-buttons">
<button class="vtab-btn active">игровое</button>
<button class="vtab-btn">организационное</button>
<button class="vtab-btn">оформление</button>
<button class="vtab-btn">коллекции</button>
</div>

<div class="vtab-content active" style='display: none;'>
<div class='pp-chron' data-title='эпизоды'><div>
<ep class='ep_1'>
<a href='#'>название эпизода</a> <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>
</div></div>
<div class='pp-art' data-title='артефакты'><div>
<art>
<img src='https://forumstatic.ru/files/001c/af/2d/51277.png'>
<div>
<ttl>название артефакта</ttl>
<desc>очень краткое описание артефакта</desc>
</div>
</art>
</div></div>
<div class='pp-coupons' data-title='подписки'><div>
</div></div>
</div>

<style>

.pp-gifts {
width: 197px;
height: 464px;
top: 22px;
left: 5px;
}
.pp-gifts > div {
display: flex;
gap: 9px;
flex-wrap: wrap;
}

.pp-gifts gift {
display: block;
border: 1px solid rgba(175, 175, 175, 1);
width: 49px;
height: 49px;
border-radius: 5px;
padding: 5px;
background-color: rgba(206, 206, 206, 0.5);
}

.pp-gifts gift ttl {display: none}

.pp-gifts gift img {
width: 35px;
height: 35px;
object-fit: contain;
}

.pp-collections {
width: 331px;
height: 464px;
top: 22px;
left: 215px;
}

.pp-collections > div {
display: flex;
flex-direction: column;
gap: 10px;
}

.pp-collections collection {
display: flex;
position: relative;
gap: 8px;
align-items: flex-end;
height: 78px;
}

.pp-collections collection img {
display: block;
border: 1px solid rgba(175, 175, 175, 1);
width: 49px;
height: 49px;
border-radius: 5px;
padding: 5px;
background-color: rgba(206, 206, 206, 0.5);
object-fit: contain;
}

.pp-collections collection img.main-item {
display: block;
width: 60px;
height: 60px;
border-radius: 5px;
padding: 5px;
background-color: rgba(206, 206, 206, 0.5);
object-fit: contain;
}

.pp-collections collection span {
position: absolute;
top: 0px;
left: 0px;
font-family: Playfair Display;
font-weight: 700;
font-size: 13px;
line-height: 1;
color: rgba(51, 51, 51, 1);
}

</style>

<gift><img src='https://forumstatic.ru/files/001c/be/3c/59142.png'><ttl>от кого и почему</ttl></gift>
<gift><img src='https://forumstatic.ru/files/001c/be/3c/59142.png'><ttl>от кого и почему</ttl></gift>
<gift><img src='https://forumstatic.ru/files/001c/be/3c/59142.png'><ttl>от кого и почему</ttl></gift>
<gift><img src='https://forumstatic.ru/files/001c/be/3c/59142.png'><ttl>от кого и почему</ttl></gift>
<gift><img src='https://forumstatic.ru/files/001c/be/3c/59142.png'><ttl>от кого и почему</ttl></gift>
<gift><img src='https://forumstatic.ru/files/001c/be/3c/59142.png'><ttl>от кого и почему</ttl></gift>

</div></div>

<collection>
<span>название коллекции</span>
<img src='https://forumstatic.ru/files/001c/be/3c/59142.png'>
<img src='https://forumstatic.ru/files/001c/be/3c/59142.png'>
<img src='https://forumstatic.ru/files/001c/be/3c/59142.png'>
<img src='https://forumstatic.ru/files/001c/be/3c/59142.png'>
<img src='https://forumstatic.ru/files/001c/be/3c/28661.png' class='main-item'>
</collection>