шаблон личная страница

[html]<style>
section.personalpage {
width: 836px;
height: 600px;
position: relative;
background: url(https://forumstatic.ru/files/001c/af/2d/90024.webp) no-repeat center / contain;
margin: 0 auto;
}

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

section.personalpage .vtab-content {
display: none;
padding: 10px;
background: #00ffff42;
width: 537px;
height: 455px;
top: 71px;
left: 272px;
position: absolute;
}

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: center;
top: 26px;
left: 271px;
}

section.personalpage .vtab-btn {
padding: 5px 16px;
height: 23px;
cursor: pointer;
background: rgba(158, 87, 64, 1);
transition: background 0.3s, color 0.3s;
border: none;
color: white;
text-transform: lowercase;
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 120%;
letter-spacing: 2%;
border-radius: 50px;
}

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

section.personalpage .char-menu {
position: absolute;
top: 75px;
left: 0px;
width: 249px;
height: 363px;
overflow: hidden;
}

section.personalpage .char-menu .page-bg {
width: 251px;
height: 338px;
object-fit: cover;
position: absolute;
top: 13px;
left: -20px;
transform: rotate(6.3deg);
}

section.personalpage .char-menu .user-av {
width: 90px;
height: 90px;
border-radius: 50%;
filter: grayscale(1);
object-fit: cover;
}

section.personalpage .char-menu .char-av-wrap {
position: absolute;
top: 38px;
left: 74px;
width: 90px;
height: 90px;
}

