Создаем выезжающие информационные блоки

В футер добавляем код.

script

<!--ИНФО ПАНЕЛЬ 001-->
<div class="infopanel-001">
    <div class="infopanel-001-content">
        <p class="infopanel-001-close">✖</p>
        <p class="infopanel-001-text" style="font-weight: 700;">Уважаемые Клиенты</p>
        <p class="infopanel-001-text">
        	Информируем Вас о графике работы в праздничные дни.<br>
        	Выходные 30 апреля и 1 мая,<br>
        	а так же 7, 8 и 9 мая<br>
        	со 2 по 6 мая работаем: с 10:30 до 17 часов
        </p>
    </div>
</div>

<!--СКРИПТЫ ДЛЯ ИНФО ПАНЕЛЬ 001-->
<script>
$("p.infopanel-001-close").click(function() {
	$(".infopanel-001").removeClass('infopanel-001-show');
});

$(document).ready(function() {
    
	setTimeout(function() {
        $(".infopanel-001").addClass('infopanel-001-show');
    }, 1000);
    setTimeout(function() {
        $(".infopanel-001").removeClass('infopanel-001-show');
    }, 270000);

});
</script>

Пишем стили для нее.

css

/*СТИЛИ ИНФОРМАЦИОННЫХ ПАНЕЛЕЙ*/
.infopanel-001 {
    z-index: 999;
    position: fixed;
    top: 10px;
    left: -350px;
    display: flex;
    justify-content: left;
    width: fit-content;
    transition: 1s;}   
.infopanel-001-show {
    top: 10px;
    left: 10px;
    transition: 1s;}
.infopanel-001-content {
    position: relative;
    width: 300px;
    background-color: #f6d24f;
    border: 3px solid #555459;
    box-shadow: 1px 1px 13px 0px #00000061;
    padding: 20px;
    border-radius: 10px;}
.infopanel-001-content p.infopanel-001-close {
    margin: 0;
    position: absolute;
    top: 2px;
    right: 5px;
    font-weight: 700;
    color: #af4414;
    cursor: pointer;}   
.infopanel-001-content p.infopanel-001-text {
    margin: 0;
    text-align: center;}  

На этом все.