Код:
<!--HTML--><body onresize="setHeight()" class="post-content" style="overflow: hidden; background: none !important; font: 400 11.0011px verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif; margin: 0px; padding: 0px; display: inline-block; position: relative;"><link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Cousine|Open+Sans+Condensed:300|Oswald" rel="stylesheet">
<svg style="position: absolute; height: 0; width: 0; overflow: none; left: -100%;" xmlns="http://www.w3.org/2000/svg" version="1.1"><filter id="colors" x="0" y="0"><feColorMatrix result="A" in="SourceGraphic" type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"></feColorMatrix>
<feColorMatrix color-interpolation-filters="sRGB" in="A" type="matrix" values="0.65 0 0 0 0 0 0.55 0 0 0 0 0 0.35 0 0 0 0 0 1 0 "></feColorMatrix>
</filter></svg>
<style type="text/css">
.nshipper {
background-image: url(https://i.imgur.com/VN57qiK.png);
background-size: cover;
width: 629px;
height: 629px;
}
.Ncontainer {
height: 629;
width: 629;
}
.Ntabs {
position: relative;
width: 629px;
height: 629px;
}
.Ntab {
float: left;
}
.Ntab label {
font-size: 16px;
display: block;
width: 101px;
height: 20px;
padding: 5px 10px 10px 10px;
margin: 0px;
position: relative;
left: 10px;
top: 10px;
z-index: 3;
font-family: "Oswald";
text-transform: uppercase;
text-align: center;
border-top: 3px solid white;
border-bottom: 3px solid white;
color: white;
transition: all ease 1s;
}
.Ntab label:hover {
background: #998828
}
.Ntab input[type=radio]:checked~label {
background: #998828;
z-index: 2;
}
.Ntab input[type=radio] {
display: none;
}
.Ncontent {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
padding: 45px 0px 0px 0px;
opacity: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
.Ntab input[type=radio]:checked~label~.Ncontent {
z-index: 1;
opacity: 1;
}
.general {
width: 400px;
margin-left: 60px;
margin-top: 130px;
text-align: center;
background: #24221d94;
padding: 10px
}
.general .title {
color: white;
font-family: Abril Fatface;
letter-spacing: 3px;
font-size: 23px;
text-shadow: 1px 1px 1px black;
border-bottom: 2px solid #998828;
border-top: 2px solid #998828;
}
.general .info {
text-align: center;
font-size: 10px;
font-family: cousine;
text-transform: uppercase;
color: white;
}
.general .info span {
display: inline-block;
background: #998828;
margin: 5px;
padding: 3px 3px 2px 3px;
}
.general .short {
font-family: cousine;
text-transform: uppercase;
color: #949494;
font-size: 8px;
letter-spacing: 1px
}
#info {
width: 131px;
height: 131px;
position: relative;
overflow: hidden;
border: 3px solid #9988284d;
margin-right: 9px;
margin-bottom: 9px;
transition: all ease 0.5s;
opacity: 0.6
}
#info img {
width: 131px;
height: 131px;
}
#info .rel-bg {
background-size: cover;
background-position: center center;
width: 131px;
height: 131px;
-webkit-filter: url(#colors);
-moz-filter: url(#colors);
-o-filter: url(#colors);
-ms-filter: url(#colors);
filter: url(#colors);
z-index: -1;
}
#info:hover {
border: 3px solid #ffffffb8;
opacity: 1;
}
#info:hover .name {
left: 0px;
z-index: 10;
}
.name {
overflow: hidden;
transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
position: absolute;
left: -150px;
top: 0px;
width: 131px;
height: 131px;
background-color: #35353594;
text-align: center;
opacity: 1;
}
.name a {
color: #efefef!important;
display: block;
font-family: oswald;
text-decoration: none;
margin-top: 28px;
font-size: 20px;
text-transform: uppercase;
line-height: 19px;
}
.name span:nth-of-type(1) {
color: #9a9a9a;
display: block;
font-family: cousine;
font-size: 9px;
text-transform: uppercase;
margin-top: 5px;
line-height: 10px;
}
.name span:nth-of-type(2) {
color: #cccccc;
display: block;
font-family: cousine;
text-transform: uppercase;
font-size: 11px;
margin-top: 5px;
line-height:10px
}
.eps div span:nth-of-type(1) {
display: inline-block;
background: #998828;
padding: 3px 0 2px 0;
margin-bottom: 5px;
width: 60px;
text-align: center;
margin-right: 5px;
}
.eps div span:nth-of-type(2) {
display: inline-block;
text-transform: uppercase;
margin-right: 5px;
color: #717171;
padding: 3px 0 2px 0;
}
.eps div a {
display: inline-block;
color: #e5e5e5!important;
font-family: oswald;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
transition: all ease 1s;
font-weight: bold
}
.eps div a:hover {
color: #998828!important;
}
.eps div a.closed {
color: #585756!important;
font-weight: normal;
}
.eps div a.closed:hover {
color: #797979!important;
}
.container::-webkit-scrollbar,
.up-in::-webkit-scrollbar {
width: 3px;
}
.container::-webkit-scrollbar-track,
.up-in::-webkit-scrollbar-track {
background: #2e2b29;
}
.container::-webkit-scrollbar-thumb,
.up-in::-webkit-scrollbar-thumb {
background: #998828
}
.month {
text-align: center;
padding: 5px;
margin: 6px 0;
font-weight: bold;
color: #998828;
font-family: Abril Fatface;
font-size: 12px;
border-bottom: 3px solid #494747;
letter-spacing: 6px;
}
.month-gap {height: 20px;}
</style>
<div class="nshipper">
<div class="Ncontainer">
<div class="Ntabs">
<div class="Ntab"><input type="radio" id="Ntab-1" name="Ntab-group-1" checked=""><label for="Ntab-1"> <i class="fa fa-home fa-fw" style="font-size: 10px;margin-top:5px"></i> general</label>
<div class="Ncontent">
<div class="general">
<div class="title">Charles Honey</div>
<div class="info"><span>Чарльз</span><span>я готов быть твоей куклой вуду</span><span>30 лет</span><span>сука, таскаться за тобой повсюду</span></div>
<div class="short">свою жизнь я раскрасил палитрой красок. чёрную взял из тёмной души, завещая её погибшим родителям. от зелёной тоски получаю успокоение в собственном магазине сантехники. профессиональный эгоцентрик своего (не)серого одиночества и рубиновый индифферентист-любитель. посвятил своё рваное сердце одному, чьё имя ласкают тысячи льдин.</div>
</div>
</div>
</div>
<div class="Ntab"><input type="radio" id="Ntab-2" name="Ntab-group-1"><label for="Ntab-2"> <i class="fa fa-heartbeat" style="font-size: 10px;margin-top:5px"></i> relations</label>
<div class="Ncontent">
<div class="container">
<table>
<tbody><tr>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Name<br>Surname</a><span>age; proff</span><span> relat</span></div>
<div class="rel-bg" style="background-image: url(giff)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">
Name <br> Surname</a><span>age; proff</span><span>relations</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Name <br>Surname</a><span>age; proff</span><span>sunshine</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
</tr>
<tr>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
</tr>
<tr>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<div id="info">
<div class="name"><a href="https://mydilemma.ru/">Имя<br> Фамилия</a><span>возраст; профа</span><span>релэйшеншипс</span></div>
<div class="rel-bg" style="background-image: url(ссылка)"></div>
</div>
</td>
<td>
<!-- HERE -->
</td>
<td>
<!-- HERE -->
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="Ntab"><input type="radio" id="Ntab-4" name="Ntab-group-1"><label for="Ntab-4"> <i class="fa fa-user-plus" style="font-size: 10px;margin-top:5px"></i> 2020</label>
<div class="Ncontent">
<div class="container eps">
<div class="month">AUGUST 2024</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">SEPTEMBER 2024</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">OCTOBER 2024</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">NOVEMBER 2024</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">DECEMBER 2024</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
</div>
</div>
</div>
<div class="Ntab"><input type="radio" id="Ntab-3" name="Ntab-group-1"><label for="Ntab-3"> <i class="fa fa-pencil fa-fw" style="font-size: 10px;margin-top:5px"></i> past</label>
<div class="Ncontent">
<div class="container eps">
<div class="month">год</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">год</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">год</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">год</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
<div class="month">год</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div><span>дата</span> <span>↳ какое-то событие в жизни</span></div>
<div class="month-gap"></div>
<div class="month">год</div>
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
<div class="month-gap"></div>
</div>
</div>
</div>
<div class="Ntab"><input type="radio" id="Ntab-5" name="Ntab-group-1"><label for="Ntab-5"> <i class="fa fa-cog fa-fw" style="font-size: 10px;margin-top:5px"></i> au</label>
<div class="Ncontent">
<div class="container eps">
<div><span>дата</span> <span>↳ с кем играю</span> <a class="closed" href="http://tooxic.rusff.me/">название эпа</a></div>
</div>
</div>
</div>
</div>
</div>
</div></body>
