Код:
<!--HTML--><link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
#mercChall {
width: 450px;
padding: 50px;
margin: 25px auto;
height: 450px;
background-color: #1e263b;
overflow: hidden;
margin-bottom: 4px;
}
#mercChall ::-webkit-scrollbar-thumb:vertical {
height: 8px;
background-color:#3d4457;
}
#mercChall ::-webkit-scrollbar {
width: 9px;
height: 3px;
border: 4px solid #1e263b;
background-color:#3d4457;
}
.merctab {
width: 382px;
height: 400px;
overflow: hidden;
clear: both;
position: relative;
}
.mtab { float: left; }
.mtab label {
display: block;
width: 86.75px;
background-color: #444a5d;
font-family: montserrat;
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: #fff;
font-size: 8px;
letter-spacing: 1px;
padding: 20px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
}
.merctab .mtab [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
.merccont {
width: 340px;
height: 340px;
padding: 20px;
background-color: #f2f2f2;
position: absolute;
color: #3c3f48;
font-family: montserrat;
font-size: 12px;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
overflow: hidden;
top: 49px;
bottom: 0px;
left: -500px;
right: 0px;
line-height: 20px;
}
.merccont .cont {
width: 335px;
height: 240px;
overflow: auto;
padding: 3px;
}
.merccont h1 {
text-align: center;
font-size: 20px;
color: #95a29e;
}
.merccont .cont a {
background-color: #1e263b;
padding: 2px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
}
.merccont .lin {
padding-top: 150px;
font-famly: montserrat;
font-size: 30px;
text-align: center;
font-weight: bold;
color: #ffff;
}
.merccont img {
width: 100px;
height: 100px;
overflow: hidden;
margin: 10px auto;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
border: 10px solid #3d4457;
}
.merccont .sec a {
background-color: #1e263b;
padding: 2px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
}
.merctab .mtab [type=radio]:checked ~ label { background: #3c3f48; z-index: 2; }
.merctab .mtab [type=radio]:checked ~ label ~ .merccont { z-index: 1; top: 49px;
left: 0px;
}
.mercIn {
width: 410px;
padding: 20px;
text-align: center;
background-color: #444a5d;
color: #fff;
font-family: montserrat;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
.mercIm {
width: 70px;
height: 400px;
float: right;
right: 20px;
margin-top: -400px;
background-color: #444a5d;
}
.mercIm .im {
width: 70px;
height: 70px;
overflow: hidden;
border: 10px solid #3d4457;
}
.mercCred {
text-align: center;
width: 200px;
margin: 1px auto;
color: #323f3b;
text-align: center;
font-family: calibri;
font-size: 8px;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
}
.mercCred a { color: #101420; text-decoration: none; }
</style>
<div id="mercChall">
<div class="merctab">
<div class="mtab">
<input type="radio" id="mtab-1" name="mtab-group-1">
<label for="mtab-1">О нас</label>
<div class="merccont"><div class="cont">
Никогда не думал о людях? О тех самых, что следят за тобой из-за каждого угла и готовы выстрелить в любой момент. Всех, кто окружает тебя. Веришь в них? Брось, они все фальшивки, ведь ты один единственный в этом чёртовом городе. Только за тобой следят все камеры на углах зданий (ты что, никогда не замечал их поворотов в твою сторону? ну и глупец), только для тебя одного дикторы проговаривают сводку новостей по радио, а ты не смей менять радиоволну, ведь в программе - выразительное чтение сценария твоей жизни. Они следят за тобой сквозь динамики телефона, с площадки для собак, в библиотеке, и больше всего - когда ты спишь. Ложись, обнимай подушку и засыпай, чтобы на утро проснуться уставшим и включить знакомую радиоволну (с утра всегда трансляция твоих снов, поэтому, если вдруг забыл ночной кошмар - не отчаивайся, тебе напомнят).
Думай больше и громче, и скоро твои мысли появятся в эфире.
Смотри вокруг, чтобы было, что крутить в кинотеатрах.
Существуй, чтобы им было за кем следить.
И слушай радио.
</div> </div>
</div>
<div class="mtab">
<input type="radio" id="mtab-2" name="mtab-group-1">
<label for="mtab-2">Придержанные</label>
<div class="merccont"><div class="cont">
<table border="0" >
<tr>
<td align="justify">female:<br>
</tr>
<tr>
<td valign="top"><br /></td>
<td valign="top">
<i>Bae Ju Hyun</i>[Red Velvet] - Bae Ju Hyun <b>9.03</b><br />
</td>
</tr>
<td align="justify">male:</td>
</tr>
<tr>
<td valign="top"><br /></td>
<td valign="top">
<i> huang zi tao </i>[ex-exo] - huang zitao <b>6.03</b><br />
<i>Jung Ilhoon</i> [btob]- <b>за амс</b><br />
<i>Kim jinhwan</i> [ikon]- <b>за амс</b><br />
<i>kim jonghyun</i>[shinee]- <b>за амс</b><br />
<i>Kim Jong In </i>[exo] - Kim Jong In<br />
<i> Kim Yoo Jung </i> - Kim Yoo Jung <b>13.03</b> <br />
<i>lee hyunjin </i>[mr.mr] - <b>за амс</b><br />
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="mtab">
<input type="radio" id="mtab-3" name="mtab-group-1" checked>
<label for="mtab-3">Ссылки</label>
<div class="merccont" style="text-align: center; background-image:url(http://s2.uploads.ru/Ys8eR.png);">
<div class="lin">links</div>
<div class="sec">
<a href="https://silentwhale.rusff.me/viewtopic.php?id=8/">лица</a>
<a href="https://silentwhale.rusff.me/viewtopic.php?id=7/">биржа</a>
<a href="https://silentwhale.rusff.me/viewtopic.php?id=4/">нужные</a>
</div>
</div>
</div>
</div>
<div class="mercIm"></div>
<div class="mercIn">welcome to soul coma</div>
</div>Код:
<i> внешность </i>[группа] - ник <br />
