Шаблон лс страница скинов

[html]

<img src='https://forumstatic.ru/files/001c/aa/0d/49188.jpg'>

<span>name surname</span>

<div><p>
<ttl>занятость</ttl><span>

текст, описывающий род деятельности персонажа.<br>
br - для переноса.

</span></p></div>

<div><p>
<ttl>способность</ttl><span>

текст, описывающий способность персонажа.<br>
br - для переноса.
текст, описывающий способность персонажа.<br>
br - для переноса.
текст, описывающий способность персонажа.<br>
br - для переноса.
</span></p></div>

</div>

<div>

<div class="pp-content-area"> <div class="pp-content pp-content-1" >

<ppcoupons data-title='купоны'><div>

<coupon>
<img src='https://forumstatic.ru/files/001c/88/d4/77882.png'>
<ttl>+твинк (1)</ttl>
<span>для самореализации и самолюбования</span>
</coupon>

</div></ppcoupons>

<ppplaques data-title='плашки'><div>

<plaque><l1>первая строка текста</l1><l2>вторая строка текста</l2><img src='https://i.pinimg.com/736x/a3/25/6b/a3256b061de7eba69d8df473e07f1605.jpg'></plaque>

</div></ppplaques>

<ppbgs data-title='фоны'><div>

</div></ppbgs>

</div>

<div class="pp-content pp-content-2">

<ppgifts data-title='подарки'><div>

<gift>
<img src='https://forumstatic.ru/files/001c/aa/0d/33010.png'>
<ttl><d>15.12.00</d> от *****</ttl>
<span>лови ключи от своей личной страницы</span>
</gift>

</div></ppgifts >

<achiev style='background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);'>
<img src='https://forumstatic.ru/files/001c/aa/0d/71713.png'>
<ttl>коробочка флекса</ttl>
<span>дошутился во флуде в две строки</span>
</achiev>

<achiev style='background: linear-gradient(180deg, rgba(55, 255, 111, 0.3) 0%, rgba(255, 255, 255, 0.09) 100%);'>
<img src='https://forumstatic.ru/files/001c/aa/0d/71713.png'>
<ttl>коробочка флекса</ttl>
<span>дошутился во флуде в две строки</span>
</achiev>

<achiev style='background: linear-gradient(180deg, rgba(255, 39, 25, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);'>
<img src='https://forumstatic.ru/files/001c/aa/0d/71713.png'>
<ttl>коробочка флекса</ttl>
<span>дошутился во флуде в две строки</span>
</achiev>

<achiev>
<img src='https://forumstatic.ru/files/001c/aa/0d/71713.png'>
<ttl>коробочка флекса</ttl>
<span>дошутился во флуде в две строки</span>
</achiev>

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

.pp3-username {
color: rgba(72, 72, 72, 1);
font-family: "Press Start 2P";
font-weight: 400;
position: absolute;
font-size: 50px;
line-height: 100%;
top: 354px;
right: 37px;
width: 400px;
text-align: right;
text-transform: uppercase;
}

.pp3-avlevel {
color: white;
font-family: "Press Start 2P";
font-weight: 400;
position: absolute;
font-size: 20px;
line-height: 100%;
top: 59px;
left: 51px;
width: 100px;
text-align: left;
text-transform: uppercase;
}

.pp3-avlevel::after {
content: 'уровень аватара';
font-family: Onest;
font-weight: 400;
font-size: 9px;
line-height: 100%;
text-transform: lowercase;
position: absolute;
top: -15px;
left: 0px;
width: 100%;
color: rgba(255, 255, 255, 0.7);
}

.pp3-skinbuff {
color: white;
font-family: Onest;
font-weight: 400;
font-size: 12px;
line-height: 100%;
text-transform: lowercase;
top: 112px;
left: 51px;
width: 150px;
text-align: left;
position: absolute;
}

.pp3-skinbuff::after {
content: 'эффект скина';
font-family: Onest;
font-weight: 400;
font-size: 9px;
line-height: 100%;
text-transform: lowercase;
position: absolute;
top: -15px;
left: 0px;
width: 100%;
color: rgba(255, 255, 255, 0.7);
}

.pp3-petbuff {
color: white;
font-family: Onest;
font-weight: 400;
font-size: 12px;
line-height: 100%;
text-transform: lowercase;
top: 370px;
left: 51px;
width: 150px;
text-align: left;
position: absolute;
}

.pp3-petbuff::after {
content: 'эффект питомца';
font-family: Onest;
font-weight: 400;
font-size: 9px;
line-height: 100%;
text-transform: lowercase;
position: absolute;
top: -15px;
left: 0px;
width: 100%;
color: rgba(255, 255, 255, 0.7);
}

