[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
:root{
--bg:#eeeeee;
--card:#f4f4f4;
--line:#cfcfcf;
--text:#323544;
--soft:#696969;
--accent:#505b76;
--accent-light:#7187ab;
--paper:#ffffff;
--sticker:#e7e7e7;
}
*{
box-sizing:border-box;
}
body{
margin:0;
background:var(--bg);
font-family:Inter,sans-serif;
}
/* board */
.board{
width:720px;
margin:35px auto;
background:
linear-gradient(
180deg,
#f5f5f5,
#e7e7e7
);
border:1px solid #cfcfcf;
padding:26px;
position:relative;
overflow:hidden;
color:var(--text);
box-shadow:
0 0 40px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.7);
}
/* decorative lines */
.board:before,
.board:after{
content:"";
position:absolute;
background:rgba(0,0,0,.04);
pointer-events:none;
}
.board:before{
width:140%;
height:1px;
top:80px;
left:-10%;
transform:rotate(-2deg);
}
.board:after{
width:1px;
height:120%;
right:120px;
top:-10%;
transform:rotate(2deg);
}
/* top */
.top{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:24px;
}
/* faces */
.faces{
display:flex;
flex-direction:row;
gap:14px;
align-items:flex-start;
}
/* face cards */
.face{
width:108px;
background:var(--card);
border:1px solid var(--line);
padding:6px 6px 12px;
position:relative;
overflow:visible;
transition:.3s;
}
.face:nth-child(2){
margin-top:10px;
}
.face:hover{
transform:translateY(-2px);
border-color:rgba(113,135,171,.45);
box-shadow:
0 10px 25px rgba(0,0,0,.08);
}
/* texture */
.face:after{
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(
-45deg,
rgba(0,0,0,.015) 0px,
rgba(0,0,0,.015) 1px,
transparent 1px,
transparent 5px
);
pointer-events:none;
}
/* photo */
.pic{
width:100%;
height:54px;
position:relative;
overflow:hidden;
border:1px solid rgba(0,0,0,.05);
background:
linear-gradient(
135deg,
#dfe3ea,
#cfd6e2
);
}
/* image */
.pic img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
filter:
grayscale(20%)
contrast(1)
brightness(.95);
opacity:.9;
transition:.35s;
}
/* hover */
.face:hover .pic img{
filter:
grayscale(0%)
contrast(1)
brightness(1);
opacity:1;
transform:scale(1.05);
}
/* scan */
.pic:after{
content:"";
position:absolute;
inset:0;
background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.03) 0px,
rgba(255,255,255,.03) 1px,
transparent 1px,
transparent 3px
);
opacity:.25;
pointer-events:none;
}
/* grain */
.pic:before{
content:"";
position:absolute;
inset:0;
background-image:
radial-gradient(
rgba(255,255,255,.08) 0.6px,
transparent 0.7px
);
background-size:4px 4px;
opacity:.12;
mix-blend-mode:overlay;
pointer-events:none;
}
/* label */
.label{
position:absolute;
left:8px;
bottom:-11px;
min-width:92px;
background:#505b76;
color:#ffffff;
font-size:7px;
line-height:1;
letter-spacing:1.1px;
text-transform:uppercase;
padding:5px 8px;
white-space:nowrap;
clip-path:polygon(
2% 0,
96% 4%,
100% 30%,
98% 100%,
8% 96%,
0 70%,
1% 35%
);
box-shadow:
0 2px 8px rgba(0,0,0,.12);
}
/* tabs */
.tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
position:relative;
}
/* remove line under tabs */
.tabs:after{
display:none;
}
.tab{
padding:9px 14px;
border:1px solid var(--line);
color:var(--soft);
cursor:pointer;
transition:.25s;
font-size:10px;
text-transform:uppercase;
letter-spacing:2px;
position:relative;
background:var(--card);
z-index:2;
overflow:hidden;
}
.tab:hover{
color:var(--text);
transform:translateY(-1px);
}
/* active tab */
.tab.active{
color:var(--accent);
border-color:rgba(113,135,171,.4);
z-index:5;
}
/* active tab overlap */
.tab.active:before{
content:"";
position:absolute;
left:-1px;
right:-1px;
bottom:-2px;
height:4px;
background:var(--card);
z-index:3;
}
/* underline */
.tab.active:after{
content:"";
position:absolute;
left:8px;
right:8px;
bottom:4px;
height:1px;
background:var(--accent);
animation:flick 2s infinite;
}
@keyframes flick{
0%,100%{opacity:1}
50%{opacity:.25}
}
/* glitch text */
.tab.active span{
position:relative;
display:block;
animation:glitch-skew 2s infinite linear alternate;
}
.tab.active span:before{
content:attr(data-text);
position:absolute;
left:1px;
top:0;
color:#8aa0c7;
opacity:.45;
clip-path:inset(0 0 45% 0);
animation:glitch-top 1.8s infinite linear alternate-reverse;
}
.tab.active span:after{
content:attr(data-text);
position:absolute;
left:-1px;
top:0;
color:#c58ca5;
opacity:.35;
clip-path:inset(55% 0 0 0);
animation:glitch-bottom 1.2s infinite linear alternate-reverse;
}
@keyframes glitch-top{
0%{transform:translate(0)}
20%{transform:translate(-1px,-1px)}
40%{transform:translate(1px,1px)}
60%{transform:translate(-1px,0)}
80%{transform:translate(1px,-1px)}
100%{transform:translate(0)}
}
@keyframes glitch-bottom{
0%{transform:translate(0)}
20%{transform:translate(1px,0)}
40%{transform:translate(-1px,1px)}
60%{transform:translate(1px,-1px)}
80%{transform:translate(-1px,0)}
100%{transform:translate(0)}
}
@keyframes glitch-skew{
0%{transform:skew(0deg)}
20%{transform:skew(1deg)}
40%{transform:skew(-1deg)}
60%{transform:skew(.5deg)}
80%{transform:skew(-.5deg)}
100%{transform:skew(0deg)}
}
/* content */
.content{
position:relative;
min-height:330px;
margin-top:22px;
}
/* pages */
.page{
display:none;
animation:show .45s ease;
}
.page.active{
display:block;
}
@keyframes show{
from{
opacity:0;
transform:
translateY(10px)
rotate(-1deg);
}
to{
opacity:1;
transform:none;
}
}
/* quote */
.quote{
margin-bottom:24px;
padding-left:16px;
border-left:1px solid var(--accent);
color:var(--soft);
line-height:1.7;
}
.quote b{
display:block;
margin-bottom:7px;
color:var(--accent);
letter-spacing:2px;
font-size:11px;
}
/* text */
.text{
font-size:12px;
line-height:1.9;
}
mark{
background:none;
color:var(--accent);
font-weight:600;
}
/* links */
.menu a{
display:block;
margin:8px 0;
color:var(--text);
text-decoration:none;
transition:.2s;
}
.menu a:hover{
color:var(--accent);
transform:translateX(4px);
}
/* designs */
.designs{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:12px;
}
/* design cards */
.design{
width:120px;
background:#ececec;
border:1px solid var(--line);
padding:8px;
transform:rotate(-2deg);
transition:.3s;
position:relative;
}
.design:nth-child(even){
transform:rotate(3deg);
}
.design:hover{
transform:rotate(0deg) scale(1.04);
}
/* preview */
.preview{
height:170px;
overflow:hidden;
background:
linear-gradient(
135deg,
#dfe3ea,
#cfd6e2
);
border:1px solid rgba(0,0,0,.04);
}
/* preview image */
.preview img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:
grayscale(20%)
contrast(1)
brightness(.95);
transition:.35s;
}
.design:hover .preview img{
filter:
grayscale(0%)
contrast(1)
brightness(1);
transform:scale(1.03);
}
/* design labels */
.design span{
position:absolute;
bottom:-10px;
left:10px;
background:#505b76;
color:#fff;
font-size:9px;
padding:4px 9px;
transform:rotate(-4deg);
}
/* responsive */
@media(max-width:760px){
.board{
width:100%;
padding:20px;
}
.top{
flex-direction:column;
gap:24px;
}
}
</style>
<div class="board">
<div class="top">
<!-- faces -->
<div class="faces">
<div class="face">
<div class="pic">
<img src="https://upforme.ru/uploads/001c/8e/36/2/186062.jpg">
</div>
<div class="label">
welkin
</div>
</div>
<div class="face">
<div class="pic">
<img src="https://forumstatic.ru/files/001c/8e/36/42607.png">
</div>
<div class="label">
bellberrycat
</div>
</div>
</div>
<!-- tabs -->
<div class="tabs">
<div class="tab active">
<span data-text="где я">где я</span>
</div>
<div class="tab">
<span data-text="что есть">что есть</span>
</div>
<div class="tab">
<span data-text="дизайны">дизайны</span>
</div>
</div>
</div>
<!-- content -->
<div class="content">
<!-- page 1 -->
<div class="page active">
<div class="quote">
<b>БУ ИСПУГАЛСЯ //</b>
не бойся, сейчас всё объясним, будет весело, но это не точно.
</div>
<div class="text">
<mark>#</mark> здесь мы с @bellberrycat (при поддержке всяческих ии) пытаемся <s>выжить</s> сделать жизнь на rusff чуточку проще и красивее;<br><br>
<mark>#</mark> мы ценим честность, ответственность и уважение — пожалуйста, не убирайте копирайт и лайкайте, если было полезно;<br><br>
<mark>#</mark> все наши наработки распространяются на безвозмездной основе;<br>
<sub>
если вам требуется помощь с установкой или переработкой под собственные нужды, мы попросим some cash
</sub><br><br>
<mark>#</mark> мы не проф кодеры и сами не знаем, как это работает, пока оно работает, enjoy
</div>
</div>
<!-- page 2 -->
<div class="page">
<div class="quote">
<b>СЕГОДНЯ В МЕНЮ //</b>
всё, что мы успели нагенерить потом и слезами
</div>
<div class="menu">
<a href="/">ссылка</a>
<a href="/">ссылка</a>
<a href="/">ссылка</a>
<a href="/">ссылка</a>
</div>
</div>
<!-- page 3 -->
<div class="page">
<div class="quote">
<b>ДИЗАЙНЫ //</b>
когда-нибудь здесь будет красота
</div>
<div class="designs">
<div class="design">
<div class="preview">
<img src="https://upforme.ru/uploads/001c/8e/36/2/345384.jpg">
</div>
<span>design_01</span>
</div>
<div class="design">
<div class="preview">
<img src="https://upforme.ru/uploads/001c/8e/36/2/345384.jpg">
</div>
<span>design_02</span>
</div>
<div class="design">
<div class="preview">
<img src="https://upforme.ru/uploads/001c/8e/36/2/345384.jpg">
</div>
<span>design_03</span>
</div>
</div>
</div>
</div>
</div>
<script>
const tabs=document.querySelectorAll('.tab');
const pages=document.querySelectorAll('.page');
tabs.forEach((tab,i)=>{
tab.onclick=()=>{
tabs.forEach(t=>t.classList.remove('active'));
pages.forEach(p=>p.classList.remove('active'));
tab.classList.add('active');
setTimeout(()=>{
pages[i].classList.add('active');
},60);
};
});
</script>
[/html]
[hideprofile]
