diff --git a/examples/Sea_Urchin/CordatumShell_3D_Example.jpg b/examples/Sea_Urchin/CordatumShell_3D_Example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..999323100291e08d3db88f0dc1cced06737313ac
Binary files /dev/null and b/examples/Sea_Urchin/CordatumShell_3D_Example.jpg differ
diff --git a/examples/Sea_Urchin/CordatumShell_3D_Example1.jpg b/examples/Sea_Urchin/CordatumShell_3D_Example1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ee01d1631a4c2c7039b61b06fe46c2e79eb44823
Binary files /dev/null and b/examples/Sea_Urchin/CordatumShell_3D_Example1.jpg differ
diff --git a/examples/Sea_Urchin/CordatumSpine_3D_Example.jpg b/examples/Sea_Urchin/CordatumSpine_3D_Example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d8db3dd6359b5cec1c43691e7f75ef370a712a3f
Binary files /dev/null and b/examples/Sea_Urchin/CordatumSpine_3D_Example.jpg differ
diff --git a/examples/Sea_Urchin/EsculentesSpineShell_3D_Example.jpg b/examples/Sea_Urchin/EsculentesSpineShell_3D_Example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e35272d169077470b2a131bb53101b4ca179d417
Binary files /dev/null and b/examples/Sea_Urchin/EsculentesSpineShell_3D_Example.jpg differ
diff --git a/examples/Sea_Urchin/cordatumSpine_3d_1.png b/examples/Sea_Urchin/cordatumSpine_3d_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc29682cd179f98d84ebc1cb16f9bcde528ce0a3
Binary files /dev/null and b/examples/Sea_Urchin/cordatumSpine_3d_1.png differ
diff --git a/examples/Sea_Urchin/histogram.png b/examples/Sea_Urchin/histogram.png
new file mode 100644
index 0000000000000000000000000000000000000000..50a99914768154cb7555c1aeb94b616024411367
Binary files /dev/null and b/examples/Sea_Urchin/histogram.png differ
diff --git a/examples/Sea_Urchin/histogram_cordatum_shell.png b/examples/Sea_Urchin/histogram_cordatum_shell.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f69e3abedef7f0d390fef444a52f6509f0050e5
Binary files /dev/null and b/examples/Sea_Urchin/histogram_cordatum_shell.png differ
diff --git a/examples/Sea_Urchin/histogram_cordatum_spine.png b/examples/Sea_Urchin/histogram_cordatum_spine.png
new file mode 100644
index 0000000000000000000000000000000000000000..51583c40ec1ff527e2885ec8b76bbaef6f443ab4
Binary files /dev/null and b/examples/Sea_Urchin/histogram_cordatum_spine.png differ
diff --git a/examples/Sea_Urchin/orthogonal_slices.png b/examples/Sea_Urchin/orthogonal_slices.png
new file mode 100644
index 0000000000000000000000000000000000000000..f27802c8ef124ef4d14f00738823f452c5293b07
Binary files /dev/null and b/examples/Sea_Urchin/orthogonal_slices.png differ
diff --git a/examples/Sea_Urchin/same_direction.png b/examples/Sea_Urchin/same_direction.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a7e81c64428f01e9b19b15dee50a0a03808a27c
Binary files /dev/null and b/examples/Sea_Urchin/same_direction.png differ
diff --git a/examples/Sea_Urchin/seaUrchin_3d_1.png b/examples/Sea_Urchin/seaUrchin_3d_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcc93db824119bb84ebb10b4514fc2a791f15679
Binary files /dev/null and b/examples/Sea_Urchin/seaUrchin_3d_1.png differ
diff --git a/examples/Sea_Urchin/seaUrchin_3d_2.png b/examples/Sea_Urchin/seaUrchin_3d_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d2006c5215295f9bb0d24f19d34a088191988a9
Binary files /dev/null and b/examples/Sea_Urchin/seaUrchin_3d_2.png differ
diff --git a/examples/Sea_Urchin/single_view_1.png b/examples/Sea_Urchin/single_view_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc59925b265955991713e22075f43e99b90de8aa
Binary files /dev/null and b/examples/Sea_Urchin/single_view_1.png differ
diff --git a/examples/Sea_Urchin/single_view_cordatum_shell.png b/examples/Sea_Urchin/single_view_cordatum_shell.png
new file mode 100644
index 0000000000000000000000000000000000000000..2703dce0ebd1f98e7908ac38a85f04c6aeaa1458
Binary files /dev/null and b/examples/Sea_Urchin/single_view_cordatum_shell.png differ
diff --git a/examples/Sea_Urchin/single_view_cordatum_spine.png b/examples/Sea_Urchin/single_view_cordatum_spine.png
new file mode 100644
index 0000000000000000000000000000000000000000..a253e0e2db670016851195779d1884ea0c6d098a
Binary files /dev/null and b/examples/Sea_Urchin/single_view_cordatum_spine.png differ
diff --git a/examples/Sea_Urchin/single_view_x.png b/examples/Sea_Urchin/single_view_x.png
new file mode 100644
index 0000000000000000000000000000000000000000..58169eda986a255fc617e70b23287c6e60b83df4
Binary files /dev/null and b/examples/Sea_Urchin/single_view_x.png differ
diff --git a/examples/Sea_Urchin/single_view_y.png b/examples/Sea_Urchin/single_view_y.png
new file mode 100644
index 0000000000000000000000000000000000000000..77fab5836dfe9bf6815959f9eba1f8154e2567b7
Binary files /dev/null and b/examples/Sea_Urchin/single_view_y.png differ
diff --git a/examples/Sea_Urchin/single_view_z.png b/examples/Sea_Urchin/single_view_z.png
new file mode 100644
index 0000000000000000000000000000000000000000..35517f6f589e2a3a50ed05a91a382e576c882ae7
Binary files /dev/null and b/examples/Sea_Urchin/single_view_z.png differ
diff --git a/examples/Snail/Escargot_Example.png b/examples/Snail/Escargot_Example.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ba86931bf0a4720be9a5e322da485bfc457a830
Binary files /dev/null and b/examples/Snail/Escargot_Example.png differ
diff --git a/examples/Snail/escargot_3d_1.png b/examples/Snail/escargot_3d_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8db694a9a792cca1405605d7061c581e0485592
Binary files /dev/null and b/examples/Snail/escargot_3d_1.png differ
diff --git a/examples/Snail/escargot_3d_2.png b/examples/Snail/escargot_3d_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f62c27806b1ac17516e6cec1d6bb3145eb0b430
Binary files /dev/null and b/examples/Snail/escargot_3d_2.png differ
diff --git a/examples/Snail/histogram.png b/examples/Snail/histogram.png
new file mode 100644
index 0000000000000000000000000000000000000000..34baa0a1fc2004f5d57fdfb1dc2a5decf980d14f
Binary files /dev/null and b/examples/Snail/histogram.png differ
diff --git a/examples/Snail/orthogonal_slices.png b/examples/Snail/orthogonal_slices.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dcba677f774d5de7dd24a442ae546b4a50e7918
Binary files /dev/null and b/examples/Snail/orthogonal_slices.png differ
diff --git a/examples/Snail/same_direction.png b/examples/Snail/same_direction.png
new file mode 100644
index 0000000000000000000000000000000000000000..52eabce31c31139810bdae35dac8bc2222430b24
Binary files /dev/null and b/examples/Snail/same_direction.png differ
diff --git a/examples/Snail/single_view_1.png b/examples/Snail/single_view_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a61c0e832a67da5b1d8d6ca5056c0db15fd1648f
Binary files /dev/null and b/examples/Snail/single_view_1.png differ
diff --git a/examples/Snail/single_view_x.png b/examples/Snail/single_view_x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9bf31b811f9ebd44e4887e43dcf25892b0c217e
Binary files /dev/null and b/examples/Snail/single_view_x.png differ
diff --git a/examples/Snail/single_view_y.png b/examples/Snail/single_view_y.png
new file mode 100644
index 0000000000000000000000000000000000000000..5eb467d5bf3aa0baa3defed6156a5231d2cbd972
Binary files /dev/null and b/examples/Snail/single_view_y.png differ
diff --git a/examples/Snail/single_view_z.png b/examples/Snail/single_view_z.png
new file mode 100644
index 0000000000000000000000000000000000000000..271a5871502dec140e308fc510ff616d353cf801
Binary files /dev/null and b/examples/Snail/single_view_z.png differ
diff --git a/examples/Sponge/Sponge_Example.png b/examples/Sponge/Sponge_Example.png
new file mode 100644
index 0000000000000000000000000000000000000000..262c8afd8743556a0d9417f2d79269ba851c892c
Binary files /dev/null and b/examples/Sponge/Sponge_Example.png differ
diff --git a/examples/Sponge/histogram.png b/examples/Sponge/histogram.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c60553437c5b1e938758d9f0232ef5853bec6bf
Binary files /dev/null and b/examples/Sponge/histogram.png differ
diff --git a/examples/Sponge/orthogonal_slices.png b/examples/Sponge/orthogonal_slices.png
new file mode 100644
index 0000000000000000000000000000000000000000..db2aebc534cd0cc6fee45f4a720cb25f5171075d
Binary files /dev/null and b/examples/Sponge/orthogonal_slices.png differ
diff --git a/examples/Sponge/same_direction.png b/examples/Sponge/same_direction.png
new file mode 100644
index 0000000000000000000000000000000000000000..46007e4b6f8ad04d670ddb97f3f8669d85c49d03
Binary files /dev/null and b/examples/Sponge/same_direction.png differ
diff --git a/examples/Sponge/single_view_1.png b/examples/Sponge/single_view_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f659fc16b1f954adb04ca847ecc6176e1e8b783
Binary files /dev/null and b/examples/Sponge/single_view_1.png differ
diff --git a/examples/Sponge/single_view_x.png b/examples/Sponge/single_view_x.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e7144d5db0528d4b4d18a6218ee8f63812d323f
Binary files /dev/null and b/examples/Sponge/single_view_x.png differ
diff --git a/examples/Sponge/single_view_y.png b/examples/Sponge/single_view_y.png
new file mode 100644
index 0000000000000000000000000000000000000000..8af80d6c499a400352057ca2201293cf02c41599
Binary files /dev/null and b/examples/Sponge/single_view_y.png differ
diff --git a/examples/Sponge/single_view_z.png b/examples/Sponge/single_view_z.png
new file mode 100644
index 0000000000000000000000000000000000000000..aea5f35c94f51e87f9450c60964a338183e17c10
Binary files /dev/null and b/examples/Sponge/single_view_z.png differ
diff --git a/examples/Sponge/sponge_3d_1.png b/examples/Sponge/sponge_3d_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3625e75d29e0f018c831b19343a3abe55447280b
Binary files /dev/null and b/examples/Sponge/sponge_3d_1.png differ
diff --git a/examples/Sponge/sponge_3d_2.png b/examples/Sponge/sponge_3d_2.png
new file mode 100644
index 0000000000000000000000000000000000000000..434a5fc8f2dec0091c71e02d7e9f52fccc98a209
Binary files /dev/null and b/examples/Sponge/sponge_3d_2.png differ
diff --git a/examples/Sponge/sponge_3d_3.png b/examples/Sponge/sponge_3d_3.png
new file mode 100644
index 0000000000000000000000000000000000000000..4eb7ef924ea4127f92ff22901e58d42f3cf68774
Binary files /dev/null and b/examples/Sponge/sponge_3d_3.png differ
diff --git a/examples/Sponge/sponge_3d_4.png b/examples/Sponge/sponge_3d_4.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd99650b71223cee463f26daa23d7c170714bc2d
Binary files /dev/null and b/examples/Sponge/sponge_3d_4.png differ
diff --git a/pages/sea_urchin.html b/pages/sea_urchin.html
new file mode 100644
index 0000000000000000000000000000000000000000..569208370e2a9762d972b16353cb82ca670e91af
--- /dev/null
+++ b/pages/sea_urchin.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/seaUrchin_3d_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of sea urchin data</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal slices of Sea urchin data</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>This page contains several scans of different sea urchins all originating from Croatia. There is the shell and spine of
+ sea urchin Sphaerechinus granularis in addition to the shell segment of sea urchin Echinocardium cordatum.
+ </p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Sea Urchin</li>
+ <li class="w3-padding-16">Data type: 32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: XX μm</li>
+ <li class="w3-padding-16">Dimensions: 700x1000x1000</li>
+ <li class="w3-padding-16">File size: 2.60 GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Cordatum Shell</li>
+ <li class="w3-padding-16">Data type: 16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: XX μm</li>
+ <li class="w3-padding-16">Dimensions: 992x1014x988</li>
+ <li class="w3-padding-16">File size: 1.85 GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Cordatum Spine</li>
+ <li class="w3-padding-16">Data type: 16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: XX μm</li>
+ <li class="w3-padding-16">Dimensions: 944x313x325</li>
+ <li class="w3-padding-16">File size: 183 MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of sea urchin data</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/single_view_cordatum_shell.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of cordatum shell data</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/single_view_cordatum_spine.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of cordatum spine data</p>
+ </div>
+ </div>
+
+ </div>
+
+
+ <!-- Additional Images -->
+ <!--Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/seaUrchin_3d_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of sea urchin data</p>
+ </div>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/CordatumShell_3D_Example.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of cordatum shell data</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/CordatumSpine_3D_Example.jpg" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of cordatum spine data</p>
+ </div>
+ </div>
+ </div>
+
+ <!--Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of sea urchin data</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/histogram_cordatum_shell.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of cordatum shell data</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sea_Urchin/histogram_cordatum_spine.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of cordatum spine data</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/snail.html b/pages/snail.html
new file mode 100644
index 0000000000000000000000000000000000000000..7a57767df85a613218c5e45a7a7a81b8bb78eb23
--- /dev/null
+++ b/pages/snail.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Snail/escargot_3d_2.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of escargot data</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Snail/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of escargot data</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Snail from a pack of butter filled escargot after being heated. Sample was bought in Denmark.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Escargot</li>
+ <li class="w3-padding-16">Data type: 32-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 48.3 μm</li>
+ <li class="w3-padding-16">Dimensions: 700x700x1000</li>
+ <li class="w3-padding-16">File size: 2.60 GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of escargot data</p>
+ </div>
+ </div>
+
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <!-- <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Snail/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of escargot data</p>
+ </div>
+ </div>
+ </div> -->
+
+
+ <!-- Additional Images -->
+ <!--Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of escargot data along same axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/Escargot_Example.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of escargot data</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of escargot data</p>
+ </div>
+ </div>
+ </div>
+
+ <!--Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of escargot data on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of escargot data on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Snail/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of escargot data on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/pages/sponge.html b/pages/sponge.html
new file mode 100644
index 0000000000000000000000000000000000000000..d8eacaae74197c5a229b3e6d46fcbf4f62177003
--- /dev/null
+++ b/pages/sponge.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="../favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/sponge_3d_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of sponge data</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/orthogonal_slices.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Orthogonal Slices of sponge data</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Natural sponge bought in Croatia.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ </div>
+
+ <!-- Ack -->
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Acknowledgements</b></h4>
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <hr>
+ <!-- </div> -->
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Sponge</li>
+ <li class="w3-padding-16">Data type: 16-bit tiff</li>
+ <li class="w3-padding-16">Voxel size: 133 μm</li>
+ <li class="w3-padding-16">Dimensions: 600x1000x1000</li>
+ <li class="w3-padding-16">File size: 1.11 GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of sponge data</p>
+ </div>
+ </div>
+
+ </div>
+ <!-- End of tables -->
+
+ <!-- Cross sections -->
+ <!-- <h4>Cross sections of data</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/single_view_1.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of sponge data</p>
+ </div>
+ </div>
+ < <div class="w3-half w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/single_view_downsampled.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of Rope downsampled</p>
+ </div>
+ </div>
+ </div> -->
+
+
+ <!-- Additional Images -->
+ <!--Row 1 -->
+ <h4>Additional Images</h4>
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/same_direction.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Multiple slices of sponge data along same axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/sponge_3d_4.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>3D visualization of sponge data</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/histogram.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Histogram of sponge data</p>
+ </div>
+ </div>
+ </div>
+
+ <!--Row 2 -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/single_view_x.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of sponge data on x-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/single_view_y.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of sponge data on y-axis</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="../examples/Sponge/single_view_z.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Cross section of sponge data on z-axis</p>
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>