Код:
<!--HTML-->
<center>
<div class="body">
<div style="margin-top: -5px; margin-left: 10px; text-align: center; font-family: 'Neucha'; color: #cfccfc; text-shadow: 1px 1px 0px #2e3565;position: relative;letter-spacing: px; font-size: 40px;">занятые внешности</div>
</span></p>
<div class="text">
<BR>
<center>
<div class="notebook2">
<input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
<input type="radio" name="notebook2a" id="notebook2a_2">
<input type="radio" name="notebook2a" id="notebook2a_3">
<input type="radio" name="notebook2a" id="notebook2a_4">
<input type="radio" name="notebook2a" id="notebook2a_5">
<input type="radio" name="notebook2a" id="notebook2a_6">
<div>
<label for="notebook2a_1">ABCD</label><br><div style="margin-left: 10px; text-align: center; font-family: 'Archive'; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 24px;">abcd</div>- - - - - - - - - -
<table><tr><td><center>
<!------------- ДЕВОЧКИ----------->
<a href=http://busannightmare.rusff.me/profile.php?id=53><b>Bae Joohyun</b></a>[Red Velvet]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=20><b>Chou Tzuyu</b></a>[TWICE]<br>
</center></td><td><center>
<!-------------МАЛЬЧИКИ----------->
<a href=http://busannightmare.rusff.me/profile.php?id=76><b>Cha Sun Woo</b></a>[b1a4]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=72><b>Cho Seungyoun</b></a> [uniq]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=34><b>do kyung soo</b></a>[exo]<br>
</center></td></table>
</div>
<div>
<label for="notebook2a_2">EFGH</label><br><div style="margin-left: 10px; text-align: center; font-family: 'Archive'; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 24px;">efgh</div>- - - - - - - - - -
<table><tr><td><center>
<!------------- ДЕВОЧКИ----------->
</center></td><td><center>
<!-------------МАЛЬЧИКИ----------->
<a href=http://http://busannightmare.rusff.me/profile.php?id=77><b>Hong Si Young [Giriboy]</b></a>[соло]<br>
</center></td></table>
</div>
<div><label for="notebook2a_3">IJKL</label><br>
<div style="margin-left: 10px; text-align: center; font-family: 'Archive'; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 24px;">ijkl</div>- - - - - - - - - -
<table><tr><td><center>
<!------------- ДЕВОЧКИ----------->
<a href=http://http://busannightmare.rusff.me/profile.php?id=24><b>jeon somin</b></a>[k.a.r.d]<br>
<a href=http://http://busannightmare.rusff.me/profile.php?id=9><b>kang seulgi</b></a>[red velvet]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=58><b>kim darae</b></a>[ela8te, ex-RaNia]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=17><b>kim hyun ah</b></a>[solo]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=14><b>kim jinhee</b></a> [fiestar]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=19><b>Kim Jisoo</b></a>[blackpink]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=36><b>Lalisa Manoban</b></a>[blackpink]<br>
</center></td><td><center>
<!-------------МАЛЬЧИКИ----------->
<a href=http://busannightmare.rusff.me/profile.php?id=25><b>jang hyun seung</b></a>[ex-beast]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=27><b>jeon jungkook</b></a>[bts]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=46><b>jeon hoseok</b></a>[bts]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=21><b>kim jinhwan</b></a>[ikon]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=47><b>kim jiwon</b></a>[ikon]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=45><b>Kim Jong In</b></a>[exo]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=31><b>kim seokjin</b></a>[bts]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=26><b>Kim Min Seok</b></a>[exo]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=51><b>Kim Taehyung</b></a>[bts]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=28><b>Kwon Ji Yong</b></a>[Big Bang]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=22><b>Lu Han</b></a>[solo]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=23><b>Lee Minhyung.</b></a>[nct]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=8><b>Lee Jong Suk</b></a>[actor]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=52><b>Lee Soo Hyuk</b></a>[соло]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=74><b>Li Wenhan</b></a>[uniq]<br>
</center></td></table>
</div>
<div><label for="notebook2a_4">MNOP</label><br>
<div style="margin-left: 10px; text-align: center; font-family: 'Archive'; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 24px;">mnop</div>- - - - - - - - - -
<table><tr><td><center>
<!------------- ДЕВОЧКИ----------->
<a href=http://busannightmare.rusff.me/profile.php?id=33><b>park kyungri</b></a>[9muses]<br>
</center></td><td><center>
<!-------------МАЛЬЧИКИ----------->
</center></td></table>
</div>
<div> <label for="notebook2a_5">QRSTU</label><br>
<div style="margin-left: 10px; text-align: center; font-family: 'Archive'; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 24px;">qrstu</div>- - - - - - - - - -
<table><tr><td><center>
<!------------- ДЕВОЧКИ----------->
<a href=http://http://busannightmare.rusff.me/profile.php?id=49><b>Song Hye Kyo</b></a>[actress]<br>
<a href=http://busannightmare.rusff.me/profile.php?id=50><b>Tiffany Hwang</b></a>[SNSD]<br>
</center></td><td><center>
<!-------------МАЛЬЧИКИ----------->
</center></td></table>
</div>
<div><label for="notebook2a_6">VWXYZ</label><br>
<div style="margin-left: 10px; text-align: center; font-family: 'Archive'; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 24px;">vwxz</div>- - - - - - - - - -
<table><tr><td><center>
<!------------- ДЕВОЧКИ----------->
<a href=http://busannightmare.rusff.me/profile.php?id=80><b>Yokoyama Yui</b></a>[AKB48]<br>
</center></td><td><center>
<!-------------МАЛЬЧИКИ----------->
</center></td></table>
</div>
</div></center>
<br> <br> <br>
</div></div></div>
<style type="text/css">
.text {font-family: 'verdana', font-size: 13px; color: #160e29; letter-spacing: 1px; text-align: center; padding-top: 5px; width: 580px}
.naz {position: relative; height: 18px; top: 4px; margin-left: 2px; }
.naz1 {position: relative; height: 10px; top: 10px; margin-left: 2px; }
.chcharname, .chchardesc{font-family:arial; font-size:8px; line-height:22px;letter-spacing:2pt; text-transform:uppercase}
.chcharname{border-radius: 20px; background:#23396b; color:#515602; width:85px; height:20px; text-align:center; display:block;position:relative; margin:10px 20px 10px 20px; opacity:1}
.notebook2 {
width: 530px;
height: 450px;
position: relative;
}
.notebook2 > input {
display: none;
}
.notebook2 > div {
position: absolute;
box-sizing: border-box;
top: 30px;
left: 0px;
bottom: 0px;
right: 0px;
border-radius: 10px;
padding: 0px 1em;
z-index: 0;
background-image : url(http://s4.uploads.ru/DsRxJ.png);
border: 1px solid #e5e5ee;
border-top: 0px solid #252248;
border-bottom: 0px solid #252248;
-webkit-box-shadow:0 1px 4px #97afc9, 0 0 30px #97afc9 inset;
transition: all 0.5s ease 0s, z-index 0s 0.5s;
}
.notebook2 > div > *:first-child {
display: block;
position: absolute;
box-sizing: border-box;
top: -35px;
width: 82px;
height: 30px;
letter-spacing: -1px;
font-family: 'Airborne';
font-size: 12px;
background: #2e3565 url("");
padding: 1px;
border: 1px solid #e4e4ed;
border-top: 2px solid #dadadc;
border-bottom: 1px solid #dadadc;
color: #fff;
line-height: 28px;
cursor: pointer;
text-align: center;
transition: all 0.5s ease 0s;
}
.notebook2 > div > *:not(:first-child) {
opacity: 0;
transition: all 0.5s ease 0s;
}
.notebook2 > div:nth-of-type(1) > *:first-child { left: 2px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 89px; }
.notebook2 > div:nth-of-type(3) > *:first-child { left: 174px; }
.notebook2 > div:nth-of-type(4) > *:first-child { left: 259px; }
.notebook2 > div:nth-of-type(5) > *:first-child { left: 343px; }
.notebook2 > div:nth-of-type(6) > *:first-child { left: 428px; }
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6)
{
z-index: 10;
transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child,
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:first-child,
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6) > *:first-child
{
color: #d3d3dd;
transition: all 0.5s ease 0.5s;
}
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child),
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:not(:first-child),
.notebook2 > input:nth-of-type(6):checked ~ div:nth-of-type(6) > *:not(:first-child)
{opacity: 3;
transition: all 0.5s ease 0.5s;
}.l7 {
text-align: center;
width: 460px;
padding: 3px;
background: #b0c3d6
border: 1px solid #e5e5ee;
border-top: 4px solid #e5e5ee;
border-bottom: 4px solid #e5e5ee;
-webkit-box-shadow:0 1px 4px #ebdcde, 0 0 30px #c7d8e8 inset;
border-radius: 30px;
color: #000;
}
</style></div></div></div></div></div>Код:
<a href=http://ссылка на профиль><b>имя на англ.</b></a>[группа/соло]<br>
