[html]
<style>

.calendar-wrapper {
    margin: auto;
    display: flex;
    padding:20px;
    width:450px;
    flex-direction: column;
    align-items: center;
    background:lightgray;
    border-radius: 25px;
}

.calendar-wrapper>h4 {
    color: #646a6e;
    font-family: sans-serif;
    font-size: 35px;
    background: #ffffff;
    width: 90%;
    text-align: center;
    border-radius: calc(infinity* 1px);
    margin: 0px 0px 17px;
}

.calendar-wrapper>ul>li {
    display: inline-flex;
    width: 60px;
    height: 60px;
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px !important;
    margin-bottom: 5px;
    margin-left: 5px;
    font-family: sans-serif;
    border-radius: 12px;
}

.calen-week {
display:flex;
padding:0px!important;
}
.calen-days {
display:flex;
padding:0px!important;
}

.calen-week>li {
    background: #646a6e;
    font-size: 25px;
    color: #ededed;
    font-weight: bold;
}
.calen-days>li{
    background: #e8eeef;
    font-size: 30px;
    color: #495258;
}

.extra-day {
opacity:.3;
}

.calen-tooltip-wrapper {
    position: relative;
    display: flex;
    cursor: pointer;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(140, 180, 180, 1) 0%, rgba(199, 255, 251, 1) 47%, rgba(137, 196, 203, 1) 100%);
    border-radius: 12px;
}

.calen-tooltip-content {
    display: none;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #151d224f;
    color: #151718;
    padding: 5px !important;
    border-radius: 12px;
    font-family: sans-serif;
    text-align: justify;
    z-index: 1000;
    font-size: 12px;
    width: 300px;
    flex-direction: column;
    backdrop-filter: blur(4px);
    transition: ease-in-out .4s;
}

.active {
        display: flex;
}

.calen-tooltip-content>img {
    width: 300px;
    height: 85px;
    object-fit: cover;
    border-radius: 7px;
    margin-top: 5px;
}

.calen-tooltip-content>p {
     font-size: 13px !important;
    background: #e8eeefc2;
    color: black;
    padding: 2px 6px !important;
    border-radius: 7px;
}

.calen-tooltip-content::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 50%;
    margin-left: -16px;
    border-width: 16px;
    border-style: solid;
    border-color: transparent transparent #9da0a3;
}

.day-with-tooltip {
    position: relative;
    display: flex;
    cursor: pointer;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(140, 180, 180, 1) 0%, rgba(199, 255, 251, 1) 47%, rgba(137, 196, 203, 1) 100%);
    border-radius: 12px;
}

</style>

[/html]

[html]

<section class='calendar-wrapper'>
<h4>ИЮНЬ </h4>
<ul class='calen-week'>
<li>ПН</li>
<li>ВТ</li>
<li>СР</li>
<li>ЧТ</li>
<li>ПТ</li>
<li>СБ</li>
<li>ВС</li>
</ul>
<ul class='calen-days'>
<li class='extra-day'>27</li>
<li class='extra-day'>28</li>
<li class='extra-day'>29</li>
<li>30</li>
<li>31</li>
<li>
<div class="calen-tooltip-wrapper">
1
    <div class="calen-tooltip-content"><p>
Великая Эросианская империя. Вероломное <a href="https://lepidus.ru/viewtopic.php?id=5738#p256166">Нападение на поселение </a> тартумов. Разграбление, захват пленных по приказу императора.
         </p><img src='https://i.pinimg.com/originals/b1/eb/e4/b1ebe4f0dd4b9fd1e43b56df0752b60b.gif' alt='episode-photo'>
    </div>
</div>
</li>
<li>2</li>
</ul>
<ul class='calen-days'>
<li>3</li>
<li>4</li>
<li>
5
</li>
<li>
6

</li>
<li><div class="calen-tooltip-wrapper">
7
    <div class="calen-tooltip-content"><p>
Остров Таврос. Великая Эросианская империя <a href="https://lepidus.ru/viewtopic.php?id=5742">Нападение на остров Таврос</a> пиратской флотилии в день свадьбы старшей дочери наместника Эмира прекрасной Калипсо. Убийства. Захват. Падение Тавроса.
         </p><img src='https://i.pinimg.com/originals/77/af/04/77af0469f21601053a66dce776b00544.gif' alt='episode-photo'>
    </div>
