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

[html]
<style>
div.personalpage {
width: 977px;
height: 539px;
border-radius: 10px;
background: rgba(217, 217, 217, 1);
position: relative;
box-sizing: border-box;
overflow: hidden;
}

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

div.personalpage img.pp-head {
width: 977px;
height: 190px;
top: 0px;
left: 0px;
object-fit: cover;
}

div.personalpage ppprof {
display: block;
position: absolute;
width: 211px;
height: fit-content;
max-height: 202px;
border-radius: 10px;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
background: rgba(237, 237, 237, 1);
top: 149px;
left: 21px;
}

div.personalpage ppprof > img {
width: 211px;
height: 82px;
object-fit: cover;
border-radius: 10px 10px 0 0;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);

}

div.personalpage ppprof lz {
display: block;
width: 100%;
font-family: Pragmatica;
font-weight: 400;
font-size: 9px;
line-height: 100%;
text-align: center;
margin-top: 10px;
margin-bottom: 25px;
}

div.personalpage ppprof lz>a:first-of-type {
color: rgba(30, 34, 31, 1)
}

div.personalpage ppprof icon {
width: 34px;
height: 34px;
background: rgba(217, 217, 217, 1);
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: -18px;
left: 50%;
transform: translatex(-50%);
}

div.personalpage ppprof icon img {
width: 20px;
height: 20px;
object-fit: cover;
}

.ppage {
display: flex;
width: 100%;
gap: 20px;

}

.ppage input[type="radio"] {
display: none;
}

.ppage-menu {
display: flex;
flex-direction: column;
width: 220px;
flex-shrink: 0;
gap: 5px;
position: absolute;
top: 378px;
left: 21px;
align-items: flex-start;
}

.ppage-tab {
display: block;
padding: 6px 15px;
height: 25px;
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
background: rgba(174, 174, 174, 1);
border-left: 3px solid transparent;
color: #fff;
font-family: PlayFair Display;
font-weight: 100;
font-size: 10px;
line-height: 130%;
}

.ppage-tab:hover {
background: #999999;
}

.ppage-content {
flex-grow: 1;
position: relative;

}

.ppage-item {
display: none;
animation: ppFade 0.4s ease;
width: 712px;
height: 355px;
position: absolute;
top: -41px;
left: 245px;
}

#pp-1:checked ~ .ppage-content .item-1,
#pp-2:checked ~ .ppage-content .item-2,
#pp-3:checked ~ .ppage-content .item-3 {
display: block;
}

#pp-1:checked ~ .ppage-menu .ppage-tab[for="pp-1"],
#pp-2:checked ~ .ppage-menu .ppage-tab[for="pp-2"],
#pp-3:checked ~ .ppage-menu .ppage-tab[for="pp-3"] {
background: rgba(120, 139, 123, 1);

}

@keyframes ppFade {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}

.ppage-content > div > div {
background: rgba(226, 226, 226, 1);
border: 1px solid rgba(174, 174, 174, 0.5);
border-radius: 5px;
padding: 15px 20px 20px;
position: absolute;
}

.ppage-content > div > div > div {
width: 100%;
overflow: auto;
}

.ppicons {
top: 0px;
left: 0px;
width: 351px;
height: 137px;
}

.ppage-content > div > div > span {
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 13px;
color: rgba(55, 55, 55, 1);
display: block;
margin-bottom: 10px;
}

.ppicons > div {
display: flex;
flex-wrap: wrap;
gap: 10px 5px;
height: 74px;
align-items: flex-start;
}

