carbon.html

<script type="text/javascript">
window.carbonLoaded = false;

window.helloCarbon = function() {
  window.carbonLoaded = true;
}

document.addEventListener('DOMContentLoaded', function() {
  // Hello
  var $hello = document.getElementById('hello');
  var $huggingFace = document.getElementById('huggingFace');
  var $carbon = document.getElementById('carbon');
  var $placeholder = document.getElementById('placeholder');

  setTimeout(function() {
    if (window.carbonLoaded) {
      $hello.style.minHeight = '218px';
      $huggingFace.style.display = 'none';
      $carbon.style.display = 'block';
    } else {
      $hello.style.minHeight = '0';
      $huggingFace.style.display = 'block';
      $carbon.style.display = 'none';
    }
    $placeholder.style.display = 'none';
  }, 2000);
});
</script>

<div id="hello">
  <div id="huggingFace">
    <p>CSS Reference is <strong>free</strong> and always will be!</p>
    <p>Please whitelist us in your ad blocker.</p>
    <p>Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji"></p>
  </div>

  <div id="placeholder" class="placeholder">
    <div class="placeholder-image"><div></div></div>
    <div class="placeholder-content"><div></div><div></div><div></div></div>
    <div class="placeholder-footer"><div></div></div>
  </div>

  <div id="carbon">
    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script>
  </div>
</div>