</div></li>
<li>8</li>
<li>9</li>
</ul>
<ul class='calen-days'>
<li>
10

</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>
14

</li>
<li>15</li>
<li>16</li>
</ul>
<ul class='calen-days'>
<li>
17

</li>
<li>18

</li>
<li>19</li>
<li>
<div class="calen-tooltip-wrapper">
20
    <div class="calen-tooltip-content"><p>
Королевство Морвейн. <a href="https://lepidus.ru/viewtopic.php?id=5783">Прибытие</a> князя Шихи и его встреча с королем Морвейна Вэоном. Король Вэон желает видеть князя на троне Морвейна после своей кончины.
         </p><img src='https://i.pinimg.com/originals/94/db/f4/94dbf4c0bee44624613c63623a755b06.gif' alt='episode-photo'>
    </div>
</div>

</li>
<li>
<div class="calen-tooltip-wrapper">
21
    <div class="calen-tooltip-content"><p>
Великая Эросианская империя. <a href="https://lepidus.ru/viewtopic.php?id=5992">Разрушение храмов Фетиха</a> по приказу сенатора Корнелиуса.
         </p><img src='https://i.pinimg.com/564x/49/cf/e4/49cfe44684a866149661aa7e86ad73a3.jpg' alt='episode-photo'>
    </div>
</div>

</li>
<li>
<div class="calen-tooltip-wrapper">
22
    <div class="calen-tooltip-content"><p>
Королевство Морвейн. Собрание малого совета. После нападения этим днем на поселения некрофагов, а также новостей о том, что люди покусанные этими тварями вскоре тоже превратятся в мертвецов, малый совет принял тяжелое решение пойти на сделку с ханом Бейбарысом, у которого по словам посла было лекарство от этого недуга. </p>
    </div>
</div>
</li>
<li>23</li>
</ul>
<ul class='calen-days'>
<li><div class="calen-tooltip-wrapper">
24
    <div class="calen-tooltip-content"><p>
Великая Эросианская империя. На Эрос прибывает бард, который после разговора со старухой сочиняет песню  "Будь ты проклят Десимус!", которая повествует о пирате, что разграбил остров Таврос и был там же убит.
         </p><img src='https://i.pinimg.com/originals/ab/00/be/ab00beccd834d0d89cfb3cb9567a5304.gif' alt='episode-photo'>
    </div>
</div></li>
<li>25</li>
<li><div class="calen-tooltip-wrapper">
26
    <div class="calen-tooltip-content"><p>
Царство Иссин. <a href="https://lepidus.ru/viewtopic.php?id=5946">Калипсо</a> попадает в царство Иссин, где её оставляет у себя один из представителей домов дюжины Саргон Кхатри, обещая, что поможет ей, но не собираясь при этом выполнять свои обещания.
         </p><img src='https://i.pinimg.com/originals/4a/bf/fd/4abffd39ea0225ab32b2bbcbca383fd3.gif' alt='episode-photo'>
    </div>
</div></li>
<li><div class="calen-tooltip-wrapper">
27
    <div class="calen-tooltip-content"><p>
Королевство Морвейн. Появление принца Миримона в крепости Морвейна. Точнее того, кто назвал себя его именем. Лже-Миримона, бастарда короля Вэона, убедившего многих в том, что  он и есть принц, которого долгое время считали погибшим.</p>
    </div>
</div></li>
<li><div class="calen-tooltip-wrapper">
28
    <div class="calen-tooltip-content"><p>
Королевство Морвейн. Чтобы получить лекарство от посла хана Бейбарыса Искандера, совет Морвейна решает пойти на сделку и отправляет послание лорду Саммерлэду, чтобы тот прибыл вместе с семьей в крепость. Его внучке предстоит стать женой хана, но на караван нападают некрофаги. Лорд погибает.         </p>
    </div>
</div></li>
<li>29</li>
<li><div class="calen-tooltip-wrapper">
30
    <div class="calen-tooltip-content"><p>
Полнолуние. </p>
    </div>
</div></li>

</ul>

</section>

[/html]

Подпись автора

Ты пришел и говоришь: Авалон, мне нужна справедливость, мне нужен пост. Но ты просишь без уважения, ты не предлагаешь дружбу, ты даже не назвал меня крестным админом.

Хронология