Browser Window Notice

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>