Added a quick intro to the website

AdvancedCSS2023 · github-classroom · Apr 24, 2023 · Apr 24, 2023 · Apr 24, 2023 · Apr 24, 2023
commit 72d0b95c1e60dd7d95d6a60790e926d71c57cf14
diff --git a/index.html b/index.html
@@ -5,33 +5,63 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UN goal 15</title>
-    <link
-      rel="stylesheet"
-      href="/assignment-3--scrollytelling-group-8/styles/style.css"
-    />
+    <link rel="stylesheet" href="./styles/style.css" />
+    <script src="script.js" async></script>
   </head>
   <body>
     <div class="scene">
       <h1>UN goal 15 - Life on land</h1>
       <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos
-        aperiam vitae ut nostrum quis exercitationem ex similique, officia,
-        deleniti beatae? Eos dolor sapiente quo nemo labore enim dolores
-        consequuntur.
+        UN Goal 15 aims to protect, restore and promote the sustainable use of
+        terrestrial ecosystems, forests, and biodiversity. With the world's
+        population projected to reach nearly 10 billion by 2050, it is crucial
+        to ensure that we manage our planet's natural resources in a way that
+        maintains their productivity, sustains life, and supports economic and
+        social development.
+      </p>
+      <p>
+        This goal recognizes that the Earth's ecosystems are under significant
+        pressure from human activities such as deforestation, climate change,
+        and overexploitation of resources. If left unchecked, these activities
+        could lead to irreversible damage to our planet's natural systems and
+        threaten the survival of countless species.
+      </p>
+      <p>
+        By implementing sustainable practices and protecting our natural
+        resources, we can achieve Goal 15 and ensure that life on land is
+        protected for future generations. This includes promoting responsible
+        use of forests, halting land degradation and desertification, and
+        conserving and restoring biodiversity. Achieving Goal 15 is not only
+        important for preserving the beauty and diversity of our planet's
+        ecosystems, but also for supporting sustainable development and
+        mitigating the effects of climate change.
       </p>
       <div class="intro-forest">
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
-        <img class="tree" src="./images/tree.svg" alt="A picture of a autumn tree" />
+        <img
+          class="tree"
+          src="./images/tree.svg"
+          alt="A picture of a autumn tree"
+        />
+        <img
+          class="tree"
+          src="./images/tree.svg"
+          alt="A picture of a autumn tree"
+        />
+        <img
+          class="tree"
+          src="./images/tree.svg"
+          alt="A picture of a autumn tree"
+        />
+        <img
+          class="tree"
+          src="./images/tree.svg"
+          alt="A picture of a autumn tree"
+        />
+        <img
+          class="tree"
+          src="./images/tree.svg"
+          alt="A picture of a autumn tree"
+        />
       </div>
     </div>
     <!-- Scene 1 -->

diff --git a/styles/_forest.scss b/styles/_forest.scss
@@ -1,58 +1,6 @@
 .tree {
   width: 200px;
   height: 200px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.tree:nth-of-type(1) {
-  right: -100px;
-}
-
-.tree:nth-of-type(2) {
-  position: relative;
-  right: -50px;
-}
-
-.tree:nth-of-type(3) {
-  right: 0px;
-}
-
-.tree:nth-of-type(4) {
-  right: 50px;
-}
-
-.tree:nth-of-type(5) {
-  right: 100px;
-}
-
-.tree:nth-of-type(6) {
-  right: 150px;
-}
-
-.tree:nth-of-type(7) {
-  right: -100px;
-}
-
-.tree:nth-of-type(8) {
-  right: -50px;
-}
-
-.tree:nth-of-type(9) {
-  right: 0px;
-}
-
-.tree:nth-of-type(10) {
-  right: 50px;
-}
-
-.tree:nth-of-type(11) {
-  right: 100px;
-}
-
-.tree:nth-of-type(12) {
-  right: 150px;
 }
 
 .tree:hover {

diff --git a/styles/style.css b/styles/style.css
@@ -21,58 +21,6 @@
 .tree {
   width: 200px;
   height: 200px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.tree:nth-of-type(1) {
-  right: -100px;
-}
-
-.tree:nth-of-type(2) {
-  position: relative;
-  right: -50px;
-}
-
-.tree:nth-of-type(3) {
-  right: 0px;
-}
-
-.tree:nth-of-type(4) {
-  right: 50px;
-}
-
-.tree:nth-of-type(5) {
-  right: 100px;
-}
-
-.tree:nth-of-type(6) {
-  right: 150px;
-}
-
-.tree:nth-of-type(7) {
-  right: -100px;
-}
-
-.tree:nth-of-type(8) {
-  right: -50px;
-}
-
-.tree:nth-of-type(9) {
-  right: 0px;
-}
-
-.tree:nth-of-type(10) {
-  right: 50px;
-}
-
-.tree:nth-of-type(11) {
-  right: 100px;
-}
-
-.tree:nth-of-type(12) {
-  right: 150px;
 }
 
 .tree:hover {
@@ -129,6 +77,9 @@ p {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
+  margin: 0 auto;
+  max-width: 1000px;
+  bottom: 100px;
 }
 
 #scene1 {

diff --git a/styles/style.css.map b/styles/style.css.map
diff --git a/styles/style.scss b/styles/style.scss
@@ -50,7 +50,9 @@ p {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
-
+  margin: 0 auto;
+  max-width: 1000px;
+  bottom: 100px;
 }
 
 #scene1 {