<!-- Начало кода баннера -->
<style>
.side_banner {
--bw: #c5a471; /* Цвет кнопки */
--bwa: #0376BC; /* Цвет кнопки - при наведении */
--b: #0F1621;
--gt2: #535353;
font-family: "Montserrat", Arial, sans-serif;
width: 320px;
position: fixed;
bottom: 50px;
right: 0;
border-radius: 6px 0 0 6px;
overflow: hidden;
z-index: 990;
box-shadow: 0 0 10px 1px rgba(0,0,0,0.15);
background: white;
transform: translateX(0);
transition: transform 0.4s ease, opacity 0.4s ease;
max-height: 1000000px;
}
.side_banner.hidden {
transform: translateX(100%);
opacity: 0;
}
.side_banner__close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease;
color: white;
font-size: 18px;
font-weight: bold;
line-height: 1;
}
.side_banner__close:hover {
background: #ed1b24;
}
.side_banner__img {
height: 150px;
background-image: url('https://ССЫЛКАнаКартинку.jpg');
background-size: cover;
background-position: center;
position: relative;
}
.side_banner__content {
padding: 20px;
}
.side_banner__title {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
line-height: 1.3;
color: var(--b);
}
.side_banner__text {
font-size: 14px;
line-height: 1.5;
margin-bottom: 20px;
color: var(--gt2);
}
.side_banner__button {
display: inline-block;
background: var(--bw);
color: white;
border: none;
padding: 12px 25px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
font-size: 14px;
}
.side_banner__button:hover {
background: var(--bwa);
}
@media (max-width: 480px) {
.side_banner {
width: 280px;
bottom: 20px;
}
}
</style>
<div class="side_banner">
<div class="side_banner__close">×</div>
<div class="side_banner__img"></div>
<div class="side_banner__content">
<div class="side_banner__title">Текст для «Заголовка»</div>
<div class="side_banner__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus mi sed nibh tincidunt venenatis. Etiam congue augue laoreet, auctor dolor semper, placerat metus. </div>
<a href="https://СсылкаНаКнопке" target="_blank">
<button type="button" class="side_banner__button">Открыть</button>
</a>
</div>
</div>
<script>
(function() {
// Проверяем, был ли баннер закрыт ранее
const bannerClosed = localStorage.getItem('sideBannerClosed');
const banner = document.querySelector('.side_banner');
// Показываем баннер только если он не был закрыт ранее
if(bannerClosed !== 'true') {
// Добавляем небольшую задержку перед показом
setTimeout(() => {
banner.classList.remove('hidden');
}, 3000);
} else {
banner.classList.add('hidden');
}
// Обработчик закрытия баннера
document.querySelector('.side_banner__close').addEventListener('click', () => {
banner.classList.add('hidden');
// Сохраняем состояние в localStorage
localStorage.setItem('sideBannerClosed', 'true');
});
})();
</script>
<!-- Конец кода баннера -->