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

[html]<style>
personalpage {
position: relative;
display: block;
width: 755px;
height: 400px;
background: url(https://forumstatic.ru/files/001c/7d/3a/64043.png), rgba(242, 242, 242, 1);
background-size: 100%;
border-radius: 10px;
}

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

charcont {
display: block;
position: absolute;
width: 185px;
height: 195px;
top: 13px;
left: 15px;
}
charcont img {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
border-radius: 10px;
object-fit: cover;
}

ppname {
height: 24px;
top: 82px;
left: 36px;
padding: 3px 10px;
font-weight: 700;
font-size: 12px;
text-transform: lowercase;
border-radius: 50px;
position: absolute;
display: block;
text-wrap: nowrap;
background: rgba(255, 255, 255, 1);
box-shadow: 11.42px 10.39px 9.97px 0px rgba(118, 118, 118, 0.12), 16.41px 14.92px 15.42px 0px rgba(0, 0, 0, 0.15), 22.57px 20.52px 22.87px 0px rgba(0, 0, 0, 0.18);
}

charcont p {
position: absolute;
font-weight: 400;
font-size: 9px!important;
text-transform: lowercase;
width: 119px;
height: 83px;
top: 120px;
left: 0px;
padding-top: 10px;
padding-bottom: 10px;
background: linear-gradient(180deg, rgba(35, 37, 40, 0.6) 19.71%, rgba(81, 87, 97, 0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 100%!important;
overflow: hidden;
}

fear {
display: block;
position: absolute;
width: 163px;
height: 14px;
border-radius: 10px;
outline: 1px solid rgba(196, 196, 196, 1);
outline-offset: 2px;top: 247px;
left: 15px;
top: 262px;
background: rgba(242, 242, 242, 1);
}

fear::before {
content: '';
display: block;
width: var(--fear);
height: 14px;
border-radius: 50px;
position: absolute;
top: 0px;
left: 0px;
background: linear-gradient(90deg, #9279A2 0%, #362D3C 100%);
box-shadow: 0px 0px 10px 0px rgba(140, 116, 155, 1);
}

fear::after {
content: attr(data-title);
position: absolute;
display: block;
top: -20px;
left: 0px;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.6);
}

fear span {
position: absolute;
display: block;
top: -20px;
right: 0px;
font-weight: 800;
}

.profposts {
font-weight: 700;
font-size: 20px;
position: absolute;
bottom: 11px;
left: 15px;
}

.profposts::before {
content:'посты';
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.6);
position: absolute;
top: -12px;
}

.tab-wrapper {
position: absolute;
display: flex;
width: 388px;
height: 368px;
top: 15px;
left: 352px;
}

.tab-labels {
display: flex;
width: 50px;
flex-direction: column;
position: absolute;
left: -89px;
}

.tab-labels label {
padding: 10px 0;
cursor: pointer;
user-select: none;
width: 60px;
font-weight: 400;
font-size: 9px;
text-align: right;
position: relative;
text-transform: lowercase;
}

.tab-labels label:first-of-type::before {
content: '';
display: block;
position: relative;
width: 22px;
height: 22px;
right: -37px;
top: -3px;
background: url(https://forumstatic.ru/files/001c/7d/3a/33147.png) no-repeat center / 60%, transparent;
border-radius: 50%;
opacity: .6;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.0);
transition:
background 0.4s ease-in-out,
opacity 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
}

.tab-labels label {
opacity: .5;
transition: opacity 0.4s ease-in-out;
}

#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"] {
opacity: 1;
}

#tab1:checked ~ .tab-labels label[for="tab1"]::before {
background: url(https://forumstatic.ru/files/001c/7d/3a/33147.png) no-repeat center / 60%, rgba(143, 118, 158, 0.4);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.18);
opacity: 1;
}

.tab-labels label:last-of-type::before {
content: '';
display: block;
position: relative;
width: 22px;
height: 22px;
background: url(https://forumstatic.ru/files/001c/7d/3a/66035.png) no-repeat center / 60%, transparent;
border-radius: 50%;
opacity: .6;
right: -37px;
top: -3px;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.0);
transition:
background 0.4s ease-in-out,
opacity 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
}

#tab2:checked ~ .tab-labels label[for="tab2"]::before {
background: url(https://forumstatic.ru/files/001c/7d/3a/66035.png) no-repeat center / 60%, rgba(143, 118, 158, 0.4);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.18);
opacity: 1;
}

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

.tab-content {
flex-grow: 1;
position: relative;
}

.tab {
display: none;
position: absolute;
top: 0;
left: 0;
}

#tab1:checked ~ .tab-content .tab-1 {
display: block;
position: relative;
width: 100%;
height: 100%;
}

