РЕДФИЛД, ШТАТ МЭН, США ///
/// КАКОЙ-ТО ТАМ ГОД
прости. прощай. привет...

zombie americana - bad trip

break

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

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

Вы здесь » break » LET’S PLAY HIDE AND SEEK » Тестовое сообщение

Тестовое сообщение

Страница: 1

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

1

Благодарим за выбор нашего сервиса!

0

2

лол

0

3

kjk

0

4

Код:
<!--HTML--><div class="htmldemo"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div id="googleme">
<div class="gmtopcircle1"></div>
<div class="gmtopcircle2"></div>
<div class="gmtopcircle3"></div>
<div class="gmtopbar"><div class="gmarrowleft"><i class="fas fa-arrow-left"></i></div><div class="gmarrowright" style="border:none"><i class="fas fa-arrow-right"></i></div><div class="gmreload"><i class="fas fa-redo"></i></div><div class="gmthreedot"><i class="fas fa-ellipsis-v"></i></div><div class="gmtbsearch">
    <div class="gmtopstar"><i class="far fa-star"></i></div>
  </div></div>
  <div class="gmoutbox"></div>
   <input type="radio" id="image" name="google" checked="">
<label for="image">Миссула</label>
<input type="radio" id="city" name="google">
<label for="city">О городе</label>
<input type="radio" id="about" name="google">
<label for="about">Окружающая среда</label>
<input type="radio" id="friends" name="google">
<label for="friends">О развлечениях</label>
<input type="radio" id="lovers" name="google">
<label for="lovers">Образование</label>
<input type="radio" id="enemies" name="google">
<label for="enemies">Структура города</label>
<div class="gmsearch">http://missoula.com/</div>
<div class="gmsearch1">http://missoula.com/about/city</div>
<div class="gmsearch2">http://missoula.com/about/environment</div>
<div class="gmsearch3">http://missoula.com/about/entertainments</div>
<div class="gmsearch4">http://missoula.com/about/education</div>
<div class="gmsearch5">http://missoula.com/about/city_structure</div>
<div class="gmmain1">
  <div class="gmpicture" style="background-image: url(https://forumupload.ru/uploads/0010/e3/9b/2/20555.png)"></div>
  <div class="gmmainname">Missoula</div>
  <div class="gmhovover"></div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> <a href="http://images.vfl.ru/ii/1585637712/ccbf4bd3/30057564.jpg"> is merrit wilson dead?</a></div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> how to banish a bitchy ghost</div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> merrit wilson funeral date</div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> is merrit wilson alive?</div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> was merrit wilson bisexual?</div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> how to dress like merrit wilson</div>
  <div class="gmdetailing"><span class="gmsi"><i class="fas fa-search"></i></span> did merrit wilson drink poison on purpose</div>
</div>


<div class="gmmain2">
  <textscroll1>
    <h13>Миссула</h13><hr>
<p class="otst1"> Расположена рядом с северными Скалистыми горами Монтаны в месте слияния трёх рек. Город-мечта для любителей активного отдыха. Вы можете покататься на байдарках, рафтах или тюбингах прямо в центре города или прогуляться на природе недалеко от вашего отеля (Я НЕ ЗНАЮ, КАК ЭТО СФОРМУЛИРОВАТЬ КРАСИВО, Я НЕ РУССКИЙ). Миссула известна своей форелью (ставшей знаменитой благодаря фильму «Там, где течёт река») и впечатляющей природной красотой. Возможности для отдыха на открытом воздухе безграничны.</p>
<p class="otst1">Миссула также является региональным центром торговли и кухни? с тремя торговыми районами и множеством ресторанов, кафе, кофеен и пивоварен на любой вкус. Город известен своим разнообразием культур, здесь туристы столкнутся с многообразием искусства и бесконечным множеством развлекательных мероприятий. Подумайте о симфоническом оркестре, театре, кинофестивалях, литературных вечерах в книжных магазинах, балете, опере и спорте. Все это и есть Миссула. Добро пожаловать!</p>
<p class="otst1"><b>Аэропорт:</b> Миссула-Интернешнел/Джонсон-Белл-Филд</p>
<p class="otst1"><b>Железнодорожная станция:</b> Уайтфиш (Сиг), Монтана</p><br>
<p class="otst1"></p><table><tbody><tr><td><b>Ближайшие города к Миссуле<br>
(время в пути на машине)</b></td><td>► Грейт-фолс (2 часа 45 минут)<br>
► Бозмен (3 часа)<br>
► Биллингс (5 часов)<br>
► Каллиспел (2 часа 15 минут)</td><td>► Хелена (1 час 50 минут)<br>
► Анаконда (1 час 37 минут)<br>
► Бьютт (1 час 50 минут)<br>
► Гамильтон (1 час)</td></tr></tbody></table><p></p>
<p class="otst1"></p><div class="spoiler">
  <details>
    <summary>ИНТЕРЕСНЫЕ ФАКТЫ</summary>
    <div><table><tbody><tr><td>► Миссула славится своим пивоварением. Пивоваренные заводы в Миссуле имеют множество местных вкусов, которые наверняка удовлетворят любителя пива в вас. Чувствуете жажду? Приходите попробовать то, что Миссула может предложить;<br><br>
► Миссула вошла в топ-30 самых креативных маленьких городов;<br><br>
► В центре города можно заняться сёрфингом, благодаря искусственной волне Бреннана, построенной прямо для удовольствия местных жителей и гостей города;<br><br>
► Миссула имеет 20 миль велосипедных дорожек, была признана одним из десяти лучших велосипедных городов в США и является домом для штаб-квартиры Международной ассоциации приключенческого велоспорта;<br><br>
► Джанет Рэнкин, первая женщина избранная в Конгресс США, родом из Миссулы;<br><br>
► Крупнейший в мире золотой самородок был добыт в этом районе;</td><td>► Первую пятницу каждого месяца во всех художественных галереях устраиваются бесплатные угощения для всех желающих;<br><br>
► Льюис и Кларк прошли мимо участка современной Миссулы в 1805 году;<br><br>
► Здесь проходит Международный хоровой фестиваль, который был впервые проведен в 1987 году и теперь собирает хоры со всего мира - от Австрии, Болгарии, Колумбии, Финляндии, Латвии, Малайзии, Перу и Испании - до Миссулы;<br><br>
► Медведи - это просто часть жизни здесь. Миссуляне знают все тонкости жизни в медвежьей стране и поддерживают веб-сайт Missoulabears.org, чтобы другие знали о наблюдениях;<br><br>
► В нескольких минутах езды находятся (как минимум) четыре города-призрака;<br><br>
► Миссула, хоть и славится своими стейками и мясными блюдами, очень расположена к веганам, и в каждом ресторане имеется веганское меню.</td></tr></tbody></table></div>
  </details>
