demo/index.html

<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <title>Cookie banner demo</title>
    <link rel="stylesheet" href="banner_css.css" />
    <link rel="stylesheet" href="demo_css.css" />
  </head>
  <body>
    <aside class="moz-consent-banner" id="moz-consent-banner" role="region" aria-label="Cookie Banner" data-nosnippet="true">
      <div class="moz-consent-banner-content">
        <h2 class="moz-consent-banner-heading">Help us improve your Mozilla experience</h2>
        <div class="moz-consent-banner-copy">
          <p>
            In addition to Cookies necessary for this site to function, we’d like your permission to set some additional Cookies
            to better understand your browsing needs and improve your experience. Rest assured - we value your privacy.
          </p>
          <div class="moz-consent-banner-controls">
              <button type="button" id="moz-consent-banner-button-accept" class="moz-consent-banner-button moz-consent-banner-button-accept">
                Accept All Additional Cookies
              </button>
              <button type="button" id="moz-consent-banner-button-reject" class="moz-consent-banner-button moz-consent-banner-button-reject">
                Reject All Additional Cookies
              </button>
              <a href="https://www.mozilla.org/privacy/websites/cookie-settings/">
                Cookie settings
              </a>
          </div>
        </div>
      </div>
    </aside>

    <header class="demo-header">
      <h1>Cookie banner demo</h1>
      <p>Clicking <em>"Accept All Additional Cookies"</em> or <em>"Reject All Additional Cookies"</em> sets a consent cookie with the ID <code>moz-consent-pref</code>.</p>
      <p>You must clear this cookie and refresh the page to see the banner again.</p>
    </header>

    <script src="demo_js.js"></script>
  </body>
</html>