index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="./styles/index.css" />
  <script defer src="script.js"></script>
  <title>main__goal 14</title>
</head>

<body>
  <main class="main__goal">
    <div id="flip-phone-message">
      Please flip your phone to landscape mode for a better experience.
    </div>
    
    <section>
      <div class="section__image-container">
        <h1>The Ocean's Journey: From Beauty to Devastation and Back Again</h1>
        <img src="images/waves.png" class="image-container__waves" alt="waves">
      </div>
    </section>

    <section>
      <div class="section__image-container">
        <div class="image-container__fish--scene1"><img src="images/scene1-fish-big.png"></div>
        <div class="image-container__splash--scene1"><img src="images/scene1-splash.png"></div>
        <div class="image-container__dolphin--scene1"><img src="images/scene1-dolphin.png"></div>
        <div class="image-container__brownfish--scene1"><img src="images/scene1-brownfish.png"></div>
        <div class="image-container__bluefish--scene1"><img src="images/blue-fish.png"></div>
        <div><img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34 image-container__fish--scene1-swimmer" alt="fish swimming"></div>
        <img class="image-container__crab" src="images/crab.png"  alt="cute crab">
        <img src="images/waves.png" class="image-container__waves" alt="waves">
        <p>
          The ocean is vast and bountiful, full of life, critters and creatures.
        </p>
      </div>
    </section>

    <section>
      <div class="section__image-container">
        <div class="image-container__ship--scene2"><img src="images/scene2-ship.png"></div>
        <div class="image-container__chemspill--scene2"><img src="images/pollution.png"></div>
        <div class="image-container__bigfishdead--scene2"><img src="images/scene2-bigfishdead.png"></div>
        <div class="image-container__bluefishdead--scene2"><img src="images/scene2-bluefishdead.png"></div>
        <div class="image-container__fish1--scene2"><img src="images/scene2-fish1.png"></div>
        <div class="image-container__fish2--scene2"><img src="images/blue-fish.png"></div>
        <img src="images/crab.png" class="image-container__crab" alt="cute crab">
        <img src="images/waves.png" class="image-container__waves" alt="ocean waves">
        <p>
          However, with the advancement of industry and technology, large corporations have used the once beautiful
          ocean as a quick and easy way to dump waste.
        </p>
      </div>
    </section>

    <section>
      <div class="section__image-container">
        <div class="image-container__scene3">
          <div class="boats">
            <img src="images/scene3-boat-big.png" class="image-container__image-container__boat--scene3" alt="big boat">
            <img src="images/scene3-boat-small.png" class="image-container__image-container__boat--scene3" alt="small boat">
          </div>

          <div class="pollution">
            <img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
            <img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
          </div>

          <div class="trash">
            <img src="images/trash-bag.png" class="image-container__image-container__trash--scene34" alt="trash bag">
            <img src="images/trash-cup.png" class="image-container__image-container__trash--scene34" alt="trash thing">
          </div>

          <div class="fish">
            <img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34" alt="fish swimming">
            <img src="images/scene2-bigfishdead.png" class="image-container__fish--image-container__scene34" alt="dead fish">
            <img src="images/scene3-fish-stranded.png" class="image-container__fish--image-container__scene34" alt="stranded fish">
          </div>
          <img src="images/waves.png" class="image-container__waves" alt="ocean image-container__waves">
          <p>
            As the pollution continues, the ocean becomes uninhabitable for the sea creatures. Some die while others
            leave.
          </p>
        </div>
      </div>
    </section>

    <section>
      <div class="section__image-container">
        <div class="scene4">
          <img src="images/scene3-boat-small.png" class="image-container__boat--scene4" alt="small boat">

          <div class="pollution">
            <img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
            <img src="images/pollution.png" class="image-container__image-container__pollution--scene34" alt="nasty green pollution">
          </div>

          <div class="trash">
            <img src="images/trash-bag.png" class="image-container__image-container__trash--scene34" alt="trash bag">
            <img src="images/trash-cup.png" class="image-container__image-container__trash--scene34" alt="trash cup">
          </div>

          <div class="fish">
            <img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34" alt="fish swimming">
            <img src="images/scene2-bigfishdead.png" class="image-container__fish--image-container__scene34" alt="dead fish">
            <img src="images/scene3-fish-stranded.png" class="image-container__fish--image-container__scene34" alt="stranded fish">
          </div>

          <img src="images/man-cleaning.png" class="scene4-guy" alt="guy cleaning the beach">
          <img src="images/waves.png" class="image-container__waves" alt="ocean waves">
          <p>
            Noticing the poor state of the ocean, some people start working to combat the pollution.
          </p>
        
    </section>

    <section>
      <div class="section__image-container">
        <div class="scene5">
          <div class="scene5-fish"><img src="images/scene5-fish.png"></div>
          <div><img src="images/scene3-fish-swimming.png" class="image-container__fish--image-container__scene34" alt="fish swimming"></div>
          <div class="scene5-boat"><img src="images/boat.png"></div>
          <div class="scene5-woman"><img src="images/woman-cleaning.png"></div>
          <div class="scene5-man"><img src="images/man-cleaning.png"></div>
          <div class="scene5-green-puddle"><img src="images/pollution.png"></div>
          <div class="scene5-bag"><img src="images/trash-bag.png"></div>
          <div class="scene5-cup"><img src="images/trash-cup.png"></div>
          <img src="images/crab.png" class="image-container__crab" alt="cute crab">
          <img src="images/waves.png" class="image-container__waves" alt="ocean waves">
        </div>

        <p>
          This, in turn inspires others to help.
        </p>
      </div>
    </section>

    <section>
      <div class="section__image-container">
        <div class="scene6">
          <div class="scene6-orange-fish"><img src="images/scene5-fish.png"></div>
          <div class="scene6-blue-fish"><img src="images/blue-fish.png"></div>
          <div class="scene6-image-container__crab"><img src="images/crab.png"></div>
          <img src="images/waves.png" class="image-container__waves" alt="ocean waves">
        </div>
        <p>
          The damage to the ocean has been severe and we can't fully restore it to how it was, but
          through hard work and determination we can get it to a much better state than it currently
          is in.
        </p>
      </div>
    </section>
  </main>
</body>

</html>