.pp3-pet {
position: absolute;
bottom: 156px;
left: 50px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.pp3-pet span {
font-family: Onest;
font-weight: 400;
font-size: 10px;
line-height: 100%;
text-transform: lowercase;
color: rgba(255, 255, 255, 0.7);
display: block;
background: rgba(71, 71, 71, 1);
width: 100px;
border-radius: 5px;
padding: 5px;
text-align: left;
position: relative;
}

.pp3-pet span::before {
content: '';
position: absolute;
bottom: -10px;
left: 58px;
width: 0;
height: 0;
border-style: solid;
border-width: 17px 11px 0 10px;
border-color: rgba(71, 71, 71, 1) transparent transparent transparent;
}

.pp3-pet img {
width: 112px;
height: 112px;
object-fit: contain;
}

.pp3-skinactive {
top: 51px;
left: 135px;
width: 150px;
text-align: left;
text-transform: uppercase;
position: absolute;
}

.pp3-skinactive img {
width: 249px;
height: 373px;
object-fit: contain;
}

.pp3-skins {
display: flex;
gap: 8px;
position: absolute;
width: 448px;
height: 295px;
top: 40px;
left: 374px;
padding-top: 30px;
overflow-X: auto;
overflow-Y: hidden;
scroll-behavior: smooth;
}

.pp3-skins::after {
content: 'скины';
position: absolute;
top: 0px;
left: 0px;
color: rgba(72, 72, 72, 1);
font-family: 'Press Start 2P';
font-weight: 400;
font-size: 16px;
line-height: 100%;
}

.pp-content-3 .pp3-skins .skin {
width: 144px;
height: 255px;
flex-shrink: 0;
flex-grow: 0;
background: rgba(0, 0, 0, 1);
padding-right: 0px;
border-radius: 10px;
position: relative;
transition: .5s ease-in-out;
}
.pp-content-3 .pp3-skins .skin span {
font-family: Onest;
font-weight: 400;
font-size: 10px;
line-height: 100%;
text-transform: lowercase;
color: rgba(255, 255, 255, 0.7);
display: block;
padding: 10px;
text-align: left;
}

.pp-content-3 .pp3-skins .skin > div {
width: 144px;
height: 199px;
border: 1px solid transparent;
border-radius: 10px;
background-image: linear-gradient(206.93deg, rgba(0, 0, 0, .3) 0.25%, #000000 52.81%, #00000080 98.75%),
linear-gradient(206.93deg, var(--br) 0.25%, #040404 45.81%, #5a5a5a 110.75%),
linear-gradient(206.93deg, var(--br) 86.25%, #ffffff 1.81%, #ffffff 68.75%);
background-origin: border-box;
background-clip: padding-box, border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}

.pp-content-3 .pp3-skins .skin img {
width: 124px;
height: 186px;
object-fit: contain;
transition: .5s ease-in-out;
}

.pp-content-3 .pp3-skins .skin.withbuff::before {
content:'';
width: 12px;
height: 12px;
background: url(https://forumstatic.ru/files/001c/aa/0d/63487.png) no-repeat center / contain;
position: absolute;
right: 17px;
top: 8px;
z-index: 5;
}

.pp-content-3 .pp3-skins .skin.withbuff:not(.actual)::before {
right: 4px;
}

.pp-content-3 .pp3-skins .skin.actual::after {
content:'';
width: 12px;
height: 12px;
background: url(https://forumstatic.ru/files/001c/aa/0d/17299.png) no-repeat center / contain;
position: absolute;
right: 4px;
top: 8px;
z-index: 5;
}

.pp-content-3 .pp3-skins .skin:hover img {
scale: 1.05
}

.pp-content-3 .pp3-skins .skin > div::after {
content: '';
position: absolute;
top: -50%;
left: 225%;
width: 129%;
height: 263%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(225deg);
transition: left 0s ease;
}

.pp-content-3 .pp3-skins .skin > div:hover::after {
left: -225%;
transition: left 1s ease;
}

</style>

<div class="pp-content pp-content-3">

<div class='pp3-username'>name surname</div>

<div class='pp3-avlevel'>000</div>

<div class='pp3-skinbuff'>длинное описание эффекта надетого скина</div>

<div class='pp3-pet'>
<span>привет, я твой будущий питомец</span>
<img src='https://forumstatic.ru/files/001c/aa/0d/62770.png'>
</div>
<div class='pp3-petbuff'>длинное описание эффекта питомца</div>

<div class='pp3-skinactive'>
<img src='https://forumstatic.ru/files/001c/aa/0d/38188.png'>
</div>

<div class='pp3-skins'>

<div class='skin withbuff actual ' style='--br: #007bff'>
<div><img src='https://forumstatic.ru/files/001c/aa/0d/72233.png'></div>
<span>краткое описание на строку-две</span>
</div>

</div></div>

</div>

<div class="pp-buttons-area">
<label for="pp-tab1" class="pp-btn">оформа и купоны</label>
<label for="pp-tab2" class="pp-btn">ачивки и подарки</label>
<label for="pp-tab3" class="pp-btn">аватар</label>
</div>
</div>

</div>

</personalpage>[/html][hideprofile]

Test

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

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

Объявление

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

Шаблон лс страница скинов

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

Поделиться12026-04-10 15:10:07

Поделиться22026-04-10 15:10:14