Код:
<!--HTML--><style type="text/css">
.dttcontainer { margin: 10px auto; height: 320px; overflow: hidden; width: 560px; }
.dttname{color: #fff; text-align: center; padding: 10px 15px; font-family: bebas neue; font-size: 25px; vertical-align: middle;}
.dttdesc{ font-size: 8px; line-height: 100%; vertical-align: middle; text-decoration: none; }
.dtttabs { margin: 0px auto; position: relative; width: 560px; height: 320px;
background-image: url(http://i.imgur.com/MJlXC5K.png);
background-position: 0px 20px;}
.dtttab { float: left; }
.dtttab label { display: block; width: 280px; height: 20px; background: #eee; margin-left: 0px; position: relative; left: 0px; top: 280px; font-family: arial; font-size: 9px; text-transform: lowercase; letter-spacing: 1px; line-height: 20px; text-align: center; color: #828282; z-index: 9999; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label { color: #fff; z-index: 2;}
.dtttab input[type=radio] { display: none;}
.dttcontent { position: absolute; top: 355px; bottom: 20px; left: 0px; right: 0px; opacity: 1; z-index: 5; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label ~ .dttcontent { z-index: 1; opacity: 1; top: 20px;}
.dtttitle{ font-family: 'bebas neue'; font-size: 16px; border-bottom: 1px solid; line-height: 100%; padding-bottom: 2px; margin-bottom: 5px;}
.dttcontent a { text-decoration: none;}
.dttactive {width: 260px; overflow-y: auto; background-color: #fff; height: 260px; padding: 10px; color: #000; line-height: 120%; opacity: 1;}
.dttcomp {width: 260px; overflow-y: auto; background-color: #fff; height: 260px; padding: 10px; color: #000; line-height: 120%; position: relative; left: 280px; top: 0px; opacity: 1;}
.dttactive up {font-family: Bebas Neue; font-size: 12px; letter-spacing: 1px;}
.dttactive n {font-size: 11px; letter-spacing: 0px;}
.dttcomp up {font-family: Bebas Neue; font-size: 12px; letter-spacing: 1px;}
.dttcomp n {font-size: 11px; letter-spacing: 0px;}
.dttactive::-webkit-scrollbar { width: 5px; height: 5px; }
.dttactive::-webkit-scrollbar-track { width: 1px; background-color: #222; border: 2px solid #FFF; }
.dttactive::-webkit-scrollbar-thumb { background-color: #222; }
.dttcomp::-webkit-scrollbar { width: 5px; height: 5px; }
.dttcomp::-webkit-scrollbar-track { width: 1px; background-color: #222; border: 2px solid #FFF; }
.dttcomp::-webkit-scrollbar-thumb { background-color: #222; }
</style>
<div class="dttcontainer">
<div class="dtttabs"><div class="dtttab"><input type="radio" id="dtttab-1" name="dtttab-group-1" checked> <label for="dtttab-1" style="background-color: #102311; top:0px; width:560px;height: auto; overflow:hidden;"><div class="dttname">
</div> </label><div class="dttcontent">
</div></div><div class="dtttab"><input type="radio" id="dtttab-2" name="dtttab-group-1"> <label for="dtttab-2" style="background-color: #102311;"> женские внешности </label>
<div class="dttcontent">
<div class="dttactive">
<div class="dtttitle">женские внешности</div>
<up>Georgie Henley</up> // <n><a href=https://lull.rusff.me/profile.php?id=6>Arabella Norton</a></n><br>
<up>Saoirse Ronan</up> // <n><a href=https://lull.rusff.me/profile.php?id=52>Eira Norton</a></n><br>
</div></div></div><div class="dtttab"><input type="radio" id="dtttab-3" name="dtttab-group-1"><label for="dtttab-3" style="background-color:#20293F; background-color: #102311;"> мужские внешности </label><div class="dttcontent"> <div class="dttcomp">
<div class="dtttitle">мужские внешности</div>
<up>Your Famous Face</up> // <n><a href=your_profile>Your Name</a></n><br>
</div></div></div>
</div></div>Код:
<up>Имя знаменитости на английском</up> // <n><a href=ссылка на ваш профиль>Ваше имя</a></n><br>
