лс битвин

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

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

.plashkadura p {
margin-bottom: 0em !important;
padding: 0 !important;
line-height: 1 !important;
}

section.personalpage {
width: 812px;
height: 517px;
position: relative;
box-sizing: border-box;
padding-top: 88px;
}

section.personalpage * {
box-sizing: border-box;
scrollbar-gutter: stable;
}

section.personalpage img.header-bg {
width: 764px;
height: 186px;
border-radius: 20px;
object-fit: cover;
position: absolute;
left: 24px;
top: 40px;
z-index: 1;
}

section.personalpage img.header-icon {
width: 186px;
height: 186px;
border-radius: 20px;
object-fit: contain;
object-position: top;
position: absolute;
left: 10px;
top: 0px;
z-index: 1;
}

section.personalpage div.pp-wrapper {
width: 812px;
height: 429px;
border-radius: 20px;
position: relative;
z-index: 4;
background: url(https://forumstatic.ru/files/001c/b4/c9/78896.png) no-repeat center / cover, radial-gradient(circle at top right, rgba(249, 249, 249, 1) 0%, var(--bg-color) 70%);
box-shadow: 0px 4px 70px 0px rgba(0, 0, 0, 0.4);
}

section.personalpage div.pp-chars .vtab-content {
width: 149px;
height: auto;
border-radius: 12px;
padding: 12px;
gap: 13px;
display: none;
flex-direction: column;
align-items: center;
background: var(--bg-color);
box-shadow: -32px 32px 60px 0px rgba(0, 0, 0, 0.25);

}

section.personalpage div.pp-chars .vtab-content.active {
display: flex;
}

section.personalpage div.pp-chars .vtab-btn {
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
border: 1px dashed white;
outline: 1px solid transparent;
outline-offset: -1px;
width: fit-content;
height: 17px;
background: transparent;
border-radius: 99px;
padding: 3px 4px 4px;
font-family: Nunito;
font-weight: 900;
font-size: 9px;
line-height: 100%;
text-transform: lowercase;
color: black;
transition: 0.3s ease;
}

section.personalpage div.pp-chars .vtab-buttons {
width: 150px;
margin-top: 33px;
}

section.personalpage div.pp-chars .vtab-buttons::before {
content: 'персонажи';
font-family: Nunito;
font-weight: 500;
font-size: 9px;
line-height: 100%;
text-transform: lowercase;
width: 100%;
display: block;
margin-bottom: 8px;
}

section.personalpage div.pp-chars .vtab-btn:hover {
border: 1px dashed black;
}

section.personalpage div.pp-chars .vtab-btn.active {
/* border: 1px solid rgba(0, 0, 0, 1); */
outline: 1px solid rgba(0, 0, 0, 1);
}

section.personalpage div.pp-chars .vtab-btn.active:hover {
border: 1px dashed transparent;
}

section.personalpage div.pp-chars .vtabs-cont {
display: flex;
flex-direction: column-reverse;
align-items: center;
}

section.personalpage div.pp-chars .vtab-content img {
width: 125px;
height: 40px;
border-radius: 8px;
object-fit: cover;
}
section.personalpage div.pp-chars {
width: 183px;
position: absolute;
top: -22px;
right: 0px;
}

section.personalpage div.pp-chars .vtab-content > a {
font-family: Nunito;
font-weight: 900;
font-style: Black;
font-size: 12px;
line-height: 100%;
text-align: center;
color: white !important;
}

section.personalpage div.pp-chars .vtab-content song {
font-family: Nunito;
font-weight: 500;
font-style: Medium;
font-size: 8px;
line-height: 100%;
text-transform: lowercase;
display: block;
width: 100%;
color: white;
padding: 0px 0 10px 20px;
position: relative;
border-bottom: 1px dashed rgba(255, 255, 255, 0.6)
}

section.personalpage div.pp-chars .vtab-content song::before {
content:'';
width: 12px;
height: 12px;
background: url(https://forumstatic.ru/files/001c/b4/c9/45671.png) no-repeat center / contain;
position: absolute;
left: 0px;
top: 0px;
}

section.personalpage div.pp-chars .vtab-content ppquote {
font-family: Nunito;
font-weight: 500;
font-style: Medium;
font-size: 8px;
line-height: 100%;
text-transform: lowercase;
display: block;
width: 100%;
color: white;
padding: 0px 0 10px 20px;
position: relative;
}

section.personalpage div.pp-chars .vtab-content ppquote::before {
content:'';
width: 12px;
height: 12px;
background: url(https://forumstatic.ru/files/001c/b4/c9/96557.png) no-repeat center / contain;
position: absolute;
left: 0px;
top: 0px;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items {
width: 613px;
height: 387px;
position: relative;
top: 22px;
left: 16px;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-content {
display: none;
width: 613px;
height: 387px;
position: relative;
border-right: 1px dashed rgba(255, 255, 255, 0.6);

}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-content.active {
display: block;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn {
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
background: transparent;
border: 1px dashed rgba(255, 255, 255, 0.6);
width: 113px;
height: 26px;
position: relative;
border-radius: 99px;
font-family: Verdana;
font-weight: 700;
font-size: 10px;
line-height: 100%;
text-transform: lowercase;
transition: 0.4s ease;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn:hover {
border: 1px dashed black;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn.active {
background: rgba(0, 0, 0, 1);
color: white;
border: 1px dashed transparent;
box-shadow: 3px 4px 12px 0px rgba(0, 0, 0, 0.25);
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-buttons {
position: absolute;
display: flex;
flex-direction: column;
gap: 5px;
right: -148px;
bottom: 6px;
width: 113px;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn::before {
content: '';
border-top: 1px dashed rgba(255, 255, 255, 0.6);
position: absolute;
width: 35px;
height: 1px;
left: -36px; top: 12px;
transition: 0.4s ease;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn:hover::before,
section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn.active::before {
border-top: 1px dashed black;
}

section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn::after {
content: '';
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 1);
left: -40px; top: 9px;
z-index: 3;
transition: 0.4s ease;
}
section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn:hover::after,
section.personalpage div.pp-wrapper .vtabs-wrapper.pp-items .vtab-btn.active::after {
background-color: black;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content > div {
position: relative;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content > div::before {
content: attr(data-title);
border: 1px dashed rgba(255, 255, 255, 0.6);
position: absolute;
box-sizing: border-box;
width: 113px;
height: 26px;
border-radius: 99px;
opacity: 1;
top: -5px;
left: 0px;
padding: 6px 30px 8px;
font-family: Verdana;
font-weight: 700;
font-size: 10px;
line-height: 100%;
letter-spacing: 0%;
text-transform: lowercase;
color: rgba(255, 255, 255, 1);
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content > div::after {
content: '';
border-top: 1px dashed rgba(255, 255, 255, 0.6);
position: absolute;
width: 486px;
height: 1px;
left: 115px; top: 8px;
transition: 0.4s ease;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-profdecor {
width: 609px;
height: 171px;
padding-top: 35px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-profdecor prof {
width: 200px;
height: 85px;
border-radius: 12px;
display: flex;
flex-direction: column;
overflow:hidden;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-profdecor prof > img {
width: 200px;
height: 55px;
object-fit: cover;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-profdecor > div {
display: flex;
gap: 1px;
flex-wrap: wrap;
overflow: auto;
height: 171px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content coupon {
width: 149px;
height: 102px;
border-radius: 18px;
gap: 5px;
padding: 16px 12px;
display: flex;
background: rgba(0, 0, 0, 1);
color: white;
position: relative;
flex-direction: column;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content coupon i {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content coupon span:first-of-type {
font-weight: 900;
font-size: 10px;
position: absolute;
right: 12px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content coupon span:last-of-type {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 5px;
font-family: Nunito;
font-weight: 900;
font-size: 10px;
line-height: 1;
text-align: left;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content coupon desc {
display: block;
width: 100%;
height: 22px;
overflow: auto;
font-family: Nunito;
font-weight: 400;
font-size: 8px;
line-height: 1;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-coupons {
width: 609px;
height: 111px;
padding-top: 35px;
margin-top: 70px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-coupons > div {
display: flex;
gap: 1px;
flex-wrap: wrap;
overflow: auto;
height: 103px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-achiev {
width: 597px;
height: 100%;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-achiev::after,
section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-achiev::before {
content: none;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content .pp-achiev > div {
display: flex;
gap: 1px 4px;
flex-wrap: wrap;
overflow: auto;
height: 99.3%;
align-content: flex-start;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content achievement {
width: 291px;
height: 54px;
border-radius: 10px;
display: flex;
border: 1px dashed rgba(223, 223, 223, 1);
padding: 5px 5px 5px 105px;
position: relative;
flex-direction: column;
justify-content: center;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content achievement img {
width: 101px;
height: 55px;
object-fit: cover;
position: absolute;
top: -1px;
left: -1px;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content achievement span:first-of-type {
display: block;
margin-bottom: 4px;
font-family: Verdana;
font-weight: 700;
font-size: 12px;
line-height: 1;
}

section.personalpage .vtabs-wrapper.pp-items .vtab-content achievement span:last-of-type {
display: block;
font-family: Verdana;
font-weight: 400;
font-size: 11px;
line-height: 1;
text-align: left;
}

</style>

<section class='personalpage' style='--bg-color: rgba(146, 138, 136, 1);'>

<img src='https://forumstatic.ru/files/001c/b4/c9/41506.png' class='header-bg'>

<img src='https://forumstatic.ru/files/001c/b4/c9/46793.png' class='header-icon'>

<div class="vtab-buttons">
<button class="vtab-btn">name</button>
<button class="vtab-btn">second</button>
</div>

<div class="vtab-content">

<song>
Jessie Reid - Wake Up
</song>

<ppquote>
tell me everything that happened. tell me everything you saw. they had lights inside their eyes
</ppquote>

</div>

<div class="vtab-content">

<song>
Marylin Manson - The Flowers Of Evil
</song>

<ppquote>
tell me everything that happened. tell me everything you saw. they had lights inside their eyes
</ppquote>

</div>

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

<div class="vtabs-wrapper pp-items"><div class="vtabs-cont">
<div class="vtab-buttons">
<button class="vtab-btn">профиль</button>
<button class="vtab-btn">коллекции</button>
</div>

<div class="vtab-content" >

<div class='pp-profdecor' data-title='профиль'><div>

<prof>
<img src='https://i.pinimg.com/736x/89/72/4c/89724c91ace646716f36bc96682efbc0.jpg'>
<div class="plashkadura" style="background: #232326"> <p style="color: #ffffff">первая строка</br>вторая строка</p></div>
</prof>

<prof>
<img src='https://forumstatic.ru/files/001c/b4/c9/32065.jpg'>
<div class="plashkadura" style="background: rgba(205, 71, 72, 1)"> <p style="color: #ffffff">первая строка</br>вторая строка</p></div>
</prof>

</div></div>

<div class='pp-coupons' data-title='купоны'><div>

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

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

<coupon><i class="fa-solid fa-sun"></i>
<span> 02 </span>
<desc>короткое описание купона что он делает и для чего нужен</desc>
<span> выкуп внешности пожизненно </span>
</coupon>

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

</div></div>

</div>

<div class="vtab-content active">

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

</div></div>

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

[/html][hideprofile]

Test

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

лс битвин

Сообщений 1 страница 2 из 2

Поделиться12026-08-31 13:10:24

Поделиться22026-08-31 13:12:02