<ul class="jigsaw">
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1002">
<figcaption>
<a>1. beliefs</a>
</figcaption>
</li>
<li>
</figure>
<figure>
<img src="https://picsum.photos/250/150/?image=995">
<figcaption>
<a>2. fauna</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=981">
<figcaption>
<a>3. flora</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1064">
<figcaption>4. tours</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1057">
<figcaption>
<a>5. language</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1052">
<figcaption>
<a>6. people</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1050">
<figcaption>
<a>7. art</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1043">
<figcaption>
<a>8. heros</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1038">
<figcaption>
<a>9. cultural awareness training</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1035">
<figcaption>
<a>10. members</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1037">
<figcaption>
<a>11. Ngurra</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=1016">
<figcaption>
<a>12. shop</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://picsum.photos/250/150/?image=998">
<figcaption>
<a>13. sites</a>
</figcaption>
</figure>
</li>
</ul>
<div class="introText">
<article class="welcomeToCountry">
<p>Ngurra gangangarrinha yingu buluyugayi birbiwarni wankgayi thurdud mirda nyantharri biyiyarri…
</p>
<p>Country, we come here today to visit you and talk straight… please don’t get angry and harm us…
</p>
<p>
Coming to country, we speak to our ancestors, and they speak with us. Creating this website, we speak with you. We share
our knowledge, experience and cultural heritage generously so that you will understand who we are and learn about
our Yindjibarndi country, our people, our language and Laws.
</p>
<p>Wanthiwa!</p>
</article>
</div>
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
display: grid;
grid-template-columns: 3fr 2fr;
justify-content: space-around;
font-family: 'Gill Sans', Arial, sans-serif;
}
ul.jigsaw {
display: grid;
grid-gap: 0;
grid-template-columns: repeat(37,25px);
grid-template-rows: repeat(28,25px);
margin: 0 auto;
list-style: none;
}
ul.jigsaw li figure {
width: 15.63rem;
height: 9.375rem;
padding: 0;
margin: 0;
position: relative;
}
ul.jigsaw li figure>img {
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
ul.jigsaw li figure>figcaption {
background-color: white;
opacity: 0.8;
position: absolute;
left: 0;
bottom: 0;
width: 15.63rem;
padding: 0.5rem;
text-align: center;
}
ul.jigsaw li:nth-of-type(1) {
grid-column: 6;
grid-row: 1;
align-self: start;
}
ul.jigsaw li:nth-of-type(2) {
grid-column: 14;
grid-row: 4;
z-index: -1;
align-self: start;
}
ul.jigsaw li:nth-of-type(3) {
grid-column: 22;
grid-row: 3;
z-index: -3;
align-self: start;
}
ul.jigsaw li:nth-of-type(4) {
grid-column: 5;
grid-row: 6;
z-index: -2;
align-self: start;
}
ul.jigsaw li:nth-of-type(5) {
grid-column: 15;
grid-row: 10;
z-index: 1;
align-self: start;
}
ul.jigsaw li:nth-of-type(6) {
grid-column: 24;
grid-row: 9;
z-index: -4;
align-self: start;
}
ul.jigsaw li:nth-of-type(7) {
grid-column: 7;
grid-row: 12;
z-index: 3;
align-self: start;
}
ul.jigsaw li:nth-of-type(8) {
grid-column: 16;
grid-row: 16;
z-index: -1;
align-self: start;
}
ul.jigsaw li:nth-of-type(9) {
grid-column: 25;
grid-row: 15;
z-index: -2;
align-self: start;
}
ul.jigsaw li:nth-of-type(10) {
grid-column: 17;
grid-row: 22;
z-index: 2;
align-self: start;
}
ul.jigsaw li:nth-of-type(11) {
grid-column: 26;
grid-row: 21;
z-index: -1;
align-self: start;
}
ul.jigsaw li:nth-of-type(12) {
grid-column: 1;
grid-row: 20;
z-index: -3;
align-self: start;
}
ul.jigsaw li:nth-of-type(13) {
grid-column: 8;
grid-row: 18;
z-index: 1;
align-self: start;
}
div.introText {
grid-column: 2/3;
align-self: center;
}
.introText .welcomeToCountry{
width: 35rem;
line-height: 1.25rem;
}
p:nth-of-type(1){
font-size: 24px;
line-height: 1.75rem;
}
p:nth-of-type(2), p:nth-of-type(4){
font-size: 18px;
font-style: italic;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.