День открытия
[hideprofile]
Код:
<!--HTML-->
<div>
<table width="100%">
<tr><td colspan="2">
<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">женские</label>
<input type="radio" name="odin" id="vkl2"/><label for="vkl2">мужские</label>
<input type="radio" name="odin" id="vkl3"/><label for="vkl3">фамилии</label>
<div class="text">
<faceclaim><abc>A B C</abc>
<face>Abigail Cowen • <a href="https://gmo.rusff.me/profile.php?id=25" target="_blank">Ligita Ogneva</a></face>
<face>Bella Hadid • <a href="https://gmo.rusff.me/profile.php?id=11" target="_blank">Rita Devereaux</a></face>
<abc>D E F G</abc>
<face>Elizabeth Olsen • <a href="https://gmo.rusff.me/profile.php?id=9" target="_blank">Adele Abernathy</a></face>
<abc>H I J K</abc>
<face>Jeon Soyeon • <a href="https://gmo.rusff.me/profile.php?id=28" target="_blank">Sidney Bane</a></face>
<face>Kim Hyung-seo (Bibi) • <a href="https://gmo.rusff.me/profile.php?id=29" target="_blank">Ino Valentine</a></face>
<abc>L M N</abc>
...
<abc>O P Q</abc>
...
<abc>R S T</abc>
<face>Sia Milovanovich • <a href="https://gmo.rusff.me/profile.php?id=26" target="_blank">Sarah Hoyt</a></face>
<abc>U V W</abc>
...
<abc>X Y Z</abc>
...
</faceclaim>
<faceclaim><abc>A B C</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=9" target="_blank">Adele</a></face>
<abc>D E F G</abc>
...
<abc>H I J K</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=29" target="_blank">Ino</a></face>
<abc>L M N</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=25" target="_blank">Ligita</a></face>
<abc>O P Q</abc>
...
<abc>R S T</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=11" target="_blank">Rita</a></face>
<face><a href="https://gmo.rusff.me/profile.php?id=26" target="_blank">Sarah</a></face>
<face><a href="https://gmo.rusff.me/profile.php?id=28" target="_blank">Sidney</a></face>
<abc>U V W</abc>
...
<abc>X Y Z</abc>
...
</faceclaim></div>
<div class="text"><faceclaim><abc>A B C</abc>
...
<abc>D E F G</abc>
<face>David Gun • <a href="https://gmo.rusff.me/profile.php?id=30" target="_blank">Soledad</a></face>
<abc>H I J K</abc>
<face>Jon Bernthal • <a href="https://gmo.rusff.me/profile.php?id=5" target="_blank">Abel Mercer</a></face>
<face>Jon Bernthal • <a href="https://gmo.rusff.me/profile.php?id=6" target="_blank">Cain Mercer</a></face>
<abc>L M N</abc>
...
<abc>O P Q</abc>
...
<abc>R S T</abc>
...
<abc>U V W</abc>
...
<abc>X Y Z</abc>
...
</faceclaim>
<faceclaim><abc>A B C</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=5" target="_blank">Abel</a></face>
<face><a href="https://gmo.rusff.me/profile.php?id=6" target="_blank">Cain</a></face>
<abc>D E F G</abc>
...
<abc>H I J K</abc>
...
<abc>L M N</abc>
...
<abc>O P Q</abc>
...
<abc>R S T</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=30" target="_blank">Soledad</a></face>
<abc>U V W</abc>
...
<abc>X Y Z</abc>
...
</faceclaim>
</div>
<div class="text">
<lastname><abc>A B C</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=9" target="_blank">Abernathy</a></face>
<face><a href="https://gmo.rusff.me/profile.php?id=28" target="_blank">Bane</a></face>
<abc>D E F G</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=11" target="_blank">Devereaux</a></face>
<abc>H I J K</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=26" target="_blank">Hoyt</a></face>
<abc>L M N</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=5" target="_blank">Mercer</a></face>
<face><a href="https://gmo.rusff.me/profile.php?id=6" target="_blank">Mercer</a></face>
<abc>O P Q</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=25" target="_blank">Ogneva</a></face>
<abc>R S T</abc>
...
<abc>U V W</abc>
<face><a href="https://gmo.rusff.me/profile.php?id=29" target="_blank">Valentine</a></face>
<abc>X Y Z</abc>
...
</lastname>
</div><style>
lastname {
display: flex;
flex-direction: column;
width: 50%;
gap: 5px;
margin: auto !important;
}
faceclaim {
display: flex;
flex-direction: column;
width: 50%;
gap: 5px;
}
lastname abc {justify-content: center; padding: 0;}
abc {
display: flex;
font-weight: bold;
font-family: 'SegoeUI';
font-size: 13px;
align-items: center;
height: 20px;
line-height: 0 !IMPORTANT;
border-bottom: 1px solid var(--mainBorder);
padding-left: 3px;
}
.korpus > div, .korpus > input { display: none; }
.korpus {text-align: center; padding: 2px;}
.korpus label {
width: max-content;
padding: 5px 20px 7px 20px;
display: inline-block;
word-spacing: 5px;
letter-spacing: 1px;
background: #a09fa0;
color: #2d2a21;
background-color: var(--mainBorder);
font-weight: normal;
color: var(--mainText);
border-radius: 20px;
cursor: pointer;
font-weight: bold !important;
transition: all 0.3s linear 0s;
}
.korpus label:hover {
background-color: var(--mainLinks);
color: var(--mainBG);
}
.korpus input[type="radio"]:checked + label {
background-color: var(--mainBG);
color: var(--mainLinks);
border-radius: 20px;
}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1), .korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2), .korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) {
display: flex;
padding-top: 10px;
text-align: justify;}
.text {
height: 400px;
overflow-y: auto;
display: flex;
gap: 40px;
}
</style>
