Здесь делается вжух🔮

which witch Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas

Тестовик Карий

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Тестовик Карий » The Overlook Hotel » Внешности

Внешности

Страница: 1
Ответить

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

1

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

[html]<div class="face-list">
<div class="tabs-ss">
<div class="info-tabl" id="banner_1">Внешности</div>
<div class="info-tabl" id="banner_2">Имена</div>
<div class="info-tabl" id="banner_3">Роли</div>
</div>

<div id="vkladka1" style="display:block">
<div class="fc-l">
<div class="fl_face"><div class="fl_g">Male</div><div class="fl_b">Female</div></div>

<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">A — B — C — D</div>
<div class="fl_spis">

<div class="fl_bro">
[Clair Obscur: Expedition 33] Verso - <a href="https://heylar.f-rpg.me/profile.php?id=17">Vergil</a> <br>
[Dishonored] Corvo Attano - <a href="https://heylar.f-rpg.me/profile.php?id=16">Vincent Blanchard</a> <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->

<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">E — F — G — H</div>
<div class="fl_spis">

<div class="fl_bro">
[Fire Emblem] Rosado - <a href="https://heylar.f-rpg.me/profile.php?id=4">Gwendolyn </a> <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">I — J — K — L</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>

</div>

<div class="fl_bro">
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">M — N — O — P</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">Q — R — S — T</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>

</div>

<div class="fl_bro">
[Sentouin Hakenshimasu!] Heine - <a href="https://heylar.f-rpg.me/profile.php?id=10">Sharifa</a> <br>
v

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">U — V — W </div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>

</div>

<div class="fl_bro">
[Witcher] Yennefer - <a href="https://heylar.f-rpg.me/profile.php?id=2">Rebecca Oyweld</a> <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">X— Y — Z </div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>
~ <br>

</div>
<div class="fl_bro">
~ <br>
~ <br>
~ <br>
</div>
</div>
<!--КОНЕЦ-->

</div>
</div>

<div id="vkladka2" style="display:none">
<div class="fc-l">
<div class="fl_face"><div class="fl_g">Male</div><div class="fl_b">Female</div><div class="fl_b">Surname</div></div>

<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">A — B — C — D</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>
~ <br>

</div>
<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=16">Blanchard</a> <br>
~ <br>
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->

<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">E — F — G — H</div>
<div class="fl_spis">

<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=4">Gwendolyn</a> <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">I — J — K — L</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
<div class="fl_bro">
~ <br>
~ <br>
</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">M — N — O — P</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>
</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=2">Oyweld</a> <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">Q — R — S — T</div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>

</div>

<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=2">Rebecca</a> <br>
<a href="https://heylar.f-rpg.me/profile.php?id=10">Sharifa</a> <br>

</div>
<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">U — V — W </div>
<div class="fl_spis">

<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=17">Vergil</a> <br>
<a href="https://heylar.f-rpg.me/profile.php?id=16">Vincent</a> <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">X— Y — Z </div>
<div class="fl_spis">

<div class="fl_bro">
~ <br>
~ <br>

</div>

<div class="fl_bro">
~ <br>
~ <br>

</div>
<div class="fl_bro">
~ <br>
~ <br>

</div>
</div>
<!--КОНЕЦ-->
</div>
</div>

<div id="vkladka3" style="display:none">
<div class="fc-l2"><div class="fl_face"><div class="fl_b">Парящие Острова</div></div>

<div class="fl_zag">Хортирия</div>
<div class="fl_spis2">

<div class="fl_bro2">

<a href="https://heylar.f-rpg.me/profile.php?id=15">Percivale</a> - полуэльф, бард,  помощник главы и музыкант в Театре Тысячи Искр <br>
~ <br>
~ <br>
</div></div>
<!--КОНЕЦ-->

<div class="fl_face"><div class="fl_b">Эльдора </div><div class="fl_b">Гарнор</div></div>
<div class="fl_spis2">

<div class="fl_bro">
<div class="fl_zag2"> Агнейская империя</div>
<a href="https://heylar.f-rpg.me/profile.php?id=4">Gwendolyn</a>  - полуэльф, паладин/бард, охотник на драконов<br>
~ <br>
<br>
</div>

<div class="fl_bro">
<div class="fl_zag2"> Инзлин - Вольные земли</div>
<a href="https://heylar.f-rpg.me/profile.php?id=17">Vergil </a>  - человек, плут, наемник из «Аркана»<br>
~ <br>

</div></div>
<div class="fl_spis2">
<div class="fl_bro">
<div class="fl_zag2">Таскийская империя</div>
<a href="https://heylar.f-rpg.me/profile.php?id=10">Sharifa</a>  - тифлинг, чародей/жрица, охотник на драконов<br>
~ <br>
<br>
</div>

<div class="fl_bro">
<div class="fl_zag2"> ~~~~~</div>
~ <br>
~ <br>

