This is a cool way to display a notice at the bottom of browser window. Keep in mind there are no advanced settings, and it appears every time window is loaded or refreshed.
Here is the basic style:
<style type="text/css">
#article-fixed-message-container {
position: fixed;
bottom: 20px;
cursor: pointer;
}
#article-fixed-message-text {
background-color: blue;
position: relative;
color: white;
padding: 10px 70px;
border-radius: 2em;
display: flex;
justify-content: space-between;
align-items: center;
}
#article-fixed-message-image {
background-color: transparent;
position: absolute;
top: -115px;
left: -20px;
}
#close {
position: absolute;
top: 5px;
right: 5px;
display: inline-block;
padding: 2px 5px;
/*background: #ccc;*/
color: #fff;
font-size: 10px;
cursor: pointer;
}
#close:hover {
background: #000000;
border-radius: 10px;
}
</style>
Here is the HTML code:
<div id="article-fixed-message-container" onclick="window.open('https://aiplaygroundclub.com/members/the-club-house/', '_blank')" title="Learn More!">
<div id="article-fixed-message-text">
<span>Get FULL access to the AI Playground!</span>
<span id="close" onclick="event.stopPropagation(); this.parentNode.parentNode.remove(); return false;">X</span>
</div><!-- id="article-fixed-message-text" -->
<div id="article-fixed-message-image">
<img src="https://terryjett.com/images/ai-playground-128.png">
</div>
</div>