[html]

<center><div class="rcontainer" style="width: 722px; background-color: #303030; color: #8e8e8e;"><h1 style="background-color:#034e4b; color: #8e8e8e;">Планета Вирдана</h1>

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=BenchNine' rel='stylesheet' type='text/css'>

<style type="text/css">

.jazgreenthreadcontent { background: #8e8e8e; width: 715px; height: 320px; border-right: 0px dotted #21746A; border-left: 1px dotted #21746A; }
.jazgreenthreadtext { background: #8e8e8e; width: 415px; height: 300px; margin-top: 0px; font-family: arial; color: black; font-size: 10px; line-height: 100%; overflow: auto; text-align: justify; padding-left: 10px; padding-right: 10px; margin-left: -4px; }
.jazgreenthreadlyrics { background: #603960; height: 20px; width: 725px; text-transform: uppercase; font-size: 17px; padding-top: 10px; color: 8e8e8e; font-family: 'BenchNine', sans-serif; word-spacing: 3px; letter-spacing: 4px; text-align: center; }
.jazgreenthreadtags { transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 1.0s; opacity: 0; height: 300px; width: 200px; background: transparent; padding-left: 27px; padding-top: 80px; }
.jazgreenthreadtags:hover { opacity: 1 }

.jazgreenthreadscroll::-webkit-scrollbar {width: 3px;background: #8e8e8e}
.jazgreenthreadscroll::-webkit-scrollbar-thumb {background: #034e4a;}
.jazgreenthreadscroll::-webkit-scrollbar-corner {background: #8e8e8e;}

</style>

<div class="jazgreenthreadborder"></div>

<div class="jazgreenthreadcontent">

<table><tr><td><div style="width: 280px; height: 300px; background:url(http://forumstatic.ru/files/001b/d3/71/86151.png); margin-top: 6px; margin-left: 2px;"><div class="jazgreenthreadtags">

<td><div class="jazgreenthreadtext jazgreenthreadscroll">
<div style="display: flex; align-items: center;">
  <div style="width: 230px; height: 20px; background-color: #603960; display: flex; justify-content: center; align-items: center;">
    <span style="color: #8e8e8e;"><br><h2 style>Основная информация</h2><br></span>
    <div style="position: absolute; top: 50%; left: 100%; transform: translateY(-50%); border-top: 2px solid white; width: 50px;"></div>
  </div>
</div>
<hr style="border: none; height: 1px; background-color: #603960;">

<b>▪ Название планеты: </b> Вирдана
<br>
<b>▪ Вид:</b> планета джунглей
<br>
<b>▪ Население:</b> неизвестно
<br>
<b>▪ Климат:</b> тропический
<br>

<br><div style="display: flex; align-items: center;">
  <div style="width: 120px; height: 20px; background-color: #603960; display: flex; justify-content: center; align-items: center;">
    <span style="color: #8e8e8e;"><br><h2 style>Описание</h2><br></span>
    <div style="position: absolute; top: 50%; left: 100%; transform: translateY(-50%); border-top: 2px solid white; width: 50px;"></div>
  </div>
</div>
<hr style="border: none; height: 1px; background-color: #603960;">
Вирдана - это уникальный и загадочный мир, целиком и полностью покрытый первозданными джунглями. Эта планета является домом для необъятного многообразия флоры и фауны, где каждый сантиметр земли обвит плющом, украшен экзотическими цветами или занят огромными деревьями, достигающими небес. Висячие лианы и мохообразные растения образуют естественные арки и туннели, создавая сложную сеть путей для тех, кто смел достаточно, чтобы путешествовать по этим девственным землям.
<br><br>
Атмосфера Вирданы насыщена влажностью и эхом далёких звериных рёвов, а воздух пропитан ароматами редчайших цветущих растений и свежей зелени. Свет звёзд и солнца едва-едва пробивается сквозь плотный кронопокров, создавая мягкое и загадочное зелёное свечение, которое подчёркивает мистическую атмосферу планеты.
<br><br>
Джунгли Вирданы населены невероятным количеством живых существ. Тут обитают редкие и неизвестные науке виды, от микроскопических биолюминесцентных грибов до гигантских летающих существ, чьи крылья напоминают паруса древних кораблей. Звуки джунглей оглушительны – они полны трелей птиц, жужжания насекомых и шороха невиданных зверей, скрывающихся в зарослях.
<br><br>
Экосистема планеты сложна и хрупка, где каждое существо играет роль в поддержании баланса в этом зелёном раю. Отношения между видами порой настолько непонятны, что даже самые опытные экобиологи могут потратить всю жизнь, пытаясь разгадать тайны Вирданы.
<br><br>
Плотные джунгли не только дом для животных, но и прячут в себе древние тайны. Рассказы о затерянных городах, покрытых лианами и мхом, и о забытых цивилизациях, таятся в легендах. Многие искатели приключений и учёные отправляются на Вирдану в поисках этих тайн, но джунгли редко раскрывают свои секреты непрошенным гостям.
<br><br>
Тем, кто решится ступить на поверхность Вирданы, необходимо быть крайне внимательным и осторожным, ведь помимо несметных сокровищ природы, планета полна опасностей: от ядовитых растений до хищных зверей. Путешествие по Вирдане - это не только открытие новых видов и экосистем, но и бесконечная борьба за выживание в самом сердце дикой природы.
<br>
</div></td></tr></table></div>

<div class="jazgreenthreadlyrics">story of the door</div>

[/html]

[html]
<!------------------------------------------------------------------------------------------------------------------------------------ КАРТА --!>

<div style="display: flex;">
    <div id="map" style="flex: 1; position: relative; height: 500px;">
        <img src="http://forumstatic.ru/files/001b/d3/71/63548.png" alt="Изображение" style="width: 100%; height: auto;">
        <!-- Точка 1 -->
        <button onclick="showInfo('infoBox1')" style="position: absolute; bottom: 300px; right: 550px;">Название 1</button>
        <!-- Точка 2 -->
        <button onclick="showInfo('infoBox2')" style="position: absolute; bottom: 400px; right: 460px;">Название 2</button>
        <!-- Точка 3 -->
        <button onclick="showInfo('infoBox3')" style="position: absolute; bottom: 250px; right: 320px;">Название 3</button>
        <!-- Точка 4 -->
        <button onclick="showInfo('infoBox4')" style="position: absolute; bottom: 230px; right: 500px;">Название 4</button>
    </div>
<!------------------------------------------------------------------------------------------------------------------------------------ БЛОК 1-->

    <div id="infoBox1" class="infoBox" style="display: none; border: 3px solid #1e1e1e; background-color: #8d8d8d; padding: 20px; position: absolute; top: 0; right: 0; height: 500px; overflow-y: auto; max-width: 300px;">

        <!-- Содержимое для точки 1 -->
<div style="display: inline-block; background-color: #603960; color: #8e8e8e; padding: 0px 20px; border-radius: 0px;">
        <h2>Гигантский лес</h2>
  </div>
<img src="http://forumstatic.ru/files/001b/d3/71/11860.png" alt="Изображение" style="width: 100%; height: auto;"><br>
        <!-- Добавьте здесь содержимое для точки 1 -->
        <div style="max-height: 300px; overflow-y: auto;">
            <p>Это место — настоящее чудо природы, где гигантские деревья поднимаются к вершинам небес, словно хранители мира, возвышаясь над землей. Стволы этих деревьев, шириной в десятки метров, покрыты лишайниками и зеленью, создавая впечатление целых лесов, привитых к стволам гигантов. Их ветви тянутся ввысь, создавая живописные купола зелени, через которые лишь редкие лучи солнца проникают на землю.
<br><br>
В этой локации царит постоянный полумрак, созданный густой листвой, закрывающей небо. Здесь жизнь бьет ключом в каждом уголке — от лиан, падающих с высоты, до целых экосистем, образованных на ветвях этих гигантов. Шум ветра, напоминающий шепот древних сил, смешивается с голосами животных, обитающих в этом густом зеленом космосе.
<br><br>
Для тех, кто осмелится подняться на вершины этих деревьев, открывается удивительный вид — каскады зелени, словно бесконечные оазисы в океане листвы, тянутся до самых горизонтов, утопая в тумане и облаках.
<br></p>
              </div>
        <button onclick="closeInfo('infoBox1')">Закрыть</button>
    </div>
<!------------------------------------------------------------------------------------------------------------------------------------ БЛОК 2-->

    <div id="infoBox2" class="infoBox" style="display: none; border: 3px solid #1e1e1e; background-color: #8d8d8d; padding: 20px; position: absolute; top: 0; right: 0; height: 500px; overflow-y: auto; max-width: 300px;">

        <!-- Содержимое для точки 2 -->
<div style="display: inline-block; background-color: #603960; color: #8e8e8e; padding: 0px 20px; border-radius: 0px;">
        <h2>Плачущие титаны</h2>
  </div>
<img src="http://forumstatic.ru/files/001b/d3/71/65148.png?v=1" alt="Изображение" style="width: 100%; height: auto;"><br>
        <!-- Добавьте здесь содержимое для точки 1 -->
        <div style="max-height: 300px; overflow-y: auto;">
            <p>В данной локации наблюдается уникальное явление, где гигантские деревья служат источником формирования водопадов. Стволы этих монументальных растений, находясь на краю утеса, предоставляют платформу для образования потоков воды, проистекающих из вершинных частей деревьев.
<br><br>
Процесс образования водопадов начинается с слияния водных запасов, скапливающихся в вершинах деревьев в результате дождей или конденсации влаги из окружающего воздуха. Эта вода, достигая края деревьев, начинает свой путь вниз по стволам, исходя из законов гравитации и капиллярности. Сложная сеть микрофлоры и микрофауны, населяющая стволы деревьев, также играет роль в удержании воды и ее движении по деревьям.
<br><br>
Падая вниз по стволам, вода образует мощные потоки, которые создают впечатляющие каскады и водопады, образуя спектакль из водных форм и движений. Этот уникальный феномен является результатом сложных физических и биологических процессов, совершающихся в данной экосистеме.
<br></p>
              </div>
        <button onclick="closeInfo('infoBox2')">Закрыть</button>
    </div>

<!------------------------------------------------------------------------------------------------------------------------------------ БЛОК 3-->

    <div id="infoBox3" class="infoBox" style="display: none; border: 3px solid #1e1e1e; background-color: #8d8d8d; padding: 20px; position: absolute; top: 0; right: 0; height: 500px; overflow-y: auto; max-width: 300px;">
         <!-- Содержимое для точки 3 -->
<div style="display: inline-block; background-color: #603960; color: #8e8e8e; padding: 0px 20px; border-radius: 0px;">
        <h2>Информация 3</h2>
  </div>
<img src="http://forumupload.ru/uploads/001b/b6/34/3/23377.jpg" alt="Изображение" style="width: 100%; height: auto;"><br>
        <!-- Добавьте здесь содержимое для точки 1 -->
        <div style="max-height: 300px; overflow-y: auto;">
            <p>Содержимое для прокручиваемого блока 1...</p>
              </div>
        <button onclick="closeInfo('infoBox3')">Закрыть</button>
    </div>
    <div id="infoBox3" class="infoBox" style="display: none; border: 3px solid #1e1e1e; background-color: #8d8d8d; padding: 20px; position: absolute; top: 0; right: 0; height: 500px; overflow-y: auto; max-width: 300px;">
</div>

<!------------------------------------------------------------------------------------------------------------------------------------ БЛОК 4-->

    <div id="infoBox4" class="infoBox" style="display: none; border: 3px solid #1e1e1e; background-color: #8d8d8d; padding: 20px; position: absolute; top: 0; right: 0; height: 500px; overflow-y: auto; max-width: 300px;">
        <!-- Содержимое для точки 4 -->
        <div style="display: inline-block; background-color: #603960; color: #8e8e8e; padding: 0px 20px; border-radius: 0px;">
            <h2>Информация 4</h2>
        </div>
        <img src="http://forumupload.ru/uploads/001b/b6/34/3/23377.jpg" alt="Изображение" style="width: 100%; height: auto;"><br>
        <!-- Добавьте здесь содержимое для точки 4 -->
        <div style="max-height: 300px; overflow-y: auto;">
            <p>Содержимое для прокручиваемого блока 4...</p>
        </div>
        <button onclick="closeInfo('infoBox4')">Закрыть</button>
    </div>

<script>
    function showInfo(boxId) {
        var boxes = document.getElementsByClassName("infoBox");
        for (var i = 0; i < boxes.length; i++) {
            boxes[i].style.display = 'none';
        }
        document.getElementById(boxId).style.display = 'block';
    }

    function closeInfo(boxId) {
        document.getElementById(boxId).style.display = 'none';
    }
</script>[/html]