<p id="cookie-notice">
  We use Cookies to provide you the best User Experience. By continuing you agree to accept our
  <a href="https://matrixread.com/privacy-policy/" target="_blank">Privacy Policy</a><br>
  <button onclick="acceptCookie()">CONTINUE</button>
  #cookie-notice {
    background: #1188ff;
    color: #fff;
    font-size: 18px;
    padding: 15px;
    position: fixed;
    bottom: 10px;
    left: 0px;
    width: 100%;
    max-width: 310px;
    border-radius: 0 20px 20px 0;
    margin: 0;
    visibility: hidden;
    z-index: 100;
    box-sizing: border-box;
    text-align: center;
    font-family: "Arial";

  #cookie-notice button {
    background-color: #fff;
    border-radius: 25px;
    color: #18f;
    border: none;
    padding: 8px 15px;
    font-weight: bold;
    width: auto;
    margin-top: 10px;
    cursor: pointer;

  @media only screen and (max-width:600px) {
    #cookie-notice {
      max-width: 100%;
      bottom: 0;
      left: 0;
      border-radius: 20px 20px 0px 0px;

  #cookie-notice a {
    color: #fff;
  function acceptCookie() {
    (document.cookie = "cookieaccepted=1; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/"),
    (document.getElementById("cookie-notice").style.visibility = "hidden");
  document.cookie.indexOf("cookieaccepted") < 0 && (document.getElementById("cookie-notice").style.visibility = "visible");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.