</div><p></p>
<table><tbody><tr><td><center><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d103816.89222268133!2d-114.07340893800703!3d46.861372144393734!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x535dcc2a50f367cb%3A0xe9e31277ca94802e!2z0JzQuNGB0YHRg9C70LAsINCc0L7QvdGC0LDQvdCwLCDQodCo0JA!5e0!3m2!1sru!2sru!4v1663941885887!5m2!1sru!2sru" width="600" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></center></td><td><p class="otst1"><title1>Некоторые могут назвать этот город уникальным, крутым или модным. Другие будут воспринимать его как безмятежный, гостеприимный и полный естественной красоты. Перед вами город предстанет живым, активным и пульсирующим, с множеством занимательных мест и разнообразных активностей, которые нельзя упустить. Красота Миссулы в том, что в ней есть все, что вам нужно, и даже больше.</title1></p></td></tr></tbody></table>
  
</textscroll1></div>


<div class="gmgif" style="background-image: url(https://66.media.tumblr.com/1c52b3981fb5a25489307f41eb41fef9/tumblr_mxmpccfIwX1qcepzco3_250.gif)"></div>
<div class="gmmain3">
<title>об окружающей среде </title>
  <textscroll>
    <h12>Климат</h12><hr>
<p class="otst1">В Миссуле климат близок к умеренно-холодному. Самый теплый месяц года - июль. Среднегодовая температура - 6.8°C. Среднее количество осадков в год составляет 566 mm.</p>
<p class="otst1">Зимы обычно мягче, чем на большей части территории штата. Расположение Миссулы к западу от Скалистых гор позволяет избежать сильных похолоданий. Высота снега зимой в среднем составляет 39,5 дюйм (100 см). Период снегопадов – с 30 октября по 20 апреля.</p>
<p class="otst1">Как и в остальной части штата, лето очень солнечное, и в среднем суточные колебания температуры с конца июня по конец сентября превышают 17°C из-за относительной засушливости.</p>
<div class="spoiler">
  <details>
    <summary>КЛИМАТИЧЕСКАЯ КАРТА</summary>
    <div><img src="https://i.imgur.com/PTVGDmJ.png"></div>
  </details>
</div><p></p>
 <h12>Флора и фауна</h12><hr>
<p class="otst1">Город Миссула расположен рядом с северными Скалистыми горами. Местная дикая природа включает в себя популяции белохвостых оленей, лосей, медведей гризли, черных медведей, скопов, и лысых орлов. Реки вокруг Миссулы служат местом гнездования береговушек, северных пампасных ласточек и опоясанных пегих зимородков, также можно заметить другие виды птиц: певчую овсянку, кошачьего пересмешника, несколько видов лесных певунов, а также хохлатую желну. На гравийных отмелях можно заметить крикливых зуйков и пятнистых перевозчиков, охотящихся на насекомых. Реки обеспечивают холодную и чистую воду для местных рыб, таких как лосось и форель. Извилистые потоки также привлекают бобров и каролинских уток. В парках обитают различные змеи: черный полоз, садовый уж и резиновая змея.</p>
<p class="otst1"> Местная прибрежная растительность включает в себя иву и тополь; преобладает желтая сосна Пондероза - официальное дерево Монтаны. Из других местных видов растений распространены рогоз, очеретник, боярышник, черемуха и волчья ягода. К огорчению местных фермеров, Миссула также является домом для нескольких ядовитых сорняков, известные из которых: льнянка, василек, молочай, зверобой и лапчатка.</p>
  </textscroll>
</div>
<div class="gmmain4">
<title>friends</title>
  <textscroll>
    <hr><h1>This is a subtitle</h1><hr>
    This is some text right here. It'll scroll. This is <b>bold</b> and this is <i>italic</i>.<p></p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat. Tortor condimentum lacinia quis vel eros donec ac odio tempor. A condimentum vitae sapien pellentesque. Cursus mattis molestie a iaculis at erat pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Posuere ac ut consequat semper viverra nam. Habitant morbi tristique senectus et netus. Sit amet commodo nulla facilisi. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Adipiscing elit ut aliquam purus. Morbi quis commodo odio aenean sed adipiscing. Velit dignissim sodales ut eu sem integer. Massa id neque aliquam vestibulum morbi blandit cursus. Neque viverra justo nec ultrices dui. Lorem mollis aliquam ut porttitor leo a diam sollicitudin. Eget nulla facilisi etiam dignissim. Auctor elit sed vulputate mi sit amet. Metus dictum at tempor commodo ullamcorper a.<p></p>

Tellus id interdum velit laoreet. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Gravida cum sociis natoque penatibus et magnis dis parturient. Ipsum nunc aliquet bibendum enim facilisis gravida. Sed nisi lacus sed viverra tellus in hac habitasse platea. Tempus egestas sed sed risus pretium quam vulputate dignissim. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Semper risus in hendrerit gravida rutrum. Tincidunt augue interdum velit euismod. Aliquam malesuada bibendum arcu vitae. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Egestas sed sed risus pretium quam vulputate dignissim. In cursus turpis massa tincidunt. Ac felis donec et odio pellentesque diam volutpat. Vel quam elementum pulvinar etiam non quam lacus suspendisse. In mollis nunc sed id semper risus in hendrerit.
  </textscroll>
</div>
<div class="gmmain5">
<title>lovers</title>
  <textscroll>
    <h1>This is a subtitle</h1>
    This is some text right here. It'll scroll. This is <b>bold</b> and this is <i>italic</i>.<p></p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat. Tortor condimentum lacinia quis vel eros donec ac odio tempor. A condimentum vitae sapien pellentesque. Cursus mattis molestie a iaculis at erat pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Posuere ac ut consequat semper viverra nam. Habitant morbi tristique senectus et netus. Sit amet commodo nulla facilisi. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Adipiscing elit ut aliquam purus. Morbi quis commodo odio aenean sed adipiscing. Velit dignissim sodales ut eu sem integer. Massa id neque aliquam vestibulum morbi blandit cursus. Neque viverra justo nec ultrices dui. Lorem mollis aliquam ut porttitor leo a diam sollicitudin. Eget nulla facilisi etiam dignissim. Auctor elit sed vulputate mi sit amet. Metus dictum at tempor commodo ullamcorper a.<p></p>

Tellus id interdum velit laoreet. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Gravida cum sociis natoque penatibus et magnis dis parturient. Ipsum nunc aliquet bibendum enim facilisis gravida. Sed nisi lacus sed viverra tellus in hac habitasse platea. Tempus egestas sed sed risus pretium quam vulputate dignissim. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Semper risus in hendrerit gravida rutrum. Tincidunt augue interdum velit euismod. Aliquam malesuada bibendum arcu vitae. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Egestas sed sed risus pretium quam vulputate dignissim. In cursus turpis massa tincidunt. Ac felis donec et odio pellentesque diam volutpat. Vel quam elementum pulvinar etiam non quam lacus suspendisse. In mollis nunc sed id semper risus in hendrerit.
  </textscroll>
