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

[html]
<style>
section.personalpage {
width: 1040px;
height: 430px;
position: relative;
background-image: url(https://forumstatic.ru/files/001c/be/2e/31882.webp);
}

section.personalpage:has(div.vtab-content.first-tab.active) {
background-image: url(https://forumstatic.ru/files/001c/be/2e/98117.webp);
}

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

section.personalpage div.charinfo {
position: absolute;
width: 150px;
height: 315px;
top: 63px;
left: 31px;
display: flex;
flex-direction: column;
align-items: center;
}

section.personalpage div.charinfo img.charav {
width: 78px;
height: 78px;
border-radius: 50%;
object-fit: cover;
margin-left: -9px;
}

section.personalpage div.charinfo .dnm{
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 15px;
line-height: 120%;
text-align: center;
color: rgba(194, 194, 194, 1);
margin-top: 30px;
}

section.personalpage div.charinfo > span {
display: block;
width: 136px;
height: 150px;
overflow: auto;
font-size: 9px;
color: rgba(194, 194, 194, 1);
text-align: center;
margin-top: 10px;
}

section.personalpage div.charinfo img.fr{
width: 48px;
height: 48px;
object-fit: contain;
padding: 0px !important;
cursor: pointer;
filter: drop-shadow(2px 5px 15px #00000090);
position: absolute;
bottom: -25px;
}

section.personalpage .vtab-content {
display: none;
padding: 10px;
width: 792px;
height: 279px;
position: absolute;
left: 211px;
top: 85px;
}

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

section.personalpage .vtab-buttons {
width: 792px;
display: flex;
gap: 8px;
position: absolute;
left: 221px;
top: 38px;
justify-content: center;
}

section.personalpage .vtab-btn {
padding: 3px 10px;
margin-right: 5px;
cursor: pointer;
border-radius: 50px;
background: rgba(34, 32, 29, 1);
border: 0;
font-family: Moisette;
font-weight: 500;
font-style: Italic;
font-size: 12px;
line-height: 1;
text-transform: lowercase;
color: white;
transition: background 0.3s;
}

section.personalpage .vtab-btn.active {
background: rgba(187, 144, 89, 1);
box-shadow: 0px 0px 13.7px 0px rgba(187, 144, 89, 1);
}

section.personalpage .vtab-content > div > div {
position: absolute;
}

section.personalpage .vtab-content > div > div::before {
content: attr(data-title);
left: 50%;
transform: translateX(-50%);
position: absolute;
top: -25px;
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 20px;
line-height: 1;
text-transform: lowercase;
display: block;
width: fit-content;
background: radial-gradient(circle at var(--gradient-x) var(--gradient-y), rgba(187, 144, 89, 1) 40%, rgba(76, 68, 57, 1));
transition: --gradient-x 0.7s ease, --gradient-y 0.7s ease !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

section.personalpage .vtab-content > div > div:hover::before {
--gradient-x: 60%;
--gradient-y: 80%;
}

section.personalpage .vtab-content > div > div.pp-coupons{
width: 225px;
height: 228px;
top: 42px;
left: 21px;
}

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

section.personalpage .vtab-content > div > div.pp-coupons coupon {
width: 65px;
height: 80px;
display: block;
position: relative;
}

section.personalpage .vtab-content > div > div.pp-coupons coupon img {
width: 65px;
height: 80px;
object-fit: contain;
}

section.personalpage .vtab-content ttl {display: none}

section.personalpage .vtab-content > div > div.pp-coupons coupon num {
padding: 5px;
position: absolute;
background: #242424;
color: white;
border: 1px dashed #afafaf;
display: flex;
width: 22px;
height: 22px;
bottom: 2px;
justify-content: center;
align-items: center;
border-radius: 50%;
left: 9px;
}

section.personalpage .vtab-content > div > div.pp-achievements {
width: 225px;
height: 228px;
top: 42px;
left: 294px;
}

section.personalpage .vtab-content > div > div.pp-achievements > div {
overflow: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
padding-right: 3px;
width: 100%;
height: 100%;
}

section.personalpage .vtab-content > div > div.pp-achievements achiev {
width: 67px;
height: 67px;
background-color: rgba(51, 48, 43, 0.5);
border-radius: 5px;
padding: 5px;
display: block;
position: relative;
}

section.personalpage .vtab-content > div > div.pp-achievements achiev img {
width: 55px;
height: 55px;
object-fit: contain;
}

section.personalpage .vtab-content > div > div.pp-plaques {
width: 225px;
height: 228px;
top: 42px;
left: 568px;
}

section.personalpage .vtab-content > div > div.pp-plaques > div {
overflow: auto;
display: flex;
flex-direction: column;
align-content: flex-start;
gap: 4px;
padding-right: 3px;
width: 100%;
height: 100%;
}

section.personalpage .vtab-content > div > div.pp-plaques div.plaque {
position: relative;
height: 44px;
width: 215px;
bottom: 0;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0 0 5px 5px;
color: #FFF;
background: rgba(17, 17, 17, 0.5);
backdrop-filter: blur(4px);
overflow: hidden;
box-sizing: border-box;
user-select: none;
z-index: 1;
flex-shrink: 0;
}

section.personalpage .vtab-content > div > div.pp-artifacts {
width: 763px;
height: 228px;
top: 42px;
left: 21px;
}

section.personalpage .vtab-content > div > div.pp-artifacts > div {
overflow: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
padding-right: 3px;
width: 100%;
height: 100%;
}

section.personalpage .vtab-content > div > div.pp-artifacts artifact {
width: 367px;
height: 130px;
background-color: rgba(51, 48, 43, 0.5);
border-radius: 5px;
padding: 13px 13px 13px 88px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
}

section.personalpage .vtab-content > div > div.pp-artifacts artifact img {
width: 61px;
height: 61px;
object-fit: contain;
position: absolute;
top: 22px;
left: 10px;
}

section.personalpage .vtab-content > div > div.pp-artifacts artifact h5 {
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 12px;
line-height: 1;
color: rgba(194, 194, 194, 1);
}

section.personalpage .vtab-content > div > div.pp-artifacts artifact span {
font-weight: 400;
font-size: 10px;
line-height: 137%;
color: rgba(194, 194, 194, 1);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

section.personalpage .vtab-content > div > div.pp-artifacts artifact a {
background: linear-gradient(90deg, #BB9059 0%, #4C4439 100%);
color: rgba(224, 224, 224, 1);
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 1;
text-transform: lowercase;
display: block;
padding: 3px 10px 2px;
width: fit-content;
border-radius: 50px;
}

section.personalpage .vtab-content > div > div.pp-pets {
width: 763px;
height: 228px;
top: 42px;
left: 21px;
}

section.personalpage .vtab-content > div > div.pp-pets > div {
overflow: auto;
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
gap: 8px;
padding-right: 3px;
width: 100%;
height: 100%;
}

section.personalpage .vtab-content > div > div.pp-pets pet {
width: 242px;
height: 215px;
background-color: rgba(51, 48, 43, 0.5);
border-radius: 5px;
padding: 13px 13px 13px 88px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}

section.personalpage .vtab-content > div > div.pp-pets pet div {
width: 73px;
height: 76px;
position: absolute;
top: 22px;
left: 10px;
background-image: url(https://forumstatic.ru/files/001c/be/2e/65733.png);
}

section.personalpage .vtab-content > div > div.pp-pets pet img {
width: 53px;
height: 53px;
object-fit: cover;
position: absolute;
top: 9px;
left: 8px;
border-radius: 50%;
}

section.personalpage .vtab-content > div > div.pp-pets pet h5 {
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 1;
color: rgba(194, 194, 194, 1);
}

section.personalpage .vtab-content > div > div.pp-pets pet span {
font-weight: 400;
font-size: 10px;
line-height: 137%;
color: rgba(194, 194, 194, 1);
overflow: auto;
padding-right: 5px;
}

section.personalpage .vtab-content > div > div.pp-inventory {
width: 763px;
height: 228px;
top: 42px;
left: 21px;
}

section.personalpage .vtab-content > div > div.pp-inventory > div {
overflow: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
padding-right: 3px;
width: 100%;
height: 100%;
}

section.personalpage .vtab-content > div > div.pp-inventory item {
width: 372px;
min-height: 64px;
background-color: rgba(51, 48, 43, 0.5);
border-radius: 5px;
padding: 13px 13px 13px 88px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}

section.personalpage .vtab-content > div > div.pp-inventory item img {
width: 54px;
height: 54px;
object-fit: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 8px;
}

section.personalpage .vtab-content > div > div.pp-inventory item h5 {
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 1;
color: rgba(194, 194, 194, 1);
}

section.personalpage .vtab-content > div > div.pp-inventory item span {
font-weight: 400;
font-size: 10px;
line-height: 137%;
color: rgba(194, 194, 194, 1);
overflow: auto;
padding-right: 5px;
}

section.personalpage .vtab-content > div > div.pp-bonuses {
width: 763px;
height: 228px;
top: 42px;
left: 21px;
}

section.personalpage .vtab-content > div > div.pp-bonuses > div {
overflow: auto;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
padding-right: 3px;
width: 100%;
height: 100%;
}

section.personalpage .vtab-content > div > div.pp-bonuses bonus {
width: 372px;
background-color: rgba(51, 48, 43, 0.5);
border-radius: 5px;
padding: 13px;
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}

section.personalpage .vtab-content > div > div.pp-bonuses bonus.buff {
background: linear-gradient(90deg, rgba(187, 144, 89, 0.5) 0%, rgba(76, 68, 57, 0.5) 100%), rgba(51, 48, 43, 0.5);
}

section.personalpage .vtab-content > div > div.pp-bonuses bonus::before {
content:'';
position: absolute;
width: 67px;
height: 33px;
top: 4px;
left: 0px;
pointer-events: none;
background: url(https://forumstatic.ru/files/001c/be/2e/67336.png) no-repeat center / contain;
}

section.personalpage .vtab-content > div > div.pp-bonuses bonus.debuff::before {
background: url(https://forumstatic.ru/files/001c/be/2e/54053.png) no-repeat center / contain;

}

section.personalpage .vtab-content > div > div.pp-bonuses bonus img {
width: 54px;
height: 54px;
object-fit: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 8px;
}

section.personalpage .vtab-content > div > div.pp-bonuses bonus h5 {
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 14px;
line-height: 1;
color: rgba(194, 194, 194, 1);
margin-left: 50px
}

section.personalpage .vtab-content > div > div.pp-bonuses bonus span {
font-weight: 400;
font-size: 10px;
line-height: 137%;
color: rgba(194, 194, 194, 1);
overflow: auto;
padding-right: 5px;
}

</style>

<div class='charinfo'>
<img src='https://i.pinimg.com/736x/e0/55/bf/e055bf7916056a839e12565780486bf0.jpg' class='charav'>
<a href='#' class='dnm'>имя фамилия, 00</a>

<span>Ты будешь вынужден поступать неправедно, куда бы ты ни пошел. Жизнь в том и состоит, чтобы идти против своей природы. Рано или поздно это приходится делать каждому живому существу. Это кромешная тьма, крах любого творения, проклятье любой работы, проклятье, иже питает всю жизнь. Везде, во всей Вселенной.
</span>

</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>
<button class="vtab-btn">Вкладка 4</button>
<button class="vtab-btn">Вкладка 4</button>
</div>

<coupon><num>1</num><img src='https://forumstatic.ru/files/001c/be/2e/54092.png'><ttl>название купона</ttl></coupon>
<coupon><num>1</num><img src='https://forumstatic.ru/files/001c/be/2e/21044.png'><ttl>название купона</ttl></coupon>
<coupon><num>88</num><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></coupon>
<coupon><num>11</num><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></coupon>
<coupon><num>1</num><img src='https://forumstatic.ru/files/001c/be/2e/54092.png'><ttl>название купона</ttl></coupon>
<coupon><num>1</num><img src='https://forumstatic.ru/files/001c/be/2e/21044.png'><ttl>название купона</ttl></coupon>
<coupon><num>88</num><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></coupon>
<coupon><num>11</num><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></coupon>

</div></div>

<achiev><img src='https://forumstatic.ru/files/001c/be/2e/54092.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/21044.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/54092.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/21044.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></achiev>
<achiev><img src='https://forumstatic.ru/files/001c/be/2e/80000.png'><ttl>название купона</ttl></achiev>

</div></div>

<div class="plaque"><p>If you don't know what forever feels like</p><p>I'll show you what it feels like without it</p></div>
<div class="plaque"><p>первая строка текста</p><p>вторая строка текста</p></div>
<div class="plaque"><p>первая строка текста</p><p>вторая строка текста</p></div>
<div class="plaque"><p>If you don't know what forever feels like</p><p>I'll show you what it feels like without it</p></div>
<div class="plaque"><p>первая строка текста</p><p>вторая строка текста</p></div>
<div class="plaque"><p>первая строка текста</p><p>вторая строка текста</p></div>
<div class="plaque"><p>If you don't know what forever feels like</p><p>I'll show you what it feels like without it</p></div>
<div class="plaque"><p>первая строка текста</p><p>вторая строка текста</p></div>
<div class="plaque"><p>первая строка текста</p><p>вторая строка текста</p></div>

</div></div>

<artifact><img src='https://forumstatic.ru/files/001c/be/2e/54092.png'><h5>название артефакта</h5><span>Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска.</span>
<a href='#' class='js-open-desc'>читать описание</a>

<div class='art-disp'>
<img src='https://forumstatic.ru/files/001c/be/2e/67698.png' class='art-img'>
<div>
<ttl>Название Предмета</ttl>
Текст переносится просто с помощью энтера.

Изображения не подгоняются по размеру, чтобы избежать размытия, занимают центральную часть. максимальный размер - 80х80 пикселей. Могут быть любого размера в этих пределах - встанут ровно по центру в любом случае. (добавить растяжение/сжатие под размер без потери пропорций?)

Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска. Каждый зуб имеет естественную режущую кромку, которая при сборке образовала непрерывную, слегка волнистую линию лезвия. Фрагменты скреплены между собой стабилизированным костным клеем и жилами, образующими на поверхности клинка характерный ребристый, почти хитиновый рельеф, но стыки аккуратно залиты серебряной пастой, создающей тонкую, змееподобную сеть на тёмном фоне. Рукоять создана из позвонка того же существа — Степного Клыка, который обточен до эргономичной формы и обмотан для хвата кожей.

Навершие рукояти увенчано полированным клыком этой же дикой твари.  Выкован Клык для офицерского состава в элитных мастерских далёких западных Орденов Бастиона — милитаристского государства, ценящего военную утилитарную практичность. Скелет Степного Клыка содержал уникальные природные сплавы железа, кобальта и марганца, усвоенные из высокоминерализованной почвы: зубы твари были настолько плотными и прочными, что даже после гибели сохраняли способность гасить ударную вибрацию.  Принцип действия: Структура зуба Степного Клыка слоистая, состоящая из металлизированных волокон, переплетённых под разными углами, что позволяет ей рассеивать механическую энергию удара, превращая её в тепло, равномерно распределяющееся по всей массе клинка.

Благодаря этому сабля почти не передаёт вибрацию в руку владельца даже при мощном рубящем ударе по твёрдой цели, что позволяет наносить целую смертоносную серию ударов без усталости кисти, и таким образом вести длительные сражения. Дополнительным эффектом после серии ударов клинок становится нагревание клинка (до 40-50 градусов) из-за преобразования вибрационной энергии, что даёт приятное психологическое преимущество: оружие словно "живое".
</div></div>

</artifact>

Прокрутки нет (добавить при достижении определённой длины текста?)

</artifact>

Прокрутки нет (добавить при достижении определённой длины текста?)

</artifact>

Прокрутки нет (добавить при достижении определённой длины текста?)

</artifact>

</div></div>

<pet><h5>имя питомца</h5><span>Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска.Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска.</span></pet>

</div></div>

<item><img src='https://forumstatic.ru/files/001c/be/2e/37085.png'><h5>название айтема</h5><span>Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска.</span></item>

<item><img src='https://forumstatic.ru/files/001c/be/2e/37085.png'><h5>название айтема</h5><span>Сабля с широким, слегка изогнутым клинком</span></item>

</div></div>

<bonus class='buff'><h5>название баффа / дебаффа</h5><span>Сабля с широким, слегка изогнутым клинком</span></bonus>

<bonus class='debuff'><h5>название баффа / дебаффа</h5><span>Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого</span></bonus>

<bonus class='buff'><h5>название баффа / дебаффа</h5><span>Сабля с широким, слегка изогнутым клинком, собранным из десятка треугольных зубных фрагментов тёмно-серого, почти чёрного цвета, отполированных до тусклого, но благородного блеска.</span></bonus>

</div></div>

</div>
</div>

</section>
[/html][hideprofile]

Подпись автора: Эффектная подпись

Test

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

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

Объявление

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

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

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

Перевести Поделиться12026-07-24 10:26:29

Поделиться22026-07-24 10:33:26

Test

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

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

Объявление

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

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

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

ПеревестиПоделиться12026-07-24 10:26:29

Поделиться22026-07-24 10:33:26

Перевести Поделиться12026-07-24 10:26:29