[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'>26</li>
<li class='extra-day'>27</li>
<li class='extra-day'>28</li>
<li>29</li>
<li>30</li>
<li>
1
</li>
<li>2</li>
</ul>
<ul class='calen-days'>
<li>3</li>
<li>4</li>
<li>
5
</li>
<li>
6

</li>
<li>7</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><div class="calen-tooltip-wrapper">
15
    <div class="calen-tooltip-content"><p>
Гафонское графство. Штефан Вальтер после смерти брата просит руки своей кузины Марии Фредерики Абхент.
         </p><img src='https://i.pinimg.com/originals/af/23/2e/af232e5c81ffcc226a236300bf357459.gif' alt='episode-photo'>
    </div>
</div></li>
<li>16</li>
</ul>
<ul class='calen-days'>
<li>
17

</li>
<li><div class="calen-tooltip-wrapper">
18
    <div class="calen-tooltip-content"><p>
Полнолуние.
         </p><img src='https://i.pinimg.com/564x/c9/9c/89/c99c892e128fd9c9bf8606d4dc037f0b.jpg' alt='episode-photo'>
    </div>
</div>

</li>
<li>19</li>
<li>
20

</li>
<li>
<div class="calen-tooltip-wrapper">
21
    <div class="calen-tooltip-content"><p>
Море Тартум.  <a href="https://lepidus.ru/viewtopic.php?id=6181">Нападение на корабль "Королева Анна"</a> капитаном корабля пиратов
Кристобалем Фейра. Захват болиссийской принцессы.
         </p><img src='https://i.pinimg.com/originals/c4/18/9f/c4189f85eb8eb683c990d71f3819bfb2.gif' alt='episode-photo'>
    </div>
</div>

</li>
<li>
22
</li>
<li>23</li>
</ul>
<ul class='calen-days'>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>

</ul>

</section>

[/html]

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

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

Хронология