</div>
<div class="gmmain6">
  <title>Enemies</title>
  <textscroll>
    <h1>This is a subtitle</h1>
    This is some text right here. It'll scroll. This is <b>bold</b> and this is <i>italic</i>.<p></p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat. Tortor condimentum lacinia quis vel eros donec ac odio tempor. A condimentum vitae sapien pellentesque. Cursus mattis molestie a iaculis at erat pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Posuere ac ut consequat semper viverra nam. Habitant morbi tristique senectus et netus. Sit amet commodo nulla facilisi. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Adipiscing elit ut aliquam purus. Morbi quis commodo odio aenean sed adipiscing. Velit dignissim sodales ut eu sem integer. Massa id neque aliquam vestibulum morbi blandit cursus. Neque viverra justo nec ultrices dui. Lorem mollis aliquam ut porttitor leo a diam sollicitudin. Eget nulla facilisi etiam dignissim. Auctor elit sed vulputate mi sit amet. Metus dictum at tempor commodo ullamcorper a.<p></p>

Tellus id interdum velit laoreet. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Gravida cum sociis natoque penatibus et magnis dis parturient. Ipsum nunc aliquet bibendum enim facilisis gravida. Sed nisi lacus sed viverra tellus in hac habitasse platea. Tempus egestas sed sed risus pretium quam vulputate dignissim. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Semper risus in hendrerit gravida rutrum. Tincidunt augue interdum velit euismod. Aliquam malesuada bibendum arcu vitae. Sit amet tellus cras adipiscing enim eu turpis egestas pretium. Egestas sed sed risus pretium quam vulputate dignissim. In cursus turpis massa tincidunt. Ac felis donec et odio pellentesque diam volutpat. Vel quam elementum pulvinar etiam non quam lacus suspendisse. In mollis nunc sed id semper risus in hendrerit.
  </textscroll>
</div>
</div>

