diff --git a/README.md b/README.md
index 293d948..e97d3f7 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,28 @@
+# Scrollytelling website: Goal 14 | Life below water
+
+### What the project does
+The project aims to deliver an animated scrollable website about [UN goal 14](https://www.globalgoals.org/goals/14-life-below-water/): Life below water. Goal 14 focuses on the conservation and sustainable use of the world's oceans, seas, and marine resources. It addresses the significant challenges faced by marine ecosystems due to pollution, climate change, overfishing, and habitat destruction. The project created primarily tackles the human aspect, and how our behavior tends affects the oceans negatively, but also shows how humans can change for the better.
+### Why the project is useful
+The project is useful since it helps to raise awereness about the importance of protecting marine life and achieving sustainable development. The goal with the webpage is to encourage viewers to become more enlightened on the subject and feel inspired to take action. The page is meant for the target audience: adults between 35-45 years old, so it should be mostly useful for this group, but also the general public. The design is meant to be illustrative as well as easy to read and understand.
+### How users can get started with the project
+This is how users and developers can get started with the project:
+1. If you seek to do further development or simply look into the code, fork the project repository and clone it locally. This way, one is able to make any changes and experiment with the exisiting code. Open the repository in Visual Studio Code, and you are set to begin.
+2. Optionally, you could clone the project directly, make desired changes in a new branch and create a pull request that can be reviewed upon.
+3. If you want to just see and experience the webpage, the link is found down below.
+### Where users can get help with your project
+Users can reach out to the project maintainers and contributors thourgh the GitHub repository's issue tracker for any questions or help needed. If not, then users are open to contact the contributors directly.
+### Which technology is used
+The technology used in this project include: HTML, CSS/SASS, BEM, Figma, Javascript and GSAP (GreenStock Animation Platform). Using SASS allows us to organize the code in a clearer and more efficient manner than with regular CSS. This also allows us to use SASS variables and BEM intertwined with SASS which comes in handy. We used Live Sass Compiler extention for compiling the files. In the Javascript, Intersection Observer API was utilized alongside GSAP library. Since the page is intended to be a scrollytelling experience, we used primarily GSAP "Scrolltrigger" plugin to to coordinate how elements move with scroll, and this allows us to give an immersive experience. While the intersection observer controls how text and other elements animates in.
+#### Other notes
+- It was attempted to get this webpage more responsive, and most of it runs alright to an extent when switching to landscape orientation. The struggle was mostly getting story responsive with GSAP, so there are a few bugs in that translation.
+- "@import animations" had to be included in the beginning of the "layout.scss" in order for the files to run without facing problems. There was an attempt to fix this in the "index.scss" file, but even when "@import layout" was stated after "animations", the files did not communicate as they should have.
+### Who maintains and contributes to the project
+This project was made during the course [Advanced CSS](https://www.ntnu.edu/studies/courses/IDG1293/#tab=omEmnet) as part of a portfolio project.
+The contents of the page is created and maintained by Maja Brunsvik and Sabrina Altahrawi, web development students at NTNU.
+
+## Visit our webpage
+[Scrollytelling website - Life below water](https://advancedcss2023.github.io/assignment-3--scrollytelling-group-6/)
+
+
+[](https://classroom.github.com/a/E1TYCvbT)
[](https://classroom.github.com/online_ide?assignment_repo_id=11008367&assignment_repo_type=AssignmentRepo)
diff --git a/assets/img/beach-cleaning.png b/assets/img/beach-cleaning.png
new file mode 100644
index 0000000..c0067f5
Binary files /dev/null and b/assets/img/beach-cleaning.png differ
diff --git a/assets/img/beach-second.svg b/assets/img/beach-second.svg
new file mode 100644
index 0000000..355c2f3
--- /dev/null
+++ b/assets/img/beach-second.svg
@@ -0,0 +1,179 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/big_garbage.svg b/assets/img/big_garbage.svg
new file mode 100644
index 0000000..286bb0a
--- /dev/null
+++ b/assets/img/big_garbage.svg
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/birds.svg b/assets/img/birds.svg
new file mode 100644
index 0000000..2143ded
--- /dev/null
+++ b/assets/img/birds.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/boat.svg b/assets/img/boat.svg
new file mode 100644
index 0000000..5ccc3cf
--- /dev/null
+++ b/assets/img/boat.svg
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/bottle.svg b/assets/img/bottle.svg
new file mode 100644
index 0000000..4895e85
--- /dev/null
+++ b/assets/img/bottle.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/bulb-idea.svg b/assets/img/bulb-idea.svg
new file mode 100644
index 0000000..fcaaba9
--- /dev/null
+++ b/assets/img/bulb-idea.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/cloud-bigger.svg b/assets/img/cloud-bigger.svg
new file mode 100644
index 0000000..2fcf74c
--- /dev/null
+++ b/assets/img/cloud-bigger.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/assets/img/cloud.svg b/assets/img/cloud.svg
new file mode 100644
index 0000000..a0dc19e
--- /dev/null
+++ b/assets/img/cloud.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/assets/img/co2 puff.svg b/assets/img/co2 puff.svg
new file mode 100644
index 0000000..1b2cb25
--- /dev/null
+++ b/assets/img/co2 puff.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/co2_1.svg b/assets/img/co2_1.svg
new file mode 100644
index 0000000..568fbef
--- /dev/null
+++ b/assets/img/co2_1.svg
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/co2_Txt.svg b/assets/img/co2_Txt.svg
new file mode 100644
index 0000000..b963e21
--- /dev/null
+++ b/assets/img/co2_Txt.svg
@@ -0,0 +1,453 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/cup.svg b/assets/img/cup.svg
new file mode 100644
index 0000000..d82dfdf
--- /dev/null
+++ b/assets/img/cup.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/assets/img/dead_fish.svg b/assets/img/dead_fish.svg
new file mode 100644
index 0000000..e1460da
--- /dev/null
+++ b/assets/img/dead_fish.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/fish.svg b/assets/img/fish.svg
new file mode 100644
index 0000000..e974f20
--- /dev/null
+++ b/assets/img/fish.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/assets/img/fish_txt.svg b/assets/img/fish_txt.svg
new file mode 100644
index 0000000..658cd7a
--- /dev/null
+++ b/assets/img/fish_txt.svg
@@ -0,0 +1,197 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/garbage.svg b/assets/img/garbage.svg
new file mode 100644
index 0000000..745cda2
--- /dev/null
+++ b/assets/img/garbage.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/img/garbage1.svg b/assets/img/garbage1.svg
new file mode 100644
index 0000000..217e56e
--- /dev/null
+++ b/assets/img/garbage1.svg
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/assets/img/garbage2.svg b/assets/img/garbage2.svg
new file mode 100644
index 0000000..750f2b8
--- /dev/null
+++ b/assets/img/garbage2.svg
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/goal-14-logo.png b/assets/img/goal-14-logo.png
new file mode 100644
index 0000000..832a9aa
Binary files /dev/null and b/assets/img/goal-14-logo.png differ
diff --git a/assets/img/green-man-larger.svg b/assets/img/green-man-larger.svg
new file mode 100644
index 0000000..860cab9
--- /dev/null
+++ b/assets/img/green-man-larger.svg
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/green-man.svg b/assets/img/green-man.svg
new file mode 100644
index 0000000..3206fde
--- /dev/null
+++ b/assets/img/green-man.svg
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/island-primary.svg b/assets/img/island-primary.svg
new file mode 100644
index 0000000..513e151
--- /dev/null
+++ b/assets/img/island-primary.svg
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/island-three.png b/assets/img/island-three.png
new file mode 100644
index 0000000..c2d08f7
Binary files /dev/null and b/assets/img/island-three.png differ
diff --git a/assets/img/light-bulb.svg b/assets/img/light-bulb.svg
new file mode 100644
index 0000000..aefe12f
--- /dev/null
+++ b/assets/img/light-bulb.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/man with bottle.svg b/assets/img/man with bottle.svg
new file mode 100644
index 0000000..6d7ec95
--- /dev/null
+++ b/assets/img/man with bottle.svg
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/man-idea.svg b/assets/img/man-idea.svg
new file mode 100644
index 0000000..31bbb09
--- /dev/null
+++ b/assets/img/man-idea.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/man.svg b/assets/img/man.svg
new file mode 100644
index 0000000..0a93337
--- /dev/null
+++ b/assets/img/man.svg
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/marine.svg b/assets/img/marine.svg
new file mode 100644
index 0000000..caac91c
--- /dev/null
+++ b/assets/img/marine.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/miniBoat.svg b/assets/img/miniBoat.svg
new file mode 100644
index 0000000..1e09881
--- /dev/null
+++ b/assets/img/miniBoat.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/assets/img/oil.svg b/assets/img/oil.svg
new file mode 100644
index 0000000..c041714
--- /dev/null
+++ b/assets/img/oil.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/oil_2.svg b/assets/img/oil_2.svg
new file mode 100644
index 0000000..4af779f
--- /dev/null
+++ b/assets/img/oil_2.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/img/oil_big.svg b/assets/img/oil_big.svg
new file mode 100644
index 0000000..86f2553
--- /dev/null
+++ b/assets/img/oil_big.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/img/oil_small.svg b/assets/img/oil_small.svg
new file mode 100644
index 0000000..1c3547c
--- /dev/null
+++ b/assets/img/oil_small.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/assets/img/question-marks.svg b/assets/img/question-marks.svg
new file mode 100644
index 0000000..a2ea4bf
--- /dev/null
+++ b/assets/img/question-marks.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/assets/img/smoke.svg b/assets/img/smoke.svg
new file mode 100644
index 0000000..566513f
--- /dev/null
+++ b/assets/img/smoke.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/assets/img/trash-ocean.png b/assets/img/trash-ocean.png
new file mode 100644
index 0000000..1aabb71
Binary files /dev/null and b/assets/img/trash-ocean.png differ
diff --git a/assets/img/waves.svg b/assets/img/waves.svg
new file mode 100644
index 0000000..a9e25fc
--- /dev/null
+++ b/assets/img/waves.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/assets/styles/_animations.scss b/assets/styles/_animations.scss
new file mode 100644
index 0000000..34cf61a
--- /dev/null
+++ b/assets/styles/_animations.scss
@@ -0,0 +1,321 @@
+//vars
+$from--left: -50px;
+$from--right: 50px;
+// class animations
+
+//class for intersection observer
+.center-fadeIn {
+ transform: translateX(0);
+ opacity: 1;
+ transition: transform 2s, opacity 2s;
+}
+
+// general animations
+.side__bigGarbage{
+ animation: spin-scale 35s infinite alternate;
+ opacity: 0.8;
+}
+.side__co2--Txt{
+ animation: co2 80s linear infinite alternate;
+}
+.side__fishes--1{
+ animation: co2 20s linear infinite alternate;
+}
+.side__fishes--2{
+ animation: co2 20s linear infinite alternate;
+}
+.side__smoke{
+ animation: co2 35s infinite alternate;
+}
+.side__miniBoat{
+ animation: boat 3s infinite alternate;
+ bottom: 70px;
+}
+.scene__bird{
+ animation: bird 40s linear infinite;
+}
+.actions__man--right-arm {
+ transform-origin: 35%;
+ animation: move-arm 5s ease infinite alternate;
+}
+.actions__man--eyes {
+ animation: eyes-blink 3s infinite;
+ transform-origin: center 20%;
+}
+
+//KEYFRAMES
+
+@keyframes bird {
+ 0% {
+ transform: translateX(500%);
+}
+100% {
+ transform: translateX(-100%);
+}
+}
+
+@keyframes boat {
+ 0% {
+ transform: rotate(0deg) translate(0px) skewX(0deg);
+ }
+ 25%{
+ transform: rotate(4deg) translateX(1px) skewX(0deg);
+ }
+ 75%{
+ transform: rotate(0deg) translateX(7px) skewX(0deg);
+ }
+ 100%{
+ transform: rotate(1deg) translate(0px) skewX(0deg);
+ }
+}
+
+@keyframes co2 {
+
+ 0% {
+ transform: rotate(0) scale(1.2);
+}
+100% {
+ transform: rotate(10deg) scale(3);
+}
+}
+
+@keyframes spin-scale {
+ 0% {
+ transform: rotate(0) scale(5);
+ }
+ 100% {
+ transform: rotate(40deg) scale(3);
+ }
+}
+// wave animation
+@keyframes wave {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-5%);
+ }
+}
+
+// title entrance
+@keyframes title {
+ from {
+ opacity: 0;
+ letter-spacing: normal;
+ }
+ to {
+ opacity: 1;
+ letter-spacing: .1rem;
+ }
+}
+
+// marker effect
+@keyframes color-change {
+ to{
+ color: $red;
+ }
+}
+
+@keyframes move-arm {
+ 0% {
+ transform: rotate(-50deg) translateX(-60px);
+ }
+ 50% {
+ transform: rotate(-90deg) translateX(-80px);
+ }
+ 100% {
+ transform: rotate(-80deg) translateX(-80px);
+ }
+}
+
+@keyframes eyes-blink {
+ 0% {
+ transform:scaleY(1)}
+ 15% {
+ transform:scaleY(1) }
+ 20% {
+ transform:scaleY(0) }
+ 25% {
+ transform:scaleY(1) }
+ 38% {
+ transform:scaleY(1) }
+ 40% {
+ transform:scaleY(0) }
+ 45% {
+ transform:scaleY(1) }
+ 80% {
+ transform:scaleY(1) }
+}
+
+@keyframes blad {
+0% {
+ transform: rotate(0deg) translate(0px) skewX(0deg);
+ }
+ 25%{
+ transform: rotate(1deg) translate(1px) skewX(0deg);
+ }
+ 75%{
+ transform: rotate(0deg) translate(1px) skewX(0deg);
+ }
+ 100%{
+ transform: rotate(1deg) translate(0px) skewX(0deg);
+ }
+}
+// palm leaf animations
+#blader{
+ animation: blad 3s linear infinite alternate;
+}
+#blader_2{
+ animation: blad 5s linear infinite alternate;
+}
+#blader_3{
+ animation: blad 4s linear infinite alternate;
+}
+#blader_4{
+ animation: blad 4s linear infinite alternate;
+}
+#blader_5{
+ animation: blad 3s linear infinite alternate;
+}
+#blader_6{
+ animation: blad 5s linear infinite alternate;
+}
+#blader_7{
+ animation: blad 5s linear infinite alternate;
+}
+#blader_8{
+ animation: blad 5s linear infinite alternate;
+}
+#blader_9{
+ animation: blad 4s linear infinite alternate;
+}
+#blader_10{
+ animation: blad 6s linear infinite alternate;
+}
+#blader_11{
+ animation: blad 6s linear infinite alternate;
+}
+#blader_12{
+ animation: blad 6s linear infinite alternate;
+}
+#blader_14{
+ animation: blad 6s linear infinite alternate;
+}
+#blader_15{
+ animation: blad 5s linear infinite alternate;
+}
+#blader_16{
+ animation: blad 10s linear infinite alternate;
+}
+#blader_17{
+ animation: blad 10s linear infinite alternate;
+}
+#blader_18{
+ animation: blad 10s linear infinite alternate;
+}
+
+@keyframes swim-left {
+
+ 0% {
+ transform: translateX(100%);
+ right: 20vh;
+ }
+ 50%{
+ transform: rotate(40em);
+ transform: translateY(2em);
+ }
+ 80%{
+ transform: translateY(1em);
+ transform: scaleY(-1);
+ opacity: 1;
+ }
+ 100% {
+ right: calc(55vh);
+ transform: translateY(2em) rotate(-8deg);
+ transform: scaleY(-1);
+ opacity: 0;
+ }
+}
+
+
+@keyframes die {
+ 0% {
+ transform: rotate(1deg);
+ }
+ 50%{
+ transform: translateY(-4.7em) rotate(-30deg);
+ }
+ 100% {
+ transform: translateY(-2.6em);
+ opacity: 1;
+ }
+}
+
+@keyframes oil_1 {
+0% {
+ transform: rotate(2em);
+ }
+100% {
+ transform: translateY(20em);
+ opacity: 0;
+}
+}
+
+@keyframes oil_2 {
+ 0% {
+ transform: rotate(1em);
+ }
+ 100% {
+ transform: translateY(30em);
+ opacity: 0;
+ }
+}
+@keyframes oil_3 {
+ 0% {
+ transform: rotate(2em);
+ }
+
+ 100% {
+ transform: translateY(15em);
+ opacity: 0;
+ }
+}
+
+@keyframes garbage {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50%{
+ transform: rotate(-50deg);
+ }
+ 100% {
+ transform: translateX(-2em);
+ opacity: 1;
+ }
+}
+
+@keyframes garbage1 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50%{
+ transform: translateX(4.7em) rotate(60deg);
+ }
+ 100% {
+ transform: translateX(-4.6em);
+ opacity: 1;
+ }
+}
+@keyframes garbage2 {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 50%{
+ transform: translateY(-4.7em) rotate(-10deg);
+ }
+
+ 100% {
+ transform: translateY(-4.6em);
+ }
+}
diff --git a/assets/styles/_colors.scss b/assets/styles/_colors.scss
new file mode 100644
index 0000000..6d02c5b
--- /dev/null
+++ b/assets/styles/_colors.scss
@@ -0,0 +1,40 @@
+// Descriptive Colors
+$white: #fff;
+$black: #000000;
+$aliceblue: #f0f8ff;
+$skyblue: #75bfff;
+$darkblue: #001927;
+$red: #ff4343;
+$green: #36b110;
+$yellow: #ffc401;
+$darkWave: #0693E3;
+$darkerWave: #0e1a52;
+$grayblue: #2b2c33;
+
+ //darkmode colors
+ $darkGradient: #010C12;
+ $lighterGradient: #273953;
+ $waveblue: #245399;
+ $deepOcean:#163461;
+
+// Functional Colors
+// (default scheme)
+$background__primary: $skyblue;
+$background__secondary: $darkblue;
+$text__primary: $grayblue;
+$text__secondary: $aliceblue;
+$text__accent: $green;
+$underSea__light--one: $darkWave;
+$underSea__light--two: $darkerWave;
+$span__red: $red;
+$span__yellow: $yellow;
+$span__green: $green;
+
+
+// dark scheme
+$background__secondary--dark: $darkGradient;
+$background__primary--dark: $lighterGradient;
+$text__primary--dark: $aliceblue;
+$waves--dark: $waveblue;
+$underSea__dark--one: $waveblue;
+$underSea__dark--two: $deepOcean;
\ No newline at end of file
diff --git a/assets/styles/_fonts.scss b/assets/styles/_fonts.scss
new file mode 100644
index 0000000..e158e81
--- /dev/null
+++ b/assets/styles/_fonts.scss
@@ -0,0 +1,5 @@
+// Nunito 400 600 700
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
+
+// Nixie One for title
+@import url('https://fonts.googleapis.com/css2?family=Nixie+One&family=Nunito&display=swap');
\ No newline at end of file
diff --git a/assets/styles/_layout.scss b/assets/styles/_layout.scss
new file mode 100644
index 0000000..7034225
--- /dev/null
+++ b/assets/styles/_layout.scss
@@ -0,0 +1,454 @@
+@import "animations";
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body {
+ font-family: 'Nunito', sans-serif;
+ color: $text__primary;
+ background-color: $background__primary;
+}
+
+
+.intro {
+ width: 100%;
+ min-height: 350vh;
+ background: linear-gradient(180deg, $background__secondary 0%, $background__primary 100%);
+ overflow: hidden;
+ &__container {
+ position: absolute;
+ }
+ &__heading {
+ @include flex;
+ color: $text__secondary;
+ padding-top: 15em;
+ }
+ &__logo {
+ width: 90px;
+ position: fixed;
+ top: 0;
+ right: 0;
+ margin: .5em;
+ opacity: 1;
+ z-index: 10;
+ }
+ &__title {
+ font-size: 7rem;
+ font-family: 'Nixie One', cursive;
+ animation: title 2s linear forwards;
+ }
+ &__para {
+ width: 200px;
+ font-size: 1.2rem;
+ margin-top: 10em;
+ border: 4px solid $text__secondary;
+ padding: 15px;
+ border-radius: 10px;
+ opacity: 0.5;
+ }
+ &__texts {
+ @include flex;
+ &--one { // intersection observer on this
+ color: $text__secondary;
+ margin: 0 2em 0 2em;
+ line-height: 4rem;
+ font-size: 2.2rem;
+ font-weight: 600;
+ position: absolute;
+ top: 33em;
+ opacity: 0;
+ transform: translateX($from--left);
+ span {
+ animation: color-change 2s ease-in infinite alternate;
+ }
+ }
+ &--two {
+ color: $text__secondary;
+ margin: 0 2em 0 2em;
+ line-height: 4rem;
+ font-size: 2.2rem;
+ font-weight: 600;
+ position: absolute;
+ top: 70em;
+ opacity: 0;
+ transform: translateX($from--right);
+ span {
+ background-color: $span__red;
+ padding: 0 5px;
+ }
+ }
+ }
+ &__clouds {
+ &--one {
+ position: relative;
+ top: 50em;
+ left: 10em;
+ }
+ &--two {
+ position: relative;
+ top: 65em;
+ right: 50em;
+ }
+ &--three {
+ position: relative;
+ top: 85em;
+ left: -90em;
+ }
+ &--four {
+ position: relative;
+ top: 85em;
+ right: -50em;
+ }
+ &--five {
+ position: relative;
+ top: 110em;
+ left: 10em;
+ }
+ }
+}
+
+.main-container {
+ display: grid;
+ grid-template-columns: 1fr 1.7fr;
+ gap: 0;
+}
+.scene {
+ width: 100%;
+ max-height: 100vh;
+ overflow: hidden;
+
+ &__wrapper {
+ background: $background__primary;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ }
+ &__ocean {
+ position:absolute;
+ bottom:-1em;
+ left: -2em;
+ z-index: 0;
+ animation: wave linear 5s infinite alternate;
+ }
+ &__island {
+ position: absolute;
+ bottom: -2em;
+ left: -5em;
+ z-index: 1;
+ }
+ &__boat {
+ position: absolute;
+ bottom: 5em;
+ left: 38em;
+ z-index: 4;
+ }
+ &__man {
+ position: absolute;
+ left: 25em;
+ bottom: 6em;
+ z-index: 2;
+ }
+ &__bottle {
+ position: absolute;
+ bottom: 11em;
+ left: 28em;
+ z-index: 3;
+ }
+ &__co2--1{
+ position: absolute;
+ bottom: 8em;
+ left: 10em;
+ opacity: 0;
+ }
+ &__co2--2{
+ position: absolute;
+ bottom: 9.5em;
+ left: 7em;
+ opacity: 0;
+ }
+ &__co2--3{
+ position: absolute;
+ bottom: 12em;
+ left: 5em;
+ opacity: 0;
+ }
+ &__island-two {
+ position: absolute;
+ bottom: -9em;
+ right: -47em;
+ }
+ &__island-three {
+ position: absolute;
+ bottom: 0em;
+ right: -40em;
+ min-width: 52%;
+ }
+ &__man-green {
+ position: absolute;
+ left: 50em;
+ bottom: 6em;
+ opacity: 0;
+ }
+ &__cup{
+ position: absolute;
+ left: 54em;
+ bottom: 10em;
+ opacity: 0;
+ }
+ &__question-marks {
+ position: absolute;
+ bottom: 19em;
+ left: 15em;
+ opacity: 0;
+ }
+ &__bulb-idea {
+ position: absolute;
+ bottom: 21em;
+ left: 17em;
+ transform: rotate(15deg);
+ opacity: 0;
+ }
+ &__bird{
+ position: absolute;
+ bottom:45rem;
+ }
+
+ // underwater scene
+ &__fish-container{
+ position: absolute;
+ z-index: 5;
+ width: 100%;
+ bottom: -70em;
+ height: 100vh;
+ background: linear-gradient(180deg, $underSea__light--one 0%, $underSea__light--two 100%);
+ }
+ &__fish1{
+ position: absolute;
+ right: 10rem;
+ top: 3rem;
+ z-index: 2;
+ transform: translateY(100%);
+ animation: swim-left 13s infinite;
+ }
+ &__deadfish1{
+ position: absolute;
+ z-index: 2;
+ left: 480px;
+ top: 120px;
+ transform: translateY(300deg);
+ opacity: 0;
+ animation-name: die;
+ animation-duration: 8s;
+ animation-delay: 7s;
+ animation-fill-mode: die 10s infinite;
+ }
+ &__garbage--1{
+ position: absolute;
+ top: 350px;
+ left: 750px;
+ animation: garbage 30s linear infinite alternate;
+ }
+ &__garbage--2{
+ position: absolute;
+ top: 350px;
+ left: 250px;
+ animation: garbage 50s linear infinite alternate;
+ }
+ &__garbage--3{
+ position: absolute;
+ top: 550px;
+ left: 850px;
+ animation: garbage 20s linear infinite alternate;
+ }
+ &__oil{
+ position: relative;
+ left: 15em;
+ }
+ &__oil--1 {
+ position: absolute;
+ top: 30px;
+ left: 200px;
+ animation: oil_1 10s linear infinite;
+ }
+ &__oil--2{
+ position: absolute;
+ top: 80px;
+ left: 400px;
+ animation: oil_2 12s linear infinite;
+ }
+ &__oil--3{
+ position: absolute;
+ top: 1px;
+ left: 130px;
+ animation: oil_3 8s linear infinite ;
+ }
+}
+
+.side {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ &__box {
+ background-color: $background__primary;
+ height: 170vh;
+ overflow:hidden;
+ @include flex;
+ &:last-child {
+ height: 100vh;
+ }
+}
+ &__bigGarbage{
+ position: absolute;
+ }
+
+ &__inner {
+ transform: translateX($from--left);
+ padding-top: 3em;
+ font-size: 1.8rem;
+ font-weight: 700;
+ margin: 0 20%;
+ opacity: 0;
+ @include flex;
+ }
+ &__box:nth-child(1)
+ span {
+ background-color: $span__yellow;
+ padding: 0 5px;
+ }
+ &__sidebox--7 p{
+ margin-top: 8em;
+ }
+ &__sidebox--12 span {
+ background-color: $span__green;
+ padding: 0 5px;
+ }
+ &__marine{
+ margin-top: 3em;
+ opacity: 1;
+ }
+ &__fishes--1{
+ position: absolute;
+ opacity: 0.4;
+ top: 8em;
+ left: 20px;
+ z-index: -1;
+ }
+
+ &__fishes--2{
+ position: absolute;
+ opacity: 0.4;
+ top: 19em;
+ left: 55px;
+ z-index: -1;
+ }
+ &__co2--Txt{
+ position: absolute;
+ top: 2em;
+ left: -4em;
+ opacity: 0.1;
+ z-index: -1;
+ }
+ &__smoke{
+ opacity: 0.8;
+ bottom: 70px;
+ width: 7em;;
+ scale: 5;
+ }
+}
+
+.actions {
+ background: url(../img/beach-cleaning.png) no-repeat center;
+ background-size: cover;
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ color: $text__secondary;
+ display: flex;
+ flex-direction: row;
+ text-align: left;
+ &__man {
+ margin-left: 12em;
+ padding-bottom: 7em;
+ }
+ &__text{
+ width:75%;
+ font-size: 1.3em;
+ font-weight: 600;
+ opacity: 0;
+ transform: translateX($from--left);
+ padding: 3em 1em;
+ @include flex;
+ li{
+ margin-top: 1.5em;
+ list-style: none;
+ text-align: left;
+ margin-left: 2em;
+ &::before {
+ content: url(../img/light-bulb.svg);
+ padding-right: 5px;
+ }
+ }
+ }
+ h2 {
+ font-size: 2rem;
+ }
+}
+
+.learn-more {
+ z-index: 2;
+ background: url(../img/trash-ocean.png) no-repeat center;
+ background-size: cover;
+ width: 100%;
+ height: 100vh;
+ @include flex;
+ flex-direction: row;
+ &__textbox2{
+ width: 500px;
+ height: 250px;
+ background-color: $white;
+ border-radius: 80px 70px 70px 0px;
+ border-top-width: 10px;
+ border-top-style:ridge;
+ border-top-color: $darkblue;
+ font-size: 1.6em;
+ font-weight: 700;
+ margin-bottom: 15em;
+ line-height: 1.8em;
+ transform: translateX($from--right);
+ opacity: 0;
+ }
+ &__innertext {
+ padding: 1em;
+ margin-top: 1.2em;
+ color: $text__primary;
+
+ a {
+ color: $skyblue;
+ }
+ }
+ &__man_2 {
+ transform: translateX($from--left);
+ opacity: 0;
+ }
+}
+
+footer {
+@include flex;
+background-color: $black;
+color: $white;
+height: 6em;
+width: 100%;
+ a {
+ color: $white;
+ }
+}
+.portrait-info {
+ height: 100vh;
+ @include flex;
+ p {
+ margin: 0 25%;
+ font-size: 1.3rem;
+ }
+}
\ No newline at end of file
diff --git a/assets/styles/_mediaqueries.scss b/assets/styles/_mediaqueries.scss
new file mode 100644
index 0000000..c22ae0c
--- /dev/null
+++ b/assets/styles/_mediaqueries.scss
@@ -0,0 +1,227 @@
+
+// reduced motion
+@media (prefers-reduced-motion) {
+
+.intro__title {
+ animation: unset;
+}
+.center-fadeIn {
+ opacity: 1;
+ transition: opacity 2s;
+}
+// reduced arm motion
+.actions__man--right-arm {
+ animation: move-arm 10s ease infinite alternate;
+}
+// bird speed
+.scene__bird{
+ animation: bird 70s infinite;
+}
+.side__bigGarbage{
+ animation: spin-scale 70s infinite alternate;
+}
+.scene__oil--1 {
+ animation: oil_1 15s linear infinite;
+}
+.scene__oil--2{
+ animation: oil_2 18s linear infinite;
+}
+.scene__oil--3{
+ animation: oil_3 12s linear infinite ;
+}
+}
+.side__fishes--1{
+ animation: co2 40s linear infinite alternate;
+}
+.side__fishes--2{
+ animation: co2 40s linear infinite alternate;
+}
+
+// color-scheme
+ @media (prefers-color-scheme: dark) {
+ .intro {
+ background: linear-gradient(180deg, $background__secondary--dark 0%, $background__primary--dark 100%); ;
+ &__clouds {
+ opacity: 0.5;
+ }
+ }
+ .scene__wrapper {
+ background: $background__primary--dark;
+ }
+ .side__box {
+ background: $background__primary--dark;
+ }
+ .side__inner {
+ color: $text__primary--dark;
+ }
+ .scene__wave--one, .scene__wave--two, .scene__wave--three {
+ fill: $waves--dark;
+ }
+ .scene__fish-container {
+ background: linear-gradient(180deg, $underSea__dark--one 0%, $underSea__dark--two 100%);
+ }
+ .learn-more__textbox2 {
+ background-color: $background__primary--dark;
+ color: $text__primary--dark;
+ }
+ }
+
+ // orientation portrait will ask to switch to landscape
+@media (orientation: portrait) {
+
+main, footer {
+ display: none;
+}
+.portrait-info, .portrait-info * {
+ display: flex !important;
+}
+}
+@media (orientation: landscape) {
+ .portrait-info, .portrait-info * {
+ display: none;
+ }
+}
+
+// preferred orientation for the story for screens less than 950px
+@media screen and (max-width: 950px) and (orientation: landscape) {
+
+ .portrait-info, .portrait-info * {
+ display: none;
+ }
+ .intro__title {
+ font-size: 3.2rem;
+ }
+ .intro__heading {
+ padding-top: 9rem;
+ }
+ .intro__para {
+ margin-top: 5em;
+ width: 130px;
+ font-size: 0.8rem;
+ padding: 0.5em;
+ }
+ .intro {
+ min-height: 700vh;
+ }
+ .intro__text {
+ font-size: 1.6rem
+ }
+ .intro__clouds img{
+ max-width: 60%;
+ max-height: 60%;
+ }
+ .scene__island {
+ max-width: 500px;
+ }
+ .scene__man {
+ left: 30em;
+ }
+ .scene__bottle {
+ left: 13.5em;
+ bottom: 9em;
+ }
+ .scene__boat {
+ left: 25em;
+ max-width: 300px;
+ }
+ .side__inner {
+ font-size: 1.1rem;
+ margin: 0 10%;
+ }
+ .side__bigGarbage {
+ width: 40%;
+ }
+ .side__smoke {
+ width: 30%;
+ }
+ .scene__cup {
+ left: 25em;
+ }
+ .scene__man-green {
+ left: 52em;
+ }
+ .scene__bird {
+ bottom: 20em;
+ width: 45%;
+ animation: bird 30s linear infinite;
+ }
+.scene__question-marks {
+ bottom: 14em;
+ left: 7em;
+}
+.scene__bulb-idea {
+ bottom: 15em;
+ left: 8em;
+}
+.scene__co2-wrap {
+ position: absolute;
+ left: -5em;
+ bottom: 1em;
+ transform: scale(0.8);
+}
+ .actions h2 {
+ font-size: 1.2rem;
+ }
+ .actions__man {
+ position: relative;
+ width: 20%;
+ left: 1em;
+ bottom: 16em;
+ margin: 0;
+ padding: unset;
+ }
+ .actions__text {
+ font-size: 0.85rem;
+ padding: .4em;
+ width: 80%;
+ }
+ .actions li {
+ margin-top: 1.5em;
+ list-style: circle;
+ }
+ li::before {
+ display: none;
+ }
+ .scene__fish-container {
+ width: 100%;
+ }
+ .side__marine {
+ margin: 2em;
+ }
+ .side__co2--Txt {
+ width: 100%;
+ left: 0;
+ }
+ .scene__fish-container > * {
+ transform: scale(0.5);
+ }
+ .scene__deadfish1 {
+ left:10em;
+ }
+ .scene__oil {
+ left: 0;
+ }
+ .scene__garbage-wrapper {
+ position: relative;
+ top: 5em;
+ left: -10em;
+ }
+ .learn-more__textbox2 {
+ width: 280px;
+ height: 140px;
+ font-size: 1em;
+ margin-left: 2em;
+ margin-top: 1em;
+ }
+ .learn-more__man_2 {
+ width: 22%;
+ margin: 0;
+ }
+ footer {
+ font-size: 0.8rem;
+ padding: 1rem;
+ }
+ .intro__logo {
+ width: 70px;
+ }
+}
\ No newline at end of file
diff --git a/assets/styles/_mixins.scss b/assets/styles/_mixins.scss
new file mode 100644
index 0000000..afc41c9
--- /dev/null
+++ b/assets/styles/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin flex {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/assets/styles/index.css b/assets/styles/index.css
new file mode 100644
index 0000000..b967fd1
--- /dev/null
+++ b/assets/styles/index.css
@@ -0,0 +1,1338 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nixie+One&family=Nunito&display=swap");
+.center-fadeIn {
+ transform: translateX(0);
+ opacity: 1;
+ transition: transform 2s, opacity 2s;
+}
+
+.side__bigGarbage {
+ animation: spin-scale 35s infinite alternate;
+ opacity: 0.8;
+}
+
+.side__co2--Txt {
+ animation: co2 80s linear infinite alternate;
+}
+
+.side__fishes--1 {
+ animation: co2 20s linear infinite alternate;
+}
+
+.side__fishes--2 {
+ animation: co2 20s linear infinite alternate;
+}
+
+.side__smoke {
+ animation: co2 35s infinite alternate;
+}
+
+.side__miniBoat {
+ animation: boat 3s infinite alternate;
+ bottom: 70px;
+}
+
+.scene__bird {
+ animation: bird 40s linear infinite;
+}
+
+.actions__man--right-arm {
+ transform-origin: 35%;
+ animation: move-arm 5s ease infinite alternate;
+}
+
+.actions__man--eyes {
+ animation: eyes-blink 3s infinite;
+ transform-origin: center 20%;
+}
+
+@keyframes bird {
+ 0% {
+ transform: translateX(500%);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+@keyframes boat {
+ 0% {
+ transform: rotate(0deg) translate(0px) skewX(0deg);
+ }
+ 25% {
+ transform: rotate(4deg) translateX(1px) skewX(0deg);
+ }
+ 75% {
+ transform: rotate(0deg) translateX(7px) skewX(0deg);
+ }
+ 100% {
+ transform: rotate(1deg) translate(0px) skewX(0deg);
+ }
+}
+@keyframes co2 {
+ 0% {
+ transform: rotate(0) scale(1.2);
+ }
+ 100% {
+ transform: rotate(10deg) scale(3);
+ }
+}
+@keyframes spin-scale {
+ 0% {
+ transform: rotate(0) scale(5);
+ }
+ 100% {
+ transform: rotate(40deg) scale(3);
+ }
+}
+@keyframes wave {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-5%);
+ }
+}
+@keyframes title {
+ from {
+ opacity: 0;
+ letter-spacing: normal;
+ }
+ to {
+ opacity: 1;
+ letter-spacing: 0.1rem;
+ }
+}
+@keyframes color-change {
+ to {
+ color: #ff4343;
+ }
+}
+@keyframes move-arm {
+ 0% {
+ transform: rotate(-50deg) translateX(-60px);
+ }
+ 50% {
+ transform: rotate(-90deg) translateX(-80px);
+ }
+ 100% {
+ transform: rotate(-80deg) translateX(-80px);
+ }
+}
+@keyframes eyes-blink {
+ 0% {
+ transform: scaleY(1);
+ }
+ 15% {
+ transform: scaleY(1);
+ }
+ 20% {
+ transform: scaleY(0);
+ }
+ 25% {
+ transform: scaleY(1);
+ }
+ 38% {
+ transform: scaleY(1);
+ }
+ 40% {
+ transform: scaleY(0);
+ }
+ 45% {
+ transform: scaleY(1);
+ }
+ 80% {
+ transform: scaleY(1);
+ }
+}
+@keyframes blad {
+ 0% {
+ transform: rotate(0deg) translate(0px) skewX(0deg);
+ }
+ 25% {
+ transform: rotate(1deg) translate(1px) skewX(0deg);
+ }
+ 75% {
+ transform: rotate(0deg) translate(1px) skewX(0deg);
+ }
+ 100% {
+ transform: rotate(1deg) translate(0px) skewX(0deg);
+ }
+}
+#blader {
+ animation: blad 3s linear infinite alternate;
+}
+
+#blader_2 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_3 {
+ animation: blad 4s linear infinite alternate;
+}
+
+#blader_4 {
+ animation: blad 4s linear infinite alternate;
+}
+
+#blader_5 {
+ animation: blad 3s linear infinite alternate;
+}
+
+#blader_6 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_7 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_8 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_9 {
+ animation: blad 4s linear infinite alternate;
+}
+
+#blader_10 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_11 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_12 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_14 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_15 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_16 {
+ animation: blad 10s linear infinite alternate;
+}
+
+#blader_17 {
+ animation: blad 10s linear infinite alternate;
+}
+
+#blader_18 {
+ animation: blad 10s linear infinite alternate;
+}
+
+@keyframes swim-left {
+ 0% {
+ transform: translateX(100%);
+ right: 20vh;
+ }
+ 50% {
+ transform: rotate(40em);
+ transform: translateY(2em);
+ }
+ 80% {
+ transform: translateY(1em);
+ transform: scaleY(-1);
+ opacity: 1;
+ }
+ 100% {
+ right: 55vh;
+ transform: translateY(2em) rotate(-8deg);
+ transform: scaleY(-1);
+ opacity: 0;
+ }
+}
+@keyframes die {
+ 0% {
+ transform: rotate(1deg);
+ }
+ 50% {
+ transform: translateY(-4.7em) rotate(-30deg);
+ }
+ 100% {
+ transform: translateY(-2.6em);
+ opacity: 1;
+ }
+}
+@keyframes oil_1 {
+ 0% {
+ transform: rotate(2em);
+ }
+ 100% {
+ transform: translateY(20em);
+ opacity: 0;
+ }
+}
+@keyframes oil_2 {
+ 0% {
+ transform: rotate(1em);
+ }
+ 100% {
+ transform: translateY(30em);
+ opacity: 0;
+ }
+}
+@keyframes oil_3 {
+ 0% {
+ transform: rotate(2em);
+ }
+ 100% {
+ transform: translateY(15em);
+ opacity: 0;
+ }
+}
+@keyframes garbage {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: rotate(-50deg);
+ }
+ 100% {
+ transform: translateX(-2em);
+ opacity: 1;
+ }
+}
+@keyframes garbage1 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: translateX(4.7em) rotate(60deg);
+ }
+ 100% {
+ transform: translateX(-4.6em);
+ opacity: 1;
+ }
+}
+@keyframes garbage2 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: translateY(-4.7em) rotate(-10deg);
+ }
+ 100% {
+ transform: translateY(-4.6em);
+ }
+}
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Nunito", sans-serif;
+ color: #2b2c33;
+ background-color: #75bfff;
+}
+
+.intro {
+ width: 100%;
+ min-height: 350vh;
+ background: linear-gradient(180deg, #001927 0%, #75bfff 100%);
+ overflow: hidden;
+}
+.intro__container {
+ position: absolute;
+}
+.intro__heading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: #f0f8ff;
+ padding-top: 15em;
+}
+.intro__logo {
+ width: 90px;
+ position: fixed;
+ top: 0;
+ right: 0;
+ margin: 0.5em;
+ opacity: 1;
+ z-index: 10;
+}
+.intro__title {
+ font-size: 7rem;
+ font-family: "Nixie One", cursive;
+ animation: title 2s linear forwards;
+}
+.intro__para {
+ width: 200px;
+ font-size: 1.2rem;
+ margin-top: 10em;
+ border: 4px solid #f0f8ff;
+ padding: 15px;
+ border-radius: 10px;
+ opacity: 0.5;
+}
+.intro__texts {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+.intro__texts--one {
+ color: #f0f8ff;
+ margin: 0 2em 0 2em;
+ line-height: 4rem;
+ font-size: 2.2rem;
+ font-weight: 600;
+ position: absolute;
+ top: 33em;
+ opacity: 0;
+ transform: translateX(-50px);
+}
+.intro__texts--one span {
+ animation: color-change 2s ease-in infinite alternate;
+}
+.intro__texts--two {
+ color: #f0f8ff;
+ margin: 0 2em 0 2em;
+ line-height: 4rem;
+ font-size: 2.2rem;
+ font-weight: 600;
+ position: absolute;
+ top: 70em;
+ opacity: 0;
+ transform: translateX(50px);
+}
+.intro__texts--two span {
+ background-color: #ff4343;
+ padding: 0 5px;
+}
+.intro__clouds--one {
+ position: relative;
+ top: 50em;
+ left: 10em;
+}
+.intro__clouds--two {
+ position: relative;
+ top: 65em;
+ right: 50em;
+}
+.intro__clouds--three {
+ position: relative;
+ top: 85em;
+ left: -90em;
+}
+.intro__clouds--four {
+ position: relative;
+ top: 85em;
+ right: -50em;
+}
+.intro__clouds--five {
+ position: relative;
+ top: 110em;
+ left: 10em;
+}
+
+.main-container {
+ display: grid;
+ grid-template-columns: 1fr 1.7fr;
+ gap: 0;
+}
+
+.scene {
+ width: 100%;
+ max-height: 100vh;
+ overflow: hidden;
+}
+.scene__wrapper {
+ background: #75bfff;
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+.scene__ocean {
+ position: absolute;
+ bottom: -1em;
+ left: -2em;
+ z-index: 0;
+ animation: wave linear 5s infinite alternate;
+}
+.scene__island {
+ position: absolute;
+ bottom: -2em;
+ left: -5em;
+ z-index: 1;
+}
+.scene__boat {
+ position: absolute;
+ bottom: 5em;
+ left: 38em;
+ z-index: 4;
+}
+.scene__man {
+ position: absolute;
+ left: 25em;
+ bottom: 6em;
+ z-index: 2;
+}
+.scene__bottle {
+ position: absolute;
+ bottom: 11em;
+ left: 28em;
+ z-index: 3;
+}
+.scene__co2--1 {
+ position: absolute;
+ bottom: 8em;
+ left: 10em;
+ opacity: 0;
+}
+.scene__co2--2 {
+ position: absolute;
+ bottom: 9.5em;
+ left: 7em;
+ opacity: 0;
+}
+.scene__co2--3 {
+ position: absolute;
+ bottom: 12em;
+ left: 5em;
+ opacity: 0;
+}
+.scene__island-two {
+ position: absolute;
+ bottom: -9em;
+ right: -47em;
+}
+.scene__island-three {
+ position: absolute;
+ bottom: 0em;
+ right: -40em;
+ min-width: 52%;
+}
+.scene__man-green {
+ position: absolute;
+ left: 50em;
+ bottom: 6em;
+ opacity: 0;
+}
+.scene__cup {
+ position: absolute;
+ left: 54em;
+ bottom: 10em;
+ opacity: 0;
+}
+.scene__question-marks {
+ position: absolute;
+ bottom: 19em;
+ left: 15em;
+ opacity: 0;
+}
+.scene__bulb-idea {
+ position: absolute;
+ bottom: 21em;
+ left: 17em;
+ transform: rotate(15deg);
+ opacity: 0;
+}
+.scene__bird {
+ position: absolute;
+ bottom: 45rem;
+}
+.scene__fish-container {
+ position: absolute;
+ z-index: 5;
+ width: 100%;
+ bottom: -70em;
+ height: 100vh;
+ background: linear-gradient(180deg, #0693E3 0%, #0e1a52 100%);
+}
+.scene__fish1 {
+ position: absolute;
+ right: 10rem;
+ top: 3rem;
+ z-index: 2;
+ transform: translateY(100%);
+ animation: swim-left 13s infinite;
+}
+.scene__deadfish1 {
+ position: absolute;
+ z-index: 2;
+ left: 480px;
+ top: 120px;
+ transform: translateY(300deg);
+ opacity: 0;
+ animation-name: die;
+ animation-duration: 8s;
+ animation-delay: 7s;
+ animation-fill-mode: die 10s infinite;
+}
+.scene__garbage--1 {
+ position: absolute;
+ top: 350px;
+ left: 750px;
+ animation: garbage 30s linear infinite alternate;
+}
+.scene__garbage--2 {
+ position: absolute;
+ top: 350px;
+ left: 250px;
+ animation: garbage 50s linear infinite alternate;
+}
+.scene__garbage--3 {
+ position: absolute;
+ top: 550px;
+ left: 850px;
+ animation: garbage 20s linear infinite alternate;
+}
+.scene__oil {
+ position: relative;
+ left: 15em;
+}
+.scene__oil--1 {
+ position: absolute;
+ top: 30px;
+ left: 200px;
+ animation: oil_1 10s linear infinite;
+}
+.scene__oil--2 {
+ position: absolute;
+ top: 80px;
+ left: 400px;
+ animation: oil_2 12s linear infinite;
+}
+.scene__oil--3 {
+ position: absolute;
+ top: 1px;
+ left: 130px;
+ animation: oil_3 8s linear infinite;
+}
+
+.side {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+}
+.side__box {
+ background-color: #75bfff;
+ height: 170vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+.side__box:last-child {
+ height: 100vh;
+}
+.side__bigGarbage {
+ position: absolute;
+}
+.side__inner {
+ transform: translateX(-50px);
+ padding-top: 3em;
+ font-size: 1.8rem;
+ font-weight: 700;
+ margin: 0 20%;
+ opacity: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+.side__box:nth-child(1) span {
+ background-color: #ffc401;
+ padding: 0 5px;
+}
+.side__sidebox--7 p {
+ margin-top: 8em;
+}
+.side__sidebox--12 span {
+ background-color: #36b110;
+ padding: 0 5px;
+}
+.side__marine {
+ margin-top: 3em;
+ opacity: 1;
+}
+.side__fishes--1 {
+ position: absolute;
+ opacity: 0.4;
+ top: 8em;
+ left: 20px;
+ z-index: -1;
+}
+.side__fishes--2 {
+ position: absolute;
+ opacity: 0.4;
+ top: 19em;
+ left: 55px;
+ z-index: -1;
+}
+.side__co2--Txt {
+ position: absolute;
+ top: 2em;
+ left: -4em;
+ opacity: 0.1;
+ z-index: -1;
+}
+.side__smoke {
+ opacity: 0.8;
+ bottom: 70px;
+ width: 7em;
+ scale: 5;
+}
+
+.actions {
+ background: url(../img/beach-cleaning.png) no-repeat center;
+ background-size: cover;
+ width: 100%;
+ height: 100vh;
+ position: relative;
+ color: #f0f8ff;
+ display: flex;
+ flex-direction: row;
+ text-align: left;
+}
+.actions__man {
+ margin-left: 12em;
+ padding-bottom: 7em;
+}
+.actions__text {
+ width: 75%;
+ font-size: 1.3em;
+ font-weight: 600;
+ opacity: 0;
+ transform: translateX(-50px);
+ padding: 3em 1em;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+.actions__text li {
+ margin-top: 1.5em;
+ list-style: none;
+ text-align: left;
+ margin-left: 2em;
+}
+.actions__text li::before {
+ content: url(../img/light-bulb.svg);
+ padding-right: 5px;
+}
+.actions h2 {
+ font-size: 2rem;
+}
+
+.learn-more {
+ z-index: 2;
+ background: url(../img/trash-ocean.png) no-repeat center;
+ background-size: cover;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ flex-direction: row;
+}
+.learn-more__textbox2 {
+ width: 500px;
+ height: 250px;
+ background-color: #fff;
+ border-radius: 80px 70px 70px 0px;
+ border-top-width: 10px;
+ border-top-style: ridge;
+ border-top-color: #001927;
+ font-size: 1.6em;
+ font-weight: 700;
+ margin-bottom: 15em;
+ line-height: 1.8em;
+ transform: translateX(50px);
+ opacity: 0;
+}
+.learn-more__innertext {
+ padding: 1em;
+ margin-top: 1.2em;
+ color: #2b2c33;
+}
+.learn-more__innertext a {
+ color: #75bfff;
+}
+.learn-more__man_2 {
+ transform: translateX(-50px);
+ opacity: 0;
+}
+
+footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ background-color: #000000;
+ color: #fff;
+ height: 6em;
+ width: 100%;
+}
+footer a {
+ color: #fff;
+}
+
+.portrait-info {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+.portrait-info p {
+ margin: 0 25%;
+ font-size: 1.3rem;
+}
+
+.center-fadeIn {
+ transform: translateX(0);
+ opacity: 1;
+ transition: transform 2s, opacity 2s;
+}
+
+.side__bigGarbage {
+ animation: spin-scale 35s infinite alternate;
+ opacity: 0.8;
+}
+
+.side__co2--Txt {
+ animation: co2 80s linear infinite alternate;
+}
+
+.side__fishes--1 {
+ animation: co2 20s linear infinite alternate;
+}
+
+.side__fishes--2 {
+ animation: co2 20s linear infinite alternate;
+}
+
+.side__smoke {
+ animation: co2 35s infinite alternate;
+}
+
+.side__miniBoat {
+ animation: boat 3s infinite alternate;
+ bottom: 70px;
+}
+
+.scene__bird {
+ animation: bird 40s linear infinite;
+}
+
+.actions__man--right-arm {
+ transform-origin: 35%;
+ animation: move-arm 5s ease infinite alternate;
+}
+
+.actions__man--eyes {
+ animation: eyes-blink 3s infinite;
+ transform-origin: center 20%;
+}
+
+@keyframes bird {
+ 0% {
+ transform: translateX(500%);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+@keyframes boat {
+ 0% {
+ transform: rotate(0deg) translate(0px) skewX(0deg);
+ }
+ 25% {
+ transform: rotate(4deg) translateX(1px) skewX(0deg);
+ }
+ 75% {
+ transform: rotate(0deg) translateX(7px) skewX(0deg);
+ }
+ 100% {
+ transform: rotate(1deg) translate(0px) skewX(0deg);
+ }
+}
+@keyframes co2 {
+ 0% {
+ transform: rotate(0) scale(1.2);
+ }
+ 100% {
+ transform: rotate(10deg) scale(3);
+ }
+}
+@keyframes spin-scale {
+ 0% {
+ transform: rotate(0) scale(5);
+ }
+ 100% {
+ transform: rotate(40deg) scale(3);
+ }
+}
+@keyframes wave {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-5%);
+ }
+}
+@keyframes title {
+ from {
+ opacity: 0;
+ letter-spacing: normal;
+ }
+ to {
+ opacity: 1;
+ letter-spacing: 0.1rem;
+ }
+}
+@keyframes color-change {
+ to {
+ color: #ff4343;
+ }
+}
+@keyframes move-arm {
+ 0% {
+ transform: rotate(-50deg) translateX(-60px);
+ }
+ 50% {
+ transform: rotate(-90deg) translateX(-80px);
+ }
+ 100% {
+ transform: rotate(-80deg) translateX(-80px);
+ }
+}
+@keyframes eyes-blink {
+ 0% {
+ transform: scaleY(1);
+ }
+ 15% {
+ transform: scaleY(1);
+ }
+ 20% {
+ transform: scaleY(0);
+ }
+ 25% {
+ transform: scaleY(1);
+ }
+ 38% {
+ transform: scaleY(1);
+ }
+ 40% {
+ transform: scaleY(0);
+ }
+ 45% {
+ transform: scaleY(1);
+ }
+ 80% {
+ transform: scaleY(1);
+ }
+}
+@keyframes blad {
+ 0% {
+ transform: rotate(0deg) translate(0px) skewX(0deg);
+ }
+ 25% {
+ transform: rotate(1deg) translate(1px) skewX(0deg);
+ }
+ 75% {
+ transform: rotate(0deg) translate(1px) skewX(0deg);
+ }
+ 100% {
+ transform: rotate(1deg) translate(0px) skewX(0deg);
+ }
+}
+#blader {
+ animation: blad 3s linear infinite alternate;
+}
+
+#blader_2 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_3 {
+ animation: blad 4s linear infinite alternate;
+}
+
+#blader_4 {
+ animation: blad 4s linear infinite alternate;
+}
+
+#blader_5 {
+ animation: blad 3s linear infinite alternate;
+}
+
+#blader_6 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_7 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_8 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_9 {
+ animation: blad 4s linear infinite alternate;
+}
+
+#blader_10 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_11 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_12 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_14 {
+ animation: blad 6s linear infinite alternate;
+}
+
+#blader_15 {
+ animation: blad 5s linear infinite alternate;
+}
+
+#blader_16 {
+ animation: blad 10s linear infinite alternate;
+}
+
+#blader_17 {
+ animation: blad 10s linear infinite alternate;
+}
+
+#blader_18 {
+ animation: blad 10s linear infinite alternate;
+}
+
+@keyframes swim-left {
+ 0% {
+ transform: translateX(100%);
+ right: 20vh;
+ }
+ 50% {
+ transform: rotate(40em);
+ transform: translateY(2em);
+ }
+ 80% {
+ transform: translateY(1em);
+ transform: scaleY(-1);
+ opacity: 1;
+ }
+ 100% {
+ right: 55vh;
+ transform: translateY(2em) rotate(-8deg);
+ transform: scaleY(-1);
+ opacity: 0;
+ }
+}
+@keyframes die {
+ 0% {
+ transform: rotate(1deg);
+ }
+ 50% {
+ transform: translateY(-4.7em) rotate(-30deg);
+ }
+ 100% {
+ transform: translateY(-2.6em);
+ opacity: 1;
+ }
+}
+@keyframes oil_1 {
+ 0% {
+ transform: rotate(2em);
+ }
+ 100% {
+ transform: translateY(20em);
+ opacity: 0;
+ }
+}
+@keyframes oil_2 {
+ 0% {
+ transform: rotate(1em);
+ }
+ 100% {
+ transform: translateY(30em);
+ opacity: 0;
+ }
+}
+@keyframes oil_3 {
+ 0% {
+ transform: rotate(2em);
+ }
+ 100% {
+ transform: translateY(15em);
+ opacity: 0;
+ }
+}
+@keyframes garbage {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: rotate(-50deg);
+ }
+ 100% {
+ transform: translateX(-2em);
+ opacity: 1;
+ }
+}
+@keyframes garbage1 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: translateX(4.7em) rotate(60deg);
+ }
+ 100% {
+ transform: translateX(-4.6em);
+ opacity: 1;
+ }
+}
+@keyframes garbage2 {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 50% {
+ transform: translateY(-4.7em) rotate(-10deg);
+ }
+ 100% {
+ transform: translateY(-4.6em);
+ }
+}
+@media (prefers-reduced-motion) {
+ .intro__title {
+ animation: unset;
+ }
+ .center-fadeIn {
+ opacity: 1;
+ transition: opacity 2s;
+ }
+ .actions__man--right-arm {
+ animation: move-arm 10s ease infinite alternate;
+ }
+ .scene__bird {
+ animation: bird 70s infinite;
+ }
+ .side__bigGarbage {
+ animation: spin-scale 70s infinite alternate;
+ }
+ .scene__oil--1 {
+ animation: oil_1 15s linear infinite;
+ }
+ .scene__oil--2 {
+ animation: oil_2 18s linear infinite;
+ }
+ .scene__oil--3 {
+ animation: oil_3 12s linear infinite;
+ }
+}
+.side__fishes--1 {
+ animation: co2 40s linear infinite alternate;
+}
+
+.side__fishes--2 {
+ animation: co2 40s linear infinite alternate;
+}
+
+@media (prefers-color-scheme: dark) {
+ .intro {
+ background: linear-gradient(180deg, #010C12 0%, #273953 100%);
+ }
+ .intro__clouds {
+ opacity: 0.5;
+ }
+ .scene__wrapper {
+ background: #273953;
+ }
+ .side__box {
+ background: #273953;
+ }
+ .side__inner {
+ color: #f0f8ff;
+ }
+ .scene__wave--one, .scene__wave--two, .scene__wave--three {
+ fill: #245399;
+ }
+ .scene__fish-container {
+ background: linear-gradient(180deg, #245399 0%, #163461 100%);
+ }
+ .learn-more__textbox2 {
+ background-color: #273953;
+ color: #f0f8ff;
+ }
+}
+@media (orientation: portrait) {
+ main, footer {
+ display: none;
+ }
+ .portrait-info, .portrait-info * {
+ display: flex !important;
+ }
+}
+@media (orientation: landscape) {
+ .portrait-info, .portrait-info * {
+ display: none;
+ }
+}
+@media screen and (max-width: 950px) and (orientation: landscape) {
+ .portrait-info, .portrait-info * {
+ display: none;
+ }
+ .intro__title {
+ font-size: 3.2rem;
+ }
+ .intro__heading {
+ padding-top: 9rem;
+ }
+ .intro__para {
+ margin-top: 5em;
+ width: 130px;
+ font-size: 0.8rem;
+ padding: 0.5em;
+ }
+ .intro {
+ min-height: 700vh;
+ }
+ .intro__text {
+ font-size: 1.6rem;
+ }
+ .intro__clouds img {
+ max-width: 60%;
+ max-height: 60%;
+ }
+ .scene__island {
+ max-width: 500px;
+ }
+ .scene__man {
+ left: 30em;
+ }
+ .scene__bottle {
+ left: 13.5em;
+ bottom: 9em;
+ }
+ .scene__boat {
+ left: 25em;
+ max-width: 300px;
+ }
+ .side__inner {
+ font-size: 1.1rem;
+ margin: 0 10%;
+ }
+ .side__bigGarbage {
+ width: 40%;
+ }
+ .side__smoke {
+ width: 30%;
+ }
+ .scene__cup {
+ left: 25em;
+ }
+ .scene__man-green {
+ left: 52em;
+ }
+ .scene__bird {
+ bottom: 20em;
+ width: 45%;
+ animation: bird 30s linear infinite;
+ }
+ .scene__question-marks {
+ bottom: 14em;
+ left: 7em;
+ }
+ .scene__bulb-idea {
+ bottom: 15em;
+ left: 8em;
+ }
+ .scene__co2-wrap {
+ position: absolute;
+ left: -5em;
+ bottom: 1em;
+ transform: scale(0.8);
+ }
+ .actions h2 {
+ font-size: 1.2rem;
+ }
+ .actions__man {
+ position: relative;
+ width: 20%;
+ left: 1em;
+ bottom: 16em;
+ margin: 0;
+ padding: unset;
+ }
+ .actions__text {
+ font-size: 0.85rem;
+ padding: 0.4em;
+ width: 80%;
+ }
+ .actions li {
+ margin-top: 1.5em;
+ list-style: circle;
+ }
+ li::before {
+ display: none;
+ }
+ .scene__fish-container {
+ width: 100%;
+ }
+ .side__marine {
+ margin: 2em;
+ }
+ .side__co2--Txt {
+ width: 100%;
+ left: 0;
+ }
+ .scene__fish-container > * {
+ transform: scale(0.5);
+ }
+ .scene__deadfish1 {
+ left: 10em;
+ }
+ .scene__oil {
+ left: 0;
+ }
+ .scene__garbage-wrapper {
+ position: relative;
+ top: 5em;
+ left: -10em;
+ }
+ .learn-more__textbox2 {
+ width: 280px;
+ height: 140px;
+ font-size: 1em;
+ margin-left: 2em;
+ margin-top: 1em;
+ }
+ .learn-more__man_2 {
+ width: 22%;
+ margin: 0;
+ }
+ footer {
+ font-size: 0.8rem;
+ padding: 1rem;
+ }
+ .intro__logo {
+ width: 70px;
+ }
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/assets/styles/index.css.map b/assets/styles/index.css.map
new file mode 100644
index 0000000..2fe71b0
--- /dev/null
+++ b/assets/styles/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["_fonts.scss","_animations.scss","index.css","_colors.scss","_layout.scss","_mixins.scss","_mediaqueries.scss"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file
diff --git a/assets/styles/index.scss b/assets/styles/index.scss
new file mode 100644
index 0000000..df74096
--- /dev/null
+++ b/assets/styles/index.scss
@@ -0,0 +1,6 @@
+@import "colors";
+@import "mixins";
+@import "fonts";
+@import "layout";
+@import "animations";
+@import "mediaqueries";
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..960c4cb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,604 @@
+
+
+
+
+
+
+ UN goal 14: Life below water
+
+
+
+
+
+
+
+
+ Life below water
+ Scroll down
+
+
+
+
OUR OCEAN, THE PLANET’S LARGEST ECOSYSTEM IS
+ ENDANGERED
+
+
+
Human activity is choking the ocean
+
+
+
+
+
+
+
+
+
+
+
+
Around 17 million metric tons of plastic enters our oceans each year
+
+
+
+
+
+
The main sources of marine pollution are land-based, leading to
+ a seemingly unstoppable flow of litter, waste and run-off into the ocean.
+
+
+
+
+
+
+
+
Plastic pollution each year is expected to double or
+ triple by 2040, threatening all marine life.
+
+
+
+
+
Human activites harm marine life, coastal communities, and human health.
+
+
+
+
+
+
+
The ocean obsorbs 23% of human-generated Co2 and 90% of excess heat. This causes record ocean heat, marine heatwaves, and deaths, harming ecosystems and threatening climate change mitigation.
+
+
+
+
+
+
+
Our waste pollutes oceans, our seafood consumption contributes to overfishing, and our tourism choices affect marine habitats
+
+
+
+
+
+
+
Pollution created by humans leaves marine species vulnerable, and we notice more fatalities than ever.
+ Including the coral reefs, which are known as the lungs of the planet.
+
+
+
+
+
+
But, by breaking the habits..
+
+
+
+
+
..each and everyone of us can make a difference!
+
+
+
+
+
+
It all comes down to how we decide to behave
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
What actions can we do as individuals?
+
+ Find a Goal 14 charity you want to support. Any donation, big or small, can make a difference!
+ Cut waste by avoiding plastic, as their improper usage and single-use disposal is a significant source of ocean pollution.
+ Organize a community cleanup of nearby rivers, oceans, or coasts. Or simply contribute by yourself.
+ Reduce carbon emissionsby minimizing your carbon footprint by conserving energy, using eco-friendly transportation options, and supporting renewable energy sources.
+ Share knowledge with others about the importance of marine conservation and inspire them to join efforts in protecting marine life.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Want to learn more?
+
Check out UN Goal 14 here:
+
Goal-14
+
+
+
+
+
+
+
Rotate your device to landscape mode to see the story
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..98cce61
--- /dev/null
+++ b/script.js
@@ -0,0 +1,491 @@
+
+//intersection observers
+const texts = document.querySelectorAll(".intro__text");
+const sectionText = document.querySelectorAll(".side__inner");
+const text3 = document.querySelectorAll(".actions__text");
+const textbox = document.querySelectorAll(".learn-more__textbox2");
+const man = document.querySelectorAll(".learn-more__man_2");
+
+const options = {
+ root: null,
+ threshold: 0.8,
+ rootMargin: "50px",
+};
+
+const observer = new IntersectionObserver(function (entries) {
+ entries.forEach((entry) => {
+ if (!entry.isIntersecting) {
+ return;
+ }
+ entry.target.classList.add("center-fadeIn");
+ });
+}, options);
+
+texts.forEach((text) => {
+ observer.observe(text);
+});
+sectionText.forEach((text2) => {
+ observer.observe(text2);
+});
+
+text3.forEach((text3) => {
+ observer.observe(text3);
+});
+
+textbox.forEach((text4) => {
+ observer.observe(text4);
+});
+
+man.forEach((man) => {
+ observer.observe(man);
+});
+
+
+// ------------------------------------------------------------------------------------------/
+//GSAP SCROLL ANIMATIONS
+gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
+
+// sticky container for the scenes frame
+ScrollTrigger.create({
+ trigger: '.scene',
+ start: 'top top',
+ endTrigger: '#end-trigger',
+ pin: true,
+ pinSpacing: false,
+});
+
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+// clouds moving on scroll
+let clouds = gsap.timeline();
+
+if (!prefersReducedMotion) {
+ScrollTrigger.create({
+ animation: clouds,
+ trigger: "img",
+ start: "top 70%",
+ end: "300%",
+ scrub: 1,
+});
+}
+
+clouds.to(".intro__clouds--one", { x: 1200 }, 0,)
+clouds.to(".intro__clouds--two", { x: 900 }, 0)
+clouds.to(".intro__clouds--three", { x: 600 }, 0)
+clouds.to(".intro__clouds--four", { x: 500 }, 0)
+clouds.to(".intro__clouds--five", { x: -900 }, 0)
+
+// waves
+
+let desktop = gsap.timeline();
+
+desktop.to('.scene__wave--one', {
+ xPercent: -50,
+ ease: "power1.in",
+ scrollTrigger: {
+ trigger: ".side__sidebox--3",
+ start: "top center",
+ endTrigger: "#end-trigger",
+ scrub: 1,
+
+ }
+ })
+ desktop.to('.scene__wave--two', {
+ xPercent: -50,
+ ease: "power1.in",
+ scrollTrigger: {
+ trigger: ".side__sidebox--3",
+ start: "top center",
+ endTrigger: "#end-trigger",
+ scrub: 1,
+ }
+ })
+
+desktop.to('.scene__wave--three', {
+ xPercent: -50,
+ ease: "power1.in",
+ scrollTrigger: {
+ trigger: ".side__sidebox--3",
+ start: "top center",
+ endTrigger: "#end-trigger",
+ scrub: 1,
+
+ }
+ })
+
+ // bottle to ocean motion path
+
+ desktop.to('.scene__bottle', {
+ scrollTrigger: {
+ trigger: ".side__sidebox--2",
+ start: "top center",
+ end: "+=400",
+ scrub: 0.2,
+ },
+ motionPath: {
+ path: "M33.834,60.412 C52.803,53.384 59.846,32.141 132.889,30.3 174.1335,29.25995 206.57465,33.52242 231.73044,50.10079 252.31246,63.66491 302.668,120.119 295.078,173.275",
+ align: "self",
+ autoRotate: -35,
+ }});
+
+ desktop.to('.scene__bottle', {
+ opacity: 0,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--2",
+ start: "top center",
+ end: "+=600px",
+ scrub: 0.5,
+ }
+ })
+
+ // man to boat
+ desktop.to('.scene__man', {
+ xPercent: 380,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--3",
+ start: "top top",
+ end: "+=400px",
+ scrub: 0.5,
+ }
+ })
+
+ //move island out of frame
+ desktop.to('.scene__island', {
+ xPercent: -300,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--4",
+ start: "top top",
+ end: "+=500px",
+ scrub: 1,
+ }
+ })
+
+ //move man and boat to center
+
+ desktop.to('.scene__man', {
+ x: -450,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+ })
+ desktop.to('.scene__boat', {
+ x: -450,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+ })
+
+
+ //co2 appear
+ desktop.to('.scene__co2--1', {
+ opacity: 0.8,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top top",
+ end: "+=500px",
+ scrub: 0.5,
+ }
+ })
+
+ desktop.to('.scene__co2--2', {
+ opacity: 0.8,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top top",
+ end: "+=800px",
+ scrub: 0.5,
+ }
+ })
+
+ desktop.to('.scene__co2--3', {
+ opacity: 0.8,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top top",
+ end: "+=1200px",
+ scrub: 0.5,
+ }
+ })
+ desktop.to('.scene__co2-wrap', {
+ opacity: 0,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--7",
+ start: "top top",
+ end: "+=1000px",
+ scrub: 0.5,
+ }
+ })
+
+// seadive scene
+
+desktop.to('.scene__fish-container', {
+ y: -1120,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--7",
+ start: "top center",
+ end: "+=800px",
+ scrub: 0.5,
+ }
+})
+
+desktop.to('.scene__fish-container', {
+ x: -1500,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--9",
+ start: "top bottom",
+ end: "+=700px",
+ scrub: 0.5,
+ }
+})
+
+//island coming in
+
+ desktop.to('.scene__island-two', {
+ x: -610,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--9",
+ start: "top top",
+ end: "+=700px",
+ scrub: 0.5,
+ }
+ })
+
+
+// zoom scene
+ desktop.to('.scene__wrapper', {
+ keyframes: {
+ scale: [1, 1.8, 1.8, 1],
+ },
+ transformOrigin: "0 80%",
+ ease: "sine.out",
+ scrollTrigger: {
+ trigger: ".side__sidebox--11",
+ start: "top top",
+ end: "+=5000",
+ scrub: 0.2,
+ }
+ })
+
+ // island going out
+ desktop.to('.scene__island-two', {
+ x: 610,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--12",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+ })
+
+ //last island coming in
+ desktop.to('.scene__island-three', {
+ xPercent: -88,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--12",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+ })
+
+ // opacity 0 man
+
+ desktop.to('.scene__man', {
+ opacity: 0,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--13",
+ start: "top center",
+ end: "+=500px",
+ scrub: 0.5,
+ }
+ })
+//opacity 1 green man
+
+desktop.to('.scene__man-green', {
+ opacity: 1,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--14",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+})
+
+desktop.to(".scene__cup",{
+ xPercent: 20,
+ yPercent: 70,
+ scrollTrigger: {
+ trigger: ".side__sidebox--14",
+ start: "top top",
+ end: "+=550px",
+ scrub: 0.5,
+ }
+});
+desktop.to(".scene__cup",{
+ opacity: 1,
+ keyframes: {
+ opacity: [0, 1, 1, 0]
+ },
+ scrollTrigger: {
+ trigger: ".side__sidebox--14",
+ start: "top center",
+ end: "+=1000px",
+ scrub: 0.5,
+ }
+});
+desktop.to(".scene__question-marks",{
+ keyframes: {
+ opacity: [0, 1, 1, 0]
+ },
+ scrollTrigger: {
+ trigger: ".side__sidebox--10",
+ start: "top center",
+ end: "+=2000px",
+ scrub: 0.5,
+ }
+});
+desktop.to(".scene__bulb-idea",{
+ keyframes: {
+ opacity: [0, 1, 1, 0]
+ },
+ scrollTrigger: {
+ trigger: ".side__sidebox--12",
+ start: "top center",
+ end: "+=2000px",
+ scrub: 0.5,
+ }
+});
+
+ // --------------------------------------------------------------//
+ // MATCHMEDIA for landscape view
+let mm = gsap.matchMedia();
+
+mm.add("(max-width: 950px)", () => {
+
+ let tl = gsap.timeline();
+ tl.to(".scene__bottle", {
+ scale: 0.6,
+ })
+ tl.to(".scene__man", {
+ scale: 0.6,
+ x: -300,
+ y: 42,
+ })
+ tl.to(".scene__boat", {
+ scale: 0.6,
+ x: -150,
+ })
+ tl.to(".scene__island",{
+ scale: 0.7,
+ y: 80,
+ x: -50,
+ })
+ tl.to(".scene__island-two",{
+ scale: 0.6,
+ xPercent: 15,
+ })
+ tl.to(".scene__island-three",{
+ scale: 0.6,
+ xPercent: 15,
+ })
+
+
+ tl.to(".scene__man-green", {
+ scale: 0.6,
+ xPercent: -610,
+ })
+
+ tl.to('.scene__man', {
+ xPercent: 170,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--3",
+ start: "top top",
+ end: "+=400px",
+ scrub: 0.5,
+ }
+ })
+
+ tl.to('.scene__man', {
+ x: -500,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+ })
+ tl.to('.scene__boat', {
+ x: -400,
+ ease: "none",
+ scrollTrigger: {
+ trigger: ".side__sidebox--5",
+ start: "top center",
+ end: "+=300px",
+ scrub: 0.5,
+ }
+ })
+
+ gsap.killTweensOf('.scene__wrapper');
+
+ tl.to(".scene__cup",{
+ xPercent: 10,
+ yPercent: 40,
+ scale: 0.8
+ });
+
+ tl.to(".scene__cup",{
+ opacity: 1,
+ keyframes: {
+ opacity: [0, 1, 1, 0]
+ },
+ scrollTrigger: {
+ trigger: ".side__sidebox--14",
+ start: "top center",
+ end: "+=900px",
+ scrub: 0.5,
+ }
+ });
+
+ gsap.killTweensOf('.scene__bulb-idea');
+ tl.to(".scene__bulb-idea",{
+ keyframes: {
+ opacity: [0, 1, 1, 0]
+ },
+ scrollTrigger: {
+ trigger: ".side__sidebox--12",
+ start: "top center",
+ end: "+=1500px",
+ scrub: 0.5,
+ }
+ });
+
+})
+
+//reload reset
+window.onbeforeunload = function() {
+ window.scrollTo(0, 0);
+}