section.personalpage .char-menu .char-av-wrap a {
background: url(https://forumstatic.ru/files/001c/af/2d/60823.png) no-repeat center / contain;
width: 22px;
height: 22px;
position: absolute;
top: 78px;
left: 34px;
transition: filter .3s ease;
}
section.personalpage .char-menu .char-av-wrap a:hover {
filter: brightness(1.2);
}

section.personalpage .char-menu .mainchar::before {
content: '';
background: url(https://forumstatic.ru/files/001c/af/2d/55427.png) no-repeat center / contain;
position: absolute;
width: 18px;
height: 18px;
top: 5px;
left: 67px;
z-index: 4;
}

section.personalpage .char-menu charname {
font-family: Playfair Display;
font-weight: 700;
font-size: 13px;
line-height: 86%;
text-align: center;
color: rgba(255, 255, 255, 1);
width: 200px;
display: block;
left: 20px;
top: 145px;
z-index: 5;
position: absolute;
}

section.personalpage .char-menu charquote {
font-family: Pragmatica;
font-weight: 400;
font-size: 10px;
line-height: 86%;
text-align: center;
color: rgba(255, 255, 255, 1);
width: 116px;
display: block;
left: 62px;
top: 165px;
z-index: 5;
position: absolute;
}

section.personalpage .char-menu charquote a {
color: rgba(255, 255, 255, 1);
font-weight: 700;
}

section.personalpage .char-menu charquote a:hover {
color: rgba(255, 255, 255, .7) !important;
}

section.personalpage .char-menu .char-basis {
transform: rotate(6.3deg);
position: absolute;
display: flex;
flex-direction: column;
width: 200px;
height: 80px;
align-items: flex-end;
gap: 3px;
top: 272px;
left: 17px;
}

section.personalpage .char-menu .char-basis loyalty {
background-color: rgba(158, 87, 64, 1);
border-radius: 20px 0 0 20px;
font-family: Playfair Display;
font-weight: 700;
font-size: 9px;
line-height: 100%;
padding: 5px 16px 7px ;
color: white;
}

section.personalpage .char-menu .char-basis charocc {
background-color: rgba(51, 51, 51, 1);
border-radius: 20px 0 0 20px;
font-family: Playfair Display;
font-weight: 700;
font-size: 9px;
line-height: 100%;
padding: 5px 16px 7px ;
color: white;
}

section.personalpage .pp-twinks {
position: absolute;
width: 60px;
height: 300px;
top: 113px;
left: -41px;
z-index: 3;
}

section.personalpage .pp-twinks > div {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-end;
}

section.personalpage .pp-twinks img {
width: 37px;
height: 37px;
object-fit: cover;
border-radius: 50%;
border: 3px solid rgba(158, 87, 64, 1);
}

section.personalpage .pp-twinks a ttl {
display: block;
width: fit-content;
max-width: 23px;
min-width: 23px;
height: 28px;
border-radius: 5px;
background: rgba(242, 243, 246, 1);
color: rgba(242, 243, 246, 1);
border: 1px solid rgba(175, 175, 175, 1);
overflow: hidden;
top: 5px;
right: 8px;
white-space: nowrap;
line-height: 1;
padding: 6px 33px 5px 15px !important;
position: absolute;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
z-index: -1;
font-family: Playfair Display;
font-weight: 500;
font-style: Italic;
font-size: 12px;
line-height: 90%;
text-align: right;
text-transform: lowercase;
position: absolute;
}

section.personalpage .pp-twinks a ttl::before {
content: '';
width: 7px;
height: 7px;
background-color: rgba(158, 87, 64, 1);
border-radius: 50%;
position: absolute;
top: 10px;
left: 7px;
}

section.personalpage .pp-twinks a {
position: relative;
}

section.personalpage .pp-twinks a:hover ttl {
width: fit-content;
max-width: 250px;
border-radius: 5px;
padding: 6px 33px 5px 20px !important;
color: rgba(51, 51, 51, 1);
}

section.personalpage .pp-twinks a.prime::before {
content: '';
background: url(https://forumstatic.ru/files/001c/af/2d/55427.png) no-repeat center / contain;
position: absolute;
width: 18px;
height: 18px;
top: 21px;
left: 21px;
z-index: 4;
}

</style>

<a href='#'>
<img src='https://i.pinimg.com/736x/e0/55/bf/e055bf7916056a839e12565780486bf0.jpg'>
<ttl>name surname</ttl>
</a>

<a href='#'>
<img src='https://i.pinimg.com/736x/60/eb/05/60eb05aafb5e311023438fc0cb7681bf.jpg'>
<ttl>name surname</ttl>
</a>

<a href='#' class='prime'>
<img src='https://i.pinimg.com/736x/1c/b1/d2/1cb1d2632451185eb5e61ff287233299.jpg'>
<ttl>name surname</ttl>
</a>

</div></div>

<charname>name surname </charname>

<charquote>какая-то цитата, куда можно включить и толстенькую <a href='#'>ссылку</a> при желании</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">Вкладка 1</button>
<button class="vtab-btn">Вкладка 2</button>
<button class="vtab-btn">Вкладка 3</button>
</div>

section.personalpage .vtab-content > div::before {
content: attr(data-title);
border: 1px solid rgba(175, 175, 175, 1);
background: rgba(242, 243, 246, 1);
position: absolute;
height: 27px;
padding: 6px 10px 5px 20px;
box-sizing: border-box;
border-radius: 5px;
top: -14px;
min-width: 140px;
font-family: Playfair Display;
font-weight: 700;
font-size: 11px;
line-height: 1;
}

section.personalpage .vtab-content > div::after {
content: '';
width: 7px;
height: 7px;
background-color: rgba(158, 87, 64, 1);
border-radius: 50%;
position: absolute;
top: -4px;
left: 25px;
}

.pp-chron > div {
display: flex;
flex-direction: column;
gap: 11px;
padding-right: 7px;
overflow: auto;
height: 100%;
}

.pp-chron ep {
display: block;
padding:15px;
color: rgba(51, 51, 51, 1);
font-size: 10px;
background: rgba(206, 206, 206, 0.5);
border: 1px solid rgba(175, 175, 175, 1);
border-radius: 5px;
position: relative;
}

.pp-chron ep.ep_1::before {
content: 'завершён';
height: 14px;
border-radius: 20px;
background-color: rgba(48, 48, 48, 1);
padding: 1px 15px;
color: white;
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 100%;
text-transform: lowercase;
position: absolute;
bottom: -7px;
right: 5px;
box-sizing: border-box;
}

.pp-chron ep.ep_0::before {
content: 'активен';
height: 14px;
border-radius: 20px;
background-color: rgba(158, 87, 64, 1);
padding: 1px 15px;
color: white;
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 100%;
text-transform: lowercase;
position: absolute;
bottom: -7px;
right: 5px;
box-sizing: border-box;

}

.pp-chron ep.ep_2::before {
content: 'заморожен';
height: 14px;
height: 14px;
border-radius: 20px;
background-color: rgba(92, 92, 92, 1);
padding: 1px 15px;
color: white;
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 100%;
text-transform: lowercase;
position: absolute;
bottom: -7px;
right: 5px;
box-sizing: border-box;

}

.pp-chron ep a:first-of-type {
font-family: Playfair Display;
font-weight: 700;
font-size: 11px;
line-height: 100%;
width: 100%;
display: block;
letter-spacing: -5%;
color: rgba(51, 51, 51, 1);
margin-bottom: 5px;
}

</style>

<ep class='ep_1'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_0'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_2'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_1'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_0'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_2'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_1'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_0'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

<ep class='ep_2'>
<a href='#'>название эпизода</a>
<a href='#'>name surname</a> & <a href='#'>name surname</a> & <a href='#'>name surname</a>, 1998
</ep>

</div></div>

<style>

.pp-art {
width: 264px;
height: 335px;
top: 22px;
left: 267px;
}

.pp-art art {
border: 1px solid rgba(175, 175, 175, 1);
display: block;
width: 113px;
height: 100px;
border-radius: 5px;
background: rgba(206, 206, 206, 0.5);
position: relative;
overflow: hidden;
padding: 0;
cursor: pointer;
}

.pp-art art > div {
display: flex;
flex-direction: column;
width: 105%;
height: 100%;
padding: 5px;
text-align: center;
gap: 4px;
color: rgba(51, 51, 51, 1);
background-color: rgba(242, 243, 246, 0.5);
backdrop-filter: blur(0px) brightness(1);
opacity: 0;
transition: backdrop-filter .4s ease-in-out, opacity .4s ease-in-out;
}

.pp-art art:hover > div {
backdrop-filter: blur(5px) brightness(1.2) opacity(1);
opacity: 1;
}

.pp-art art > div ttl {
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 121%;
letter-spacing: -5%;
}

.pp-art art > div desc {
font-size: 9px;
line-height: 121%;
}

.pp-art art img {
width: 76px;
height: 76px;
object-fit: contain;
position: absolute;
top: 5px;
left: 5px;
}

.pp-art > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding-right: 3px;
overflow: auto;
height: 100%;
}

</style>

<art>
<img src='https://forumstatic.ru/files/001c/af/2d/51277.png'>
<div>
<ttl>название артефакта</ttl>
<desc>очень краткое описание артефакта</desc>
</div></art>

</div></div>

<style>
.pp-coupons {
width: 526px;
height: 72px;
top: 377px;
left: 5px;
}

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

.pp-coupons coupon {
display: flex;
height: 28px;
margin-top: 5px;
width: fit-content;
color: rgba(51, 51, 51, 1);
font-size: 10px;
background: rgba(206, 206, 206, 0.5);
border: 1px solid rgba(175, 175, 175, 1);
border-radius: 5px;
position: relative;
justify-content: flex-start;
align-items: center;
padding: 3px 10px 5px 59px;
flex-shrink: 0;
}

.pp-coupons coupon img {
width: 36px;
height: 36px;
position: absolute;
left: -1px;
border-radius: 5px;
border: 1px solid rgba(175, 175, 175, 1);
background: rgba(242, 243, 246, 1);
padding: 3px;
top: -5px;
object-fit: cover;
}

.pp-coupons coupon ppnum {
padding: 5px;
position: absolute;
background: #f2f3f6;
border: 1px dashed #afafaf;
display: flex;
width: 22px;
height: 22px;
top: 2px;
justify-content: center;
align-items: center;
border-radius: 50%;
left: 31px;
}

.pp-coupons coupon ttl {
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 120%;
letter-spacing: 2%;
color: rgba(51, 51, 51, 1);
}

</style>

<coupon class='ep_1'>
<img src='https://forumstatic.ru/files/001c/af/2d/81568.png'>
<ppnum>1</ppnum>
<ttl>название и назначение</ttl>
</coupon>

</div></div>

</div>

<style>

section.personalpage .vtab-content .pp-photo {
background: url(https://forumstatic.ru/files/001c/af/2d/78491.png) no-repeat top / contain !important;
position: absolute;
width: 531px;
height: 101px;
padding: 0;
top: -15px;
left: 1px;
border: none;
}

section.personalpage .vtab-content .pp-photo::before,
section.personalpage .vtab-content .pp-photo::after {
content: none;
}

.vtab-content .pp-photo > div {
display: flex;
justify-content: safe center;
overflow-x: auto;
height: 91px;
align-items: flex-end;
margin-top: 11px;
width: 424px;
margin-left: 52px;
padding-bottom: 5px;
}

.vtab-content .pp-photo pphoto {
width: 71px;
height: 71px;
display: block;
position: relative;
background: url(https://forumstatic.ru/files/001c/af/2d/14437.png) no-repeat center / contain;
flex-shrink: 0;
}

.vtab-content .pp-photo pphoto::before {
content: '';
width: 28px;
height: 28px;
background: url(https://forumstatic.ru/files/001c/af/2d/33952.png) no-repeat center / contain;
position: absolute;
top: -15px;
left: 24px;
z-index: 5;
}

.vtab-content .pp-photo pphoto img {
width: 48px;
height: 48px;
position: absolute;
top: 3px;
left: 13px;
object-fit: cover;
}

</style>

</div></div>

<style>

.vtab-content .pp-events {
top: 116px;
left: 5px;
width: 246px;
height: 327px;
}
.vtab-content .pp-events > div {
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 5px;
overflow: auto;
height: 100%;
}

.vtab-content .pp-events event {
display: flex;
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 120%;
gap: 14px;
letter-spacing: 2%;
color: rgba(51, 51, 51, 1);
align-items: center;
padding-right: 5px;
}

.vtab-content .pp-events img {
width: 50px;
height: 50px;
gap: 8px;
border-radius: 5px;
border: 1px solid rgba(175, 175, 175, 1);
background: rgba(242, 243, 246, 1);
padding: 3px;
top: -5px;
object-fit: cover;
}

</style>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание, в каком ивенте поучаствовал человек</ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента </ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента на пару строк </ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание, в каком ивенте поучаствовал человек</ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента </ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента на пару строк </ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание, в каком ивенте поучаствовал человек</ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента </ttl>
</event>

<event class="ep_1">
<img src="https://forumstatic.ru/files/001c/af/2d/58470.png">
<ttl>описание ивента на пару строк </ttl>
</event>

</div></div>

<style>
.pp-tarot {
width: 264px;
height: 335px;
top: 116px;
left: 267px;
}

.pp-tarot tarot {
border: 1px solid rgba(175, 175, 175, 1);
display: block;
width: 75px;
height: 96px;
border-radius: 5px;
background: rgba(206, 206, 206, 0.5);
position: relative;
overflow: hidden;
padding: 0;
cursor: pointer;
}

.pp-tarot tarot > div {
display: flex;
flex-direction: column;
width: 105%;
height: 100%;
padding: 5px;
text-align: center;
gap: 4px;
color: rgba(51, 51, 51, 1);
background-color: rgba(242, 243, 246, 0.5);
backdrop-filter: blur(0px) brightness(1);
opacity: 0;
transition: backdrop-filter .4s ease-in-out, opacity .4s ease-in-out;
}

.pp-tarot tarot:hover > div {
backdrop-filter: blur(5px) brightness(1.2) opacity(1);
opacity: 1;
}

.pp-tarot tarot > div ttl {
font-family: Playfair Display;
font-weight: 700;
font-size: 10px;
line-height: 121%;
letter-spacing: -5%;
}

.pp-tarot tarot > div desc {
font-size: 9px;
line-height: 121%;
}

.pp-tarot tarot img {
width: 76px;
height: 76px;
object-fit: contain;
position: absolute;
top: 5px;
left: 0px;
}

.pp-tarot > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding-right: 3px;
overflow: auto;
height: 100%;
}
</style>

<tarot>
<img src="https://forumstatic.ru/files/001c/af/2d/51277.png">
<div>
<ttl>название карты</ttl>
<desc>краткое описание карты </desc>
</div></tarot>

</div></div>

</div>

.pp-ppbgs {
width: 264px;
height: 335px;
top: 22px;
left: 267px;
}

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

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

.pp-ppbgs > div img {
width: 115px;
height: 145px;
}

section.personalpage .vtab-content .pp-plaques {
width: 526px;
height: 72px;
top: 377px;
left: 5px;
}

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

.pp-plaques .plaque {
flex-shrink: 0;
}

</style>

</div></div>

</div></div>

<div class="plaque"><p>You can't take this from me</p><p>Forbidden in Heaven and useless in Hell</p><img src="https://i.pinimg.com/736x/93/f2/50/93f250cf38c199905558191666c744f0.jpg"></div>

</div></div>

</div>

</div>
</div>

</personalpage> [/html][hideprofile]

Test

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

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

Объявление

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

шаблон личная страница

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

Поделиться12026-04-05 16:43:17

Поделиться22026-04-05 21:30:32