</div></div>
<div class="fl_spis2">
<div class="fl_bro">
<div class="fl_zag2">Царство Хории</div>
<a href="https://heylar.f-rpg.me/profile.php?id=2">Rebecca Oyweld </a>  - человек, друид, хозяйка часовой лавки<br>
<a href="https://heylar.f-rpg.me/profile.php?id=16">Vincent Blanchard </a>  - человек, плут, компаньон при часовой лавке<br>

<br>
</div>

<div class="fl_bro">
<div class="fl_zag2"> ~~~~~</div>
~ <br>
~ <br>

</div></div>
<!--КОНЕЦ-->
<div class="fl_zag2">Проходимцы</div>
<div class="fl_spis2">

<div class="fl_bro2">
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
</div></div>
<!--КОНЕЦ-->

</div>
</div>
   
<script type="text/javascript">
    $(document).ready(function() {
        $("#banner_1").click(function() {
            $("#vkladka1").show();
            $("#vkladka2").hide();
            $("#vkladka3").hide();
        });

        $("#banner_2").click(function() {
            $("#vkladka1").hide();
            $("#vkladka2").show();
            $("#vkladka3").hide();
        });

        $("#banner_3").click(function() {
            $("#vkladka1").hide();
            $("#vkladka2").hide();
            $("#vkladka3").show();
        });
    });
</script>
[/html]

0

2

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347
Код:
[html]<div class="face-list">
<div class="tabs-ss">
<div class="info-tabl" id="banner_1">Внешности</div>
<div class="info-tabl" id="banner_2">Имена</div>
<div class="info-tabl" id="banner_3">Роли</div>
</div>


<div id="vkladka1" style="display:block">
<div class="fc-l">
<div class="fl_face"><div class="fl_g">Male</div><div class="fl_b">Female</div></div>

<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">A — B — C — D</div>
<div class="fl_spis">

<div class="fl_bro">
[Clair Obscur: Expedition 33] Verso - <a href="https://heylar.f-rpg.me/profile.php?id=17">Vergil</a> <br>
[Dishonored] Corvo Attano - <a href="https://heylar.f-rpg.me/profile.php?id=16">Vincent Blanchard</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>


<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>
</div>
<!--КОНЕЦ-->


<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">E — F — G — H</div>
<div class="fl_spis">

<div class="fl_bro">
[Fire Emblem] Rosado - <a href="https://heylar.f-rpg.me/profile.php?id=4">Gwendolyn </a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>


<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">I — J — K — L</div>
<div class="fl_spis">

<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>



<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">M — N — O — P</div>
<div class="fl_spis">

<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>



<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">Q — R — S — T</div>
<div class="fl_spis">

<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>



<div class="fl_bro">
[Sentouin Hakenshimasu!] Heine - <a href="https://heylar.f-rpg.me/profile.php?id=10">Sharifa</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">U — V — W </div>
<div class="fl_spis">

<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>

</div>

<div class="fl_bro">
[Witcher] Yennefer - <a href="https://heylar.f-rpg.me/profile.php?id=2">Rebecca Oyweld</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>


</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">X— Y — Z </div>
<div class="fl_spis">

<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>

</div>
<div class="fl_bro">
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
[Откуда?] Кто - <a href="#">Ссылка на профиль</a> <br>
</div>
</div>
<!--КОНЕЦ-->

</div>
</div>

<div id="vkladka2" style="display:none">
<div class="fc-l">
<div class="fl_face"><div class="fl_g">Male</div><div class="fl_b">Female</div><div class="fl_b">Surname</div></div>

<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">A — B — C — D</div>
<div class="fl_spis">

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>


</div>
<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=16">Blanchard</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>

</div>
</div>
<!--КОНЕЦ-->


<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">E — F — G — H</div>
<div class="fl_spis">

<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=4">Gwendolyn</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>


</div>
<div class="fl_bro">
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">I — J — K — L</div>
<div class="fl_spis">

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>


</div>
<div class="fl_bro">
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">M — N — O — P</div>
<div class="fl_spis">

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>


</div>
<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=2">Oyweld</a> <br>
<a href="#">Surname</a> <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">Q — R — S — T</div>
<div class="fl_spis">

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=2">Rebecca</a> <br>
<a href="https://heylar.f-rpg.me/profile.php?id=10">Sharifa</a> <br>
<a href="#">Name</a> <br>

</div>
<div class="fl_bro">
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">U — V — W </div>
<div class="fl_spis">

<div class="fl_bro">
<a href="https://heylar.f-rpg.me/profile.php?id=17">Vergil</a> <br>
<a href="https://heylar.f-rpg.me/profile.php?id=16">Vincent</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>


</div>
<div class="fl_bro">
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>

</div>
</div>
<!--КОНЕЦ-->
<!--ПЕРВЫЕ 4 БУКВЫ-->
<div class="fl_zag">X— Y — Z </div>
<div class="fl_spis">

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>

</div>

<div class="fl_bro">
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>
<a href="#">Name</a> <br>


</div>
<div class="fl_bro">
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>
<a href="#">Surname</a> <br>

</div>
</div>
<!--КОНЕЦ-->
</div>
</div>

<div id="vkladka3" style="display:none">
<div class="fc-l2"><div class="fl_face"><div class="fl_b">Парящие Острова</div></div>

