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

[html]
<style>
/********** ЛИЧНАЯ СТРАНИЦА **********/

section.personalpage {
width: 966px;
height: 502px;
position: relative;
background: url(https://forumstatic.ru/files/001c/b8/3a/20905.jpg) no-repeat center / contain;
margin: 0 auto;
}

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

section.personalpage *::-webkit-scrollbar {
width: 2px;
height: 2px;
}

section.personalpage .vtab-content {
display: none;
padding: 10px;
width: 685px;
height: 446px;
top: 36px;
left: 272px;
background-color: rgba(191, 191, 191, 1);
position: absolute;
border-top: 4px solid rgba(0, 0, 0, 1);
}

section.personalpage .vtab-content::before {
content: '';
border-radius: 10px;
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
background-color: rgba(115, 115, 115, 1);
}

section.personalpage .vtab-content > div {
border: 1px solid rgba(175, 175, 175, 1);
background: rgba(242, 243, 246, 1);
border-radius: 5px;
position: absolute;
padding: 20px 7px 15px 15px;
}

section.personalpage .vtab-content.active {
display: block;
}

section.personalpage .vtab-buttons {
display: flex;
position: absolute;
gap: 5px;
width: 537px;
justify-content: flex-start;
top: 15px;
left: 272px;
}

section.personalpage .vtab-btn {
padding: 5px 16px;
height: 21px;
cursor: pointer;
background: rgba(50, 50, 51, 1);
transition: background 0.3s, color 0.3s;
border: none;
color: white;
font-family: 'Bewlay';
font-weight: 400;
font-size: 14px;
line-height: 1;
letter-spacing: 8%;
text-align: center;
vertical-align: middle;
text-transform: lowercase;
}

section.personalpage .vtab-btn.active {
background: rgba(191, 191, 191, 1);
color: rgba(14, 14, 14, 1);
}

section.personalpage .char-menu {
position: relative;
width: 260px;
height: 100%;
overflow: hidden;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 81px;
}

section.personalpage .char-menu .page-bg {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}

section.personalpage .char-menu .user-av {
width: 90px;
height: 90px;
border-radius: 50%;
filter: grayscale(1);
object-fit: cover;
border: 6px solid rgba(231, 231, 231, 1);
position: absolute;
top: -45px;
}

section.personalpage .char-menu .char-info {
background-color: rgba(231, 231, 231, 1);
position: relative;
width: 220px;
height: fit-content;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
padding: 51px 10px 30px;
}

section.personalpage .char-menu .char-info > ppocc,
section.personalpage .char-menu .char-info > a:first-of-type {
color: rgba(6, 6, 6, 1);
font-size: 11px;
}

section.personalpage .char-menu .char-info > ppocc {
margin-bottom: 17px;
}

section.personalpage .char-menu .char-info > ppquote {
text-align: center;
color: rgba(77, 87, 120, 1);
font-size: 10px;
margin-bottom: 17px;
}

section.personalpage .char-menu .char-info > pptrack {
font-size: 10px;
color: rgba(74, 70, 67, 1);
text-align: center;
display: block;
position: relative;
padding-top: 45px;
}

section.personalpage .char-menu .char-info > pptrack::before {
content: '';
width: 156px;
height: 40px;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
background: url(https://forumstatic.ru/files/001c/b8/3a/81451.png) no-repeat center / contain;
}

section.personalpage .char-menu .char-info > team {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
background: rgba(21, 21, 21, 1);
color: rgba(186, 185, 185, 1);
font-family: 'Bewlay';
font-weight: 400;
font-size: 14px;
line-height: 0%;
letter-spacing: -2%;
text-transform: lowercase;
height: 17px;
padding: 2px;
padding-top: 9px;
box-sizing: border-box;
border-left: 5px solid rgba(123, 43, 29, 1);
box-shadow: -1px -1px 0 rgba(21, 21, 21, 1), 1px 1px 0 rgba(21, 21, 21, 1), -1px 1px 0 rgba(21, 21, 21, 1), 1px -1px 0 rgba(21, 21, 21, 1);
}

section.personalpage .char-menu .pp-twinks {
position: relative;
z-index: 3;
display: flex;
gap: 12px;
align-items: center;
max-width: 220px;
margin-top: 15px;
}

section.personalpage .char-menu .pp-twinks > a img,
section.personalpage .char-menu .pp-twinks > a {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
transition: filter .3s ease-in-out;
}

section.personalpage .char-menu .pp-twinks > div {
display: flex;
gap: 8px;
flex-wrap: wrap;
max-height: 69px;
overflow: auto;
}

section.personalpage .char-menu .pp-twinks > div a img {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
transition: filter .3s ease-in-out;
}

section.personalpage .char-menu .pp-twinks a:hover img {
filter: brightness(1.5);
}

section.personalpage .char-menu .pp-twinks a ttl {
display: none;
}

section.personalpage .char-menu div.pp-social {
display: flex;
width: 100%;
justify-content: center;
gap: 10px;
position: absolute;
bottom: 10px;
}

section.personalpage .char-menu div.pp-social a {
width: 24px;
height: 24px;
transition: filter .3s ease-in-out;
}

section.personalpage .char-menu div.pp-social a:hover {
filter: brightness(1.4);
}

section.personalpage .char-menu div.pp-social a.pp-twit {
background: url(https://forumstatic.ru/files/001c/b8/3a/68711.png) no-repeat center / contain;
}

section.personalpage .char-menu div.pp-social a.pp-inst {
background: url(https://forumstatic.ru/files/001c/b8/3a/51404.png) no-repeat center / contain;
}

.profile-card ttl,
.pp-achiev ttl,
.somecustom ttl {
display: none !important;
}

.global-ttl-popup {
position: absolute;
z-index: 99999;
pointer-events: none;
opacity: 0;
font-family: Inter;
visibility: hidden;
transition: opacity 0.25s ease;
background: rgba(15, 15, 15, 0.95);
color: #e0e0e0;
padding: 6px 10px;
max-width: 250px;
border-radius: 3px;
font-size: 11px;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.global-ttl-popup.active {
opacity: 1;
visibility: visible;
}

</style>

<div class='char-info'>
<img src='https://i.pinimg.com/736x/84/30/9e/84309ed94278c150cbf8a6f51ca9d608.jpg' class='user-av'>
<a href='#'>name surname, 00</a>
<ppocc>род деятельности</ppocc>
<ppquote>“Lorem Ipsum is simply dummy text of the printing and <a href='#'>some link</a> typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an”</ppquote>

<pptrack><a href='#'>имя группы / исполнителя</a> - название трека</pptrack>

<team>команда игрока</team>

</div>

</div></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>

.pp-ppbgs {
width: 174px;
height: 305px;
top: 19px;
left: 490px;
}

.pp-icons {
width: 174px;
height: 305px;
top: 19px;
left: 19px;
}

.pp-icons > div,
.pp-ppbgs > div,
.pp-bgs > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding-right: 3px;
overflow: auto;
height: 100%;
align-content: flex-start;
}

.pp-ppbgs > div img,
.pp-bgs > div img {
width: 119px;
height: 86px;
border-radius: 10px;
object-fit: cover;
}

.pp-ppbgs > div img {
width: 70px;
height: 131px;
}

.pp-icons > div img {
width: 31px;
height: 31px;
}

section.personalpage .vtab-content .pp-plaques {
width: 648px;
height: 88px;
top: 336px;
left: 18px;
}

.pp-plaques > div {
display: flex;
overflow: auto;
padding-bottom: 9px;
gap: 5px;
}

.pp-plaques .pa-fld5 {
flex-shrink: 0;
width: 207px;
}

</style>

</div></div>

</div></div>

</div></div>

<li class="pa-fld5"><rank>некий краткий текст над плашкой</rank><a id="#" class="modal-link pls-pers-page" data-reveal-id="character" style="cursor: pointer;"><div class="plaque"><img src="https://upforme.ru/uploads/001c/ad/71/2/992981.png"></div></a></li>

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

.vtab-content .pp-chron > div {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
height: 100%;
overflow: auto;
padding-right: 5px;
}

.vtab-content .pp-chron pp-ep {
display: flex;
position: relative;
justify-content: space-between;
flex-wrap: wrap;
}

.vtab-content .pp-chron pp-ep > a {
font-family: Bewlay;
font-weight: 400;
font-size: 22px;
line-height: 1;
letter-spacing: 1%;
color: black;
background: rgba(242, 243, 246, 1);
position: relative;
padding-right: 5px;
z-index: 1;
transition: color .3s ease;
}

.vtab-content .pp-chron pp-ep > a:hover {
color: rgb(var(--accent));
}

.vtab-content .pp-chron pp-ep::before {
content:'';
width: 100%;
height: 2px;
border-bottom: 1px dotted rgba(115, 115, 115, 1);
top: 15px;
position: absolute;
z-index: 0;
}

.vtab-content .pp-chron ep-chars {
width: 100%;
flex-shink: 0;
background: rgba(242, 243, 246, 1);
position: relative;
z-index: 1;
}

.vtab-content .pp-chron pp-ep div {
background: rgba(242, 243, 246, 1);
position: relative;
padding-left: 5px;
z-index: 1;
display: flex;
gap: 5px;
}

.vtab-content .pp-chron pp-ep div * {
font-family: Inter;
font-weight: 400;
font-size: 12px;
line-height: 1;
text-align: center;
text-transform: lowercase;
color: white;
height: 21px;
padding: 5px;
background-color: gray;
}

.vtab-content .pp-chron pp-ep div au {
background-color: rgba(145, 103, 103, 1);
}

.vtab-content .pp-chron pp-ep div active {
background-color: rgba(101, 145, 105, 1);
}

.vtab-content .pp-chron pp-ep div closed {
background-color: rgba(56, 56, 56, 1);
}

.vtab-content .pp-chron pp-ep ep-chars {
font-family: Inter;
font-weight: 400;
font-size: 13px;
line-height: 1;
text-transform: lowercase;
display: flex;
gap: 4px;
margin-top: 5px;
}

</style>

<pp-ep><a href='#'>название эпизода</a>
<div><active>active</active><au>au</au><closed>closed</closed><span>quest</span></div>
<ep-chars>
<a href='#'>имя участника</a> &
<a href='#'>имя участника</a>
</ep-chars></pp-ep>

<pp-ep><a href='#'>название эпизода</a>
<div><active>active</active><au>au</au><closed>closed</closed></div>
<ep-chars>
<a href='#'>имя участника</a> &
<a href='#'>имя участника</a>
</ep-chars></pp-ep>

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

<style>

.vtab-content .pp-achiev div,
.vtab-content .pp-wheels div {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
gap: 8px;
align-content: flex-start;
}

.vtab-content .pp-wheels {
border: 1px solid rgba(175, 175, 175, 1);
background: rgba(242, 243, 246, 1);
border-radius: 5px;
position: absolute;
padding: 20px 7px 15px 15px;
width: 212px;
height: 91.5%;
top: 19px;
left: 19px;
}

.vtab-content .pp-wheels > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}

.vtab-content .pp-wheels > div wheel {
display: block;
}

.vtab-content .pp-wheels > div wheel img {
width: 57px;
height: 57px;
object-fit: contain;
}

.vtab-content .pp-wheels > div wheel ttl {display: none}

.vtab-content .pp-achiev {
border: 1px solid rgba(175, 175, 175, 1);
background: rgba(242, 243, 246, 1);
border-radius: 5px;
position: absolute;
padding: 20px 7px 15px 15px;
width: 332px;
height: 91.5%;
top: 19px;
left: 242px;
}

.vtab-content .pp-scale {
border: none !important;
background: rgba(88, 87, 87, 1) !important;
border-radius: 5px;
position: absolute;
padding: 20px 7px 15px 15px;
width: 79px;
height: 91.5%;
top: 19px;
left: 585px;
}

.vtab-content .pp-achiev > div {
display: flex;
flex-wrap: wrap;
gap: 7px;
}

.vtab-content .pp-achiev > div achiev {
display: block;
position: relative;
}

.vtab-content .pp-achiev > div achiev img {
width: 95px;
height: 23px;
object-fit: contain;
}

.vtab-content .pp-achiev > div {
gap: 25px 8px;
}

.vtab-content .pp-achiev > div achiev.stat_0 {
opacity: .5;
filter: grayscale(1);
}

.vtab-content .pp-achiev > div achiev:nth-child(3n+1)::before {
content: '';
width: 200px;
height: 1px;
left: 50px;
position: absolute;
background-color: lightgray;
top: 40px;
z-index: 3;
pointer-events: none;
}

</style>

<wheel>
<img src='https://forumstatic.ru/files/001c/b8/3a/32809.png'>
<ttl>всплывашка с описанием или что там</ttl>
</wheel>

</div></div>

<achiev class='stat_0'>
<img src='https://forumstatic.ru/files/001c/b8/3a/30515.png'>
<ttl>всплывашка с описанием или что там</ttl>
</achiev>

<achiev class='stat_1'>
<img src='https://forumstatic.ru/files/001c/b8/3a/30515.png'>
<ttl>всплывашка с описанием или что там</ttl>
</achiev>

<achiev class='stat_0'>
<img src='https://forumstatic.ru/files/001c/b8/3a/30515.png'>
<ttl>всплывашка с описанием или что там</ttl>
</achiev>

<achiev class='stat_1'>
<img src='https://forumstatic.ru/files/001c/b8/3a/30515.png'>
<ttl>всплывашка с описанием или что там</ttl>
</achiev>

<achiev class='stat_0'>
<img src='https://forumstatic.ru/files/001c/b8/3a/30515.png'>
<ttl>всплывашка с описанием или что там</ttl>
</achiev>

<achiev class='stat_1'>
<img src='https://forumstatic.ru/files/001c/b8/3a/30515.png'>
<ttl>всплывашка с описанием или что там</ttl>
</achiev>

</div></div>

.vtab-content .pp-scale > div {
position: absolute;
background-image: url(https://forumstatic.ru/files/001c/b8/3a/74573.png);
width: 46px;
height: 316px;
top: 72px;
left: 17px;
}

.vtab-content .pp-scale > div::before {
content: '';
position: absolute;
background: url(https://forumstatic.ru/files/001c/b8/3a/27577.png) no-repeat top / contain;
width: 65px;
height: 316px;
top: -56px;
left: -11px;
}

.vtab-content .pp-scale > div > div {
position: absolute;
width: 22px;
height: 283px;
bottom: 12px;
left: 12px;
z-index: -1;
}

.vtab-content .pp-scale > div > div::after {
content: '';
position: absolute;
background: url(https://forumstatic.ru/files/001c/b8/3a/25410.png) no-repeat bottom;
width: 100%;
height: var(--prc);
bottom: 0px;
left: 0px;
}

</style>

</div>

.vtab-content .pp-coupons > div {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-items: flex-start;
gap: 10px 30px;
width: 100%;
height: 100%;
overflow: auto;
padding-right: 5px;
align-content: flex-start;
}

.vtab-content .pp-coupons > div coupon {
width: 183px;
height: 83px;
position: relative;
}

.vtab-content .pp-coupons > div coupon img {
width: 188px;
height: 86px;
object-fit: contain;
}

.vtab-content .pp-coupons > div coupon span {
display: block;
background-color: rgba(217, 217, 217, 1);
width: fit-content;
box-shadow: 2px 2px 1.8px 0px rgba(0, 0, 0, 0.25);
font-family: Bewlay;
font-weight: 400;
font-size: 26px;
line-height: 1;
letter-spacing: 8%;
text-align: center;
width: 35px;
height: 35px;
border-radius: 3px;
padding: 6px;
position: absolute;
}

.vtab-content .pp-coupons > div coupon.red span {
background-color: rgba(50, 50, 51, 1);
color: white;
bottom: -2px;
left: 11px;
}

.vtab-content .pp-coupons > div coupon.brown span {
top: -2px;
right: 3px;
}

</style>

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

</section>[/html][hideprofile]

Test

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

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

Объявление

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

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

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

Поделиться12026-05-25 11:32:52

Поделиться22026-05-25 12:45:25