#tab2:checked ~ .tab-content .tab-2 {
display: block;
position: relative;
width: 100%;
height: 100%;
padding: 0px!important;
}

ppicons {
width: 388px;
height: 46px;
border-radius: 5px;
padding: 8px;
background: rgba(255, 255, 255, 1);
display: block;
}

ppicons div {
width: 372px;
height: 32px;
overflow: auto;
scrollbar-gutter: stable;
display: flex;
flex-wrap: wrap;
gap: 3px;
}

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

ppplaques {
width: 388px;
height: 157px;
border-radius: 5px;
padding: 8px;
background: rgba(255, 255, 255, 1);
display: block;
margin-top: 8px!important;
}

ppplaques > div {
width: 374px;
height: 140px;
overflow: auto;
scrollbar-gutter: stable;
display: flex;
flex-wrap: wrap;
gap:4px;
}

ppbgs {
width: 388px;
height: 149px;
border-radius: 5px;
padding: 5px;
background: rgba(255, 255, 255, 1);
display: block;
margin-top: 8px!important;
}

ppbgs div {
width: 377px;
height: 140px;
overflow: auto;
scrollbar-gutter: stable;
display: flex;
flex-wrap: wrap;
gap: 3px;
}

ppbgs div img {
width: 90px;
height: 91px;
border-radius: 5px;
box-sizing: content-box;
object-fit: cover;
}

ppgifts {
width: 388px;
height: 105px;
border-radius: 5px;
padding: 8px;
background: rgba(255, 255, 255, 1);
display: block;
}

ppgifts div {
width: 372px;
height: 90px;
overflow: auto;
scrollbar-gutter: stable;
display: flex;
flex-wrap: wrap;
gap: 3px;
}

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

ppchronology {
width: 388px;
height: 216px;
border-radius: 4px;
padding: 8px;
position: absolute;
bottom: 0px;
background: rgba(250, 250, 250, 1);
}

ppchronology::before {
content: "ХРОНОЛОГИЯ";
font-weight: 700;
font-size: 24px;
color: rgba(146, 123, 161, 0.6);
position: absolute;
left: 50%;
transform: translatex(-50%);
clip-path: inset(0 0 35% 0);
top: -22px;
}

ppepisode {
border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
display: block;
font-weight: 400;
font-size: 10px;
padding: 3px 3px 0 3px;
margin: 3px 0;
}

ppepisode:last-child {
border-bottom: none;
}

ppchronology div {
width: 373px;
height: 203px;
overflow: auto;
}

ppepisode a{
display: block;
color: rgba(146, 123, 161, 1);
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
}

ppepisode a::before {
content:'\f0c1';
font-family: fontawesome;
color: rgba(146, 123, 161, 1);
}

</style>

<charcont>

<img src='https://i.pinimg.com/736x/8d/7e/f5/8d7ef5561a167ab8a4f95c32b4ee8e62.jpg' />
<ppname>Roman Obolenskii, 20 y.o. </ppname>
<p>Se qualcuno vi ha parlato male di me, fatevi coraggio sono molto peggio di quello che sembro Se qualcuno vi ha parlato male di me, fatevi coraggio sono molto peggio di quello che sembro</p>

</charcont>

<div class="profposts">000</div>

<div class="tab-labels">
<label for="tab1">оформление профиля</label>
<label for="tab2">хронология и подарки</label>
</div>

</div></ppicons>

<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>
<div class="plaque"><p>первая строка</p><p>вторая строка</p><img src="https://i.pinimg.com/736x/d6/17/a0/d617a04d4566125ed71c6cacf5fac7b3.jpg" /></div>

</div></ppplaques>

</div></ppbgs>

</div>
<div class="tab tab-2">

</div></ppgifts>

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

<ppepisode>
<a href='#'> Название эпизода </a>
Однажды здесь будет эпизод и его описание либо будет эпизод с длинным описанием.
</ppepisode>