<div class="fl_zag">Хортирия</div>
<div class="fl_spis2">

<div class="fl_bro2">

<a href="https://heylar.f-rpg.me/profile.php?id=15">Percivale</a> - полуэльф, бард,  помощник главы и музыкант в Театре Тысячи Искр <br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
</div></div>
<!--КОНЕЦ-->


<div class="fl_face"><div class="fl_b">Эльдора </div><div class="fl_b">Гарнор</div></div>
<div class="fl_spis2">

<div class="fl_bro">
<div class="fl_zag2"> Агнейская империя</div>
<a href="https://heylar.f-rpg.me/profile.php?id=4">Gwendolyn</a>  - полуэльф, паладин/бард, охотник на драконов<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<br>
</div>

<div class="fl_bro">
<div class="fl_zag2"> Инзлин - Вольные земли</div>
<a href="https://heylar.f-rpg.me/profile.php?id=17">Vergil </a>  - человек, плут, наемник из «Аркана»<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>

</div></div>
<div class="fl_spis2">
<div class="fl_bro">
<div class="fl_zag2">Таскийская империя</div>
<a href="https://heylar.f-rpg.me/profile.php?id=10">Sharifa</a>  - тифлинг, чародей/жрица, охотник на драконов<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<br>
</div>

<div class="fl_bro">
<div class="fl_zag2"> ~~~~~</div>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>

</div></div>
<div class="fl_spis2">
<div class="fl_bro">
<div class="fl_zag2">Царство Хории</div>
<a href="https://heylar.f-rpg.me/profile.php?id=2">Rebecca Oyweld </a>  - человек, друид, хозяйка часовой лавки<br>
<a href="https://heylar.f-rpg.me/profile.php?id=16">Vincent Blanchard </a>  - человек, плут, компаньон при часовой лавке<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<br>
</div>

<div class="fl_bro">
<div class="fl_zag2"> ~~~~~</div>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>

</div></div>
<!--КОНЕЦ-->
<div class="fl_zag2">Проходимцы</div>
<div class="fl_spis2">

<div class="fl_bro2">
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
<a href="#">Ссылка на профиль</a>  - раса, класс,  дело<br>
</div></div>
<!--КОНЕЦ-->

</div>
</div>
    
<script type="text/javascript">
    $(document).ready(function() {
        $("#banner_1").click(function() {
            $("#vkladka1").show(); 
            $("#vkladka2").hide(); 
            $("#vkladka3").hide(); 
        });

        $("#banner_2").click(function() {
            $("#vkladka1").hide(); 
            $("#vkladka2").show(); 
            $("#vkladka3").hide(); 
        });

        $("#banner_3").click(function() {
            $("#vkladka1").hide(); 
            $("#vkladka2").hide(); 
            $("#vkladka3").show(); 
        });
    });
</script>
[/html]

0

3

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

test

0

4

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

СПИСОК ЗАНЯТЫХ ВНЕШНОСТЕЙ | ИМЕН

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

мужские

a - b - c - d - e - f - g

name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname

женские

a - b - c - d - e - f - g

name surname - name surname
name surname - name surname
name surname - name surname

h - i - j - k - l - m - n - o - p

name surname - name surname
name surname - name surname
name surname - name surname

h - i - j - k - l - m - n - o - p

name surname - name surname
name surname - name surname
name surname - name surname

q - r - s - t - u - v - w - x - y - z

name surname - name surname
name surname - name surname
name surname - name surname

q - r - s - t - u - v - w - x - y - z

name surname - name surname
name surname - name surname
name surname - name surname

имена

name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname
name surname - name surname

фамилии

name surname - name surname
name surname - name surname
name surname - name surname

[hideprofile]

0

5

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

во второе окно стиля

