AdvancedCSS2023 · github-classroom · Apr 24, 2023 · Apr 24, 2023 · Apr 26, 2023 · Apr 26, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1 +1,21 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/E1TYCvbT)
 [![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=10969909&assignment_repo_type=AssignmentRepo)
+
+
+What does the project do?
+The project is a scrollytelling page that tells a story about the ocean and the effects of pollution on sea creatures. It uses JavaScript and CSS to create interactive animations and effects that are triggered as the user scrolls through the page.
+
+Why is the project useful?
+The project raises awareness about the issue of ocean pollution and its impact on sea creatures. It educates users on the problem and the importance of taking action to address it. Additionally, the interactive and engaging nature of the page helps to hold the user's attention and make the information more memorable.
+
+How can users get started with the project?
+Users can access the project by visiting the website ( https://advancedcss2023.github.io/assignment-3--scrollytelling-group_07/ ) or page where it is hosted. They can then begin scrolling through the page to experience the interactive effects and animations. No additional setup or installation is required.
+
+Where can users get help with the project?
+If users encounter any issues or have questions about the project, they can consult the developers for further assistance.
+
+Which technology is used?
+The project uses HTML,JavaScript and CSS to create the interactive effects and animations on the scrollytelling page.
+
+Who maintains and contributes to the project?
+Mariam, Håkon and julie
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/blue-fish.png b/images/blue-fish.png
diff --git a/images/boat.png b/images/boat.png
diff --git a/images/crab.png b/images/crab.png
diff --git a/images/man-cleaning.png b/images/man-cleaning.png
diff --git a/images/pollution.png b/images/pollution.png
diff --git a/images/scene1-brownfish.png b/images/scene1-brownfish.png
diff --git a/images/scene1-dolphin.png b/images/scene1-dolphin.png
diff --git a/images/scene1-fish-big.png b/images/scene1-fish-big.png
diff --git a/images/scene1-splash.png b/images/scene1-splash.png
diff --git a/images/scene2-bigfishdead.png b/images/scene2-bigfishdead.png
diff --git a/images/scene2-bluefishdead.png b/images/scene2-bluefishdead.png
diff --git a/images/scene2-fish1.png b/images/scene2-fish1.png
diff --git a/images/scene2-ship.png b/images/scene2-ship.png
diff --git a/images/scene3-boat-big.png b/images/scene3-boat-big.png
diff --git a/images/scene3-boat-small.png b/images/scene3-boat-small.png
diff --git a/images/scene3-fish-stranded.png b/images/scene3-fish-stranded.png
diff --git a/images/scene3-fish-swimming.png b/images/scene3-fish-swimming.png
diff --git a/images/scene5-fish.png b/images/scene5-fish.png
diff --git a/images/trash-bag.png b/images/trash-bag.png
diff --git a/images/trash-cup.png b/images/trash-cup.png
diff --git a/images/waves.png b/images/waves.png
diff --git a/images/woman-cleaning.png b/images/woman-cleaning.png
diff --git a/index.html b/index.html
@@ -0,0 +1,159 @@
+<!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>
diff --git a/script.js b/script.js
@@ -0,0 +1,13 @@
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+      } else {
+        entry.target.classList.remove('visible');
+      }
+    });
+  });
+
+  const imageContainers = document.querySelectorAll('.section__image-container');
+  imageContainers.forEach(container => observer.observe(container));
+