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

[html]<style>
personalpage {
width: 755px;
height: 400px;
border-radius: 10px;
position: relative;
display: block;
margin: auto!important;
background: url(https://forumstatic.ru/files/001c/7f/90/74110.png) no-repeat center / 100%;
}

personalpage * {
box-sizing: border-box;
}

personalpage::before {
content: '';
width: 140px;
height: 140px;
top: -12px;
right: -12px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/7f/90/31153.png) no-repeat center / 100%;
z-index: 5;
pointer-events: none;
}

personalpage::after {
content: '';
width: 118px;
height: 150px;
bottom: 0px;
left: -13px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/7f/90/59186.png) no-repeat center / 100%;
z-index: 5;
pointer-events: none;
}

charinfo {
height: 135px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: absolute;
width: 100%;
top: -47px;
pointer-events: none;
z-index: 4;
}

charinfo img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
outline: 6px solid rgba(255, 255, 255, 1);

}

charinfo span {
width: fit-content;
height: 24px;
border-radius: 23px;
gap: 10px;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
color: rgba(0, 0, 0, 1);
font-family: Verdana;
font-weight: 700;
font-size: 12px;
text-transform: lowercase;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
}

.vtab-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
z-index: 1;
}

.vtab-labels {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
gap: 20px;
width: 664px;
position: relative;
left: -55px;
border-top: 1px dashed rgba(177, 177, 177, 1);
padding-top: 16px;
top: 30px;
z-index: 2;
}

.vtab-labels label {
flex-shrink: 0;
padding: 2px 10px;
height: 19px;
width: fit-content;
border-radius: 50px;
background: rgba(177, 177, 177, 1);
text-align: center;
cursor: pointer;
position: relative;
transition: background 0.2s;
outline: 2px solid rgba(110, 99, 88, 0.23);
text-transform: lowercase;
font-family: Verdana;
font-weight: 400!important;
font-size: 12px;
color: rgba(92, 92, 92, 1);
}

.vtab-labels label::before {
content: '';
height: 16px;
top: -16px;
width: 3px;
border-left: 1px dashed rgba(177, 177, 177, 1);
position: absolute;
left: calc(50% + 3px);
transform: translatex(-50%);
}

.vtab-labels label:last-of-type {
position: absolute;
right: 80px;
}

.vtab-labels label:hover {
background: #ccc;
}

input[name="vtabset"] {
display: none;
}

.vtab-content {
display: none;
padding: 15px;
width: 100%;
height: 100%;
position: relative;

}

#vtab1:checked ~ .vtab-content-wrapper .vtab1,
#vtab2:checked ~ .vtab-content-wrapper .vtab2,
#vtab3:checked ~ .vtab-content-wrapper .vtab3 {
display: block;
}

#vtab1:checked ~ .vtab-labels label[for="vtab1"],
#vtab2:checked ~ .vtab-labels label[for="vtab2"],
#vtab3:checked ~ .vtab-labels label[for="vtab3"] {
background: rgba(110, 125, 75, 1);
outline: 2px solid rgba(110, 99, 88, 0.23);
color: white;
}

ppchronology {
width: 451px;
height: 248px;
top: 55px;
left: 66px;
border-radius: 10px;
padding: 8px 5px 8px 11px;
background: rgba(250, 250, 250, 1);
position: relative;
display: flex;
box-shadow: 0px -9px 12px 0px rgba(0, 0, 0, 0.15);
}

ppchronology div {
display: flex;
flex-direction: column;
gap: 4px;
width: 455px;
height: 232px;
overflow: auto;
scrollbar-gutter: stable;
}

ppepisode {
width: 428px;
border-radius: 5px;
padding: 6px;
background: rgba(35, 37, 40, 0.05);
font-weight: 400;
font-size: 10px;
line-height: 133%;
}

ppepisode a {
font-weight: 700!important;
font-size: 10px;
line-height: 133%;
text-transform: uppercase;
color: rgba(110, 125, 75, 1);
display: block;
}

ppepisode a::before {
content: '\f06c';
font-family: fontawesome;
}

ppbgs {
box-shadow: 0px -9px 12px 0px rgba(0, 0, 0, 0.15);
width: 307px;
height: 228px;
position: absolute;
top: 76px;
left: 49px;
border-radius: 10px;
padding: 22px 5px 22px 11px;
background: rgba(250, 250, 250, 1);
display: block;
}

ppbgs::before {
content: attr(data-title);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
color: rgba(119, 119, 119, 1);
position: absolute;
top:-24px;
left: 50%;
transform: translatex(-50%);
}

ppbgs div {
width: 290px;
height: 186px;
display: flex;
flex-wrap: wrap;
gap: 4px;
overflow: auto;
scrollbar-gutter: stable;
}

ppbgs div img {
width: 90px;
height: 90px;
border-radius: 10px;
object-fit: cover;
}

ppplaques {
box-shadow: 0px -9px 12px 0px rgba(0, 0, 0, 0.15);
width: 249px;
height: 228px;
position: absolute;
top: 76px;
right: -12px;
border-radius: 10px;
padding: 22px 5px 22px 11px;
background: rgba(250, 250, 250, 1);
display: block;
}