Код:
/**оформление списка внешностей**/
.face_them {
    width: 800px;
    height: auto;
    margin: 0 auto !important;
    background: var(--bg);
    border-radius: 10px;
    padding: 15px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.face_body {
    background: var(--body);
    padding: 15px;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.face_body_title {
    width: 100%;
    height: 25px;
    margin: -25px auto !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.face_body_title p {
    width: 50%;
    height: 20px;
    padding: 0 50px;
    font-size: 11px;
    text-transform: lowercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: url(https://forumstatic.ru/files/001b/c1/d6/31952.jpg);
    color: var(--sub_link);
    border: solid 1px var(--line);
    border-radius: 5px;
}

.face_block, .name_block {
    width: 330px;
    height: 180px;
    border: solid 1px var(--line);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 5px;
}

.face_block {background: var(--body_box);}
.name_block {background: var(--quote_box);}

.block_face_title, .name_face_title {
    width: 100%;
    height: 20px;
    font-size: 11px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: url(https://forumstatic.ru/files/001b/c1/d6/31952.jpg);
    color: var(--sub_link);
    border-radius: 4px 4px 0 0;
    border-bottom: solid 1px var(--line);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.block_face_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.block_face_letter {
    font: 600 14px var(--font_accent);
    color: var(--accent);
    text-transform: uppercase;
    padding: 10px 0;
}

.block_face_letter p {
    height: auto !important;
    width: auto !important;
}

.block_face_body p, .name_face_body p {
    height: 96px;
    width: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    overflow-y: auto;
    align-items: center;
    padding-right: 7px !important;
}

.name_face_body p {
    margin-top: 25px !important;
}

@media screen and (max-width: 540px) {
    .face_them, .face_body_title p, .face_block, .name_block, .block_face_body p, .name_face_body p {
    width: 100%;
    }
}

0

6

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

поля профиля

иконки - обязательно pa-fld5

Код:
<a class="icon" href="ссылка на личную страницу"><img src="ссылка на иконку 25х25"></a>

лз - обязательно pa-fld1

Код:
<div class="lz"><a class="ank" href="ссылка на анкету">имя фамилия, 30</a><span>какой-то рандомный текст лз с <a href="link">ссылкой</a></div>

валюта - просто цифрой
посты - просто цифрой

плашки - обязательно pa-fld4

Код:
<div class="pls"><div>фраза сверху</div><span>фраза снизу</span></div>

0

7

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

Кастомизация фонов профиля

повторяем для каждого игрока кусок этого кода, id профиля можно найти в ссылке, например: .../profile.php?id=2

в любое окно стиля

Код:
/* Обои для ник перса */
[data-user-id="цифра id профиля"].post .post-author {
      background: url(ссылка на картинку 220х∞) no-repeat top var(--prof_box) !important;
}

Кастомизация плашек
в любое окно стиля

Код:
/* Плашка для имя фамилия */
[data-user-id="цифра id профиля"] .pls {
  background: url(ссылка на картинку 220х30) no-repeat top !important;
  color: #цвет_текста_hex !important;
}

0

8

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

личная страница
1. создаем страницу в админке, заполняем
2. вставляем ссылку на личную страницу в профиль игрока, поле с иконкой

Код:
<a class="icon" href="ссылка на личную страницу"><img src="ссылка на иконку 25х25"></a>

вставляем в новую страницу

Код:
<div id="modal-content">


<div class="lc_them">
<div class="lc_left">

<!-- блок слева - личная информация  -->
<div class="lc_left_info">
<img src="https://forumstatic.ru/files/001b/c1/d6/27345.jpg">
<div class="lc_name">имя фамилия</div>
<div class="lc_pers_info">
возраст: 00 лет<br>
профессия: коротко<br>
стаж: 00 лет
</div>
</div>

<!-- блок слева - твинки  -->
<div class="lc_left_twin">
<div class="lc_twin_title">твинки</div>
<div class="lc_twin_pers">
<a href="ссылка">имя фамилия</a>
<a href="ссылка">имя фамилия</a>
<a href="ссылка">имя фамилия</a>
</div>
</div>
</div>

<!-- блок справа - кнопки табов  -->
<div class="lc_right">
<input type="radio" name="lc_tab-group" id="tab1" checked>
<label for="tab1">кнопка 1</label>
<input type="radio" name="lc_tab-group" id="tab2">
<label for="tab2">кнопка 2</label>

<!-- блок справа - контент первого таба  -->
<div class="lc_tab-content" id="content1">
<div class="lc_tab_up">
<!-- блок справа - хронология -->
<div class="lc_tab_title">хронология</div>
<div class="lc_body_chron">
<div class="lc_tab_chron"><a href="">название эпизода</a><span>имена участников</span></div>
<div class="lc_tab_chron"><a href="">название эпизода</a><span>имена участников</span></div>
</div>
</div>

<!-- блок справа - подарки и ачивки -->
<div class="lc_tab_mid">
<div class="lc_gift">
<div class="lc_tab_title">подарки</div>
<div class="lc_gift_body">
<img src="https://forumstatic.ru/files/001b/c1/d6/38306.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/38306.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/38306.png" title="подпись к подарку">	
</div>
</div>

<div class="lc_aciv">
<div class="lc_tab_title">ачивки</div>
<div class="lc_aciv_body">
<img src="https://forumstatic.ru/files/001b/c1/d6/38306.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/38306.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/38306.png" title="подпись к подарку">	
</div>
</div>
</div>


<!-- блок справа - купоны -->
<div class="lc_tab_title">купоны</div>
<div class="lc_tab_buttom">
<div class="lc_kupon_body">
<div class="lc_kupon"><img src="https://forumstatic.ru/files/001b/c1/d6/38874.png"><span>бронь внешности</span><tab>на 7 дней</tab></div>
<div class="lc_kupon"><img src="https://forumstatic.ru/files/001b/c1/d6/38874.png"><span>бронь внешности</span><tab>на 7 дней</tab></div>
<div class="lc_kupon"><img src="https://forumstatic.ru/files/001b/c1/d6/38874.png"><span>бронь внешности</span><tab>на 7 дней</tab></div>
</div>
</div>


</div>

<!-- блок справа - контент второго таба  -->
<div class="lc_tab-content" id="content2">
<div class="lc_two" >

<!-- блок справа - фон -->
<div class="lc_two_left" >
<div class="lc_tab_title">фоны</div>
<div class="lc_tab_left">
<div class="lc_fon_body">
<img src="https://forumstatic.ru/files/001b/c1/d6/74123.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/74123.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/74123.png" title="подпись к подарку">	
<img src="https://forumstatic.ru/files/001b/c1/d6/74123.png" title="подпись к подарку">	
</div>
</div>
</div>

<!-- блок справа - плашки -->
<div class="lc_two_right" >
<div class="lc_tab_title">плашки</div>
<div class="lc_tab_right">
<div class="lc_pls_body">
<div class="lc_pls"><img src="https://forumstatic.ru/files/001b/c1/d6/70260.png"><span style="color: #000;">текст сверху</span><tab style="color: #000;">текст снизу</tab></div>	
<div class="lc_pls"><img src="https://forumstatic.ru/files/001b/c1/d6/70260.png"><span style="color: #000;">текст сверху</span><tab style="color: #000;">текст снизу</tab></div>	
<div class="lc_pls"><img src="https://forumstatic.ru/files/001b/c1/d6/70260.png"><span style="color: #000;">текст сверху</span><tab style="color: #000;">текст снизу</tab></div>	
<div class="lc_pls"><img src="https://forumstatic.ru/files/001b/c1/d6/70260.png"><span style="color: #000;">текст сверху</span><tab style="color: #000;">текст снизу</tab></div>	
</div>
</div>
</div>
</div>


<!-- блок справа - иконки -->
<div class="lc_tab_title">иконки</div>
<div class="lc_tab_buttom1">
<div class="lc_icon_body">
<img src="https://forumstatic.ru/files/001b/c1/d6/38874.png" title="текст иконки">
<img src="https://forumstatic.ru/files/001b/c1/d6/38874.png" title="текст иконки">
<img src="https://forumstatic.ru/files/001b/c1/d6/38874.png" title="текст иконки">
<img src="https://forumstatic.ru/files/001b/c1/d6/38874.png" title="текст иконки">
</div>
</div>


</div>
</div>
</div>
</div>

в любое окно стиля

Код:
/* модальное окно*/
#custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 9999;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#custom-modal.active {
  visibility: visible;
  opacity: 1;
}

#custom-modal .modal-content {
  max-width: 800px;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.3215686275);
          box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.3215686275);
  border-radius: 10px;
  font-family: Inter;
}

#custom-modal p {
  background: var(--body_box);
  color: var(--text);
  width: 100%;
  padding: 30px 0;
  margin: 0;
  text-align: center;
}

/* личная страница */
.lc_them {
  width: 800px;
    height: 600px;
    background: var(--body);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.lc_left {
    width: 240px;
    background: var(--bg);
    padding: 50px 25px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.lc_left_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

.lc_left_info img {
    width: 80px;
    height: 80px;
    border: solid 5px var(--body);
    border-radius: 5px;
}

.lc_name, .lc_twin_title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 3px 10px;
    background: var(--body_box);
    color: var(--accent);
    border-radius: 5px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.lc_pers_info {
    font-size: 11px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    color: var(--sub_link);
    line-height: 2;
}

.lc_left_twin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
}

.lc_twin_pers {
    max-height: 250px;
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5px;
}

.lc_twin_pers a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    text-decoration: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 3px 10px;
    background: var(--accent);
    color: var(--sub_link);
    border-radius: 5px;
    font-size: 11px;
    text-transform: lowercase;
    font-weight: bold;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.lc_twin_pers a:hover {
    opacity: 0.5;
    -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.lc_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 530px;
    margin: 70px 15px 20px 15px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 15px;
}

.lc_right input[type="radio"] {
    display: none;
}

.lc_right label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
    width: 165px;
    height: 30px;
    padding: 10px 20px;
    background: var(--body);
    border: solid 1px var(--line);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lc_right input[type="radio"]:checked + label {
    background: var(--quote_box);
    border: solid 1px var(--line);
    font-weight: bold;
    color: var(--text);
}

.lc_tab-content {
    display: none;
    height: 450px;
    width: 100%;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    padding: 20px;
    border: solid 1px var(--line);
    background: var(--body_box);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 10px;
    font-size: 12px;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
    display: block;
}

.lc_tab_up {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
}

.lc_tab_title {
    background: var(--accent);
    color: var(--sub_link);
    font: 600 14px var(--font_accent);
    padding: 3px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 5px; 
        margin-top: 10px;
}

.lc_body_chron {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 5px;
    max-height: 108px;
    overflow-y: scroll;
    padding-right: 5px;
}

.lc_tab_chron {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 10px;
    background: var(--body);
    border: solid 1px var(--line);
    border-radius: 5px;
    color: var(--text);
}

.lc_tab_chron a {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font_accent);
    font-size: 12px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 5px;
    -webkit-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}

.lc_tab_chron a:hover {
    opacity: 0.5;
    -webkit-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.lc_tab_chron span {
    font-size: 10px;
}

.lc_tab_chron a:before {
    content: "\ea19";
    font-family: "Material Icons";
    font-size: 12px;
    color: var(--text);
}

.lc_tab_mid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.lc_gift, .lc_aciv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 230px;
    gap: 10px;
}

.lc_gift_body, .lc_aciv_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-x: auto;
    background: var(--body);
    gap: 5px;
    border-radius: 5px;
    border: solid 1px var(--line);
}

