Demos Back to Demos

World's Oldest Stone Age Art

10 of 25

Explore the oldest surviving rock art ever created in this demo, which features default card mode, media embeds, various column types, and advanced custom styling.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <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">
		<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      layout="card"
      layout-controls="disabled"
      caption="World's Oldest Stone Age Art"
      pager
      page-size="8"
      pager-size-options="4,8,16"
    >
      <zg-data data='      [
        {
          "rank": "1",
          "name": "Bhimbetka and Daraki-Chattan Cupules",
          "location": {
            "locationName": "Bhimbetka Rock Shelters, Raisen District, Madhya Pradesh, India",
            "locationUrl": "https://www.google.com/maps/place/Bhimbetka+rock+shelters/@22.939551,77.6102444,17z/data=!3m1!4b1!4m5!3m4!1s0x397c357473b13b3f:0xb8823ee0ae5de8e6!8m2!3d22.9395461!4d77.6124331"
          },
          "creationDate": "290,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fbhembetika-cupules.jpg?alt=media&token=cf54eae1-a358-4bb7-83ab-dc95bb945a4f"
        },
        {
          "rank": "2",
          "name": "Venus of Berekhat Ram",
          "location": {
            "locationName": "Berekhat Ram, Golan Heights, Israel",
            "locationUrl": "https://www.google.com/maps/place/Lake+Ram/@33.2325342,35.7486015,14z/data=!3m1!4b1!4m5!3m4!1s0x151eb73eccfdeab3:0xbd0a1486a80131cf!8m2!3d33.2325!4d35.7661111"
          },
          "creationDate": "230,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-of-berekhat-ram.jpg?alt=media&token=d994587b-de18-4e5b-bb65-115afe39fc22"
        },
        {
          "rank": "3",
          "name": "Venus of Tan-Tan",
          "location": {
            "locationName": "River Draa, Tan-Tan, Guelmim-Oued Noun, Morocco",
            "locationUrl": "https://www.google.com/maps/place/Tantan+82000,+Morocco/@28.4307254,-11.1335712,13z/data=!3m1!4b1!4m5!3m4!1s0xc4a90eb762ed1bf:0xca2cc19b59859aa0!8m2!3d28.4380408!4d-11.0987374"
          },
          "creationDate": "200,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-tan.jpg?alt=media&token=cf09a8c9-d459-4a36-9271-97cecd7ae287"
        },
        {
          "rank": "4",
          "name": "Blombos Cave Rock Art",
          "location": {
            "locationName": "Blombos Private Nature Reserve, Heidelberg, Western Cape, South Africa",
            "locationUrl": "https://www.google.com/maps/place/Blombos+Private+Nature+Reserve/@-34.4122784,21.2145526,17z/data=!3m1!4b1!4m5!3m4!1s0x1dd6c90a53a87def:0x1e6f4d54e0f39ebe!8m2!3d-34.4122828!4d21.2167413"
          },
          "creationDate": "70,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fblombos-cave-art.jpg?alt=media&token=9a9901e8-efce-4bbb-bd7c-f26b051ecdc1"
        },
        {
          "rank": "5",
          "name": "Diepkloof Eggshell Engravings",
          "location": {
            "locationName": "Diepkloof Rock Shelter, Verlorenvlei, Western Cape, South Africa",
            "locationUrl": "https://www.google.com/maps/place/%D0%9F%D0%B5%D1%89%D0%B5%D1%80%D0%B0+%D0%94%D0%B8%D0%BF%D0%BA%D0%BB%D0%BE%D1%84/@-32.3869787,18.4503043,17z/data=!3m1!4b1!4m5!3m4!1s0x1c33a040be0d1b67:0x399454780e877e3c!8m2!3d-32.3869832!4d18.452493"
          },
          "creationDate": "60,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fdiepkloof-ostrich-eggshells.jpg?alt=media&token=69dc077e-d8b3-4c23-bc13-959e120c04c0"
        },
        {
          "rank": "6",
          "name": "La Ferrassie Cave Cupules",
          "location": {
            "locationName": "La Ferrassie, Dordogne, France",
            "locationUrl": "https://www.google.com/maps/place/La+Ferrassie+1,+24260+Savignac-de-Miremont,+France/@44.9535245,0.9244914,14z/data=!3m1!4b1!4m5!3m4!1s0x12ab4a5370167ebf:0x179acafcf1b49668!8m2!3d44.953496!4d0.942001"
          },
          "creationDate": "60,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fla-ferrassie-cupules.png?alt=media&token=2cf8bb93-77a5-4811-92a7-2410cc9a9b59"
        },
        {
          "rank": "7",
          "name": "El Castillo Cave Paintings",
          "location": {
            "locationName": "Cave of El Castillo, Puente Viesgo, Cantabria, Spain",
            "locationUrl": "https://www.google.com/maps/place/Cave+of+El+Castillo/@43.2923718,-3.9677647,17z/data=!3m1!4b1!4m5!3m4!1s0xd493b732db6adfb:0xb1712a65b2527719!8m2!3d43.2923679!4d-3.965576"
          },
          "creationDate": "39,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fel-castillo-cave-paintings.jpg?alt=media&token=97e953c4-bf6b-490e-9da3-e51881119b6a"
        },
        {
          "rank": "8",
          "name": "Sulawesi Cave Art",
          "location": {
            "locationName": "Leang Timpuseng Cave, Maros-Pangkep, Indonesia",
            "locationUrl": "https://www.google.com/maps/place/Leang+Timpuseng/@-4.9985644,119.6586086,17z/data=!3m1!4b1!4m5!3m4!1s0x2dbef6377e878e8b:0xb26325a2f5462f83!8m2!3d-4.9985697!4d119.6607973"
          },
          "creationDate": "38,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fsulawesi-cave-paitings.jpg?alt=media&token=afc7e54f-1bb8-45ec-9b50-71480cbf5834"
        },
        {
          "rank": "9",
          "name": "Lion Man of Hohlenstein Stadel",
          "location": {
            "locationName": "Hohlenstein-Stadel Cave, Asselfingen, Germany",
            "locationUrl": "https://goo.gl/maps/FxmcZfT4NDw"
          },
          "creationDate": "38,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Flion-man.jpg?alt=media&token=6d754477-aa03-44f3-b94e-2d15201cc601"
        },
        {
          "rank": "10",
          "name": "Venus of Hohle Fels",
          "location": {
            "locationName": "Hohle Fels Cave, Schelklingen, Germany",
            "locationUrl": "https://www.google.com/maps/place/Hohle+Fels+Schelklingen/@48.3792068,9.7520669,17z/data=!3m1!4b1!4m5!3m4!1s0x47997eb1dd24a1af:0x13f890d8b9533fc5!8m2!3d48.3792033!4d9.7542556"
          },
          "creationDate": "38,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-of-hohle-fels.jpg?alt=media&token=4b59f7b0-628d-4ca5-88b5-fcb0fd2db6c8"
        },
        {
          "rank": "11",
          "name": "Gorhams Cave Art",
          "location": {
            "locationName": "Gorhams Cave, Southeast face of the Rock of Gibraltar, Gibraltar",
            "locationUrl": "https://goo.gl/maps/huhS3K6N2wm"
          },
          "creationDate": "37,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fgorhams-cave-art.jpg?alt=media&token=7f3bb59f-cf93-4b1e-835e-f3dd60e15c82"
        },
        {
          "rank": "12",
          "name": "Abri Castanet Engravings",
          "location": {
            "locationName": "Abri Castanet Rock Shelter, Sergeac, Dordogne, France",
            "locationUrl": "https://www.google.com/maps/place/24290+Sergeac,+France/@45.0003321,1.0949539,14z/data=!3m1!4b1!4m5!3m4!1s0x47ff5623eb45f4ef:0x40665174817f3c0!8m2!3d45.002428!4d1.106926"
          },
          "creationDate": "35,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fabri-castanet-art.jpg?alt=media&token=d0d397f5-38e0-4eb1-b62f-339b58c02802"
        },
        {
          "rank": "13",
          "name": "Fumane Cave Paintings",
          "location": {
            "locationName": "Fumane Cave, VR, Italy",
            "locationUrl": "https://www.google.com/maps/place/Grotta+di+Fumane/@45.5924847,10.9022413,17z/data=!3m1!4b1!4m5!3m4!1s0x4781fbc791c95995:0xd5b1de66d404b20!8m2!3d45.592481!4d10.90443"
          },
          "creationDate": "35,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Ffumane-cave-paintings.jpg?alt=media&token=6aa89a2c-f5f5-4fd7-8545-20f3b57265f9"
        },
        {
          "rank": "14",
          "name": "Altamira Cave Paintings",
          "location": {
            "locationName": "Cave of Altamira, Cantabria, Spain",
            "locationUrl": "https://www.google.com/maps/place/Cave+of+Altamira/@43.3774559,-4.1245357,17z/data=!3m1!4b1!4m5!3m4!1s0xd4915202e812c27:0x29a6633c717b1591!8m2!3d43.377452!4d-4.122347"
          },
          "creationDate": "34,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Faltamira-cave-paintings.jpg?alt=media&token=ed680917-ad59-4766-8b29-a735492a0d35"
        },
        {
          "rank": "15",
          "name": "Swabian Jura Ivory Carvings",
          "location": {
            "locationName": "Vogelherd Cave, Swabian Jura, Niederstotzingen, Germany",
            "locationUrl": "https://www.google.com/maps/place/ARCH%C3%84OPARK+VOGELHERD/@48.5590415,10.1922144,17z/data=!3m1!4b1!4m5!3m4!1s0x479940fb4f08694f:0x575361b14705b633!8m2!3d48.559038!4d10.1944031"
          },
          "creationDate": "33,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fswabian-jura-ivory-carvings.jpg?alt=media&token=a8f894e4-d3fb-4ad0-b7fb-48e0f3e1b258"
        }
      ]'></zg-data>
      <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>

CSS

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;
}

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

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

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;
}

.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;
}

JS

// VARS
// ----------------------------------
const zgRef = document.querySelector('zing-grid');

zgRef.addEventListener('grid:ready', function(e) {
  console.log('grid 1 ready');
});

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

Edit in Studio