<style>
#googleme { background: #e7eaed; height: 450px; width: 892px; position: relative; margin: 20px auto 0px; border-radius: 10px; border: 1px solid #ddd; overflow: hidden;z-index: 3; }
.gmtopbar { position: absolute; top: 45px; height: 40px; background: #fff; width: 892px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.gmtbsearch { position: absolute; background: #eaeced; color: #7779; padding: 10px 20px; width: 719px; height: 10px; top: 4px; left: 105px; border-radius: 20px; border: 1px solid #ddd; font-family: arial; font-size: 12px; line-height: 100%; }
.gmtopcircle1 { height: 12px; width: 12px; background: #fc625d; position: absolute; border: 0.5px solid #bbb; border-radius: 100%; top: 16px; left: 15px; }
.gmtopcircle2 { height: 12px; width: 12px; background: #fec041; position: absolute; border: 0.5px solid #bbb; border-radius: 100%; top: 16px; left: 32px; }
.gmtopcircle3 { height: 12px; width: 12px; background: #35cc4b; position: absolute; border: 0.5px solid #bbb; border-radius: 100%; top: 16px; left: 49px; }
.gmtopstar { float: right; margin-right: -10px; margin-top: -1px; }
.gmarrowleft { color: #babcbe; font-size: 20px; position: absolute; top: 10px; left: 10px; }
.gmarrowright { color: #babcbe; font-size: 20px; position: absolute; top: 10px; left: 45px; }
.gmreload { color: #babcbe; font-size: 18px; position: absolute; top: 11px; left: 75px; }
.gmthreedot { color: #babcbe; font-size: 20px; position: absolute; top: 10px; right: 11px; }
#googleme input { display: none; }
#googleme label { position: relative; background: #e7eaed; border: none; height: 10px; width: 111px; left: 80px; display: inline-block; top: 15px; padding: 10px; font-family: arial; color: #5f6368; font-size: 12px; text-align: center; line-height: 100%; border-radius: 5px 5px 0px 0px; margin-right: -3px;}
#googleme label:after { content: ""; display: block; position: absolute; background: #bbb; height: 20px; width: 1px; right: 0px; top: 5px; }
#image:checked+label, #city:checked+label, #about:checked+label, #friends:checked+label, #lovers:checked+label, #enemies:checked+label { background: #fff; border-right: none; border-left: 1px solid #fff; z-index: 1; margin-left: -4px; border-bottom: 1px solid #fff; }
#image:checked+label:after, #city:checked+label:after, #about:checked+label:after, #friends:checked+label:after, #lovers:checked+label:after, #enemies:checked+label:after { display: none; }
.gmsearch, .gmsearch1, .gmsearch2, .gmsearch3, .gmsearch4, .gmsearch5 { position: absolute; color: #7779; width: 200px; top: 60px; left:120px; border-radius: 20px; font-family: arial; font-size: 12px; line-height: 100%; display: none; } 
#image:checked+label ~ .gmsearch { display: block; }
#city:checked+label ~ .gmsearch1 { display: block; }
#about:checked+label ~ .gmsearch2 { display: block; }
#friends:checked+label ~ .gmsearch3 { display: block; }
#lovers:checked+label ~ .gmsearch4 { display: block; }
#enemies:checked+label ~ .gmsearch5 { display: block; }
.gmoutbox { border: 10px solid #fff; position: absolute; height: 343px; width: 872px; bottom: 0px; }
.gmmain1 { height: 343px; background: none; width: 871px; position: relative; top: 66px; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#image:checked+label ~ .gmmain1 { opacity: 1; z-index: 2; } 
.gmpicture { position: absolute; height: 343px; width: 872px; background-size: cover; filter: grayscale(0%);}
.gmmain1:hover .gmpicture { filter: grayscale(100%); transition: 0.3s; transition-delay: 0s; }
.gmhovover { background: rgba(0,0,0,0.6); position: absolute; height: 343px; width: 872px; opacity: 0;  }
.gmmain1:hover .gmhovover { opacity: 1;  transition: 0.5s;}
.gmmainname { line-height: 130%;display: block; font-family: arial; position: absolute; font-weight: 900; font-size: 50px; color: black; background: #fff; mix-blend-mode: screen; width: 855px; text-align: center; bottom: 0px; padding: 10px; text-transform: lowercase; letter-spacing: 5px; left: 0px; border-top: 1px solid #ddd; transition: 0.5s;}
.gmmain1:hover .gmmainname { left: 978px; } 
.gmdetailing {line-height: 130%; position: absolute; width: auto; padding: 10px; height: auto; background: #fff; top: 20px; left: -350px; outline: 1px solid #ddd; color: #777; font-family: arial; font-size: 10px; }
.gmsi { padding-right: 5px; color: #7779; }
.gmsi1 { padding-right: 5px; color: #7779; }
.gmdetailing:nth-child(2n+1) { top: 65px;  }
.gmdetailing:nth-child(3n-1) { top: 110px;  }
.gmdetailing:nth-child(4n+1) { top: 155px;}
.gmdetailing:nth-child(5n+1) { top: 200px; }
.gmdetailing:nth-child(6n+3) { top: 245px;  }
.gmdetailing:nth-child(7n-4) { top: 290px;  }
.gmmain1:hover .gmdetailing { left: 20px;}
.gmmain1:hover .gmdetailing:nth-child(2n+1) {  }
.gmmain1:hover .gmdetailing:nth-child(3n-1) {}
.gmmain1:hover .gmdetailing:nth-child(4n+1) { }
.gmmain1:hover .gmdetailing:nth-child(5n+1) { }
.gmmain1:hover .gmdetailing:nth-child(6n+3) { }
.gmmain1:hover .gmdetailing:nth-child(7n-4) { }


.gmmain2 { height: 341px; background: #fff; width: 870px; position: relative; top: -277px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#city:checked ~ .gmmain2 { opacity: 1; z-index: 2; }
#about:checked ~ .gmmain3 { opacity: 1; z-index: 2; }
.gmmain3 { height: 341px; background: #fff; width: 870px; position: relative; top: -620px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#friends:checked ~ .gmmain4 { opacity: 1; z-index: 2; }
.gmmain4 { height: 341px; background: #fff; width: 870px; position: relative; top: -963px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#lovers:checked ~ .gmmain5 { opacity: 1; z-index: 2; }
.gmmain5 { height: 341px; background: #fff; width: 870px; position: relative; top: -1306px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#enemies:checked ~ .gmmain6 { opacity: 1; z-index: 2; }
.gmmain6 { height: 341px; background: #fff; width: 870px; position: relative; top: -1649px; outline: 10px solid #fff; border: 1px solid #ddd; left: 10px; overflow: hidden; opacity: 0; z-index: 1; }
#googleme title {
    z-index: 1;
    border-bottom: 1px solid #ddd;
    line-height: 86%;
    position: absolute;
    top: 0px;
    font-family: arial;
    font-size: 44px;
    color: #bd8b48d6;
    background: #fff;
    width: 892px;
    text-align: right;
    text-transform: lowercase;
    display: block;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    letter-spacing: 5px;
    font-weight: 900;
}
#googleme textscroll { display: block; border: 20px solid white; width: 838px; height: 220px; top: 85px; position: absolute; left: 0px; text-align: justify; font-size: 11px; font-family: arial; color: #777; overflow: auto; line-height: 160%; padding-right: 5px; }
#googleme h12 { font-family: arial; display: block; font-size: 30px; color: #e5d3db; text-transform: lowercase; letter-spacing: 4px; padding: 0px; margin: 0px; margin-bottom: 15px; margin-top: 5px; font-weight: 600; }
#googleme b {font-size: 12px; color: #bd8b48d6; font-weight: 600; font-family: arial;}
#googleme textscroll i { border-bottom: 1px solid #e5d3db; font-weight: 300; }
#googleme textscroll1 i { border-bottom: 1px solid #e5d3db; font-weight: 300; }
#googleme textscroll::-webkit-scrollbar { width: 1px; } #googleme textscroll::-webkit-scrollbar-track { background: none!important; border: none !important; } #googleme textscroll::-webkit-scrollbar-thumb { background: #ddd !important; border: none !important; } 
.gmgif {position: absolute; height: 60px; width: 60px; background-size: cover;top: 110px; left: 30px; opacity: 0;z-index: 0; border: 1px solid #ddd; filter: grayscale(100%);border-radius: 100%;}
.otst1 {text-indent: 25px;  padding: 0 1px 0 0 !important;}
#about:checked ~ .gmgif,  #friends:checked ~ .gmgif, #lovers:checked ~ .gmgif, #enemies:checked ~ .gmgif {opacity: 1; z-index: 3;}
#googleme title1 {
    z-index: 1;
    position: relative;
    font-family: arial;
    font-size: 13px;
    top: -2px;
    color: #9f9e9e;
    background: #e6e6e66b;
    width: auto;
    text-align: center;
    text-transform: inherit;
    display: block;
    padding: 10px;
    letter-spacing: 1px;
    font-weight: 600;
    height: 155px;
    font-style: italic;
    padding-top: 35px;
}

#googleme h13 {
    font-family: arial;
    display: block;
    font-size: 39px;
    color: #bd8b48d6;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 3px;
    margin: 0px;
    margin-bottom: 15px;
    margin-top: 5px;
    font-weight: 900;
    text-align: right;
}
#googleme textscroll1 {
    display: block;
    border: 20px solid white;
    width: 838px;
    height: 340px;
    top: -8px;
    position: absolute;
    left: 0px;
    text-align: justify;
    font-size: 11px;
    font-family: arial;
    color: #777;
    overflow: auto;
    line-height: 160%;
    padding-right: 5px;
}

#googleme textscroll1::-webkit-scrollbar-thumb {
    background: #ddd !important;
    border: none !important;
}
#googleme textscroll1::-webkit-scrollbar { width: 1px; }

details {
  display: block;
  border: 1px solid silver;
  border-radius: 4px;
  padding: .5em;
}
details summary {
  display: list-item;
  margin: -.5em;
  padding: .5em;
color: #bd8b48d6;
    text-align: center;
    font-family: arial;
    font-size: 14px;
    cursor: pointer;
}
details[open] > summary {
  margin-bottom: .5em;
  border-bottom: 1px solid silver;
}

</style> </div>

0

5

т.е. он работает только при отправке

0

6

скрытый текст

0

7

бум

0

8

ССЫЛКА
жирный
курсив
подчеркнутый
зачеркнутый

0

9

[html]<div id="spiritworkroom">
  <div class="spiritfirst">
    <div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
    <div class="spiritfirsttitle">от вещего духа
      <subtitle>однако, дратути</subtitle></div>
    <div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
      <about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
  </div>
 
  <div class="spiritsecond">
<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1">информация</label>

    <input id="tab2" type="radio" name="tabs">
    <label for="tab2">вопросник</label>

    <input id="tab3" type="radio" name="tabs">
    <label for="tab3">портфолио</label>

    <section id="content-tab1">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
        </p>
    </section> 
    <section id="content-tab2">
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.

Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.

Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.

        </p>
    </section>
    <section id="content-tab3">
        <p>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
    </p>
    </section>   
</div>
  </div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)}

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}

.tabs {
padding: 0px;
margin: 0 auto;
}

.tabs>section {
display: none;
padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

@keyframes fadeIn {
from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
}
to {
    transform: translate(0px,0);
}
}

.tabs>input {
display: none;
position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>[/html]

0

10

[html]<style>
.korpus0 { position: relative; }

.korpus0 > div, .korpus0 > input {
  display: none;
  min-height: 364px; /* 90px ×  вкладки */
}

.korpus0 label {
position: absolute;
    right: auto;
    top: 0;
    width: 217px;
    height: 90px;
    border: 1px solid #aaa;
    line-height: 0px;
    text-align: center;
    cursor: pointer;
}
.korpus0 label:nth-of-type(2) { top: 92px; /* 90px + 1px border */ }
.korpus0 label:nth-of-type(3) { top: 184px; /* 90px + 1px border первой вкладки + 1px border второй вкладки */  }
.korpus0 label:nth-of-type(4) { top: 276px; /* 90px + 1px border первой вкладки + 1px border второй вкладки */  }
.korpus0 input[type="radio"]:checked + label { border: 1px solid #fff; }

.korpus0 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus0 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus0 > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 1px 1px 1px 222px; border: 1px solid #aaa; background: #a1a4a7; }
.korpus0 > input:nth-of-type(4):checked ~ div:nth-of-type(4) { display: block; padding: 1px 1px 1px 222px; border: 1px solid #aaa;  background: #a1a4a7;}
</style>
<div class="korpus0">
  <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1"><img src="https://i.imgur.com/SAVsfkZ.png"></label>
<input type="radio" name="odin" id="vkl2"/><label for="vkl2"><img src="https://i.imgur.com/0aepWOE.png"></label>
<input type="radio" name="odin" id="vkl3"/><label for="vkl3"><img src="https://i.imgur.com/qe3FXP1.png"></label>
<input type="radio" name="odin" id="vkl4"/><label for="vkl4"><img src="https://i.imgur.com/YkxomZy.png"></label>
  <div>первая вкладка</div>
  <div>вторая вкладка</div>
  <div>третья вкладка</div>
  <div>четвертая вкладка</div>
</div>[/html]

0

11

<!----------------------- кастомизация профиля (с) nell -->
<script>
  $(document).ready(function(){
    const Cookies = {
      set: (name, value, days) => {
        const expires = days ? `; expires=${new Date(Date.now() + days * 864e5).toUTCString()}` : "";
        document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
      },
      get: name => document.cookie.split('; ').reduce((r, v) => {
        const parts = v.split('=');
        return parts[0] === name ? decodeURIComponent(parts[1]) : r
      }, '')
    };

    const classOptions = [
      'bigavatar', 'middleavatar', 'smallavatar',
      'squareavatar', 'circleavatar',
      'downavatar', 'upavatar',
      'bigbanner', 'middlebanner', 'smallbanner',
      'onshadow', 'offshadow'
    ];

    function setClass(...classes) {
      $('html').removeClass(classOptions.join(' ')).addClass(classes.join(' '));
      Cookies.set('class_name', classes.join(','), 60);
      $('#styleSwitch .button, #styleSwitch2 .button, #styleSwitch3 .button, #styleSwitch4 .button, #shadowSwitch .button').removeClass('selected');
      classes.forEach(cls => $(`#${cls}`).addClass('selected'));
    }

    function getClassFromCookie() {
      const cookieValue = Cookies.get('class_name');
      return cookieValue ? cookieValue.split(',') : ['bigavatar', 'squareavatar', 'downavatar', 'middlebanner', 'onshadow'];
    }

    function handleClick(classType, buttonId) {
      $(`#${buttonId} .button`).on('click', function(){
        const currentClasses = getClassFromCookie();
        const newClass = this.id;
        const classMap = {
          size: [newClass, currentClasses[1], currentClasses[2], currentClasses[3], currentClasses[4]],
          shape: [currentClasses[0], newClass, currentClasses[2], currentClasses[3], currentClasses[4]],
          position: [currentClasses[0], currentClasses[1], newClass, currentClasses[3], currentClasses[4]],
          banner: [currentClasses[0], currentClasses[1], currentClasses[2], newClass, currentClasses[4]],
          shadow: [currentClasses[0], currentClasses[1], currentClasses[2], currentClasses[3], newClass]
        };
        setClass(...classMap[classType]);
        return false;
      });
    }

    handleClick('size', 'styleSwitch');
    handleClick('shape', 'styleSwitch2');
    handleClick('position', 'styleSwitch3');
    handleClick('banner', 'styleSwitch4');
    handleClick('shadow', 'shadowSwitch');

    setClass(...getClassFromCookie());
  });

  function setClassNameMobileOn(className) {
    console.log("Мобильная специфическая функциональность для", className);
  }
</script>

0

12

<div class="bg-top" style="display: none;"></div>
<div id="chprof">
<div id="chprofbtn"></div>

  <span>размер авы</span>
  <div id="styleSwitch">
    <button id="bigavatar" class="button" title="большая ава"></button>
    <button id="middleavatar" class="button" title="средняя ава"></button>
    <button id="smallavatar" class="button" title="мелкая ава"></button>
  </div>

  <span>тип авы</span>
  <div id="styleSwitch2">
    <button id="squareavatar" class="button" title="квадратная ава"></button>
    <button id="circleavatar" class="button" title="круглая ава"></button>
  </div>

  <span>высота авы</span>
  <div id="styleSwitch3">
    <button id="downavatar" class="button" title="опустить аву"></button>
    <button id="upavatar" class="button" title="поднять аву"></button>
  </div>

  <span>размер баннера</span>
  <div id="styleSwitch4">
    <button id="bigbanner" class="button" title="большой баннер">150</button>
    <button id="middlebanner" class="button" title="средний баннер">130</button>
    <button id="smallbanner" class="button" title="мелкий баннер">110</button>
  </div>

  <span>градиент баннера</span>
  <div id="shadowSwitch">
    <button class="button" id="onshadow" title="вкл градиент">on</button>
    <button class="button" id="offshadow" title="отк градиент">off</button>
  </div>

</div>

<script>
$("#chprofbtn").on("click",function(){$("#chprof").toggleClass("active")});
$("#styleSwitch").on("click",function(){$(".buttonf").toggleClass("active")});
</script>

<script>
    $('#chprof').click(function() {
        if ($(this).hasClass('active')) {
            $('.bg-top').css('display', 'block'); // Устанавливаем display: block если li активен
        } else {
            $('.bg-top').css('display', 'none'); // Удаляем display: block если li не активен
        }
    });

    $(document).click(function(event) {
        if (!$(event.target).closest('#chprof').length && !$(event.target).closest('#chprofbtn').length) {
            $('.bg-top').css('display', 'none'); // Устанавливаем display: none
            $('#chprof').removeClass('active'); // Удаляем класс active у #chprof
        }
    });
</script>

<!----------------------- авы для разных дизайнов (с) nell -->
<script async type="text/javascript">
  $(function() {
    // Функция для установки стиля
    function setStyle(style) {
      updateAvatars(style); // Обновляем аватары с учетом нового стиля
      setCookie('style', style, 7); // Сохраняем выбранный стиль в куки
    }

    // Функция для обновления аватаров
    function updateAvatars(style) {
      const users = [
        { id: '2', ocean: 'https://forumstatic.ru/files/001c/2a/af/89106.jpg', dark: 'https://forumstatic.ru/files/001c/2a/af/60135.jpg' },
        { id: '17', ocean: 'https://forumstatic.ru/files/001c/2a/af/69648.jpg', dark: 'https://forumstatic.ru/files/001c/2a/af/96685.jpg' },
        { id: '18', ocean: 'https://forumstatic.ru/files/001c/2a/af/53061.jpg', dark: 'https://forumstatic.ru/files/001c/2a/af/24059.jpg' }
      ];
      users.forEach(({ id, ocean, dark }) => {
        const newSrc = style === 'ocean' ? ocean : dark;
        $(`[data-user-id="${id}"] .pa-avatar img, #viewprofile-next.id-${id} #pa-avatar img`).attr('src', newSrc);
        $(`[data-user-id="${id}"] .pa-avatar`).removeClass('ocean dark').addClass(style); // Устанавливаем класс стиля для pa-avatar
      });
    }

    // Обработчик клика по элементам списка стилей
    $('#stylelist li').click(function() {
      const style = $(this).attr('data'); // Получаем значение атрибута data у выбранного li
      setStyle(style); // Устанавливаем выбранный стиль
      $('#stylelist li').removeClass('active'); // Удаляем класс active у всех li
      $(this).addClass('active'); // Добавляем класс active к выбранному li
    });

    // Функция для установки куки
    function setCookie(name, value, days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
    }

    // Функция для получения значения куки
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      return parts.length === 2 ? parts.pop().split(';').shift() : "";
    }

    // Установка начального стиля при загрузке страницы
    setStyle(getCookie('style') || 'ocean); // Установка начального стиля

    // Вызываем функцию setStyle после каждого завершенного AJAX-запроса
    $(document).ajaxComplete(function() {
      setStyle(getCookie('style') || 'ocean'); // Установка текущего стиля после AJAX-запроса
    });
  });
</script>

0

13

тут что-то

0

14

[hideprofile]

[html]
<div class="one">
<bodyprofile>
<infopers><img src="https://64.media.tumblr.com/51357d1a8880df431d7d464ed1f6b415/af77ddb01201a7de-7a/s250x400/9728f1c9d36576f7460aadbb0cbef93f21114e39.gif">
<opisanie>
<name>Espen Bradshaw</name>
<geo>саннивейл, северный район</geo>
<tvink><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a></tvink>
<div class="facts"><ul>
<li>РОДНОЙ ГОРОД: САННИВЕЙЛ</li>
  <li>СВЯЗИ: <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a></li>
  <li>ДЕЯТЕЛЬНОСТЬ: СТУДЕНТ</li>
  <li>ДОПОЛНИТЕЛЬНО: ЖИВЕТ В ОБЩЕЖИТИИ УНИВЕРСИТЕТА, ДЕВСТВЕННО ПРЕКРАСЕН;</li></ul></div>
<citate>You make me lose it, go insane</citate>
</opisanie>
</infopers>
<div class="tablstr">
    <input checked id="tablstr-btn-1" name="tablstr-btn" type="radio">
    <label for="tablstr-btn-1">player</label>
    <input id="tablstr-btn-2" name="tablstr-btn" type="radio">
    <label for="tablstr-btn-2">Вкладка 2</label>
    <input id="tablstr-btn-3" name="tablstr-btn" type="radio">
    <label for="tablstr-btn-3">Вкладка 3</label>
    <div class="tablstr-content" id="content-1">
    <vse>  <plashka><n>плашки</n>
<div class="pl">
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="plvp"><img src="https://forumstatic.ru/files/001b/e6/5f/61305.png"><b>игрок сезона</b><m>осенний фир 2023</m></div>
</div></plashka>
<ost><kupons><n>купоны</n>
<div class="kupon">
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
</div> </kupons>
<episod><n>эпизоды</n>
<div class="episode">
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
</div>
</episod>
</ost> </vse>
    </div>
    <div class="tablstr-content" id="content-2">
    <ob> <playlist><n>плейлист</n>
<div class="music">
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya style="background: #c9c9c9;"><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
</div></playlist>
<artefacts></artefacts></ob>
    </div>
    <div class="tablstr-content" id="content-3">
      Содержимое 3... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum, vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum sapiente ex.
    </div>
  </div>
</bodyprofile></div>
<style>
.tablstr {
    display: flex;
    flex-wrap: wrap;
  }

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

.tablstr-content {
    display: none;
    width: 100%;
    margin-top: 5px;
    background: #e0e0e0;
    padding: 10px;
    border-radius: 15px;
    height: 90%;
}

  #tablstr-btn-1:checked~#content-1,
  #tablstr-btn-2:checked~#content-2,
  #tablstr-btn-3:checked~#content-3 {
    display: block;
  }

.tablstr > label {
    display: block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    text-decoration: none;
    color: #000000;
    border: 0;
    border-radius: 15px;
    background: #e0e0e0;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Helvetica Neue';
    letter-spacing: 1px;
    height: 3%;
    width: 160px;
    text-align: center;
    margin-left: 10px;
}

  .tablstr > input[type="radio"]:checked + label {
    cursor: default;
    color: #fff;
    background-color: #5b5e63;
  }
.pl::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.facts::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.kupon::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.episode::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.one {
    width: 835px;
    height: 450px;
    background: #c9c9c9;
    border-radius: 25px;
    margin-bottom: 55px;
}

bodyprofile {
    padding: 15px;
    position: relative;
    display: flex;
    height: 93.5%;
    gap: 10px;
}

infopers {
    display: flex;
    flex-direction: column;
    width: 180px;
    height: 98.5%;
    border-right: 1px solid #e0e0e0;
    padding: 10px;
}

img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 15px;
    /* box-shadow: 0px 2px 14px #373030; */
    /* padding: 5px; */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}
opisanie {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
}
name {
    font-family: 'Helvetica Neue';
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    text-transform: uppercase;
    padding: 5px 5px 0px 5px;
    height: 6%;
    position: relative;
}
geo {
color: #a1a1a1;
    text-transform: uppercase;
    font-size: 8px;
    font-family: 'Helvetica Neue';
    letter-spacing: 0.5px;
    padding: 0px 5px 9px 5px;
    text-align: right;
    height: 3%;
    position: relative;
    margin-top: -20px !important;
}
tvink {
    display: flex;
    height: 6%;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    margin-top: -20px !important;
    position: relative;
    background: #e0e0e0;
    padding: 5px;
    border-radius: 15px;
}
.facts {
    overflow: auto;
    font-size: 11px;
    font-family: 'Helvetica Neue';
    text-transform: lowercase !important;
    height: 50%;
    position: relative;
    margin-top: -15px !important;
}
opisanie citate {
    font-family: 'Helvetica Neue';
    font-size: 11px;
    text-transform: lowercase;
    color: #9197ab;
    font-style: italic;
    height: auto;
    max-height: 15%;
    text-align: right;
    width: 96%;
    position: relative;
    margin-top: 0px !important;
    padding: 5px;
}

facts ul, facts li, facts dd, facts dt, facts dl {
    list-style-type: square !important;
    margin-left: 8px !important;
    padding: 1px !important;
}

vse {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 25px;
    align-items: center;
}
.pl {
    width: 100%;
    margin-top: 8px !important;
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: 4px;
    overflow: auto;
    position: relative;
    border-radius: 15px;
    outline: 1px solid #c9c9c9;
    padding: 5px;
    border: 3px solid #e0e0e0;
}

plashka {
    width: 25%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

plashka n {
    font-family: 'Helvetica Neue';
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    padding: 5px;
    background: #e0e0e0;
    width: 5%;
    position: absolute;
    text-transform: uppercase;
    color: #95a6bb;
    margin-top: -10px !important;
    margin-left: 93px !important;
}
ost {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 73%;
    height: 100%;
}
kupons {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 50%;
}
kupons n {
    font-family: 'Helvetica Neue';
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    padding: 5px;
    background: #e0e0e0;
    width: 5%;
    position: absolute;
    text-transform: uppercase;
    color: #95a6bb;
    margin-top: -10px !important;
    margin-left: 9px !important;
}
episod {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 43%;
}
episod n {
    font-family: 'Helvetica Neue';
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    padding: 5px;
    width: 5%;
    position: absolute;
    text-transform: uppercase;
    color: #95a6bb;
    margin-top: -20px !important;
    margin-left: 353px !important;
}
.plvp {
    width: 100% !important;
    height: 26px !important;
    position: relative;
margin: 0px !important;
}
.plvp img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.plvp b {
    display: flex;
    height: 8px;
    text-transform: uppercase;
    text-align: center;
    color: #ffaf00;
    position: absolute;
    top: 5px;
    text-shadow: 0 0 2px black;
    letter-spacing: 1px;
    font-weight: bold;
    width: 100%;
    font-size: 9px;
    font-family: 'Helvetica Neue';
    justify-content: center;
    align-items: center;
}
.plvp m {
    display: flex;
    color: #bfbdb8;
    text-transform: lowercase;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
font-family: 'Helvetica Neue';
    top: 11px;
    height: 10px;
    font-size: 8px;
    justify-content: center;
    align-items: flex-start;
}
.kupon {
    width: 97%;
    margin-top: 8px !important;
    display: flex;
    height: 100%;
    flex-direction: row;
    gap: 4px;
    overflow: auto;
    position: relative;
    border-radius: 15px;
    outline: 1px solid #c9c9c9;
    padding: 5px;
    border: 3px solid #e0e0e0;
    flex-wrap: wrap;
}
.kup {
    width: 190px;
    height: 26px !important;
    position: relative;
    margin: 0px !important;
    padding: 5px;
    border-radius: 10px;
    background: #c9c9c9;
    border: 1px solid #adadad;
}
.kup b {
    display: flex;
    height: 8px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 5px;
    letter-spacing: 1px;
    font-weight: bold;
    width: 96%;
    font-size: 10px;
    font-family: 'Helvetica Neue';
    justify-content: center;
    align-items: center;
}
.kup m {
    display: flex;
    color: #343634;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    font-weight: 600;
    top: 18px;
    font-family: 'Helvetica Neue';
    letter-spacing: 1px;
    height: 10px;
    font-size: 8px;
    justify-content: center;
    align-items: flex-start;
}

.episode {
    width: 97%;
    margin-top: 1px !important;
    display: flex;
    height: 100%;
    flex-direction: row;
    gap: 4px;
    overflow: auto;
    position: relative;
    border-radius: 15px;
    outline: 1px solid #c9c9c9;
    padding: 5px;
    border: 3px solid #e0e0e0;
    flex-wrap: wrap;
}
.ep {
    width: 190px;
    height: 26px !important;
    position: relative;
    margin: 0px !important;
    padding: 5px;
    border-radius: 10px;
    background: #c9c9c9;
    border: 1px solid #adadad;
}
.ep b {
    display: flex;
    height: 8px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 5px;
    letter-spacing: 1px;
    font-weight: bold;
    width: 96%;
    font-size: 10px;
    font-family: 'Helvetica Neue';
    justify-content: center;
    align-items: center;
}
.ep m {
    display: flex;
    color: #343634;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    font-weight: 600;
    top: 18px;
    font-family: 'Helvetica Neue';
    letter-spacing: 1px;
    height: 10px;
    font-size: 8px;
    justify-content: center;
    align-items: flex-start;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet">[/html]




0

15

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

0

16

[html]<style>
.namehierarchy {
    width: 90%;
    font-size: 14px;
    color: #167034;
    text-align: center;
}

.hierarchy {
    width: 90%;
    height: auto;
    padding: 30px;
    margin-bottom: 40px;
}

.opisanie {
    width: 97%;
    height: 97%;
    background: #e0e0e0;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.tabhell {
    display: flex;
    flex-wrap: wrap;
  }

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

.tabhell-content {
    display: none;
    width: 100%;
    margin-top: 5px;
    background: #e0e0e0;
    padding: 10px;
    border-radius: 15px;
    height: 90%;
}

  #tabhell-btn-1:checked~#content-1,
  #tabhell-btn-2:checked~#content-2,
  #tabhell-btn-3:checked~#content-3 {
    display: block;
  }

#content-1 {
    background: url(https://forumstatic.ru/files/001c/38/2d/12919.png) center;
    height: 780px;
    padding: 30px;
}
#content-2 {
    background: url(https://forumstatic.ru/files/001c/38/2d/12919.png) center;
    height: 780px;
    padding: 30px;
}
#content-3 {
    background: url(https://forumstatic.ru/files/001c/38/2d/12919.png) center;
    height: 780px;
    padding: 30px;
}
.tabhell > label {
    display: block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    text-decoration: none;
    color: #000000;
    border: 0;
    border-radius: 15px;
    background: #e0e0e0;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Helvetica Neue';
    letter-spacing: 1px;
    height: 3%;
    width: 160px;
    text-align: center;
    margin-left: 66px;
}

  .tabhell > input[type="radio"]:checked + label {
    cursor: default;
    color: #fff;
    background-color: #5b5e63;
  }
</style>
<div class="hierarchy"><div class="tabhell">
    <input checked id="tabhell-btn-1" name="tabhell-btn" type="radio">
    <label for="tabhell-btn-1">ад</label>
    <input id="tabhell-btn-2" name="tabhell-btn" type="radio">
    <label for="tabhell-btn-2">земля</label>
    <input id="tabhell-btn-3" name="tabhell-btn" type="radio">
    <label for="tabhell-btn-3">рай</label>
    <div class="tabhell-content" id="content-1">
<div class="opisanie"><ierarh>тут иерархия демонов</ierarh>
<vnesh>особенности внешностей</vnesh>
</div>
    </div>
    <div class="tabhell-content" id="content-2">
<div class="opisanie"><ierarh>тут иерархия демонов</ierarh></div>
    </div>
    <div class="tabhell-content" id="content-3">
<div class="opisanie"><ierarh>тут иерархия демонов</ierarh></div>
    </div>
  </div></div>[/html]
[hideprofile]

0

17

<a id="jo" class="modal-link" href="#" data-reveal-id="character"><div class="plvp"> </div></a>

0

18

[hideprofile]

[html]
<div id="character">
<bodyprofile>
<infopers><img src="https://64.media.tumblr.com/51357d1a8880df431d7d464ed1f6b415/af77ddb01201a7de-7a/s250x400/9728f1c9d36576f7460aadbb0cbef93f21114e39.gif">
<opisanie>
<name>Espen Bradshaw</name>
<geo>саннивейл, северный район</geo>
<tvink><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a><a href="http://fear.rusff.me/profile.php?id=7" title="имя на анг"><i class="fa fa-user" aria-hidden="true"></i></a></tvink>
<div class="facts"><ul>
<li>РОДНОЙ ГОРОД: САННИВЕЙЛ</li>
  <li>СВЯЗИ: <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a>, <a href="http://fear.rusff.me/profile.php?id=7" class="lztl">brandon jennings</a></li>
  <li>ДЕЯТЕЛЬНОСТЬ: СТУДЕНТ</li>
  <li>ДОПОЛНИТЕЛЬНО: ЖИВЕТ В ОБЩЕЖИТИИ УНИВЕРСИТЕТА, ДЕВСТВЕННО ПРЕКРАСЕН;</li></ul></div>
<citate>You make me lose it, go insane</citate>
</opisanie>
</infopers>
<div class="tablstr">
    <input checked id="tablstr-btn-1" name="tablstr-btn" type="radio">
    <label for="tablstr-btn-1">player</label>
    <input id="tablstr-btn-2" name="tablstr-btn" type="radio">
    <label for="tablstr-btn-2">Вкладка 2</label>
      <div class="tablstr-content" id="content-1">
    <vse> 
<kupons><n>купоны</n>
<div class="kupon">
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
<div class="kup"><b>игрок сезона</b><m>осенний фир 2023</m></div>
</div> </kupons>
<episod><n>эпизоды</n>
<div class="episode">
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
<div class="ep"><a href="http://fear.rusff.me/profile.php?id=7"><b>игрок сезона</b><m>осенний фир 2023</m></a></div>
</div>
</episod>
</vse>
    </div>
    <div class="tablstr-content" id="content-2">
    <ob> <playlist><n>плейлист</n>
<div class="music">
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya style="background: #c9c9c9;"><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
<pesnya><n>Mr. Sticky Fingers</n>
<str><t></t></str>
<ic></ic><isp>Alex Who?</isp><in></in></pesnya>
</div></playlist>
<artefacts></artefacts></ob>
    </div>
  </div>
</bodyprofile></div>
<style>
.tablstr {
    display: flex;
    flex-wrap: wrap;
  }

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

.tablstr-content {
    display: none;
    width: 100%;
    margin-top: 5px;
    background: var(--telo);
    padding: 10px;
    border-radius: 15px;
    height: 90%;
}

  #tablstr-btn-1:checked~#content-1,
  #tablstr-btn-2:checked~#content-2{
    display: block;
  }

.tablstr > label {
    display: block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    text-decoration: none;
    color: #000000;
    border-radius: 10px;
    background: var(--brdrbled);
    font-weight: 900;
    text-transform: uppercase;
    font-family: AlongSanss2;
    letter-spacing: 1px;
    border: 1px solid var(--brdrbled);
    height: 3%;
    width: 275px;
    text-align: center;
    margin-left: 5px;
}
.tablstr > input[type="radio"]:checked + label {
    cursor: default;
    color: var(--fonpoforum);
    background-color: var(--linkvisitedcolor);
}

.pl::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.facts::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.kupon::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}
.episode::-webkit-scrollbar {
  width: 0px !important;
height: 0px !important;
}

bodyprofile {
    padding: 15px;
    position: relative;
    display: flex;
    height: 93.5%;
    gap: 10px;
}

infopers {
    display: flex;
    flex-direction: column;
    width: 180px;
    height: 98.5%;
    border-right: 1px solid #e0e0e0;
    padding: 10px;
}

img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 15px;
    /* box-shadow: 0px 2px 14px #373030; */
    /* padding: 5px; */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}
opisanie {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
}
name {
    font-family: rabona;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
    padding: 5px 5px 0px 5px;
    height: 6%;
    letter-spacing: 1.2px;
    position: relative;
}
geo {
color: #a1a1a1;
    text-transform: uppercase;
    font-size: 8px;
    font-family: inter;
    letter-spacing: 0.5px;
    padding: 0px 5px 9px 5px;
    text-align: right;
    height: 3%;
    position: relative;
    margin-top: -20px !important;
}
tvink {
    display: flex;
    height: 6%;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    margin-top: -20px !important;
    position: relative;
    background: var(--brdrbled);
    padding: 5px;
    border-radius: 15px;
    border: 1px solid var(--brdrbled);
}
.facts {
    overflow: auto;
    font-size: 11px;
    font-family: inter;
    text-transform: lowercase !important;
    height: 50%;
    position: relative;
    margin-top: -15px !important;
}
opisanie citate {
    font-family: inter;
    font-size: 11px;
    text-transform: lowercase;
    color: #9197ab;
    font-style: italic;
    height: auto;
    max-height: 15%;
    text-align: right;
    width: 96%;
    position: relative;
    margin-top: 0px !important;
    padding: 5px;
}

facts ul, facts li, facts dd, facts dt, facts dl {
    list-style-type: square !important;
    margin-left: 8px !important;
    padding: 1px !important;
}

vse {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 25px;
    align-items: center;
}

kupons {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 50%;
}
kupons n {
    font-family: inter;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    padding: 5px;
    width: 5%;
    position: absolute;
    text-transform: uppercase;
    color: var(--linkscolor);
    margin-top: -10px !important;
    margin-left: 9px !important;
}
episod {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 43%;
}
episod n {
    font-family: inter;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    padding: 5px;
    width: 5%;
    position: absolute;
    text-transform: uppercase;
    color: var(--linkscolor);
    margin-top: -20px !important;
    margin-left: 513px !important;
}

.kupon {
    width: 97.3%;
    margin-top: 8px !important;
    display: flex;
    height: 100%;
    flex-direction: row;
    gap: 4px;
    overflow: auto;
    position: relative;
    border-radius: 15px;
    outline: 1px solid var(--brdrbled);
    padding: 5px;
    border: 3px solid var(--telo);
    flex-wrap: wrap;
}
.kup {
    width: 174px;
    height: 20px !important;
    position: relative;
    margin: 0px !important;
    padding: 5px;
    border-radius: 10px;
    background: var(--brdrbled);
    border: 1px solid var(--brdrbled);
}
.kup b {
    display: flex;
    height: 8px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 5px;
    letter-spacing: 1px;
    font-weight: bold;
    width: 96%;
    font-size: 10px;
    font-family: inter;
    justify-content: center;
    align-items: center;
}
.kup m {
    display: flex;
    color: #343634;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    font-weight: 600;
    top: 18px;
    font-family: inter;
    letter-spacing: 1px;
    height: 10px;
    font-size: 8px;
    justify-content: center;
    align-items: flex-start;
}

.episode {
    width: 97%;
    margin-top: 1px !important;
    display: flex;
    height: 100%;
    flex-direction: row;
    gap: 4px;
    overflow: auto;
    position: relative;
    border-radius: 15px;
    outline: 1px solid var(--brdrbled);
    padding: 5px;
    border: 3px solid var(--telo);
    flex-wrap: wrap;
}

.ep {
    width: 177px;
    height: 26px !important;
    position: relative;
    margin: 0px !important;
    padding: 5px;
    border-radius: 10px;
    background: var(--brdrbled);
    border: 1px solid var(--brdrbled);
}
.ep b {
    display: flex;
    height: 8px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 5px;
    letter-spacing: 1px;
    font-weight: bold;
    width: 96%;
    font-size: 10px;
    font-family: inter;
    justify-content: center;
    align-items: center;
}
.ep m {
    display: flex;
    color: #343634;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    font-weight: 600;
    top: 18px;
    font-family: inter;
    letter-spacing: 1px;
    height: 10px;
    font-size: 8px;
    justify-content: center;
    align-items: flex-start;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet">[/html]

0

19

pft,fkb cjj,otybzvb

0

Страница: 1

Вы здесь » break » LET’S PLAY HIDE AND SEEK » Тестовое сообщение

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