ppplaques::before {
content: attr(data-title);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
color: rgba(119, 119, 119, 1);
position: absolute;
top:-24px;
left: 50%;
transform: translatex(-50%);
}

ppplaques div {
width: 230px;
height: 186px;
display: flex;
flex-direction: column;
gap: 4px;
overflow: auto;
scrollbar-gutter: stable;

}

ppplaques plaque {
position: relative;
}

ppgifts {
box-shadow: 0px -9px 12px 0px rgba(0, 0, 0, 0.15);
width: 173px;
height: 228px;
position: absolute;
top: 76px;
left: 28px;
border-radius: 10px;
padding: 22px 5px 22px 11px;
background: rgba(250, 250, 250, 1);
display: block;
}

ppgifts::before {
content: attr(data-title);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
color: rgba(119, 119, 119, 1);
position: absolute;
top:-24px;
left: 50%;
transform: translatex(-50%);
}

ppgifts div {
width: 158px;
height: 186px;
display: flex;
flex-wrap: wrap;
gap: 4px;
overflow: auto;
scrollbar-gutter: stable;
align-content: flex-start;
}

ppgifts div img {
width: 35px;
height: 35px;
border-radius: 5px;
object-fit: cover;
padding: 6px;
box-sizing: content-box;
background: rgba(35, 37, 40, 0.05);
}

ppachievements {
box-shadow: 0px -9px 12px 0px rgba(0, 0, 0, 0.15);
width: 431px;
height: 228px;
position: absolute;
top: 76px;
right: -41px;
border-radius: 10px;
padding: 22px 5px 22px 11px;
background: rgba(250, 250, 250, 1);
display: block;
}

ppachievements::before {
content: attr(data-title);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
color: rgba(119, 119, 119, 1);
position: absolute;
top:-24px;
left: 50%;
transform: translatex(-50%);
}

ppachievements div {
width: 416px;
height: 186px;
display: flex;
flex-direction: column;
gap: 4px;
overflow: auto;
scrollbar-gutter: stable;

}

ppachievements achiev {
width: 408px;
border-radius: 5px;
gap: 10px;
padding: 6px 6px 6px 50px;
position: relative;
background: rgba(35, 37, 40, 0.05);
}

ppachievements achiev img {
position: absolute;
width: 35px;
height: 35px;
object-fit: cover;
left: 6px;
top: 50%;
transform: translatey(-50%);
}

ppachievements achiev span:first-of-type {
display: block;
font-weight: 700;
font-size: 12px;
text-transform: lowercase;
}

ppachievements achiev span:last-of-type {
font-weight: 400;
font-size: 11px;
line-height: 100%;
text-transform: lowercase;
display: block;
}

</style>

<charinfo>

<img src='https://i.pinimg.com/736x/1f/26/e7/1f26e753dd9d6ce34f8da09f2c571fb3.jpg' />

<span> Roman Obolenskii, 20 y.o. </span>
</charinfo>

<div class="vtab-wrapper">
<input type="radio" name="vtabset" id="vtab1" checked>
<input type="radio" name="vtabset" id="vtab2">
<input type="radio" name="vtabset" id="vtab3">
<div class="vtab-labels">
<label for="vtab1">хронология</label>
<label for="vtab2">профиль</label>
<label for="vtab3">награды</label>
</div>

<div class="vtab-content-wrapper">

<div class="vtab-content vtab1">

<ppepisode>
<a href='#'> название эпизода </a>
Однажды здесь будет эпизод и его описание либо будет эпизод с длинным описанием. Что может быть лучше длинного и подробного описания любимого эпизода? Однажды здесь будет эпизод и его описание либо будет эпизод с длинным описанием. Что может быть лучше длинного и подробного описания любимого эпизода?
</ppepisode>

</div></ppchronology>

</div>

<div class="vtab-content vtab2">


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

</div></ppbgs>

<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>
<plaque> <p>однажды </p> <p>здесь будет плашка</p> <img src="https://i.pinimg.com/736x/f9/f9/1b/f9f91b700070c580423c1f849d9211b2.jpg"></plaque>

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

<div class="vtab-content vtab3">

</div></ppgifts>

<achiev>
<img src='https://forumstatic.ru/files/001c/7f/90/74443.png' />
<span> название награды </span>
<span> какое-то длинное описание награды на несколько строк описания награды какое-то длинное описание награды на несколько строк описания наградыкакое-то длинное описание награды на несколько строк описания наградыкакое-то длинное описание награды на несколько строк описания награды </span>
</achiev>

<achiev>
<img src='https://forumstatic.ru/files/001c/7f/90/74443.png' />
<span> название награды </span>
<span> какое-то длинное описание награды на несколько строк описания награды какое-то длинное описание награды на несколько строк описания награды какое-то длинное описание награды на несколько строк описания награды </span>
</achiev>

</div></ppachievements>

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

</personalpage>[/html][hideprofile]