Create a Popup Notification Banner

CSS:

.banner {
	position: fixed;
	bottom: 0;
	right: 0;
	transform: translatey(100vh);
	animation: banner-fade-in 1s 1s ease-in forwards; 
}

.close-btn {
	position: absolute;
	top: 12px;
	right: 12px;
}

@keyframes banner-fade-in {
	0%{
		transform: translatey(100vh);
	}
	100%{
		transform: translatey(0);
	}
}

.hide-me{
	display: none;
}

Javascript:

document.addEventListener('DOMContentLoaded', function() {
            var closeButton = document.querySelector('.close-btn');
            var banner = document.querySelector('.banner');

            // Check if sessionStorage has the 'bannerHidden' key and if its value is 'true'
            if (sessionStorage.getItem('bannerHidden') === 'true') {
                banner.classList.add('hide-me');
            }

            closeButton.addEventListener('click', function(event) {
                event.preventDefault(); // Prevent the default link click action
                banner.classList.add('hide-me');
                sessionStorage.setItem('bannerHidden', 'true');
            });
        });