[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'>31</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li><div class="calen-tooltip-wrapper">5<div class="calen-tooltip-content"><p>
Админский день. Приведение в соответствие статей и кодов.
         </p><img src='https://99px.ru/sstorage/86/2015/05/image_862405150009467901524.gif' alt='episode-photo'>
    </div>
</div></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><div class="calen-tooltip-wrapper">19 <div class="calen-tooltip-content"><p>
Расстановка достижений в профили участников. Администрирование статей.
         </p><img src='https://cs8.pikabu.ru/post_img/2016/02/29/3/145671443313237008.gif' alt='episode-photo'>
    </div>
</div></li>
<li><div class="calen-tooltip-wrapper">
20
    <div class="calen-tooltip-content"><p>
Обновление конкурсов и ивентов.
         </p><img src='https://i.pinimg.com/originals/e2/15/8a/e2158a855ac4563ef0beca2edb6c4f2b.gif' alt='episode-photo'>
    </div>
</div></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 class='extra-day'>1</li>
<li class='extra-day'>2</li>
<li class='extra-day'>3</li>
<li class='extra-day'>4</li>

</ul>

</section>

[/html]

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

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

Хронология