[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>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>D E F G</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>H I J K</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>L M N</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>O P Q</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>R S T</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>U V W</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> <abc>X Y Z</abc> <face>Jane Small • <a href="http://gmo.rusff.me/" target="_blank">Juliet Trevor</a></face> </faceclaim> <faceclaim><abc>A B C</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>D E F G</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>H I J K</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>L M N</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>O P Q</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>R S T</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>U V W</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> <abc>X Y Z</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Jane</a></face> </faceclaim></div> <div class="text"><faceclaim><abc>A B C</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>D E F G</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>H I J K</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>L M N</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>O P Q</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>R S T</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>U V W</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> <abc>X Y Z</abc> <face>John Smith • <a href="http://gmo.rusff.me/" target="_blank">Jackson Troy</a></face> </faceclaim> <faceclaim><abc>A B C</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>D E F G</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>H I J K</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>L M N</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>O P Q</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>R S T</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>U V W</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> <abc>X Y Z</abc> <face><a href="http://gmo.rusff.me/" target="_blank">John</a></face> </faceclaim> </div> <div class="text"> <lastname><abc>A B C</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>D E F G</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>H I J K</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>L M N</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>O P Q</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>R S T</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>U V W</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> <abc>X Y Z</abc> <face><a href="http://gmo.rusff.me/" target="_blank">Smith</a></face> </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>
Код:
<face>Внешность • <a href="ссылка_профиля" target="_blank">Ник</a></face> <face><a href="ссылка_профиля" target="_blank">Имя</a></face> <face><a href="ссылка_профиля" target="_blank">Фамилия</a></face>