Demos Back to Docs

World's Oldest Stone Age Art

77 of 124
In this demo, explore the oldest surviving rock art ever created. This ZingGrid features default card mode, media embeds, various column types, and advanced custom styling.
Result Full HTML CSS JS
Edit Download
[[index.name]]  [[index.rank]] [[index.location.locationName]] ~ [[index.creationDate]] years ago

Source: Encyclopedia of Art Education

Read more at Oldest Stone Age Art: The Top 100 Artworks

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>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </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>
  </body>
</html>
.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;
}
// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
    setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery