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

[html]
<style>
section.personalpage {
width: 934px;
height: 724px;
position: relative;
background-color: rgba(214, 213, 209, 1);
}

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

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

section.personalpage img.big-bg {
width: 934px;
height: 172px;
object-fit: cover;
position: absolute;
top: 0px;
left: 0px;
}

section.personalpage div.charinfo {
position: absolute;
width: 377px;
height: 165px;
border: 1px solid rgba(216, 211, 202, 1);
background-color: rgba(239, 238, 234, 1);
border-radius: 5px;
top: 43px;
left: 39px;
display: flex;
align-items: center;
}

section.personalpage div.charinfo::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
height: 163px;
width: 123px;
background-color: rgba(172, 180, 196, 1);
border-radius: 5px 0 0 5px;
}

section.personalpage div.charinfo div.charav {
width: 105px;
height: 105px;
background: linear-gradient(347.69deg, #E9E9E9 8.96%, #9099A9 112.15%);
border-radius: 5px;
padding: 11px;
position: absolute;
top: 30px;
left: 72px;
}

section.personalpage div.charinfo div.charav img {
width: 82px;
height: 82px;
border-radius: 5px;
object-fit: cover;
}

section.personalpage div.charinfo div.charav a.couple {
position: absolute;
border-radius: 50%;
width: 28px;
height: 28px;
bottom: 4px;
right: 0px;
background-color: rgba(233, 233, 233, 1);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
background-image: url(https://forumstatic.ru/files/001c/c3/ea/84971.png);
background-size: 13px;
background-position: center;
background-repeat: no-repeat;
transition: .3s ease;
}

section.personalpage div.charinfo div.charav a.couple:hover {
background-color: rgba(255, 255, 255, 1);
}

section.personalpage div.charinfo .dnm{
font-family: Playfair Display;
font-weight: 600;
font-size: 14px;
line-height: 120%;
text-align: center;
color: rgba(70, 70, 70, 1);
}

section.personalpage div.charinfo span {
display: block;
width: 163px;
max-height: 90px;
overflow: auto;
font-size: 9px;
line-height: 1.4;
color: rgba(119, 119, 119, 1);
text-align: left;
}

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 div.charinfo .vtab-content {
display: none;
padding: 10px;
width: 377px;
height: 165px;
}

section.personalpage div.charinfo .vtab-content.active {
display: flex;
flex-direction: column;
padding: 10px 17px 10px 191px;
align-items: flex-start;
justify-content: center;
gap: 4px;
}

section.personalpage div.charinfo .vtab-btn {
background-color: rgba(233, 231, 224, 1);
padding: 1px 4px 3px;
font-family: 'Playfair Display';
font-weight: 600;
font-size: 10px;
color: black !important;
line-height: 1;
letter-spacing: 0%;
text-align: center;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
transition: .3s ease;
border: 0px solid #bbb;
cursor: pointer;
}

section.personalpage div.charinfo .vtab-btn.active {
background: white;
}

section.personalpage div.charinfo .vtab-buttons {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
position: absolute;
top: 47px;
left: -33px;
}
section.personalpage div.charinfo .vtab-content a.doss,
section.personalpage div.charinfo .vtab-content a.ptopic {
position: absolute;
border-radius: 50%;
width: 28px;
height: 28px;
top: 75px;
right: -14px;
background-color: rgba(239, 238, 234, 1);
background-image: url(https://forumstatic.ru/files/001c/c3/ea/84663.png);
background-size: 13px;
background-position: center;
background-repeat: no-repeat;
transition: .3s ease;
}

section.personalpage div.charinfo .vtab-content a.doss {
background-image: url(https://forumstatic.ru/files/001c/c3/ea/43755.png);
top: 39px;
}

section.personalpage div.charinfo .vtab-content a.doss:hover,
section.personalpage div.charinfo .vtab-content a.ptopic:hover {
background-color: rgba(255, 255, 255, 1);
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content {
display: none;
padding: 10px;
width: 856px;
height: 471px;
position: absolute;
top: 222px;
left: 39px;
}

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

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-btn {
cursor: pointer;
background: transparent;
border: 0;
width: 138px;
height: 100%;
padding-top: 4px;
transition: 0.3s;
font-family: Moisette;
font-weight: 400;
font-style: Italic;
color: rgba(70, 70, 70, 1);
font-size: 12px;
line-height: 90%;
z-index: 2;
text-align: center;
text-transform: lowercase;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-btn.active {
color: white !important;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div {
position: absolute;
background-color: rgba(233, 233, 233, 1);
padding: 20px;
border-radius: 5px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div > div {
display: flex;
width: 100%;
height: 100%;
overflow: auto;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div::before {
content: attr(data-title);
background-color: rgba(233, 231, 224, 1);
padding: 1px 4px 3px;
font-family: 'Playfair Display';
font-weight: 600;
font-size: 10px;
color: black !important;
line-height: 1;
letter-spacing: 0%;
text-align: center;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
position: absolute;
top: -7px;
left: 20px;
transition: .3s ease;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppbgs {
width: 564px;
height: 207px;
top: 0px;
left: 0px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppbgs > div {
flex-wrap: nowrap;
gap: 7px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppbgs > div img {
width: 226px;
height: 140px;
object-fit: cover;
object-position: top;
border-radius: 5px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcustombg {
width: 564px;
height: 207px;
top: 237px;
left: 0px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcustombg > div {
flex-wrap: nowrap;
gap: 7px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcustombg > div img {
width: 226px;
height: 140px;
object-fit: cover;
object-position: top;
border-radius: 5px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppicons {
width: 277px;
height: 207px;
top: 0px;
left: 579px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppicons > div {
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppicons > div img {
width: 226px;
height: 140px;
object-fit: cover;
object-position: top;
border-radius: 5px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppicons proficon {
display: flex;
width: 22px;
height: 22px;
border: 1px solid rgba(216, 211, 202, 1);
border-radius: 50%;
top: -13px;
background: rgba(239, 238, 234, 1);
justify-content: center;
align-items: center;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppicons proficon > img {
width: 20px;
height: 20px;
object-fit: contain;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppplaques {
width: 277px;
height: 207px;
top: 237px;
left: 579px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppplaques > div {
flex-wrap: wrap;
gap: 4px;
align-content: flex-start;
justify-content: center;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-buttons {
width: 276px;
height: 37px;
position: absolute;
top: 153px;
right: 40px;
border-radius: 50px;
background: rgba(226, 226, 226, 1);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
display: flex;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-buttons::before {
content: '';
padding: 10px 5px 8px;
border-radius: 50px;
display: flex;
border: none;
width: 147px;
gap: 6px;
height: 37px;
cursor: pointer;
z-index: 0;
font-family: Moisette;
font-weight: 400;
font-style: Italic;
font-size: 12px;
line-height: 90%;
box-sizing: border-box;
letter-spacing: -2%;
text-align: center;
text-transform: lowercase;
position: absolute;
align-items: flex-end;
color: rgb(255 255 255);
background: rgb(var(--accent));
transition: var(--anim-hover);
justify-content: center;
border: 4px solid transparent;
background-image: linear-gradient(rgba(172, 139, 86, 1), rgba(172, 139, 86, 1)), linear-gradient(180deg, rgba(226, 225, 221, 0.4) 0%, rgba(226, 225, 221, 0) 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
top: 0;
left: -4px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-buttons:has(.vtab-btn:nth-child(2).active)::before {
transform: translateX(138px);
}

</style>

<div class="vtabs-wrapper ">
<div class="vtabs-cont">
<div class="vtab-buttons">
<button class="vtab-btn">имя твинка</button>
<button class="vtab-btn">длинное имя твинка</button>
<button class="vtab-btn">короткое</button>
</div>
<div class="vtab-content active">

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

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

</div>

<div class='charav'><img src='https://i.pinimg.com/736x/1e/f4/9d/1ef49d718e95ee1a2b101386608d8d85.jpg' >
<a href='#' class='couple' data-title='пара'></a>
</div>
<a href='#' class='dnm'>фамилия, 00</a>

<span>Ты будешь вынужден поступать неправедно, куда бы ты ни пошел.
</span>

</div>

<div class='charav'><img src='https://i.pinimg.com/236x/1d/a4/0f/1da40fa6fed2bcb619cedf2dc293d4e7.jpg' >
<a href='#' class='couple' data-title='пара'></a>
</div>
<a href='#' class='dnm'>имя фамилия, 00</a>

<span>Ты будешь вынужден поступать неправедно, куда бы ты ни пошел. Жизнь в том и состоит, чтобы идти против своей природы.
</span>

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

<div class="vtab-buttons">
<button class="vtab-btn">Вкладка 1</button>
<button class="vtab-btn">Вкладка 2</button>
</div>

</div></div>

</div></div>

</div></div>

<div class="plaque" style="background: linear-gradient(90deg, rgb(0, 0, 0), rgb(97, 81, 66)); color: rgb(255, 255, 255);"><p>Some text content</p><p>...and more text</p></div>

</div></div>

</div>

<style>

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections {
width: 564px;
height: 312px;
top: 0px;
left: 0px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections > div {
flex-direction: column;
gap: 17px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections collection {
display: flex;
position: relative;
gap: 8px;
flex-wrap: wrap;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections collection span {
position: relative;
width: 100%;
font-family: Playfair Display;
font-weight: 700;
font-size: 11px;
line-height: 1;
color: rgba(70, 70, 70, 1);
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections collection img.col_check {
filter: grayscale(0) opacity(1);
}
section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections collection img.col_check {
filter: grayscale(0) opacity(1);
}
section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcollections collection img {
display: block;
width: 118px;
height: 58px;
object-fit: contain;
filter: grayscale(1) opacity(.3);
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppgifts {
width: 420px;
height: 110px;
top: 342px;
left: 0px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppgifts > div {
flex-wrap: nowrap;
gap: 7px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppgifts gift {
display: block;
width: 60px;
height: 60px;
border-radius: 5px;
padding: 5px;
background: rgba(217, 217, 217, 1);
cursor: pointer;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppgifts gift img {
width: 50px;
height: 50px;
object-fit: contain;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppgifts gift ttl {
display: none;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppachievements {
width: 420px;
height: 110px;
top: 342px;
left: 436px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppachievements > div {
flex-wrap: nowrap;
gap: 7px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppachievements achiev {
display: block;
width: 60px;
height: 60px;
border-radius: 5px;
padding: 5px;
background: rgba(217, 217, 217, 1);
cursor: pointer;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppachievements achiev img {
width: 50px;
height: 50px;
object-fit: contain;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppcollections collection ttl,
section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > .ppachievements achiev ttl {
display: none;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons {
width: 277px;
height: 312px;
top: 0px;
left: 579px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons > div {
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
justify-content: center;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons coupon {
display: flex;
min-height: 38px;
width: 221px;
color: rgba(51, 51, 51, 1);
font-size: 10px;
background: rgba(138, 148, 165, 1);
border-radius: 50px;
position: relative;
justify-content: flex-start;
align-items: center;
text-align: left;
padding: 3px 15px 5px 55px;
flex-shrink: 0;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons coupon:nth-child(even) {
background: rgba(172, 139, 86, 1);
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons coupon img {
width: 31px;
height: 31px;
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(255, 255, 255, 1);
padding: 1px;
object-fit: contain;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons coupon ppnum {
padding: 5px;
position: absolute;
background: #f2f3f6;
border: 1px dashed #afafaf;
display: flex;
width: 18px;
height: 18px;
top: 2px;
justify-content: center;
align-items: center;
border-radius: 50%;
left: 31px;
}

section.personalpage .vtabs-wrapper.pp-wrapper .vtab-content > div.ppcoupons coupon ttl {
font-family: Inter;
font-weight: 400;
font-size: 10px;
line-height: 120%;
color: rgba(255, 255, 255, 1);
}

</style>

<span>название коллекции</span>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/76586.png" class="col_check"><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/98156.png" class="col_check"><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/76586.png" ><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/98156.png" ><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/76586.png" class="col_check"><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/76586.png" class="col_check"><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/98156.png" class="col_check"><ttl>задание номер один <br>задание номер два</ttl></item>
<item><img src="https://forumstatic.ru/files/001c/c3/ea/98156.png" class="col_check"><ttl>задание номер один <br>задание номер два</ttl></item>

</collection>

</collection>

</div></div>

<div class="ppgifts" data-title="подарки"><div>
<gift><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></gift>
<gift><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></gift>
<gift><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></gift>
<gift><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></gift>
<gift><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></gift>
<gift><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></gift>
<gift><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></gift>
<gift><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></gift>
</div></div>

<div class="ppachievements" data-title="награды"><div>
<achiev><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></achiev>
<achiev><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></achiev>
<achiev><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></achiev>
<achiev><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></achiev>
<achiev><img src="https://forumstatic.ru/files/001c/b9/21/27017.png"><ttl>блаблабла</ttl></achiev>
<achiev><img src="https://upforme.ru/uploads/001c/ad/71/9/62800.png"><ttl>кеуке уке ук ter t</ttl></achiev>
</div></div>

<coupon class="ep_1">
<img src="https://forumstatic.ru/files/001c/c3/ea/23776.png">
<ppnum>1</ppnum>
<ttl>выкуп внешности на месяц</ttl>
</coupon>

<coupon class="ep_1">
<img src="https://forumstatic.ru/files/001c/c3/ea/23776.png">
<ppnum>2</ppnum>
<ttl>выкуп внешности на месяц</ttl>
</coupon>

<coupon class="ep_1">
<img src="https://forumstatic.ru/files/001c/c3/ea/23776.png">
<ppnum>33</ppnum>
<ttl>выкуп внешности на месяц выкуп на месяц</ttl>
</coupon>

</div></div>

</div>

</div>
</div>

</section>
[/html][hideprofile]

Test

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

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

Объявление

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

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

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

Поделиться12026-08-12 15:16:32

Поделиться22026-08-12 15:53:50