.lc_gift_body img, .lc_aciv_body img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 2px rgb(0 0 0 / 22%);
            box-shadow: 1px 1px 2px rgb(0 0 0 / 22%);
}

.lc_tab_buttom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 80px;
    background: var(--body);
    border: solid 1px var(--line);
    border-radius: 5px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 10px;
}

.lc_kupon_body {
    padding-bottom: 5px;
    width: 488px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -ms-grid;
    display: grid;
    overflow-x: auto;
    height: 60px;
    gap: 5px;
    margin: 0 13px;
    grid-auto-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 2px;
}

.lc_kupon {
    width: 180px;
    height: 40px;
    display: -ms-grid;
    display: grid;
    font-size: 10px;
    background: var(--body);
    border: solid 1px var(--line);
    color: var(--text);
    border-radius: 5px;
    -ms-grid-rows: 1fr 1fr;
    -ms-grid-columns: 0.3fr 1fr;
        grid-template: 1fr 1fr / 0.3fr 1fr;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: center;
    cursor: default;
}

.lc_kupon img {
    width: 25px;
    height: 25px;
    display: -ms-grid;
    display: grid;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: 2 / 1 / 2;
    grid-row: 1 / -1;
}

.lc_kupon span {
    padding-top: 7px;
    font: 600 10px var(--font_accent);
    text-transform: uppercase;
    color: var(--accent);
}

