AdvancedCSS2023 · aniWeyn · May 5, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
diff --git a/README.md b/README.md
@@ -1 +1,52 @@
+[![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=10922263&assignment_repo_type=AssignmentRepo)
+
+
+
+What the project does.
+
+This project is an animated, scrollable website about sustainable goal 14. UN's sustainable goal 14 is about conserving and use the oceans sustainably. Sea and marine resources are an important key element for a future within sustainable development, and should therefore be utalized. 
+In the project we are using advanced CSS features such as CSS architecture, Sass, BEM, SVG, keyframe animations, transitions and transformations to achieve a unique and fun scrolling experience that hopefully will be educating. 
+
+This site features a scrolling narration, implemented use of Intersection Observer, and includes accessibility features such as "prefer-color-scheme" to ensure an optimal user experience.
+The primary objective of the project is to educate users about Sustainable Development Goal 14, which focuses on ocean conservation and sustainable use of marine resources. This is achieved through a combination of storytelling, animations, layout, and typography, which are designed to engage and inform users about the importance of protecting our oceans.
+
+
+Why the project is useful
+
+This project aims to raise awareness about United Nations Sustainable Development Goal 14: Life Below Water. Through an engaging scrollytelling experience, it educates individuals about the importance of protecting and sustainably managing our oceans, seas, and marine resources. By showcasing the challenges faced by marine ecosystems and offering actionable solutions, the project encourages people to become advocates for Goal 14 and contribute to a healthier and more sustainable future for our planet.
+
+
+How users can get started with the project
+
+1. To get started with the project you can Visit the GitHub Pages link where the project is published 
+
+2. Explore the visually captivating animations and educational resources on the website to support Sustainable Development Goal 14, which aims to conserve and sustainably use the oceans, seas, and marine resources.
+
+3. For developers interested in contributing to the project,begin by forking the repository and cloning it to your local machine.
+
+4. Next, create a new branch for the feature you'd like to work on and start making changes to the code.
+
+5. Once you've completed your changes, push the branch to your forked repository and create a pull request to merge your changes into     the original repository. Join the effort to protect our oceans and promote sustainable use of marine resources by contributing to this important project!
+
+
+
+Where users can get help with your project
+
+Please consult the README file located in the project's GitHub repository for guidance.
+If you encounter any bugs or issues, please utilize the "Issues" section within the GitHub repository to report them. 
+For assistance or inquiries regarding the project, feel free to contact the team members listed as contributors in the GitHub repository. 
+
+
+Which technology is used
+
+To promote sustainability goal 14, the project employs a variety of technologies to create an animated and scrollable website. These technologies include advanced CSS features, CSS architecture, Sass, BEM, SVG, keyframe animations, transitions, transformations,implementation of accessibility, prefers-reduced-motion, prefers-color-scheme, orientation and Scrollytelling using Intersection Observer and Javascript. we have used the color-scheme to change the sun to moon and a background gradient from lighter to darker shades creates a distinct transition that gives off a night-time vibe.
+The sun, the bottle, and the waves are reduced motion elements that represent the need to reduce our impact on the environment. By incorporating the prefers-reduced-motion feature, the website ensures that users who prefer reduced motion can access the content without any discomfort. 
+By utilizing these technologies, the project is visually appealing, informative, and accessible to a diverse range of users. 
+
+
+Who maintains and contributes to the project
+
+Since this project is a work on github, anyone who's a member of the community are allowed and able to contribute if they want to.
+The project is maintained and contributed by the team members which is listed in the github repository, 
+Elina, Johan, Jørgen and Solveig. 
diff --git a/images/bottle-trash-1.png b/images/bottle-trash-1.png
diff --git a/images/bottle-trash-2.png b/images/bottle-trash-2.png
diff --git a/images/bottle-trash.png b/images/bottle-trash.png
diff --git a/images/bottle.jpeg b/images/bottle.jpeg
diff --git a/images/bottle.png b/images/bottle.png
diff --git a/images/carpet.avif b/images/carpet.avif
diff --git a/images/cloud.png b/images/cloud.png
diff --git a/images/coral-purple.png b/images/coral-purple.png
diff --git a/images/dead-coral-left.png b/images/dead-coral-left.png
diff --git a/images/dead-coral-right.png b/images/dead-coral-right.png
diff --git a/images/dead-earth.png b/images/dead-earth.png
diff --git a/images/fish3D.png b/images/fish3D.png
diff --git a/images/fishBlack.png b/images/fishBlack.png
diff --git a/images/fishBlack4.png b/images/fishBlack4.png
diff --git a/images/fishBlue.png b/images/fishBlue.png
diff --git a/images/fishBlue2.png b/images/fishBlue2.png
diff --git a/images/fishDead.png b/images/fishDead.png
diff --git a/images/fishGreen.png b/images/fishGreen.png
diff --git a/images/fishGreen2.png b/images/fishGreen2.png
diff --git a/images/fishGrey.png b/images/fishGrey.png
diff --git a/images/fishGrey2.png b/images/fishGrey2.png
diff --git a/images/fishOrange.png b/images/fishOrange.png
diff --git a/images/fishOrange2.png b/images/fishOrange2.png
diff --git a/images/fishPink.png b/images/fishPink.png
diff --git a/images/fishStrange.png b/images/fishStrange.png
diff --git a/images/fishStrange2.png b/images/fishStrange2.png
diff --git a/images/fishStrange3.gif b/images/fishStrange3.gif
diff --git a/images/fishStrange4.png b/images/fishStrange4.png
diff --git a/images/fishblack2.png b/images/fishblack2.png
diff --git a/images/fishblack3.png b/images/fishblack3.png
diff --git a/images/fishgrey3.png b/images/fishgrey3.png
diff --git a/images/fishing_dock.png b/images/fishing_dock.png
diff --git a/images/green-sea-grass-left.png b/images/green-sea-grass-left.png
diff --git a/images/green-sea-grass-right.png b/images/green-sea-grass-right.png
diff --git a/images/healthy-earth.png b/images/healthy-earth.png
diff --git a/images/landscape.png b/images/landscape.png
diff --git a/images/man.png b/images/man.png
diff --git a/images/moon.png b/images/moon.png
diff --git a/images/nice-bottle.png b/images/nice-bottle.png
diff --git a/images/ocean-wave-small-tattoo-7793.png b/images/ocean-wave-small-tattoo-7793.png
diff --git a/images/pink-coral.png b/images/pink-coral.png
diff --git a/images/recycled-bottle.png b/images/recycled-bottle.png
diff --git a/images/sleepingba.png b/images/sleepingba.png
diff --git a/images/sun .png b/images/sun .png
diff --git a/images/sun.png b/images/sun.png
diff --git a/images/tracksuit.svg b/images/tracksuit.svg
diff --git a/images/trash-bin.png b/images/trash-bin.png
diff --git a/images/tshirt.webp b/images/tshirt.webp
diff --git a/images/upholstery.png b/images/upholstery.png
diff --git a/images/water-bottle-3927420_1280.png b/images/water-bottle-3927420_1280.png
diff --git a/images/wave.png b/images/wave.png
diff --git a/images/waves-noncolor.png b/images/waves-noncolor.png
diff --git a/images/waves.png b/images/waves.png
diff --git a/index.html b/index.html
@@ -1 +1,187 @@
-<h1>hei</h1>
+<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" />
+    <title>Group 1 Assignment 3</title>
+    <link rel="stylesheet" href="./style/index.css" />
+    <script src="./script.js" defer></script>
+  </head>
+  <body>
+    <div class="pop-up"> <img class="test" src="./images/landscape.png" alt=""></div>
+    <main>
+
+      <!-- SCENE 1 -->
+      <div class="scene1">
+        <div class="clouds">
+          <div class="clouds__1">
+            <div class="clouds__1--1"></div>
+            <div class="clouds__1--2"></div>
+            <div class="clouds__1--3"></div>
+          </div>
+          <div class="clouds__2">
+            <div class="clouds__2--1"></div>
+            <div class="clouds__2--2"></div>
+            <div class="clouds__2--3"></div>
+          </div>
+        </div>
+        <div class="sun"></div>
+        <div class="scene1__content">
+          <img class="scene1__content-man" src="images/man.png">
+          <img class="scene1__content-dock" src="./images/fishing_dock.png" alt="" />
+          <img
+            class="scene1__content-bottle throwBottleAnimation"
+            src="./images/nice-bottle.png"
+            alt=""
+          />
+        </div>
+        <div class="waves">
+          <div class="waves__1"></div>
+          <div class="waves__2"></div>
+          <div class="waves__3"></div>
+          <div class="waves__4"></div>
+        </div>
+      </div>
+
+
+      <!-- SCENE 2 -->
+      <div class="scene2">
+        <div class="plant-container">
+          <img class="plant-container__background-plants-left" src="./images/coral-purple.png" alt=""/>
+          <img class="plant-container__scene2Fish1" src="./images/fish3D.png" alt="">
+        </div>
+        <div class="text-container">
+          <p>
+            A man on a trip, by the ocean struggling to dispose of his water bottle. Unable to find a trash bin, he finally throws it in the ocean. The bottle's journey begins as it drifts away alone in the vast ocean.
+          </p>
+        </div>
+        <div>
+          <img class="scene2__scene2Fish2" src="./images/fishBlack4.png" alt="">
+        </div>
+        <!-- Fill with fish or something -->
+        <div class="plant-container">
+          <img class="plant-container__background-plants-right" src="./images/pink-coral.png" alt=""/>
+        </div>
+      </div>
+
+
+
+      <!-- SCENE 3 -->
+      <div class="scene3">
+        <div class="text-container">
+          <p>
+            The water bottle floated on the surface, enjoying the colorful world around it, until it started to sink. 
+            Fishes started swarming the bottle, and it had to fight to stay afloat. 
+          </p>
+        </div>
+        <div class="plant-container">
+          <img class="plant-container-fish1" src="./images/fishGreen.png" alt="">
+          <img class="plant-container__background-plants-right" src="./images/green-sea-grass-right.png" alt=""/>
+        </div>
+        <div>
+          <img class="scene3__scene3Fish2" src="./images/fish3D.png" alt="">
+        </div>
+      </div>
+
+      <!-- SCENE 4 -->
+      <div class="scene4">
+        <div class="plant-container">
+          <img class="plant-container__background-plants-left" src="./images/dead-coral-left.png" alt=""/>
+        </div>
+        <div class="text-container">
+          <p>
+            After a long journey, the bottle finally hits the ocean floor and ends up in a trash can. 
+            This short story emphasizes the negative impact of human contamination on water and the environment.
+          </p>
+        </div>
+        <div>
+          <img class="scene4__scene4Fish1" src="./images/fishDead.png" alt="">
+        </div>
+        <div class="plant-container">
+          <img class="plant-container__background-plants-right" src="./images/dead-coral-right.png" alt="">
+        </div>
+      </div>
+
+
+      <!-- SCENE 5 -->
+      <div class="scene5">
+        <div class="text-container">
+          <p>
+            It shows the struggles of survival and battling the environment. 
+            In the end, the bottle's fate becomes a silent reminder to protect the environment and preserve order. 
+          </p>
+        </div>
+        <div><img class="scene5__scene5Fish1" src="./images/fishDead.png" alt=""></div>
+        <div class="plant-container">
+          <img
+            class="plant-container__background-plants-left"
+            src="./images/dead-coral-left.png"
+            alt=""
+          />
+        </div>
+        <div class="plant-container">
+          <img
+            class="plant-container__background-plants-right"
+            src="./images/dead-coral-right.png"
+            alt=""
+          />
+        </div>
+      </div>
+
+      <!-- SCENE 6 -->
+      <div class="scene6">
+        <h3 class="scene6__title">IS THIS THE EARTH YOU WANT TO LIVE ON ?</h3>
+      </div>
+
+      <!-- SCENE 7 -->
+      <div class="scene7"></div>
+
+      <!-- SCENE 8 -->
+      <div class="scene8"></div>
+
+      <!-- SCENE 9 -->
+      <div class="scene9">
+        <h3 class="scene9__title">WHAT IT COULD BE INSTEAD</h3>
+        <div class="scene9__img-container ">
+          <img class="scene9__img-container-trashExample1" src="./images/tshirt.webp" alt="">
+          <img class="scene9__img-container-trashExample2" src="./images/upholstery.png" alt="">
+          <img class="scene9__img-container-trashExample3" src="./images/sleepingba.png" alt="">
+          <img class="scene9__img-container-trashExample4" src="./images/recycled-bottle.png" alt="">
+          <img class="scene9__img-container-trashExample5" src="./images/carpet.avif" alt="">
+        </div>
+        <img class="scene9__trash-bin" src="./images/trash-bin.png" alt="">
+        <div class="scene9__remove-bottle-trigger"></div>
+      </div>
+
+
+    <!-- SCENE 10 -->
+      <div class="scene10">
+        <svg viewbox="0 0 800 800" width="80vw" height="80vh" class="head-speech" >
+        <g class="head">
+          <circle cx="200" cy="200" r="100" fill="grey" class="head"/>  
+          <path d="M 300 400 Q 300 250 350 250 Q 400 300 400 150" stroke="black" stroke-width="2" fill="none" class="hair"></path>
+          <path d="M 350 400 Q 400 300 350 300 Q 250 250 350 200 " stroke="black" stroke-width="2" fill="none" class="hair"></path>
+          <g class="left-eye">
+            <circle cx="200" cy="200" r="15" fill="white" class="left-eye__ball"/>
+            <circle cx="200" cy="200" r="5" fill="black" class="left-eye__pupil"/>
+          </g>
+          <g class="right-eye">
+            <circle cx="200" cy="200" r="15" fill="white" class="right-eye__ball"/>
+            <circle cx="200" cy="200" r="5" fill="black" class="right-eye__pupil"/>
+          </g>
+          <g class="mouth">
+            <path d="M 100 300 Q 150 50 300 200 Q 450 50 500 300 C 500 300 350 550 100 300" fill="white" stroke="red" stroke-width="20">
+          </g>
+        </g>
+
+              <path d="M 250 50 Q 350 0 500 50 Q 600 100 650 200 A 50 50 0 1 1 300 350 A 50 50 0 1 1 300 350 L 100 450 L 200 300 Q 150 150 250 50" fill="white" stroke="white" class="speech-bubble" />
+              <a href="https://sdgs.un.org/goals/goal14" target="_blank">
+              <text stroke="black" font-size="40" y="350" x="340" fill="black" text-decoration="underline" class="txt-svg">READ MORE HERE</text>
+              </a>
+
+            </svg>
+            <img src="./images/tracksuit.svg" alt="t-shirt" class="tshirt">
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,71 @@
+// Observer for .scene-text-container
+const textObserver = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('showTextAnimation')) {
+      entry.target.classList.add('showTextAnimation');
+    }
+  });
+}, { threshold: 0.3 });
+
+// Observer for .background-plants-right
+const plantObserverRight = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('showPlantRightAnimation')) {
+      entry.target.classList.add('showPlantRightAnimation');
+    }
+  });
+});
+
+// Observer for .background-plants-left
+const plantObserverLeft = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('showPlantLeftAnimation')) {
+      entry.target.classList.add('showPlantLeftAnimation');
+    }
+  });
+});
+
+// Observer for .removeBottleTrigger
+const removeBottleTriggerObserver = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    const bottleElement = document.querySelector('.scene1__content-bottle');
+    const trashbinElement = document.querySelector('.scene9__trash-bin');
+    const trashExample1Element = document.querySelector('.scene9__img-container-trashExample1');
+    const trashExample2Element = document.querySelector('.scene9__img-container-trashExample2');
+    const trashExample3Element = document.querySelector('.scene9__img-container-trashExample3');
+    const trashExample4Element = document.querySelector('.scene9__img-container-trashExample4');
+    const trashExample5Element = document.querySelector('.scene9__img-container-trashExample5');
+    if (entry.isIntersecting && bottleElement && !bottleElement.classList.contains('removeBottle')) {
+      bottleElement.classList.remove('throwBottleAnimation');
+      trashbinElement.classList.add('trashBinFixed');
+      trashExample1Element.classList.add('showTrashExample1');
+      trashExample2Element.classList.add('showTrashExample2');
+      trashExample3Element.classList.add('showTrashExample3');
+      trashExample4Element.classList.add('showTrashExample4');
+      trashExample5Element.classList.add('showTrashExample5');
+    }
+  });
+});
+
+// Observer for Link reveal
+const linkcontainerObserver = new IntersectionObserver(function(entries, observer) {
+  entries.forEach(entry => {
+    if (entry.isIntersecting && !entry.target.classList.contains('revealanimation')) {
+      entry.target.classList.add('revealanimation');
+    }
+  });
+});
+
+// Elements to observe
+const textElements = document.querySelectorAll('.text-container');
+const plantElementsRight = document.querySelectorAll('.plant-container__background-plants-right');
+const plantElementsleft = document.querySelectorAll('.plant-container__background-plants-left');
+const bottleRemove = document.querySelectorAll('.scene9__remove-bottle-trigger');
+const linkrevealelement = document.querySelectorAll('h4 a span');
+
+// Add observers to elements
+textElements.forEach(el => textObserver.observe(el));
+plantElementsRight.forEach(el => plantObserverRight.observe(el));
+plantElementsleft.forEach(el => plantObserverLeft.observe(el));
+bottleRemove.forEach(el => removeBottleTriggerObserver.observe(el));
+linkrevealelement.forEach(el => linkcontainerObserver.observe(el));
diff --git a/style.css b/style.css