Шаблон миниЛС

[html]<style>
personalpage {
top: 20px;
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
gap: 20px;
position: relative;
/* padding: 10px; */
padding-left: 80px;
box-sizing: border-box;
border-radius: 15px;
background: url(https://i.imgur.com/E9WqZ3i.jpeg) top no-repeat, #d2d2d2;
background-size: 100%;
border: 2px solid #949596;
margin-bottom: 40px !important;
min-height: 600px;
}

personalpage::before {
content: 'PERSONAL PAGE';
position: absolute;
font-weight: 900;
font-size: 50px;
display: block;
top: -42px;
color: #949596;
right: 30px;
overflow: hidden;
z-index: 0;
clip-path: inset(0 0 35% 0);
}

.vtab-content {
display: none;
}

.vtab-content.active {
display: block;
}

.vtab-btn {
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
background: #eee;
transition: background 0.3s;
}

.vtab-btn.active {
background: #ccc;
font-weight: bold;
}

/* personalpage::after {
content: 'choose yours';
height: fit-content;
width: fit-content;
font: 700 26px verdana;
padding: 10px 20px;
background: rgb(255 255 255 / 42%);
position: absolute;
text-transform: uppercase;
backdrop-filter: blur(2px);
left: -110px;
top: 110px;
color: #444444;
border-radius: 0px 14px 0px 14px;
transform: rotate(90deg);
} */

personalpage > img {
height: 100%;
width: 70px;
position: absolute;
background-size-x: 100%;
left: 0px;
top: 0px;
object-fit: cover;
border-radius: 13px 0 0 13px;
filter: brightness(1.3) grayscale(.5) contrast(.5);
}

persname {
position: absolute;
top: -50px;
left: -80px;
z-index: 17;
background: transparent;
overflow: visible;
padding: 0;
}

persname div {
display: inline-block;
padding: 3px 20px 4px;
border-radius: 0px 13px 0 13px;
font-weight: var(--fw500);
font-size: var(--fs11);
text-align: end;
white-space: nowrap;
height: 35px;
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
font: 700 26px verdana;
background: rgb(255 255 255 / 42%);
position: absolute;
text-transform: uppercase;
backdrop-filter: blur(2px);

}

.twinkstabs {

}

.twinkstabs .vtabs-cont {
position: relative;
width: 100%;
height: 100%;
}

.twinkstabs .vtab-btn {
height: 50px;
width: 100px;
background: linear-gradient(360deg, #c3c3c3, #ffffff, #cfcfcf);
border-radius: 8px;
border: 2px solid #949596;
padding: 0;
position: relative;
background-size: 100% 100%;
transition: .4s ease-in-out;
}

.twinkstabs .vtab-btn:hover {
background-size: 100% 200%;
}

.twinkstabs .vtab-btn > img {
height: 40px;
width: 90px;
object-fit: cover;
border-radius: 4px;
transition: .4s ease-in-out;
filter: contrast(0.7) grayscale(0.4);
}

.twinkstabs .vtab-btn:hover > img {
filter: contrast(1) grayscale(0);
}

.twinkstabs .vtab-btn > div {
height: 25px;
top: 5px;
border-radius: 0 0 8px 8px;
display: flex;
position: absolute;
width: -webkit-fill-available;
z-index: -1;
transition: .4s ease-in-out;
justify-content: center;
align-items: flex-end;

}

.twinkstabs .vtab-btn:hover > div {
transform: translateY(30px);
}

.twinkstabs .vtab-btn > div a {
background: white;
margin-top: 4px !important;
position: relative;
height: 17px;
max-width: 90px;
font: 700 11px mulish;
top: 5px;
display: block;
box-sizing: border-box;
padding: 0 10px !important;
border-radius: 0 0 8px 8px;
width: fit-content;
}

.twinkstabs .vtab-buttons {
position: absolute;
z-index: 4;
display: flex;
gap: 10px;
top: -76px;

}

.twinkstabs .vtab-content {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 0 13px 13px 0;

}

.vtab-bg {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
margin: -50px 0;
border-radius: 0 13px 13px 0;
filter: contrast(0.6) grayscale(0.5) opacity(0.8);
mask: linear-gradient(to left, black, transparent);
}

charinfo {
background: #ffffffb3;
border-radius: 13px;
display: grid;
grid-template-columns: 300px 1fr;
gap: 15px;
margin: 50px 20px 10px !important;
padding: 10px;
z-index: 5;
position: relative;
backdrop-filter: blur(5px);
justify-items: center;
}

charinfo > img {
max-width: 300px;
max-height: 300px;
object-fit: cover;
border-radius: 10px;
align-self: center;
}

charinfo div {
position: relative;
margin-top: 21px !important;
display: flex;
gap: 30px;
flex-direction: column;
}

charinfo div::before {
content: attr(data-title);
font: 900 20px mulish;
text-transform: lowercase;
position: absolute;
top: -54px;
color: #606060a3;
right: 3px;
padding: 2px 15px 6px;
height: 17px;
line-height: 17px;
border-radius: 8px;
background: #efefef;
border: 2px solid #9694946b;
}

charinfoblock {
display: block;
position: relative;
background: #ffffff;
padding: 15px 15px 10px;
border-radius: 10px;
border: 2px solid #9694946b;
}

charinfoblock::before {
content: attr(data-title);
font: 700 16px mulish;
text-transform: lowercase;
position: absolute;
top: -13px;
left: 7px;
padding: 0px 15px 3px;
height: 17px;
line-height: 17px;
border-radius: 13px;
background: #ffffff;
border: 2px solid #9694946b;

}

charstaroblock {
background: #ffffffb3;
border-radius: 13px;
display: flex;
gap: 25px;
margin: 30px 20px 10px !important;
padding: 25px 10px 10px;
z-index: 5;
position: relative;
backdrop-filter: blur(5px);
justify-items: center;
flex-wrap: wrap;
flex-direction: row;
}

charstaroblock::before {
content: attr(data-title);
font: 900 20px mulish;
text-transform: lowercase;
position: absolute;
top: -16px;
color: #606060a3;
left: 8px;
padding: 2px 15px 6px;
height: 17px;
line-height: 17px;
border-radius: 8px;
background: #efefef;
border: 2px solid #9694946b;
}

charstaroblock > div {
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease, filter 0.3s ease;
transform-style: preserve-3d;
will-change: transform, filter;
}

charstaroblock > div img {
height: 170px;
width: auto;

}

charstaroblock > div > div {
position: absolute;
top: 0px;
left: 3px;
z-index: -1;
background: transparent;
overflow: visible;
padding: 0;
transition: .4s ease-in-out;
}

charstaroblock > div > div> span {
position: absolute;
left: 50%;
font-weight: 800;
background: white;
width: max-content;
height: fit-content;
padding: 1px 3px 3px;
border-radius: 5px 5px 0 0;
text-align: center;
top: 3px;
z-index: -1;
box-sizing: border-box;
transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;
}

charstaroblock > div:hover > div {
left: -16px;
}

personalstuff {
background: #ffffffb3;
border-radius: 13px;
display: grid;
grid-template-columns: 3fr 2fr;
gap: 25px 15px;
margin: 30px 20px 10px !important;
padding: 25px 10px 10px;
z-index: 5;
position: relative;
backdrop-filter: blur(5px);
justify-items: center;
flex-wrap: wrap;
flex-direction: row;
}

personalstuff::before {
content: attr(data-title);
font: 900 20px mulish;
text-transform: lowercase;
position: absolute;
top: -16px;
color: #606060a3;
right: 11px;
padding: 2px 15px 6px;
height: 17px;
line-height: 17px;
border-radius: 8px;
background: #efefef;
border: 2px solid #9694946b;
}

profbgs {
display: block;
position: relative;
background: #ffffff;
padding: 15px 15px 10px;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
border: 2px solid #9694946b;
}

profbgs::before {
content: attr(data-title);
font: 700 16px mulish;
text-transform: lowercase;
position: absolute;
top: -13px;
left: 7px;
padding: 0px 15px 3px;
height: 17px;
line-height: 17px;
border-radius: 13px;
background: #ffffff;
border: 2px solid #9694946b;
}
profbgs div {
margin-top: 5px !important;
display: flex;
gap: 10px;
flex-wrap: wrap;
height: 110px;
overflow: auto;
}

profbgs img {
width: 225px;
border-radius: 8px;
filter: contrast(0.7) grayscale(0.3);
height: 50px;
object-fit: cover;
}

/* иконки */

proficons {
display: block;
position: relative;
background: #ffffff;
width: 100%;
box-sizing: border-box;
padding: 15px 15px 10px;
border-radius: 10px;
border: 2px solid #9694946b;
}

proficons::before {
content: attr(data-title);
font: 700 16px mulish;
text-transform: lowercase;
position: absolute;
top: -13px;
left: 7px;
padding: 0px 15px 3px;
height: 17px;
line-height: 17px;
border-radius: 13px;
background: #ffffff;
border: 2px solid #9694946b;
}
proficons div {
margin-top: 5px !important;
display: flex;
gap: 10px;
flex-wrap: wrap;
height: 110px;
overflow: auto;
}

proficons img {
width: 40px;
border-radius: 8px;
filter: contrast(0.7) grayscale(0.3);
height: 40px;
object-fit: cover;
}

/* музыка */

profmusic {
display: block;
position: relative;
background: #ffffff;
width: 100%;
grid-column: span 2;
box-sizing: border-box;
padding: 15px 15px 10px;
border-radius: 10px;
border: 2px solid #9694946b;
}

profmusic::before {
content: attr(data-title);
font: 700 16px mulish;
text-transform: lowercase;
position: absolute;
top: -13px;
left: 7px;
padding: 0px 15px 3px;
height: 17px;
line-height: 17px;
border-radius: 13px;
background: #ffffff;
border: 2px solid #9694946b;
}

profmusic div {
margin-top: 5px !important;
display: flex;
gap: 10px;
flex-wrap: wrap;
height: 110px;
overflow: auto;
}

profmusic audio {
width: 300px;
height: 25px;
padding: 5px;
background: linear-gradient(to left, #c3c1c1, #f7f7f7, #cfcfcf);
border-radius: 18px;
}

</style>

<img src=https://i.pinimg.com/736x/e7/31/89/e731896014bd966a240c3ad71c7f4809.jpg />

<button class="vtab-btn"><img src='https://i.pinimg.com/736x/06/f9/05/06f9055aa7813a8e62e2c3b3ec00021c.jpg' />
<div><a href='#'>unico uni</a></div>
</button>

<button class="vtab-btn"><img src='https://i.pinimg.com/736x/ac/08/f4/ac08f4aad4dea9f95b68444d304f7bb2.jpg' />
<div><a href='#'>the strongest</a></div>
</button>

<button class="vtab-btn"><img src='https://i.pinimg.com/736x/31/1e/dd/311edda1463266338207a2217bc0eb6f.jpg' />
<div><a href='#'>champion</a></div>
</button>

</div>

<div class="vtab-content">
<persname><div>
NAME SURNAME
</div></persname>

<img class='vtab-bg' src=https://i.imgur.com/uHKaq5x.jpeg />

<charinfo>

<img src='https://i.pinimg.com/736x/45/93/13/45931302578f92fe39641901a73f3e08.jpg' />

<charinfoblock data-title='Краткое описание перса'>

В дополнительной секции редактора появится кнопка "Шаблон", при нажатии на которую в форму ответа вставится тот шаблон, который вы введете ниже. Если добавите тег [cursor], то в это место будет установлен курсор пользователя.

</charinfoblock>

В дополнительной секции редактора появится кнопка "Шаблон", при нажатии на которую в форму ответа вставится тот шаблон, который вы введете ниже. Если добавите тег [cursor], то в это место будет установлен курсор пользователя.
</charinfoblock>

</div></charinfo>

<charstaroblock data-title='коллекция таро'>

<div><span> название карты </span></div>

</div>

<div><span> название </span></div>

</div>

<div><span> карты </span></div>

</div>

</charstaroblock>

</div></proficons>

</div></profmusic>

</personalstuff>

</div>

<div class="vtab-content">
<persname><div>
LONG NAME SURNAME
</div></persname>

<img class='vtab-bg' src=https://i.imgur.com/uHKaq5x.jpeg />

<charinfo>

<img src='https://i.pinimg.com/736x/81/5f/b7/815fb78a53753d3527ec0986945641c6.jpg' />

</charinfoblock>

</div></charinfo>

<charstaroblock data-title='коллекция таро'>

<div><span> название карты </span></div>

</div>

<div><span> название </span></div>

</div>

<div><span> карты </span></div>

</div>

</charstaroblock>

</div></proficons>

</div></profmusic>

</personalstuff>

</div>

<div class="vtab-content">Содержимое 3</div>

</div>
</div>

</personalpage>

[/html][hideprofile]

Ещё очень и очень сильно недоделка

testCP

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

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

Объявление

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

Шаблон миниЛС

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

Поделиться12025-05-10 05:23:12

Поделиться22025-05-10 05:30:02