.lc_tab {
    height: 20px;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    grid-area: 2 / 2 / 3;
    font-size: 9px;
}

.lc_two {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.lc_two_left, .lc_two_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 240px;
    gap: 10px;
}

.lc_tab_left, .lc_tab_right {
    background: var(--body);
    border-radius: 5px;
    border: solid 1px var(--line);
    width: 240px;
    height: 270px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lc_fon_body, .lc_pls_body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding: 0 5px;
    gap: 5px;
    width: 230px;
    height: 220px;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: start;
        align-content: flex-start;
}

.lc_fon_body img, .lc_pls_body img {
    width: 180px;
    height: 30px;
    border-radius: 5px;
}

.lc_pls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 180px;
    height: 30px;
    position: relative;
    cursor: default;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lc_pls span {
    position: absolute;
    width: 100%;
    top: 3px;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    text-transform: lowercase;
}

.lc_pls tab {
    position: absolute;
    width: 100%;
    top: 13px;
    display: block;
    text-align: center;
    font-size: 10px;
    text-transform: lowercase;
}

.lc_tab_buttom1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    background: var(--body);
    border: solid 1px var(--line);
    border-radius: 5px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 10px;
}

.lc_icon_body {
    margin: 0 10px;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    height: 35px;
    gap: 5px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.lc_icon_body img {
    width: 25px;
    height: 25px;
}

строго в html-верх, после скрипта смены стилей

Код:
<!--------------- модальное окно ---------------->
<script>
(function() {
  const modal = document.createElement("div");
  modal.id = "custom-modal";
  const content = document.createElement("div");
  content.className = "modal-content";
  modal.appendChild(content);
  document.body.appendChild(modal);

  modal.addEventListener("click", e => {
    if (e.target === modal) modal.classList.remove("active");
  });

  function openModal(url) {
    fetch(url)
      .then(r => r.arrayBuffer())
      .then(buf => new TextDecoder('windows-1251').decode(buf))
      .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, "text/html");
        const modalDiv = doc.querySelector("#modal-content");

        if (modalDiv) {
          content.innerHTML = modalDiv.innerHTML;
          modal.classList.add("active");

          setTimeout(() => {
            $('*[title]').not('*[title] *[title]').tipsy({ gravity: $.fn.tipsy.autoNS });
          }, 50);

          document.dispatchEvent(new Event("DOMContentLoaded"));
        } else {
          content.innerHTML = "<p>Для просмотра контента войдите или зарегистрируйтесь</p>";
          modal.classList.add("active");
        }
      })
      .catch(() => {
        content.innerHTML = "<p>Ошибка загрузки. Попробуйте еще раз</p>";
        modal.classList.add("active");
      });
  }

  document.body.addEventListener("click", e => {
    const link = e.target.closest(".icon");
    if (!link) return;
    e.preventDefault();
    openModal(link.href);
  });
})();
</script>

0

9

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

новости №11

22.03

https://forumstatic.ru/files/001b/a8/4b/62773.png

место для короткой цитаты в 1 строчку


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

лучшие на этой неделе

активисты

https://forumstatic.ru/files/001b/a8/4b/21720.png
https://forumstatic.ru/files/001b/a8/4b/21720.png
https://forumstatic.ru/files/001b/a8/4b/21720.png

пост эммы: Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatu

