Внешности и имена

[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>

Deadwood

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Внешности и имена

Сообщений 1 страница 1 из 1

Поделиться1Пт, 17 Мар 2023 18:47