<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Long Scrolling Webpage</title>
  <!-- //// need for zurb - EDIT FILEPATHS ///// -->
  <link rel="stylesheet" href="../zurb/css/foundation.css">
  <link rel="stylesheet" href="../zurb/css/app.css">
  <!-- //// need for zurb - EDIT FILEPATHS ///// -->
  <link href="https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow|Josefin+Sans|Londrina+Shadow" rel="stylesheet">
  <link href="css/longpage.css" rel="stylesheet">
</head>
<body>
  <h1> Depths of the Sea</h1>
  <P>
    Just how deep does the ocean go? If you took the highest point on land and then submerged it,
    you would still have more than a mile between you and the deepest point in the oceans. The
    oceans harbor 99% of all living space on Earth and have enough water to fill a bathtub that's
    685 miles long, on each side. The purpose of this site is to show examples and facts about what lies
    beneath. As you scroll down the page, the number of feet shows an interesting fact and how deep that
    fact lies.
  </p>
<div id="stage">
    <img class="jelly" src="img/jellyfish.png" alt="fellyfish">
  <div class="sea_img">
    <div class="well-lit">
    <img src="img/whale.png" alt="blue whale">
      <figcaption><b>330 feet:</b>The well-lit zone of the ocean and where blue whales usually hunt. </figcaption>
    </div>
    <div class="triton">
      <img class="animation" src="img/attacksub.png" alt="submarine">
        <figcaption class="caption"><b>700 feet:</b> USS Triton became the fist to circumnavigate the Earth in 1960. </figcaption>
    </div>
    <div class="whales">
      <img class="whale-attack" src="img/whale-attack.png" alt="whale with squid">
        <figcaption><b>1,640 feet:</b> Max depth of whales where they hunt giant squid.</figcaption>
    </div>
    <div class="danger-zone">
      <img src="img/depth-meter.gif" alt="depth-meter">
        <figcaption><b>2,400 feet:</b> Danger zone for modern attack submarines. Any deeper the submarine's hull would implode.</figcaption>
    </div>
    <div class="tallest-building">
      <img src="img/Burj-Khalifa.png" alt="Burj-Khalifa">
        <figcaption><b>2,722 feet:</b> The world's tallest building the "Burj Khalifa" would reach.</figcaption>
    </div>
    <div class="midnight_zone">
      <img src="img/midnight.gif" alt="midnight text">
        <figcaption><b>4,606 feet:</b> Midnight Zone: Deep enough that sunlight can't reach.</figcaption>
    </div>
    <div class="titanic">
      <img src="img/titanic.gif" alt="titanic">
        <figcaption><b>12,500 feet:</b> The wreck of the RMS Titanic lies off the coast of Newfoundland.</figcaption>
    </div>
    <div class="bottom">
      <figcaption>Welcome to the bottom of the ocean</figcaption>
      <img src="img/bottom.png" alt="deep sea fish">
    </div>
  </div>
<div id="submarine">
  <img src="img/submarine.png">
</div>
</div>
<!-- //// need for zurb - EDIT FILEPATHS ///// -->
<script src="../zurb/js/vendor/jquery.js"></script>
<script src="../zurb/js/vendor/what-input.js"></script>
<script src="../zurb/js/vendor/foundation.js"></script>
<script src="../zurb/js/app.js"></script>
<!-- //// need for zurb - EDIT FILEPATHS ///// -->
<script src="js/longpage.js"></script>
</body>
</html>