https://forumstatic.ru/files/001b/a8/4b/21720.png
https://forumstatic.ru/files/001b/a8/4b/21720.png
https://forumstatic.ru/files/001b/a8/4b/21720.png

постописцы

лучший эпизод

название эпизода

[hideprofile]

в любое окно стиля

Код:
/* оформление новостей */
.news_tabl {
width: 650px;
    height: auto;
    margin: 0 auto !important;
    background: var(--bg);
    border-radius: 10px;
    padding: 30px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
}

.news_body {
background: var(--body);
    padding: 15px 30px;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.news {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
}

.news_ava img {
  width: 80px;
    height: 80px;
    position: absolute;
    top: -55px;
    left: 30px;
    border: solid 5px var(--body) !important;
    border-radius: 5px;  
}

.news_tabl_tab {
    background: var(--body);
    padding: 5px 10px;
    border-radius: 5px;
    border: solid 1px var(--line);
    font-size: 11px;
}

.news_tabl_date {
    padding: 5px 10px;
    background: var(--accent);
    color: var(--sub_link);
    border-radius: 5px;
    border: solid 1px var(--line);
    font-size: 11px;
}

.news_quite {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-left: 100px;
}

.news_quite p {
    background: var(--body_box);
    padding: 3px 10px !important;
    border-radius: 5px;
    border: solid 1px var(--line);
    font-size: 10px;
    width: 100%;
    text-align: center;
}

.news_title, .news_title1 {
    width: 100%;
}

.news_title1 p {
    margin-top: 15px !important;
}

.news_title p, .news_title1 p {
    background: var(--body_box);
    padding: 3px 10px !important;
    border-radius: 5px;
    border: solid 1px var(--line);
    font-size: 11px;
    width: 100%;
    text-align: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.news_mid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px 0;
}

.news_activ, .news_writers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 150px;
    gap: 10px;
    -ms-flex-line-pack: justify;
        align-content: space-between;
}

.news_activ p, .news_writers p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 150px;
    gap: 5px;
}

.news_activ img, .news_writers img {
    position: unset;
    width: 40px !important;
    height: 40px !important;
    border-radius: 100%;
    outline: solid 2px var(--accent);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.news_bestpost {
    width: 230px;
    background: var(--body_box);
    padding: 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 10px;
    border-radius: 5px;
    border: solid 1px var(--line);
}

.news_body_bestpost p {
    height: 60px;
    overflow-y: scroll;
    padding-right: 7px !important;
}

.news_ep {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    gap: 15px;
    margin-top: 20px !important;
}

.news_body_ep a {
    font-size: 11px;
}

.news_ep .news_title {
    width: 150px;
}

.news_akt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.news_akt p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
}

.news_akt a {
    background: var(--accent);
    padding: 2px 10px;
    color: var(--sub_link) !important;
    font-size: 11px;
    border-radius: 5px;
}

.news_akt a:hover {
    opacity: 0.5;
}