.ppicons icon {
width: 32px;
height: 32px;
background: rgba(237, 237, 237, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.ppicons icon img {
width: 20px;
height: 20px;
object-fit: cover;
}

.ppplaques {
top: 0px;
right: 0px;
width: 351px;
height: 137px;
}

.ppplaques .plaque {
border-radius: 5px;
width: 143px;
height: 31px;
padding: 0;
scrollbar-gutter: auto;
}

.ppplaques > div {
display: flex;
flex-wrap: wrap;
gap: 10px 5px;
height: 74px;
align-items: flex-start;
}

.ppbgs {
width: 351px;
height: 212px;
bottom: 0px;
left: 0px;
}

.ppbgs img {
width: 64px;
height: 149px;
object-fit: cover;
border-radius: 5px;
}

.ppbgs > div {
display: flex;
flex-wrap: wrap;
gap: 10px;
height: 149px;
}

.ppppbgs {
width: 351px;
height: 212px;
bottom: 0px;
right: 0px;
}

.ppppbgs img {
width: 64px;
height: 149px;
object-fit: cover;
border-radius: 5px;
}

.ppppbgs > div {
display: flex;
flex-wrap: wrap;
gap: 10px;
height: 149px;
}

.ppbuffs {
top: 0px;
left: 0px;
width: 351px;
height: 212px;
}

.ppbuffs > div {
display: flex;
flex-wrap: wrap;
gap: 10px 5px;
height: 151px;
align-items: flex-start;
}

.ppbuffs icon {
width: 32px;
height: 32px;
background: rgba(237, 237, 237, 1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.ppbuffs icon img {
width: 20px;
height: 20px;
object-fit: cover;
}

.pptokens {
top: 0px;
right: 0px;
width: 351px;
height: 212px;
}

.pptokens > div {
display: flex;
flex-wrap: wrap;
gap: 10px 5px;
height: 151px;
align-items: flex-start;
}

.pptokens icon {
width: 64px;
height: 64px;
background: rgba(237, 237, 237, 1);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}

.pptokens icon img {
width: 45px;
height: 45px;
object-fit: cover;
}

.ppgifts {
bottom: 0px;
right: 0px;
width: 712px;
height: 133px;
}

.ppgifts > div {
display: flex;
gap: 10px;
height: 75px;
align-items: flex-start;
justify-content: flex-start;
scroll-behavior: smooth;
}

.ppgifts icon {
width: 64px;
height: 64px;
background: rgba(237, 237, 237, 1);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.ppgifts icon img {
width: 45px;
height: 45px;
object-fit: cover;
}

.ppchron {
top: 0px;
left: 0px;
width: 493px;
height: 287px;
}

.ppchron > div {
display: flex;
flex-direction: column;
gap: 10px;
height: 230px;
padding-right: 5px;
align-items: flex-start;
justify-content: flex-start;
scroll-behavior: smooth;
}

.ppchron ep {
width: 100%;
height: fit-content;
background: rgba(237, 237, 237, 1);
border-radius: 5px;
display: block;
padding: 8px 17px 14px;
align-items: center;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);

}

.ppchron ep > a:first-of-type {
width: 100%;
display: block;
font-family: Moisette;
font-weight: 600;
font-style: Italic;
font-size: 13px;
color: rgba(55, 55, 55, 1);
}

.ppchron ep auths,
.ppchron ep auths > a {
font-family: Pragmatica;
font-weight: 400;
font-size: 8px;
line-height: 100%;
color: rgba(76, 76, 76, 1);
}

.ppachievs {
top: 0px;
right: 0px;
width: 211px;
height: 287px;
}

.ppachievs > div {
display: flex;
gap: 10px;
height: 222px;
flex-direction: column;
gap: 10px;
}

.ppachievs achiev {
display: flex;
width: 159px;
height: 72px;
background: rgba(202, 202, 202, 1);
border-radius: 5px;
gap: 8px;
}

.ppachievs achiev span {
width: 78px;
height: 100%;
display: flex;
overflow: auto;
font-family: Pragmatica;
font-weight: 400;
font-size: 9px;
text-align: left;
line-height: 100%;
padding: 8px 3px 8px 0;
}

.ppachievs achiev img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 5px;
}

.ppage-item level {
width: 712px;
height: 55px;
bottom: 0px;
left: 0px;
display: flex;
justify-content: space-between;
position: absolute;
}

.ppage-item level::before {
content:'';
width: var(--param);
background: linear-gradient(270deg, #B39E83 0%, #4D4438 100%);
height: 5px;
position: absolute;
top: 15px;
z-index: 1;
}

.ppage-item level::after{
content:'';
width: 100%;
background: white;
height: 5px;
position: absolute;
top: 15px;
}

.ppage-item level tit {
display: flex;
flex-direction: column;
gap: 7px;
width: 35px;
height: 75px;
}

.ppage-item level tit span {
font-family: Playfair Display;
font-weight: 400;
font-size: 10px;
line-height: 130%;
text-align: center;
color: rgba(55, 55, 55, 1);
}

.ppage-item level icon {
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
display: flex;
border-radius: 50%;
background: rgba(217, 217, 217, 1);
z-index: 2;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
}

.ppage-item level icon img {
width: 20px;
height: 20px;
object-fit: cover;
}

.ppage-item level icon.reached_0 img {
filter: grayscale(1) opacity(.7);
}

</style>

<ppprof>
<img src='https://i.pinimg.com/736x/32/d7/a1/32d7a1c52547a329cf20979d9d190444.jpg'>
<lz>
<a href="#"> Имя Фамилия </a> You can't take this from me<br>Forbidden in Heaven <br> and useless in Hell
</lz>
<icon><img src='https://forumstatic.ru/files/001c/17/76/35191.png'> </icon>
</ppprof>

<div class="ppage">

<input type="radio" name="ppage-group" id="pp-1" checked>
<input type="radio" name="ppage-group" id="pp-2">
<input type="radio" name="ppage-group" id="pp-3">
<div class="ppage-menu">
<label class="ppage-tab" for="pp-1">оформления профиля</label>
<label class="ppage-tab" for="pp-2">бафы, токены, подарки</label>
<label class="ppage-tab" for="pp-3">достижения и эпизоды</label>
</div>
<div class="ppage-content">


<div class="ppage-item item-1">

<div class='ppicons'>
<span>иконки профиля</span>
<div>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>

</div></div>

<div class='ppplaques'>
<span>цвета и фоны плашек </span>
<div>
<div class="plaque" style="background: linear-gradient(45deg, black, #788b7b, #0d6c5b);"></div>
<div class="plaque" style="background: cyan;"></div>
<div class="plaque"><img src='https://i.pinimg.com/1200x/61/c4/22/61c42249cc2b8492cbe387ce0ea9c818.jpg'></div>
<div class="plaque" style="background: linear-gradient(45deg, black, #788b7b, #0d6c5b);"></div>
<div class="plaque" style="background: cyan;"></div>
<div class="plaque"><img src='https://i.pinimg.com/1200x/61/c4/22/61c42249cc2b8492cbe387ce0ea9c818.jpg'></div>

</div></div>

<div class='ppbgs'>
<span>фоны профиля </span>
<div>
<img src='https://i.pinimg.com/1200x/a7/d1/ae/a7d1ae865911ebf5f56e6a9a2cde2b41.jpg'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>

</div></div>

<div class='ppppbgs'>
<span>фоны личной страницы </span>
<div>
<img src='https://i.pinimg.com/1200x/a7/d1/ae/a7d1ae865911ebf5f56e6a9a2cde2b41.jpg'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>
<img src='https://forumstatic.ru/files/001c/97/86/35857.png'>

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

<div class="ppage-item item-2">

<div class='ppbuffs'>
<span>бафы</span>
<div>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>

</div></div>

<div class='pptokens'>
<span>бафы</span>
<div>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>

</div></div>

<div class='ppgifts'>
<span>подарки</span>
<div>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
<icon><img src='https://forumstatic.ru/files/001c/97/86/92868.png'></icon>
</div></div>

</div>


<div class="ppage-item item-3">

<div class='ppchron'>
<span>эпизоды</span>
<div>

<ep><a href='#'> название эпизода </a>
<auths><a href='#'>имя фамилия</a> / <a href='#'>name surname</a></auths ></ep>

</div></div>

<div class='ppachievs'>
<span>достижения</span>
<div>

<achiev>
<img src='https://i.pinimg.com/736x/21/20/a6/2120a6f1a36f8614304f99bb838b4d17.jpg'>
<span>С возрастом я понял, что на самом деле слова «прийти в себя» означают </span>
</achiev>

</div> </div>

<level style='--param: 30%'>
<tit>
<icon class='reached_1'><img src='https://forumstatic.ru/files/001c/97/86/41213.png'></icon>
<span>барон</span>
</tit>

<tit>
<icon class='reached_0'><img src='https://forumstatic.ru/files/001c/97/86/41213.png'></icon>
<span>барон</span>
</tit>

<tit>
<icon class='reached_0'><img src='https://forumstatic.ru/files/001c/97/86/41213.png'></icon>
<span>барон</span>
</tit>

</level>

</div></div></div></div>[/html][hideprofile]

Test

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

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

Объявление

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

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

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

Поделиться12025-11-20 15:33:06

Поделиться22025-11-20 16:39:14