World's Oldest Stone Age Art

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      padding-top: 20px;
      font-family: 'Work Sans', sans-serif;
      background: #ffffff;
    }

    zing-grid {
      font-family: 'Work Sans', sans-serif;
      max-width: 1000px;
      margin: 0 auto;
      min-height: 600px;
      --theme-color-primary: #D9603D;
      border: 0;
      background: #ffffff;
      --zg-head-cell-font-weight: bold;
      color: #414141;
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    zing-grid a {
      font-weight: bold;
      color: #D9603D;
      cursor: pointer;
    }

    zing-grid a:hover {
      color: #742C0D;
    }

    zing-grid img {
      opacity: 1;
      transition: opacity .75s ease-out;
    }

    zing-grid.loading img {
      opacity: 0;
    }

    zg-body a {
      font-weight: bold;
      color: #742C0D;
      cursor: pointer;
      text-decoration: none;
    }

    zg-body a:hover {
      color: #D9603D;
    }

    zg-caption {
      font-size: 30px;
      padding: 10px 20px 0px 20px;
      margin-bottom: -10px;
      background: #ffffff;
      color: #742C0D;
      font-weight: bold;
    }

    zg-body,
    zg-footer,
    zg-watermark {
      background: #ffffff;
    }

    zg-body img {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      margin: 0 auto;
      width: 100%;
      min-height: 300px;
    }

    zg-row[layout="card"] {
      margin: 10px 5px;
      border: 0;
      background: #EAE9E3;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
    }

    zg-body zg-cell:nth-child(1) {
      margin-top: -25px;
      padding: 15px;
      background: #D9603D;
    }

    .zg-body .card-title {
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
      display: block;
    }

    zg-footer {
      font-size: 11px;
      padding: 10px 25px;
      display: flex;
      justify-content: space-between;
      color: #999999;
    }

    zing-grid[loading] {
      height: 2711px;
    }
  </style>
</head>

<body class="zg-body">

  <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <zing-grid src="https://cdn.zinggrid.com/datasets/stone-age-art.json" layout="card" layout-controls="disabled" caption="World's Oldest Stone Age Art" pager page-size="8" pager-size-options="4,8,16" class="loading">
    <zg-colgroup>
      <zg-column index="name" header="Name">
        <span class="card-title">[[index.name]]</span>
      </zg-column>
      <zg-column index="image" type="image" header=" "></zg-column>
      <zg-column index="rank" header="Rank">
        <i class="fas fa-hashtag"></i> [[index.rank]]
      </zg-column>
      <zg-column index="location" type="url" header="Location">
        <a href="[[index.location.locationUrl]]" target="_blank" cross-origin><i class="fas fa-map-marker-alt"></i> [[index.location.locationName]]</a>
      </zg-column>
      <zg-column index="creationDate" header="Created">
        ~ [[index.creationDate]] years ago
      </zg-column>
      <zg-column index="mediaType" header="Media Type"></zg-column>
    </zg-colgroup>
    <zg-footer>
      <p>Source: <a href="http://www.visual-arts-cork.com/" target="_blank">Encyclopedia of Art Education</a></p>
      <p>Read more at <a href="http://www.visual-arts-cork.com/prehistoric/oldest-art-top-50.htm">Oldest Stone Age Art: The Top 100 Artworks</a></p>
    </zg-footer>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>