+ Please flip your phone to landscape mode for a better experience.
+
+
+
+ 
+
+ The Ocean's Journey: From Beauty to Devastation and Back Again
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ + The ocean is vast and bountiful, full of life, critters and creatures. +
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ + 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. +
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ + As the pollution continues, the ocean becomes uninhabitable for the sea creatures. Some die while others + leave. +
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..192b3ff
--- /dev/null
+++ 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));
+
\ No newline at end of file
diff --git a/styles/animations.css b/styles/animations.css
new file mode 100644
index 0000000..212636c
--- /dev/null
+++ b/styles/animations.css
@@ -0,0 +1,265 @@
+/* Global animations */
+@keyframes image-container__waves-crashing {
+ 0% {
+ opacity: 0.4;
+ left: -60%;
+ }
+ 50% {
+ opacity: 0.7;
+ left: 30%;
+ transform: rotate(-4.5deg);
+ }
+ 100% {
+ opacity: 0.4;
+ left: 120%;
+ }
+}
+@keyframes boat-bobbing {
+ 0% {
+ animation-timing-function: ease-in;
+ transform: translateY(0);
+ }
+ 45% {
+ animation-timing-function: ease-out;
+ transform: translateY(8px);
+ }
+ 55% {
+ animation-timing-function: ease-out;
+ transform: translateY(8px);
+ }
+ 100% {
+ animation-timing-function: ease-out;
+ transform: translateY(0);
+ }
+}
+@keyframes pollution-pulsing {
+ 0% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+ 50% {
+ transform: scale(1.2);
+ opacity: 0.9;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+}
+@keyframes image-container__crab-walk {
+ 0%, 100% {
+ transform: translateX(0);
+ transform-origin: 50% 50%;
+ }
+ 15% {
+ transform: translateX(-30px) translateY(20px) rotate(-6deg);
+ }
+ 30% {
+ transform: translateX(-50px) rotate(6deg);
+ }
+ 45% {
+ transform: translateX(0px) rotate(-6deg);
+ }
+ 60% {
+ transform: translateX(30px) rotate(6deg);
+ }
+ 75% {
+ transform: translateX(50px) rotate(-6deg);
+ }
+ 90% {
+ transform: translateX(0) translateY(-10px) rotate(4deg);
+ }
+}
+/* nimations for scene 1 and 2 */
+@keyframes fish-swim {
+ 0% {
+ opacity: 0.3;
+ top: 60%;
+ left: 60%;
+ }
+ 30% {
+ opacity: 0.5;
+ top: 43%;
+ left: 52%;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes image-container__splash--scene1 {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes image-container__dolphin--scene1 {
+ 0% {
+ top: 40%;
+ }
+ 30% {
+ transform: rotate(-20deg);
+ }
+ 40% {
+ top: 33%;
+ left: 39%;
+ transform: rotate(-40deg);
+ opacity: 1;
+ }
+ 50% {
+ top: 33%;
+ transform: rotate(-50deg);
+ left: 38.8%;
+ opacity: 1;
+ }
+ 100% {
+ top: 44%;
+ transform: rotate(-60deg);
+ left: 38.8%;
+ opacity: 0;
+ }
+}
+@keyframes image-container__brownfish--scene1 {
+ 0% {
+ left: 20%;
+ }
+ 50% {
+ left: 25%;
+ }
+ 100% {
+ left: 30%;
+ }
+}
+@keyframes image-container__ship--scene2 {
+ 0% {
+ left: 9%;
+ }
+ 100% {
+ left: 39%;
+ }
+}
+@keyframes image-container__chemspill--scene2 {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 80% {
+ opacity: 1;
+ scale: 1.5;
+ }
+}
+@keyframes image-container__fish1--scene2 {
+ 0% {
+ right: 30%;
+ opacity: 1;
+ }
+ 50% {
+ right: 25%;
+ }
+ 100% {
+ right: 24%;
+ opacity: 0;
+ }
+}
+@keyframes image-container__fish2--scene2 {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+/* Animations for scene 3 and 4 */
+@keyframes scene-3-fish-swim {
+ 0% {
+ transform: translate(-40px, 2px) rotateY(180deg);
+ }
+ 50% {
+ transform: translate(40px, -2px) rotatey(180deg);
+ }
+ 51% {
+ transform: rotatey(0);
+ }
+ 100% {
+ transform: translate(-40px, 2px);
+ }
+}
+@keyframes scene-3-fish-flail {
+ 0%, 100% {
+ transform: translateX(15px) rotate(12deg);
+ }
+ 25% {
+ transform: translateX(-15px) rotate(-12deg);
+ }
+ 50% {
+ transform: translateX(10px) rotate(12deg);
+ }
+ 75% {
+ transform: translateX(-10px) translateY(-30px) rotate(0);
+ }
+}
+@keyframes scene-4-guy-move {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+ 30% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translateX(0);
+ }
+ 55% {
+ transform: rotate(-5deg);
+ }
+ 70% {
+ transform: rotate(0);
+ }
+}
+@keyframes scene-4-trash-toss {
+ 0% {
+ transform: translateX(145px) translateY(30px);
+ }
+ 52% {
+ transform: translateX(145px) translateY(30px);
+ }
+ 75% {
+ transform: translateX(70px) translateY(-130px) rotate(6turn);
+ }
+ 100% {
+ transform: translateX(0) translateY(0) rotate(12turn);
+ }
+}
+/* Animations for scene 5 and 6 */
+@keyframes scene5-boat {
+ 0% {
+ left: 9%;
+ }
+ 100% {
+ left: 50%;
+ }
+}
+@keyframes scene5-chemspill {
+ 0% {
+ opacity: 1;
+ scale: 1.3;
+ }
+ 60% {
+ opacity: 1;
+ scale: 1.6;
+ }
+ 100% {
+ opacity: 0;
+ scale: 1;
+ }
+}
+/*# sourceMappingURL=animations.css.map */
\ No newline at end of file
diff --git a/styles/animations.css.map b/styles/animations.css.map
new file mode 100644
index 0000000..33deda1
--- /dev/null
+++ b/styles/animations.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["animations.scss","animations.css"],"names":[],"mappings":"AAAA,sBAAA;AACA;EACC;IACC,YAAA;IACA,UAAA;ECCA;EDED;IACC,YAAA;IACA,SAAA;IACE,0BAAA;ECAF;EDGA;IACE,YAAA;IACA,UAAA;ECDF;AACF;ADIA;EACI;IACE,kCAAA;IACA,wBAAA;ECFJ;EDKE;IACE,mCAAA;IACA,0BAAA;ECHJ;EDME;IACE,mCAAA;IACA,0BAAA;ECJJ;EDOE;IACE,mCAAA;IACA,wBAAA;ECLJ;AACF;ADQE;EACE;IACE,mBAAA;IACA,YAAA;ECNJ;EDSE;IACE,qBAAA;IACA,YAAA;ECPJ;EDUE;IACE,mBAAA;IACA,YAAA;ECRJ;AACF;ADWE;EAEE;IAEE,wBAAA;IACA,yBAAA;ECXJ;EDcE;IACE,2DAAA;ECZJ;EDeE;IACE,yCAAA;ECbJ;EDgBE;IACE,wCAAA;ECdJ;EDiBE;IACE,wCAAA;ECfJ;EDkBE;IACE,yCAAA;EChBJ;EDmBE;IACE,uDAAA;ECjBJ;AACF;ADoBE,gCAAA;AACA;EACE;IACE,YAAA;IACA,QAAA;IACA,SAAA;EClBJ;EDoBE;IACE,YAAA;IACA,QAAA;IACA,SAAA;EClBJ;EDqBE;IACE,YAAA;ECnBJ;EDsBE;IACE,UAAA;ECpBJ;AACF;ADuBE;EACE;IACE,UAAA;ECrBJ;EDuBE;IACE,YAAA;ECrBJ;EDuBE;IACE,UAAA;ECrBJ;AACF;ADwBE;EACE;IACE,QAAA;ECtBJ;EDwBE;IACE,yBAAA;ECtBJ;EDwBE;IACE,QAAA;IACA,SAAA;IACA,yBAAA;IACA,UAAA;ECtBJ;EDwBE;IACE,QAAA;IACA,yBAAA;IACA,WAAA;IACA,UAAA;ECtBJ;EDwBE;IACE,QAAA;IACA,yBAAA;IACA,WAAA;IACA,UAAA;ECtBJ;AACF;ADyBE;EACE;IACE,SAAA;ECvBJ;EDyBE;IACE,SAAA;ECvBJ;EDyBE;IACE,SAAA;ECvBJ;AACF;AD0BE;EACE;IACE,QAAA;ECxBJ;ED0BE;IACE,SAAA;ECxBJ;AACF;AD2BE;EACE;IACE,UAAA;ECzBJ;ED2BE;IACE,UAAA;ECzBJ;ED2BE;IACE,UAAA;IACA,UAAA;ECzBJ;AACF;AD4BE;EACE;IACE,UAAA;IACA,UAAA;EC1BJ;ED4BE;IACE,UAAA;EC1BJ;ED4BE;IACE,UAAA;IACA,UAAA;EC1BJ;AACF;AD6BE;EACE;IACE,UAAA;EC3BJ;ED6BE;IACE,UAAA;EC3BJ;AACF;AD+BE,iCAAA;AACA;EACE;IACE,gDAAA;EC7BJ;EDgCE;IACE,gDAAA;EC9BJ;EDiCE;IACE,qBAAA;EC/BJ;EDkCE;IACE,gCAAA;EChCJ;AACF;ADoCE;EAEE;IAEE,yCAAA;ECpCJ;EDuCE;IACE,2CAAA;ECrCJ;EDwCE;IACE,yCAAA;ECtCJ;EDyCE;IACE,wDAAA;ECvCJ;AACF;AD0CE;EACE;IACE,UAAA;IACA,6BAAA;ECxCJ;ED2CE;IACE,UAAA;ECzCJ;ED4CE;IACE,wBAAA;EC1CJ;ED6CE;IACE,wBAAA;EC3CJ;ED8CE;IACE,oBAAA;EC5CJ;AACF;AD+CE;EACE;IACE,6CAAA;EC7CJ;EDgDE;IACE,6CAAA;EC9CJ;EDiDE;IACE,4DAAA;EC/CJ;EDkDE;IACE,qDAAA;EChDJ;AACF;ADmDE,iCAAA;AACA;EACE;IACE,QAAA;ECjDJ;EDmDE;IACE,SAAA;ECjDJ;AACF;ADoDE;EACE;IACE,UAAA;IACA,UAAA;EClDJ;EDoDE;IACE,UAAA;IACA,UAAA;EClDJ;EDoDE;IACE,UAAA;IACA,QAAA;EClDJ;AACF","file":"animations.css"}
\ No newline at end of file
diff --git a/styles/animations.scss b/styles/animations.scss
new file mode 100644
index 0000000..592c0d1
--- /dev/null
+++ b/styles/animations.scss
@@ -0,0 +1,317 @@
+/* Global animations */
+@keyframes image-container__waves-crashing {
+ 0% {
+ opacity: 0.4;
+ left: -60%;
+ }
+
+ 50% {
+ opacity: 0.7;
+ left: 30%;
+ transform: rotate(-4.5deg);
+ }
+
+ 100% {
+ opacity: 0.4;
+ left: 120%;
+ }
+}
+
+@keyframes boat-bobbing {
+ 0% {
+ animation-timing-function: ease-in;
+ transform: translateY(0);
+ }
+
+ 45% {
+ animation-timing-function: ease-out;
+ transform: translateY(8px);
+ }
+
+ 55% {
+ animation-timing-function: ease-out;
+ transform: translateY(8px);
+ }
+
+ 100% {
+ animation-timing-function: ease-out;
+ transform: translateY(0);
+ }
+ }
+
+ @keyframes pollution-pulsing {
+ 0% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+
+ 50% {
+ transform: scale(1.2);
+ opacity: 0.9;
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+ }
+
+ @keyframes image-container__crab-walk {
+
+ 0%,
+ 100% {
+ transform: translateX(0);
+ transform-origin: 50% 50%;
+ }
+
+ 15% {
+ transform: translateX(-30px) translateY(20px) rotate(-6deg);
+ }
+
+ 30% {
+ transform: translateX(-50px) rotate(6deg);
+ }
+
+ 45% {
+ transform: translateX(0px) rotate(-6deg);
+ }
+
+ 60% {
+ transform: translateX(30px) rotate(6deg);
+ }
+
+ 75% {
+ transform: translateX(50px) rotate(-6deg);
+ }
+
+ 90% {
+ transform: translateX(0) translateY(-10px) rotate(4deg);
+ }
+ }
+
+ /* nimations for scene 1 and 2 */
+ @keyframes fish-swim {
+ 0% {
+ opacity: 0.3;
+ top: 60%;
+ left: 60%;
+ }
+ 30% {
+ opacity: 0.5;
+ top: 43%;
+ left: 52%;
+ }
+
+ 50% {
+ opacity: 0.8;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ @keyframes image-container__splash--scene1 {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ @keyframes image-container__dolphin--scene1 {
+ 0% {
+ top: 40%;
+ }
+ 30% {
+ transform: rotate(-20deg);
+ }
+ 40% {
+ top: 33%;
+ left: 39%;
+ transform: rotate(-40deg);
+ opacity: 1;
+ }
+ 50% {
+ top: 33%;
+ transform: rotate(-50deg);
+ left: 38.8%;
+ opacity: 1;
+ }
+ 100% {
+ top: 44%;
+ transform: rotate(-60deg);
+ left: 38.8%;
+ opacity: 0;
+ }
+ }
+
+ @keyframes image-container__brownfish--scene1 {
+ 0% {
+ left: 20%;
+ }
+ 50% {
+ left: 25%;
+ }
+ 100% {
+ left: 30%;
+ }
+ }
+
+ @keyframes image-container__ship--scene2 {
+ 0% {
+ left: 9%;
+ }
+ 100% {
+ left: 39%;
+ }
+ }
+
+ @keyframes image-container__chemspill--scene2 {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 80% {
+ opacity: 1;
+ scale: 1.5;
+ }
+ }
+
+ @keyframes image-container__fish1--scene2 {
+ 0% {
+ right: 30%;
+ opacity: 1;
+ }
+ 50% {
+ right: 25%;
+ }
+ 100% {
+ right: 24%;
+ opacity: 0;
+ }
+ }
+
+ @keyframes image-container__fish2--scene2 {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+
+ }
+
+ /* Animations for scene 3 and 4 */
+ @keyframes scene-3-fish-swim {
+ 0% {
+ transform: translate(-40px, 2px) rotateY(180deg);
+ }
+
+ 50% {
+ transform: translate(40px, -2px) rotatey(180deg);
+ }
+
+ 51% {
+ transform: rotatey(0);
+ }
+
+ 100% {
+ transform: translate(-40px, 2px);
+ }
+
+ }
+
+ @keyframes scene-3-fish-flail {
+
+ 0%,
+ 100% {
+ transform: translateX(15px) rotate(12deg);
+ }
+
+ 25% {
+ transform: translateX(-15px) rotate(-12deg);
+ }
+
+ 50% {
+ transform: translateX(10px) rotate(12deg);
+ }
+
+ 75% {
+ transform: translateX(-10px) translateY(-30px) rotate(0);
+ }
+ }
+
+ @keyframes scene-4-guy-move {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+
+ 30% {
+ opacity: 1;
+ }
+
+ 50% {
+ transform: translateX(0);
+ }
+
+ 55% {
+ transform: rotate(-5deg);
+ }
+
+ 70% {
+ transform: rotate(0);
+ }
+ }
+
+ @keyframes scene-4-trash-toss {
+ 0% {
+ transform: translateX(145px) translateY(30px);
+ }
+
+ 52% {
+ transform: translateX(145px) translateY(30px);
+ }
+
+ 75% {
+ transform: translateX(70px) translateY(-130px) rotate(6turn);
+ }
+
+ 100% {
+ transform: translateX(0) translateY(0) rotate(12turn);
+ }
+ }
+
+ /* Animations for scene 5 and 6 */
+ @keyframes scene5-boat {
+ 0% {
+ left: 9%;
+ }
+ 100% {
+ left: 50%;
+ }
+ }
+
+ @keyframes scene5-chemspill {
+ 0% {
+ opacity: 1;
+ scale: 1.3;
+ }
+ 60% {
+ opacity: 1;
+ scale: 1.6;
+ }
+ 100% {
+ opacity: 0;
+ scale: 1;
+ }
+ }
+
+ /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/styles/images.css b/styles/images.css
new file mode 100644
index 0000000..54e006f
--- /dev/null
+++ b/styles/images.css
@@ -0,0 +1,329 @@
+img {
+ position: absolute;
+ height: auto;
+ z-index: 1;
+}
+
+.image-container__crab {
+ width: 50px;
+ top: 87%;
+ left: 85%;
+ animation: image-container__crab-walk 5s linear 0s infinite normal none;
+ z-index: 1;
+}
+
+.image-container__waves {
+ position: absolute;
+ top: 37%;
+ left: 0;
+ opacity: 0.7;
+ animation: image-container__waves-crashing 12s linear 0s infinite normal forwards;
+}
+
+/* Scene 1 */
+.visible .image-container__fish--scene1 img {
+ position: absolute;
+ width: 140px;
+ height: auto;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 3s;
+ animation-timing-function: ease-in;
+ z-index: 2;
+}
+
+.visible .image-container__splash--scene1 img {
+ position: absolute;
+ top: 51%;
+ left: 58%;
+ width: 80px;
+ height: auto;
+ animation: image-container__splash--scene1 3s ease-out;
+}
+
+.visible .image-container__dolphin--scene1 img {
+ position: absolute;
+ top: 40%;
+ left: 40%;
+ width: 40px;
+ height: auto;
+ opacity: 0;
+ animation: image-container__dolphin--scene1 7s ease;
+}
+
+.visible .image-container__brownfish--scene1 img {
+ position: absolute;
+ bottom: 40%;
+ left: 30%;
+ width: 150px;
+ height: auto;
+ animation: image-container__brownfish--scene1 10s ease;
+}
+
+.image-container__fish--scene1-swimmer {
+ position: absolute;
+}
+
+.image-container__bluefish--scene1 img {
+ position: absolute;
+ width: 80px;
+ top: 42%;
+ left: 11%;
+}
+
+/* Scene 2 */
+.visible .image-container__ship--scene2 img {
+ position: absolute;
+ height: 80px;
+ top: 30%;
+ left: 39%;
+ z-index: 2;
+ animation: image-container__ship--scene2 5s linear;
+}
+
+.visible .image-container__chemspill--scene2 img {
+ position: absolute;
+ top: 44%;
+ left: 36%;
+ width: 150px;
+ height: auto;
+ scale: 1.5;
+ transform: rotate(180deg);
+ animation: image-container__chemspill--scene2 10s ease;
+}
+
+.visible .image-container__bigfishdead--scene2 img {
+ position: absolute;
+ top: 50%;
+ width: 120px;
+ height: auto;
+ animation: boat-bobbing 6s ease 0s infinite normal none;
+}
+
+.visible .image-container__bluefishdead--scene2 img {
+ position: absolute;
+ left: 25%;
+ top: 40%;
+ width: 150px;
+ height: auto;
+ animation: boat-bobbing 5s ease 0s infinite normal none;
+}
+
+.visible .image-container__fish1--scene2 img {
+ position: absolute;
+ top: 55%;
+ right: 24%;
+ opacity: 0;
+ width: 100px;
+ height: auto;
+ animation: image-container__fish1--scene2 10s ease;
+}
+
+.visible .image-container__fish2--scene2 img {
+ position: absolute;
+ top: 45%;
+ left: 60%;
+ height: auto;
+ width: 100px;
+ opacity: 0;
+ transform: scaleX(-1);
+ animation: image-container__fish2--scene2 3s ease;
+}
+
+/* Scene 3 & 4 */
+.image-container__image-container__boat--scene3:nth-child(1) {
+ width: 300px;
+ bottom: 56%;
+ left: 45%;
+ animation: boat-bobbing 3s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.image-container__image-container__boat--scene3:nth-child(2) {
+ width: 150px;
+ top: 34%;
+ left: 20%;
+ animation: boat-bobbing 4s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.image-container__image-container__pollution--scene34 {
+ animation: pollution-pulsing 5s ease-in-out 0s infinite normal none;
+ z-index: 0;
+}
+
+.image-container__image-container__pollution--scene34:nth-child(1) {
+ width: 150px;
+ top: 42%;
+ left: 13%;
+}
+
+.image-container__image-container__pollution--scene34:nth-child(2) {
+ width: 200px;
+ top: 44%;
+ left: 30%;
+ transform: rotate(180deg);
+ animation-duration: 4.6s;
+}
+
+.image-container__image-container__trash--scene34:nth-child(1) {
+ width: 130px;
+ top: 90%;
+ left: 87%;
+}
+
+.image-container__image-container__trash--scene34:nth-child(2) {
+ width: 40px;
+ top: 80%;
+ left: 25%;
+}
+
+.image-container__fish--image-container__scene34:nth-child(1) {
+ width: 130px;
+ height: auto;
+ top: 49%;
+ left: 70%;
+ animation: scene-3-fish-swim 3s ease-in-out 0s infinite normal none;
+}
+
+.image-container__fish--image-container__scene34:nth-child(2) {
+ width: 110px;
+ top: 50%;
+ left: 23%;
+ animation: boat-bobbing 6s ease 0s infinite normal none;
+}
+
+.image-container__fish--image-container__scene34:nth-child(3) {
+ width: 90px;
+ top: 80%;
+ left: 45%;
+ animation: scene-3-fish-flail 2s ease-in-out 0s infinite normal none;
+}
+
+/* Scene 4 */
+.image-container__boat--scene4 {
+ width: 150px;
+ top: 34%;
+ left: 85%;
+ animation: boat-bobbing 4s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.visible .scene4-guy {
+ width: 180px;
+ top: 60%;
+ left: 12%;
+ animation: scene-4-guy-move 6s ease-in-out 0s 1 normal none;
+}
+
+.visible .scene4 .image-container__image-container__trash--scene34:nth-child(2) {
+ top: 70%;
+ left: 14%;
+ animation: scene-4-trash-toss 6s linear 0s 1 normal none;
+}
+
+/* Scenes 5 and 6 */
+.scene5-bag img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 97%;
+ left: 57%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene5-boat img {
+ position: absolute;
+ width: 300px;
+ height: auto;
+ top: 40%;
+ left: 50%;
+ z-index: 2;
+ transform: translate(-50%, -50%);
+ animation: scene5-boat 6s linear;
+}
+
+.scene5-cup img {
+ position: absolute;
+ width: 40px;
+ height: auto;
+ top: 95%;
+ left: 35%;
+ transform: translate(-50%, -50%);
+}
+
+.scene5-fish img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 60%;
+ left: 33%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene5-green-puddle img {
+ position: absolute;
+ width: 150px;
+ height: auto;
+ top: 55%;
+ left: 57%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ animation: scene5-chemspill 12s ease;
+}
+
+.scene5-man img {
+ position: absolute;
+ width: 120px;
+ height: auto;
+ top: 80%;
+ left: 37%;
+ transform: translate(-50%, -50%);
+}
+
+.scene5-woman img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 87%;
+ left: 63%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene6-blue-fish img {
+ position: absolute;
+ width: 70px;
+ height: auto;
+ top: 55%;
+ left: 60%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+.visible .scene6-image-container__crab img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 80%;
+ left: 55%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+.visible .scene6-orange-fish img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 70%;
+ left: 40%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}/*# sourceMappingURL=images.css.map */
\ No newline at end of file
diff --git a/styles/images.css.map b/styles/images.css.map
new file mode 100644
index 0000000..874f74d
--- /dev/null
+++ b/styles/images.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["images.scss","images.css"],"names":[],"mappings":"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","file":"images.css"}
\ No newline at end of file
diff --git a/styles/images.scss b/styles/images.scss
new file mode 100644
index 0000000..e7014aa
--- /dev/null
+++ b/styles/images.scss
@@ -0,0 +1,330 @@
+img {
+ position: absolute;
+ height: auto;
+ z-index: 1;
+}
+
+.image-container__crab {
+ width: 50px;
+ top: 87%;
+ left: 85%;
+ animation: image-container__crab-walk 5s linear 0s infinite normal none;
+ z-index: 1;
+}
+
+.image-container__waves {
+ position: absolute;
+ top: 37%;
+ left: 0;
+ opacity: 0.7;
+ animation: image-container__waves-crashing 12s linear 0s infinite normal forwards;
+}
+
+/* Scene 1 */
+.visible .image-container__fish--scene1 img {
+ position: absolute;
+ width: 140px;
+ height: auto;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 3s;
+ animation-timing-function: ease-in;
+ z-index: 2;
+}
+
+.visible .image-container__splash--scene1 img {
+ position: absolute;
+ top: 51%;
+ left: 58%;
+ width: 80px;
+ height: auto;
+ animation: image-container__splash--scene1 3s ease-out;
+}
+
+.visible .image-container__dolphin--scene1 img {
+ position: absolute;
+ top: 40%;
+ left: 40%;
+ width: 40px;
+ height: auto;
+ opacity: 0;
+ animation: image-container__dolphin--scene1 7s ease;
+}
+
+.visible .image-container__brownfish--scene1 img {
+ position: absolute;
+ bottom: 40%;
+ left: 30%;
+ width: 150px;
+ height: auto;
+ animation: image-container__brownfish--scene1 10s ease;
+}
+
+.image-container__fish--scene1-swimmer {
+ position: absolute;
+}
+
+.image-container__bluefish--scene1 img {
+ position: absolute;
+ width: 80px;
+ top: 42%;
+ left: 11%;
+}
+
+/* Scene 2 */
+.visible .image-container__ship--scene2 img {
+ position: absolute;
+ height: 80px;
+ top: 30%;
+ left: 39%;
+ z-index: 2;
+ animation: image-container__ship--scene2 5s linear;
+}
+
+
+.visible .image-container__chemspill--scene2 img {
+ position: absolute;
+ top: 44%;
+ left: 36%;
+ width: 150px;
+ height: auto;
+ scale: 1.5;
+ transform: rotate(180deg);
+ animation: image-container__chemspill--scene2 10s ease;
+}
+
+.visible .image-container__bigfishdead--scene2 img {
+ position: absolute;
+ top: 50%;
+ width: 120px;
+ height: auto;
+ animation: boat-bobbing 6s ease 0s infinite normal none;
+}
+
+.visible .image-container__bluefishdead--scene2 img {
+ position: absolute;
+ left: 25%;
+ top: 40%;
+ width: 150px;
+ height: auto;
+ animation: boat-bobbing 5s ease 0s infinite normal none;
+}
+
+.visible .image-container__fish1--scene2 img {
+ position: absolute;
+ top: 55%;
+ right: 24%;
+ opacity: 0;
+ width: 100px;
+ height: auto;
+ animation: image-container__fish1--scene2 10s ease;
+}
+
+.visible .image-container__fish2--scene2 img {
+ position: absolute;
+ top: 45%;
+ left: 60%;
+ height: auto;
+ width: 100px;
+ opacity: 0;
+ transform: scaleX(-1);
+ animation: image-container__fish2--scene2 3s ease;
+}
+
+/* Scene 3 & 4 */
+.image-container__image-container__boat--scene3:nth-child(1) {
+ width: 300px;
+ bottom: 56%;
+ left: 45%;
+ animation: boat-bobbing 3s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.image-container__image-container__boat--scene3:nth-child(2) {
+ width: 150px;
+ top: 34%;
+ left: 20%;
+ animation: boat-bobbing 4s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.image-container__image-container__pollution--scene34 {
+ animation: pollution-pulsing 5s ease-in-out 0s infinite normal none;
+ z-index: 0;
+}
+
+.image-container__image-container__pollution--scene34:nth-child(1) {
+ width: 150px;
+ top: 42%;
+ left: 13%;
+}
+
+.image-container__image-container__pollution--scene34:nth-child(2) {
+ width: 200px;
+ top: 44%;
+ left: 30%;
+ transform: rotate(180deg);
+ animation-duration: 4.6s;
+}
+
+.image-container__image-container__trash--scene34:nth-child(1) {
+ width: 130px;
+ top: 90%;
+ left: 87%;
+}
+
+.image-container__image-container__trash--scene34:nth-child(2) {
+ width: 40px;
+ top: 80%;
+ left: 25%;
+}
+
+.image-container__fish--image-container__scene34:nth-child(1) {
+ width: 130px;
+ height: auto;
+ top: 49%;
+ left: 70%;
+ animation: scene-3-fish-swim 3s ease-in-out 0s infinite normal none;
+}
+
+.image-container__fish--image-container__scene34:nth-child(2) {
+ width: 110px;
+ top: 50%;
+ left: 23%;
+ animation: boat-bobbing 6s ease 0s infinite normal none;
+}
+
+.image-container__fish--image-container__scene34:nth-child(3) {
+ width: 90px;
+ top: 80%;
+ left: 45%;
+ animation: scene-3-fish-flail 2s ease-in-out 0s infinite normal none;
+}
+
+/* Scene 4 */
+.image-container__boat--scene4 {
+ width: 150px;
+ top: 34%;
+ left: 85%;
+ animation: boat-bobbing 4s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.visible .scene4-guy {
+ width: 180px;
+ top: 60%;
+ left: 12%;
+ animation: scene-4-guy-move 6s ease-in-out 0s 1 normal none;
+}
+
+.visible .scene4 .image-container__image-container__trash--scene34:nth-child(2) {
+ top: 70%;
+ left: 14%;
+ animation: scene-4-trash-toss 6s linear 0s 1 normal none;
+}
+
+/* Scenes 5 and 6 */
+.scene5-bag img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 97%;
+ left: 57%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene5-boat img {
+ position: absolute;
+ width: 300px;
+ height: auto;
+ top: 40%;
+ left: 50%;
+ z-index: 2;
+ transform: translate(-50%, -50%);
+ animation: scene5-boat 6s linear;
+}
+
+.scene5-cup img {
+ position: absolute;
+ width: 40px;
+ height: auto;
+ top: 95%;
+ left: 35%;
+ transform: translate(-50%, -50%);
+}
+
+.scene5-fish img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 60%;
+ left: 33%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene5-green-puddle img {
+ position: absolute;
+ width: 150px;
+ height: auto;
+ top: 55%;
+ left: 57%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ animation: scene5-chemspill 12s ease;
+}
+
+.scene5-man img {
+ position: absolute;
+ width: 120px;
+ height: auto;
+ top: 80%;
+ left: 37%;
+ transform: translate(-50%, -50%);
+}
+
+.scene5-woman img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 87%;
+ left: 63%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene6-blue-fish img {
+ position: absolute;
+ width: 70px;
+ height: auto;
+ top: 55%;
+ left: 60%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+.visible .scene6-image-container__crab img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 80%;
+ left: 55%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+.visible .scene6-orange-fish img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 70%;
+ left: 40%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..a7e31a6
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,709 @@
+/* Global animations */
+@keyframes image-container__waves-crashing {
+ 0% {
+ opacity: 0.4;
+ left: -60%;
+ }
+ 50% {
+ opacity: 0.7;
+ left: 30%;
+ transform: rotate(-4.5deg);
+ }
+ 100% {
+ opacity: 0.4;
+ left: 120%;
+ }
+}
+@keyframes boat-bobbing {
+ 0% {
+ animation-timing-function: ease-in;
+ transform: translateY(0);
+ }
+ 45% {
+ animation-timing-function: ease-out;
+ transform: translateY(8px);
+ }
+ 55% {
+ animation-timing-function: ease-out;
+ transform: translateY(8px);
+ }
+ 100% {
+ animation-timing-function: ease-out;
+ transform: translateY(0);
+ }
+}
+@keyframes pollution-pulsing {
+ 0% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+ 50% {
+ transform: scale(1.2);
+ opacity: 0.9;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+}
+@keyframes image-container__crab-walk {
+ 0%, 100% {
+ transform: translateX(0);
+ transform-origin: 50% 50%;
+ }
+ 15% {
+ transform: translateX(-30px) translateY(20px) rotate(-6deg);
+ }
+ 30% {
+ transform: translateX(-50px) rotate(6deg);
+ }
+ 45% {
+ transform: translateX(0px) rotate(-6deg);
+ }
+ 60% {
+ transform: translateX(30px) rotate(6deg);
+ }
+ 75% {
+ transform: translateX(50px) rotate(-6deg);
+ }
+ 90% {
+ transform: translateX(0) translateY(-10px) rotate(4deg);
+ }
+}
+/* nimations for scene 1 and 2 */
+@keyframes fish-swim {
+ 0% {
+ opacity: 0.3;
+ top: 60%;
+ left: 60%;
+ }
+ 30% {
+ opacity: 0.5;
+ top: 43%;
+ left: 52%;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes image-container__splash--scene1 {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes image-container__dolphin--scene1 {
+ 0% {
+ top: 40%;
+ }
+ 30% {
+ transform: rotate(-20deg);
+ }
+ 40% {
+ top: 33%;
+ left: 39%;
+ transform: rotate(-40deg);
+ opacity: 1;
+ }
+ 50% {
+ top: 33%;
+ transform: rotate(-50deg);
+ left: 38.8%;
+ opacity: 1;
+ }
+ 100% {
+ top: 44%;
+ transform: rotate(-60deg);
+ left: 38.8%;
+ opacity: 0;
+ }
+}
+@keyframes image-container__brownfish--scene1 {
+ 0% {
+ left: 20%;
+ }
+ 50% {
+ left: 25%;
+ }
+ 100% {
+ left: 30%;
+ }
+}
+@keyframes image-container__ship--scene2 {
+ 0% {
+ left: 9%;
+ }
+ 100% {
+ left: 39%;
+ }
+}
+@keyframes image-container__chemspill--scene2 {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 80% {
+ opacity: 1;
+ scale: 1.5;
+ }
+}
+@keyframes image-container__fish1--scene2 {
+ 0% {
+ right: 30%;
+ opacity: 1;
+ }
+ 50% {
+ right: 25%;
+ }
+ 100% {
+ right: 24%;
+ opacity: 0;
+ }
+}
+@keyframes image-container__fish2--scene2 {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+/* Animations for scene 3 and 4 */
+@keyframes scene-3-fish-swim {
+ 0% {
+ transform: translate(-40px, 2px) rotateY(180deg);
+ }
+ 50% {
+ transform: translate(40px, -2px) rotatey(180deg);
+ }
+ 51% {
+ transform: rotatey(0);
+ }
+ 100% {
+ transform: translate(-40px, 2px);
+ }
+}
+@keyframes scene-3-fish-flail {
+ 0%, 100% {
+ transform: translateX(15px) rotate(12deg);
+ }
+ 25% {
+ transform: translateX(-15px) rotate(-12deg);
+ }
+ 50% {
+ transform: translateX(10px) rotate(12deg);
+ }
+ 75% {
+ transform: translateX(-10px) translateY(-30px) rotate(0);
+ }
+}
+@keyframes scene-4-guy-move {
+ 0% {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+ 30% {
+ opacity: 1;
+ }
+ 50% {
+ transform: translateX(0);
+ }
+ 55% {
+ transform: rotate(-5deg);
+ }
+ 70% {
+ transform: rotate(0);
+ }
+}
+@keyframes scene-4-trash-toss {
+ 0% {
+ transform: translateX(145px) translateY(30px);
+ }
+ 52% {
+ transform: translateX(145px) translateY(30px);
+ }
+ 75% {
+ transform: translateX(70px) translateY(-130px) rotate(6turn);
+ }
+ 100% {
+ transform: translateX(0) translateY(0) rotate(12turn);
+ }
+}
+/* Animations for scene 5 and 6 */
+@keyframes scene5-boat {
+ 0% {
+ left: 9%;
+ }
+ 100% {
+ left: 50%;
+ }
+}
+@keyframes scene5-chemspill {
+ 0% {
+ opacity: 1;
+ scale: 1.3;
+ }
+ 60% {
+ opacity: 1;
+ scale: 1.6;
+ }
+ 100% {
+ opacity: 0;
+ scale: 1;
+ }
+}
+
+/* Global */
+body {
+ margin: 0 auto;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+ font-size: 20px;
+ line-height: 1.5;
+}
+
+/* main__goal section */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+section {
+ height: 100vh;
+ position: relative;
+ margin-bottom: 100px;
+}
+
+.section__image-container {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ text-align: center;
+ overflow: hidden;
+ background: rgb(138, 186, 200);
+ background: linear-gradient(180deg, rgb(138, 186, 200) 0%, rgb(138, 186, 200) 37%, rgb(50, 189, 169) 37%, rgb(111, 195, 155) 62%, rgb(226, 207, 128) 74%);
+}
+
+p {
+ position: absolute;
+ top: 4%;
+ left: 80%;
+ width: 200px;
+ opacity: 0;
+ scale: 0.95;
+ color: white;
+ text-shadow: 2px 2px 1px black;
+ z-index: 3;
+ transition: opacity 2s, scale 2s, top 2s, background-color 2s ease-in-out;
+}
+
+.visible p {
+ opacity: 1;
+ scale: 1;
+ top: 5%;
+ background-color: rgba(30, 30, 30, 0.4);
+ border-radius: 8px;
+}
+
+h1 {
+ margin-top: 10em;
+ text-shadow: 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white;
+ scale: 0.95;
+ opacity: 0;
+ transition: opacity 2s, scale 2s, margin-top 2s ease-in-out;
+}
+
+.visible h1 {
+ opacity: 1;
+ scale: 1;
+ margin-top: 5em;
+}
+
+img {
+ position: absolute;
+ height: auto;
+ z-index: 1;
+}
+
+.image-container__crab {
+ width: 50px;
+ top: 87%;
+ left: 85%;
+ animation: image-container__crab-walk 5s linear 0s infinite normal none;
+ z-index: 1;
+}
+
+.image-container__waves {
+ position: absolute;
+ top: 37%;
+ left: 0;
+ opacity: 0.7;
+ animation: image-container__waves-crashing 12s linear 0s infinite normal forwards;
+}
+
+/* Scene 1 */
+.visible .image-container__fish--scene1 img {
+ position: absolute;
+ width: 140px;
+ height: auto;
+ top: 40%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 3s;
+ animation-timing-function: ease-in;
+ z-index: 2;
+}
+
+.visible .image-container__splash--scene1 img {
+ position: absolute;
+ top: 51%;
+ left: 58%;
+ width: 80px;
+ height: auto;
+ animation: image-container__splash--scene1 3s ease-out;
+}
+
+.visible .image-container__dolphin--scene1 img {
+ position: absolute;
+ top: 40%;
+ left: 40%;
+ width: 40px;
+ height: auto;
+ opacity: 0;
+ animation: image-container__dolphin--scene1 7s ease;
+}
+
+.visible .image-container__brownfish--scene1 img {
+ position: absolute;
+ bottom: 40%;
+ left: 30%;
+ width: 150px;
+ height: auto;
+ animation: image-container__brownfish--scene1 10s ease;
+}
+
+.image-container__fish--scene1-swimmer {
+ position: absolute;
+}
+
+.image-container__bluefish--scene1 img {
+ position: absolute;
+ width: 80px;
+ top: 42%;
+ left: 11%;
+}
+
+/* Scene 2 */
+.visible .image-container__ship--scene2 img {
+ position: absolute;
+ height: 80px;
+ top: 30%;
+ left: 39%;
+ z-index: 2;
+ animation: image-container__ship--scene2 5s linear;
+}
+
+.visible .image-container__chemspill--scene2 img {
+ position: absolute;
+ top: 44%;
+ left: 36%;
+ width: 150px;
+ height: auto;
+ scale: 1.5;
+ transform: rotate(180deg);
+ animation: image-container__chemspill--scene2 10s ease;
+}
+
+.visible .image-container__bigfishdead--scene2 img {
+ position: absolute;
+ top: 50%;
+ width: 120px;
+ height: auto;
+ animation: boat-bobbing 6s ease 0s infinite normal none;
+}
+
+.visible .image-container__bluefishdead--scene2 img {
+ position: absolute;
+ left: 25%;
+ top: 40%;
+ width: 150px;
+ height: auto;
+ animation: boat-bobbing 5s ease 0s infinite normal none;
+}
+
+.visible .image-container__fish1--scene2 img {
+ position: absolute;
+ top: 55%;
+ right: 24%;
+ opacity: 0;
+ width: 100px;
+ height: auto;
+ animation: image-container__fish1--scene2 10s ease;
+}
+
+.visible .image-container__fish2--scene2 img {
+ position: absolute;
+ top: 45%;
+ left: 60%;
+ height: auto;
+ width: 100px;
+ opacity: 0;
+ transform: scaleX(-1);
+ animation: image-container__fish2--scene2 3s ease;
+}
+
+/* Scene 3 & 4 */
+.image-container__image-container__boat--scene3:nth-child(1) {
+ width: 300px;
+ bottom: 56%;
+ left: 45%;
+ animation: boat-bobbing 3s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.image-container__image-container__boat--scene3:nth-child(2) {
+ width: 150px;
+ top: 34%;
+ left: 20%;
+ animation: boat-bobbing 4s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.image-container__image-container__pollution--scene34 {
+ animation: pollution-pulsing 5s ease-in-out 0s infinite normal none;
+ z-index: 0;
+}
+
+.image-container__image-container__pollution--scene34:nth-child(1) {
+ width: 150px;
+ top: 42%;
+ left: 13%;
+}
+
+.image-container__image-container__pollution--scene34:nth-child(2) {
+ width: 200px;
+ top: 44%;
+ left: 30%;
+ transform: rotate(180deg);
+ animation-duration: 4.6s;
+}
+
+.image-container__image-container__trash--scene34:nth-child(1) {
+ width: 130px;
+ top: 90%;
+ left: 87%;
+}
+
+.image-container__image-container__trash--scene34:nth-child(2) {
+ width: 40px;
+ top: 80%;
+ left: 25%;
+}
+
+.image-container__fish--image-container__scene34:nth-child(1) {
+ width: 130px;
+ height: auto;
+ top: 49%;
+ left: 70%;
+ animation: scene-3-fish-swim 3s ease-in-out 0s infinite normal none;
+}
+
+.image-container__fish--image-container__scene34:nth-child(2) {
+ width: 110px;
+ top: 50%;
+ left: 23%;
+ animation: boat-bobbing 6s ease 0s infinite normal none;
+}
+
+.image-container__fish--image-container__scene34:nth-child(3) {
+ width: 90px;
+ top: 80%;
+ left: 45%;
+ animation: scene-3-fish-flail 2s ease-in-out 0s infinite normal none;
+}
+
+/* Scene 4 */
+.image-container__boat--scene4 {
+ width: 150px;
+ top: 34%;
+ left: 85%;
+ animation: boat-bobbing 4s ease 0s infinite normal none;
+ z-index: 2;
+}
+
+.visible .scene4-guy {
+ width: 180px;
+ top: 60%;
+ left: 12%;
+ animation: scene-4-guy-move 6s ease-in-out 0s 1 normal none;
+}
+
+.visible .scene4 .image-container__image-container__trash--scene34:nth-child(2) {
+ top: 70%;
+ left: 14%;
+ animation: scene-4-trash-toss 6s linear 0s 1 normal none;
+}
+
+/* Scenes 5 and 6 */
+.scene5-bag img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 97%;
+ left: 57%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene5-boat img {
+ position: absolute;
+ width: 300px;
+ height: auto;
+ top: 40%;
+ left: 50%;
+ z-index: 2;
+ transform: translate(-50%, -50%);
+ animation: scene5-boat 6s linear;
+}
+
+.scene5-cup img {
+ position: absolute;
+ width: 40px;
+ height: auto;
+ top: 95%;
+ left: 35%;
+ transform: translate(-50%, -50%);
+}
+
+.scene5-fish img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 60%;
+ left: 33%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene5-green-puddle img {
+ position: absolute;
+ width: 150px;
+ height: auto;
+ top: 55%;
+ left: 57%;
+ opacity: 0;
+ transform: translate(-50%, -50%);
+ animation: scene5-chemspill 12s ease;
+}
+
+.scene5-man img {
+ position: absolute;
+ width: 120px;
+ height: auto;
+ top: 80%;
+ left: 37%;
+ transform: translate(-50%, -50%);
+}
+
+.scene5-woman img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 87%;
+ left: 63%;
+ transform: translate(-50%, -50%);
+}
+
+.visible .scene6-blue-fish img {
+ position: absolute;
+ width: 70px;
+ height: auto;
+ top: 55%;
+ left: 60%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+.visible .scene6-image-container__crab img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 80%;
+ left: 55%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+.visible .scene6-orange-fish img {
+ position: absolute;
+ width: 100px;
+ height: auto;
+ top: 70%;
+ left: 40%;
+ transform: translate(-50%, -50%);
+ animation-name: fish-swim;
+ animation-duration: 10s;
+ animation-timing-function: ease-in;
+}
+
+/*media quieries*/
+/*for screen orientation */
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+ body {
+ overflow: hidden;
+ }
+ #flip-phone-message {
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ background-color: #000000;
+ color: #FFFFFF;
+ text-align: center;
+ font-size: 16px;
+ z-index: 9999;
+ }
+}
+/* Define styles for landscape mode */
+@media only screen and (orientation: landscape) {
+ body {
+ overflow: auto;
+ }
+ #flip-phone-message {
+ display: none !important;
+ }
+}
+/*For reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation: none !important;
+ transition: none !important;
+ }
+}
+/*for color scheme */
+/* Dark mode style */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: black;
+ }
+ .section__image-container {
+ background: rgb(59, 42, 121);
+ background: linear-gradient(180deg, rgb(59, 42, 121) 0%, rgb(59, 42, 121) 37%, rgb(30, 133, 149) 37%, rgb(30, 133, 149) 62%, rgb(173, 157, 88) 74%);
+ }
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/styles/index.css.map b/styles/index.css.map
new file mode 100644
index 0000000..58942c3
--- /dev/null
+++ b/styles/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["animations.scss","index.css","layout.scss","images.scss","media-queries.scss"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
new file mode 100644
index 0000000..e02881e
--- /dev/null
+++ b/styles/index.scss
@@ -0,0 +1,5 @@
+@import "animations";
+@import "layout";
+@import "variables";
+@import "images";
+@import "media-queries";
\ No newline at end of file
diff --git a/styles/layout.css b/styles/layout.css
new file mode 100644
index 0000000..7f0b7ec
--- /dev/null
+++ b/styles/layout.css
@@ -0,0 +1,65 @@
+/* Global */
+body {
+ margin: 0 auto;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+ font-size: 20px;
+ line-height: 1.5;
+}
+
+/* main__goal section */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+section {
+ height: 100vh;
+ position: relative;
+ margin-bottom: 100px;
+}
+
+.section__image-container {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ text-align: center;
+ overflow: hidden;
+ background: rgb(138, 186, 200);
+ background: linear-gradient(180deg, rgb(138, 186, 200) 0%, rgb(138, 186, 200) 37%, rgb(50, 189, 169) 37%, rgb(111, 195, 155) 62%, rgb(226, 207, 128) 74%);
+}
+
+p {
+ position: absolute;
+ top: 4%;
+ left: 80%;
+ width: 200px;
+ opacity: 0;
+ scale: 0.95;
+ color: white;
+ text-shadow: 2px 2px 1px black;
+ z-index: 3;
+ transition: opacity 2s, scale 2s, top 2s, background-color 2s ease-in-out;
+}
+
+.visible p {
+ opacity: 1;
+ scale: 1;
+ top: 5%;
+ background-color: rgba(30, 30, 30, 0.4);
+ border-radius: 8px;
+}
+
+h1 {
+ margin-top: 10em;
+ text-shadow: 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white;
+ scale: 0.95;
+ opacity: 0;
+ transition: opacity 2s, scale 2s, margin-top 2s ease-in-out;
+}
+
+.visible h1 {
+ opacity: 1;
+ scale: 1;
+ margin-top: 5em;
+}/*# sourceMappingURL=layout.css.map */
\ No newline at end of file
diff --git a/styles/layout.css.map b/styles/layout.css.map
new file mode 100644
index 0000000..7548b4e
--- /dev/null
+++ b/styles/layout.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["layout.scss","layout.css"],"names":[],"mappings":"AAAA,WAAA;AACA;EACI,cAAA;EACA,6EAAA;EACA,eAAA;EACA,gBAAA;ACCJ;;ADEA,uBAAA;AACA;EACI,sBAAA;EACA,SAAA;EACA,UAAA;ACCJ;;ADGA;EACI,aAAA;EACA,kBAAA;EACA,oBAAA;ACAJ;;ADGA;EACI,kBAAA;EACA,aAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,8BAAA;EACA,yJAAA;ACAJ;;ADGA;EACI,kBAAA;EACA,OAAA;EACA,SAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,8BAAA;EACA,UAAA;EACA,yEAAA;ACAJ;;ADGA;EACI,UAAA;EACA,QAAA;EACA,OAAA;EACA,uCAAA;EACA,kBAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,2EAAA;EACA,WAAA;EACA,UAAA;EACA,2DAAA;ACAJ;;ADGA;EACI,UAAA;EACA,QAAA;EACA,eAAA;ACAJ","file":"layout.css"}
\ No newline at end of file
diff --git a/styles/layout.scss b/styles/layout.scss
new file mode 100644
index 0000000..cd17e46
--- /dev/null
+++ b/styles/layout.scss
@@ -0,0 +1,66 @@
+/* Global */
+body {
+ margin: 0 auto;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ font-size: 20px;
+ line-height: 1.5;
+}
+
+/* main__goal section */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+
+section {
+ height: 100vh;
+ position: relative;
+ margin-bottom: 100px;
+}
+
+.section__image-container {
+ position: relative;
+ height: 100vh;
+ width: 100%;
+ text-align: center;
+ overflow: hidden;
+ background: rgb(138, 186, 200);
+ background: linear-gradient(180deg, rgba(138, 186, 200, 1) 0%, rgba(138, 186, 200, 1) 37%, rgba(50, 189, 169, 1) 37%, rgba(111, 195, 155, 1) 62%, rgba(226, 207, 128, 1) 74%);
+}
+
+p {
+ position: absolute;
+ top: 4%;
+ left: 80%;
+ width: 200px;
+ opacity: 0;
+ scale: 0.95;
+ color: white;
+ text-shadow: 2px 2px 1px black;
+ z-index: 3;
+ transition: opacity 2s, scale 2s, top 2s, background-color 2s ease-in-out;
+}
+
+.visible p {
+ opacity: 1;
+ scale: 1;
+ top: 5%;
+ background-color: rgba(30, 30, 30, 0.4);
+ border-radius: 8px;
+}
+
+h1 {
+ margin-top: 10em;
+ text-shadow: 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white;
+ scale: 0.95;
+ opacity: 0;
+ transition: opacity 2s, scale 2s, margin-top 2s ease-in-out;
+}
+
+.visible h1 {
+ opacity: 1;
+ scale: 1;
+ margin-top: 5em;
+}
\ No newline at end of file
diff --git a/styles/media-queries.css b/styles/media-queries.css
new file mode 100644
index 0000000..12f44bf
--- /dev/null
+++ b/styles/media-queries.css
@@ -0,0 +1,48 @@
+/*media quieries*/
+/*for screen orientation */
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+ body {
+ overflow: hidden;
+ }
+ #flip-phone-message {
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ background-color: #000000;
+ color: #FFFFFF;
+ text-align: center;
+ font-size: 16px;
+ z-index: 9999;
+ }
+}
+/* Define styles for landscape mode */
+@media only screen and (orientation: landscape) {
+ body {
+ overflow: auto;
+ }
+ #flip-phone-message {
+ display: none !important;
+ }
+}
+/*For reduced motion */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation: none !important;
+ transition: none !important;
+ }
+}
+/*for color scheme */
+/* Dark mode style */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: black;
+ }
+ .section__image-container {
+ background: rgb(59, 42, 121);
+ background: linear-gradient(180deg, rgb(59, 42, 121) 0%, rgb(59, 42, 121) 37%, rgb(30, 133, 149) 37%, rgb(30, 133, 149) 62%, rgb(173, 157, 88) 74%);
+ }
+}/*# sourceMappingURL=media-queries.css.map */
\ No newline at end of file
diff --git a/styles/media-queries.css.map b/styles/media-queries.css.map
new file mode 100644
index 0000000..e0a42e7
--- /dev/null
+++ b/styles/media-queries.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["media-queries.scss","media-queries.css"],"names":[],"mappings":"AACA,iBAAA;AAGA,0BAAA;AACA;EACI;IACE,gBAAA;ECFJ;EDIE;IACE,cAAA;IACA,eAAA;IACA,MAAA;IACA,OAAA;IACA,WAAA;IACA,YAAA;IACA,aAAA;IACA,yBAAA;IACA,cAAA;IACA,kBAAA;IACA,eAAA;IACA,aAAA;ECFJ;AACF;ADKE,qCAAA;AACA;EACE;IACE,cAAA;ECHJ;EDKE;IACE,wBAAA;ECHJ;AACF;ADQA,sBAAA;AAEA;EACE;IACE,0BAAA;IACA,2BAAA;ECPF;AACF;ADUA,oBAAA;AAEA,oBAAA;AACA;EACE;IACE,uBAAA;ECTF;EDaA;IACE,4BAAA;IACA,mJAAA;ECXF;AACF","file":"media-queries.css"}
\ No newline at end of file
diff --git a/styles/media-queries.scss b/styles/media-queries.scss
new file mode 100644
index 0000000..75e4c51
--- /dev/null
+++ b/styles/media-queries.scss
@@ -0,0 +1,61 @@
+
+/*media quieries*/
+
+
+/*for screen orientation */
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+ body {
+ overflow: hidden;
+ }
+ #flip-phone-message {
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ background-color: #000000;
+ color: #FFFFFF;
+ text-align: center;
+ font-size: 16px;
+ z-index: 9999;
+ }
+ }
+
+ /* Define styles for landscape mode */
+ @media only screen and (orientation: landscape) {
+ body {
+ overflow: auto;
+ }
+ #flip-phone-message {
+ display: none !important;
+ }
+ }
+
+
+
+/*For reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation: none !important;
+ transition: none !important;
+ }
+}
+
+/*for color scheme */
+
+/* Dark mode style */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: black;
+
+ }
+
+ .section__image-container {
+ background: rgb(59,42,121);
+ background: linear-gradient(180deg, rgba(59,42,121,1) 0%, rgba(59,42,121,1) 37%, rgba(30,133,149,1) 37%, rgba(30,133,149,1) 62%, rgba(173,157,88,1) 74%);
+ }
+}
+
diff --git a/styles/variables.css b/styles/variables.css
new file mode 100644
index 0000000..1451a15
--- /dev/null
+++ b/styles/variables.css
@@ -0,0 +1 @@
+/*# sourceMappingURL=variables.css.map */
\ No newline at end of file
diff --git a/styles/variables.css.map b/styles/variables.css.map
new file mode 100644
index 0000000..639caba
--- /dev/null
+++ b/styles/variables.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"variables.css"}
\ No newline at end of file
diff --git a/styles/variables.scss b/styles/variables.scss
new file mode 100644
index 0000000..6fdc504
--- /dev/null
+++ b/styles/variables.scss
@@ -0,0 +1,3 @@
+$un-blue: #04ADD9;
+$darker-light-blue: #328296;
+$dark-blue:rgba(28, 79, 92, 0.993)
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Noticing the poor state of the ocean, some people start working to combat the pollution. +
+ + + +
+
+
+ 
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+ + This, in turn inspires others to help. +
+
+
+
+
+
+
+
+
+
+ + 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. +
+