[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'>29</li>
<li class='extra-day'>30</li>
<li class='extra-day'>31</li>
<li>1</li>
<li>2</li>
<li>
<div class="calen-tooltip-wrapper">
3
    <div class="calen-tooltip-content"><p>
Прошло выступление музыкальной группы, которую создали супруги <a href="https://lepidus.ru/profile.php?id=1314"> Астериас</a> и <a href="https://lepidus.ru/profile.php?id=1313"> Джослин</a> Уорд. На выступление Астериас заявил, что собирается начать сольную музыкальную карьеру. В средствах массовой информации появились новости о конфликте между звездными супругами.
         </p><img src='https://forumstatic.ru/files/001b/f3/20/32747.jpg' alt='episode-photo'>
    </div>
</div>
</li>
<li>4</li>
</ul>
<ul class='calen-days'>
<li>5</li>
<li>6</li>
<li>7</li>
<li>
8

</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
<ul class='calen-days'>
<li>
12
</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>
16

</li>
<li><div class="calen-tooltip-wrapper">
   17
    <div class="calen-tooltip-content"><p>
Сириус Мото официально представил новую модель авиатранспорта - мотоцикл нового поколения аэромото. На открытие присутствовал как владелец корпорации, так и президент Дюссельфолда, отметивший, что сейчас очень важно двигаться дальше, навстречу прогрессу.
         </p><img src='https://i.pinimg.com/564x/f9/f8/9e/f9f89ee94dd3f0fa22de39c7b55a1d81.jpg' alt='episode-photo'>
    </div>
</div></li>
<li>18</li>
</ul>
<ul class='calen-days'>
<li>
<div class="calen-tooltip-wrapper">
    19
    <div class="calen-tooltip-content"><p>
<a href="https://lepidus.ru/viewtopic.php?id=6160">День благородных дел в Смоуке</a> приурочен к неделе  сохранения традиций, который празднуется во всем Дюссельфолде с 2021 года. В этом году неделя сохранения традиций выпала на 19 - 25 мая 2026 года.
         </p><img src='https://forumstatic.ru/files/001b/f3/20/31228.jpg' alt='episode-photo'>
    </div>
</div>

</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>
<div class="calen-tooltip-wrapper">
    23
    <div class="calen-tooltip-content"><p>
     В 16:56  по Дюссельфолдскому времени наступает полнолуние. Это время обладает особенной энергетикой, которая может быть использована для различных ритуалов и практик.
         </p><img src='https://i.pinimg.com/564x/07/2f/a2/072fa200a5101e0bc7b62d4c51e099b5.jpg' alt='episode-photo'>
    </div>
</div>

</li>
<li>
<div class="calen-tooltip-wrapper">
    24
    <div class="calen-tooltip-content"><p>
<a href="https://lepidus.ru/viewtopic.php?id=6067">Возвращение Колестис.</a> Все вампиры, которые связаны кровной связью с Древней могут почувствовать её возвращение в мир живых.
         </p><img src='https://i.ibb.co/5BzJg8L/1.jpg' alt='episode-photo'>
    </div>
</div>
</li>
<li>25</li>
</ul>
<ul class='calen-days'>
<li>26</li>
<li>27</li>
<li>28</li>
<li><div class="calen-tooltip-wrapper">
  29
    <div class="calen-tooltip-content"><p>
Выпускные экзамены в школе В. Эллингтона.
         </p>
    </div></li>
<li><div class="calen-tooltip-wrapper">
30
    <div class="calen-tooltip-content"><p>
Выпускные экзамены в школе В. Эллингтона.
         </p>
    </div></li>
<li>31</li>
<li class='extra-day'>1</li>
</ul>

</section>

[/html]

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

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

[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'>30</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class='calen-days'>
<li>7</li>
<li>8</li>
<li>
9
</li>
<li>
10

</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<ul class='calen-days'>
<li>
14

</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>
18

</li>
<li>19</li>
<li>20</li>
</ul>
<ul class='calen-days'>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
</ul>
<ul class='calen-days'>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li class='extra-day'>1</li>
<li class='extra-day'>2</li>
<li class='extra-day'>3</li>
</ul>

</section>

[/html]

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

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