@media screen and (max-width: 540px) {
    .news_tabl, .news_body, .news_activ, .news_writers, .news_activ p, .news_writers p, .news_bestpost, .news_ep .news_title {
    width: 100%;
    }
    
    .news_ava img {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    }
    
    .news_quite {
    padding: 10px 0;
    }
    
    .news_mid {
    gap: 10px;
    }
    
    .news_ep, .news_akt p  {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
}

0

10

  • Автор: KarKar
  • Администратор
  • KarKar
  • нука а теперь тут будет проба длинного текста?
  • Сообщений: 91
  • Уважение: +5
  • валюта: 1347

[hideprofile]

Код:
<!--HTML-->
<div class="prof_tabl">
<div class="prof_tabl_title">биржа труда</div>
<p class="prof_tabl_txt">
[х] — в данную сферу или профессию или вакансию временно ограничен набор персонажей;<br>
+1 — или любое другое число означает, что на данную вакансию требуется указанное количество персонажей;<br>
[имя/должность пунктиром] — всплывающая при наведении дополнительная информация о персонаже и его профессии, например предмет для преподавателей или узкая направленность специальности;<br>
 - локация авторская; этот же значок будет рядом с именем автора локации. по поводу взаимодействия/работы с локацией обращаться к владельцу;<br>
 - адрес локации;</p>
<div class="prof_body">

<div class="prof_tabs">

<input type="radio" name="prof_tab-group" id="tab1" checked>
<label for="tab1">образование</label>
    
<input type="radio" name="prof_tab-group" id="tab2">
<label for="tab2">медицина</label>
    
<input type="radio" name="prof_tab-group" id="tab3">
<label for="tab3">искусство</label>

<input type="radio" name="prof_tab-group" id="tab4">
<label for="tab4">полиция</label>

<input type="radio" name="prof_tab-group" id="tab5">
<label for="tab5">криминал</label>

<input type="radio" name="prof_tab-group" id="tab6">
<label for="tab6">журналистика</label>

<input type="radio" name="prof_tab-group" id="tab7">
<label for="tab7">другое</label>

<div class="prof_tab-content" id="content1">
<div class="prof_block">
<div class="prof_lock">название места работы 1</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>

<div class="prof_block">
<div class="prof_lock">название места работы 1</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>

<div class="prof_tab-content" id="content2">
<div class="prof_block">
<div class="prof_lock">название места работы 2</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>

<div class="prof_block">
<div class="prof_lock">название места работы 2</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>


<div class="prof_tab-content" id="content3">
<div class="prof_block">
<div class="prof_lock">название места работы 3</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>


<div class="prof_block">
<div class="prof_lock">название места работы 3</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>


<div class="prof_tab-content" id="content4">
<div class="prof_block">
<div class="prof_lock">название места работы 4</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>


<div class="prof_block">
<div class="prof_lock">название места работы 4</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>


<div class="prof_tab-content" id="content5">
<div class="prof_block">
<div class="prof_lock">название места работы 5</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>

<div class="prof_block">
<div class="prof_lock">название места работы 5</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>


<div class="prof_tab-content" id="content6">
<div class="prof_block">
<div class="prof_lock">название места работы 6</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>

<div class="prof_block">
<div class="prof_lock">название места работы 6</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>


<div class="prof_tab-content" id="content7">
<div class="prof_block">
<div class="prof_lock">название места работы 7</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>

<div class="prof_block">
<div class="prof_lock">название места работы 7</div>
<span>короткое описание</span>
<hr>
<ul>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
<li>должность - <a href="testkaramba.rusff.me">имя</a></li>
</ul>
</div>
</div>

</div>
</div>
</div>

любое окно стиля

Код:
/* биржа труда */
.prof_tabl {
    width: 700px;
    height: auto;
    margin: 0 auto !important;
    background: var(--bg);
    border-radius: 10px;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.prof_tabl_title {
    background: var(--body);
    padding: 5px 10px;
    border-radius: 5px;
    border: solid 1px var(--line);
    font-size: 11px;
    text-align: center;
}

.prof_tabl_txt {
    padding: 15px 20px !important;
    color: var(--sub_link);
}

.prof_body {
    padding: 20px;
    background: var(--body);
    border-radius: 5px;
    margin-top: 15px !important;
}

.prof_tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 600px;
    margin: 0 auto !important;
    gap: 10px;
}

.prof_tabs input[type="radio"] {
    display: none;
}

.prof_tabs label {
padding: 3px 15px;
    background: var(--body_box);
    border: solid 1px var(--line);
    cursor: pointer;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    border-radius: 5px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
    font-weight: bold;
}

.prof_tabs input[type="radio"]:checked + label {
background: var(--accent);
    border-bottom: solid 1px var(--line);
    color: var(--sub_link);
}

.prof_tab-content {
display: none;
    width: 100%;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    padding: 10px;
    border: solid 1px var(--line);
    background: var(--body_box);
    border-radius: 5px;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3, 
#tab4:checked ~ #content4,
#tab5:checked ~ #content5,
#tab6:checked ~ #content6,
#tab7:checked ~ #content7 {
    display: block;
}

.prof_block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 5px;
    padding: 10px 20px !important;
    border-radius: 5px;
    margin: 10px !important;
    border: solid 1px var(--line);
    background: var(--body);
}

.prof_lock {
    color: var(--accent);
    font-weight: bold;
    text-transform: uppercase;
}

.prof_block ul li {
    list-style: circle !important;
}

.prof_lock:before {
    content: "\e55c";
    font-family: "Material Icons";
    font-size: 11px;
    color: var(--text);
    padding-right: 5px;
}

@media screen and (max-width: 540px) {
    .prof_tabl {
    width: 100%;
    }
}

для учитывания скрипта смены стилей (вставляем в html-низ)

<!-- скрипт форматирования iframe-->
<script type="text/javascript">
function Transform_Code_Box_in_HTML(aX){
var TemLnk=aX.replace(/^(.*viewtopic\.php\?id=\d*).*$/ig,"$1");
var PstId=aX.replace(/^.*viewtopic\.php\?id=.*(#p\d+)$/ig,"$1");
var L=document.URL.replace(TemLnk,'');
if(L!=document.URL&&(L.slice(0,1)).search(/\d/ig)==-1 ){
L=$("div.topic "+PstId);
if(L.length==1){
var Lhtm=L.find(".post-content .code-box:first .scrollbox pre").text();
L.find(".post-content .code-box:first").replaceWith(Lhtm)
}}}
function Demo_HTML(Ts){var Ll=Ts.parents(".htmldemo").find(".code-box .scrollbox pre").text();
Ts.parents(".htmldemo").after('<div class="demHtml">'+Ll+'</div>');Ts.replaceWith(DemoButt0);
}
$(document).ready(function() {
$("#pun-viewtopic .post .code-box").each(function(){
if($(this).text().indexOf('<!--HTML-->')!=-1){
$(this).wrap('<div class="htmldemo"></div>')
$(this).replaceWith($('.htmldemo').text().split('<!--HTML-->')[1]);
}
});
});
</script>

0

Ответить
Страница: 1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


Вы здесь » Тестовик Карий » The Overlook Hotel » Внешности

Рейтинг форумов | Создать форум бесплатно