<!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 -->
<!-- Sidebar/menu -->
<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 -->

  <!-- First Photo Row-->
  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/coal.html">
      <img src="examples/Coal/Coal_Zoom_Example.jpg" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Coal Brikett</b></p>
        <p>Coal brikett from a bag of BBQ coal.</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/corals.html">
      <img src="examples/Corals/MexCoral_3D.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Corals</b></p>
        </a>
        <p>Top part of a staghorn coral.</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/cowry_shell.html">
      <img src="examples/Cowry_Shell/Cowry_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Cowry Shell</b></p>
        </a>
        <p>Shell of a cowry sea snail.</p>
      </div>
    </div>
  </div>

  <!-- Second Photo Row-->
  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/crab.html">
      <img src="examples/Crab/CrabOkinawa_Transparent.jpg" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Crab</b></p>
        </a>
        <p>Small crab thorax with some legs attached.</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/deer_mandible.html">
      <img src="examples/Deer_Mandible/DeerMandible_3Dexample.jpg" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Deer Mandible</b></p>
        </a>
        <p>Mandible of deer with some teeth.</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/foam.html">
      <img src="examples/Foam/Foam_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Packing Foam</b></p>
        <p>Packing material plastic foam.</p>
      </div>
    </div>
  </div>

  <!-- Third Photo Row-->
  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/hourglass.html">
      <img src="examples/Hourglass/Hourglass_3D.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Hourglass</b></p>
        </a>
        <p>Scans of Hourglass filled with sand</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/kiwi.html">
      <img src="examples/Kiwi/kiwi_3D.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Kiwi</b></p>
        </a>
        <p>Scan of a small Kiwi</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/loofah.html">
      <img src="examples/Loofah/Loofah_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Loofah</b></p>
        <p>Part of a dried cucumber like vegetable used as scrubbing sponge.</p>
      </div>
    </div>
  </div>

  <!-- Fourth Photo Row-->
  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/marine_gastropods.html">
      <img src="examples/Marine_Gastropods/MarineGastropod1_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Marine Gastropods</b></p>
        </a>
        <p>Small sea snail (gastropod) shells</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/mussel.html">
      <img src="examples/Mussel/Mussel_closed_3Dcut.jpg" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Closed Mussel</b></p>
        <p>Vacuum packed closed clam from an (expired) instant soup.</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/oak_branch.html">
      <img src="examples/Oak_Branch/oakbranch_3D.png" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Oak Branch</b></p>
        <p>Small oak branch.</p>
      </div>
    </div>
  </div>

  <!-- Fifth Photo Row-->
  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/okinawa_forams.html">
      <img src="examples/Okinawa_forams/okinawa_3D.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Okinawa Forams</b></p>
        </a>
        <p>Shell of a unicellular marine organism</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/physalis.html">
      <img src="examples/Physalis/physalis_3D.png" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Physalis</b></p>
        <p>Physalis fruit with husk</p>
      </div>
    </div>

    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/raspberry.html">
      <img src="examples/Raspberry/raspberry_3D_1.png" style="width:100%" class="w3-hover-opacity">
      </a>
      <div class="w3-container w3-white">
        <p><b>Raspberry</b></p>
        <p>Wild raspberry</p>
      </div>
    </div>
  </div>

  <!-- Sixth Photo Row-->
  <div class="w3-row-padding w3-padding-16">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="pages/rope.html">
      <img src="examples/Rope/Rope_3D_Example.jpg" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Rope</b></p>
        </a>
        <p>Piece of synthetic rope</p>
      </div>
    </div>

  </div>


  <!-- Example Photo Grid-->
  <div class="w3-row-padding">
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="example1.html">
      <img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="example2.html">
      <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container w3-margin-bottom">
      <a href="example3.html">
      <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
  </div>


  <!-- Footer -->
  <script src='footer.js'></script>

<!-- End page content -->
</div>

</body>
</html>