Added causes section

css/styles.css

@@ -140,6 +140,18 @@ h1 {
   box-shadow: 10px 15px var(--main-highlight-color);
 }
 
+.causes-section {
+  width: 50%;
+  background-color: var(--background-section-color);
+  height: 25rem;
+  padding: 1em;
+  margin: 1em;
+  margin-right: 2.5%;
+  margin-left: auto;
+  margin-top: -27.5rem;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
+
 .food-web-section {
   width: 50%;
   background-color: var(--background-section-color);
@@ -203,6 +215,20 @@ h1 {
   text-align: center;
 }
 
+.image-section-3 {
+  width: 40%;
+  background-color: var(--background-section-color);
+  height: 20rem;
+  padding: 1em;
+  margin: 1em;
+  margin-right: auto;
+  margin-bottom: 5rem;
+  margin-top: 17.5rem;
+  margin-left: 2em;
+  box-shadow: 10px 15px var(--main-highlight-color);
+  text-align: center;
+}
+
 .map-section-1 {
   width: 35%;
   background-color: var(--background-section-color);

index.html

@@ -94,6 +94,21 @@
       </div>
     </div>
 
+    <!-- Start image section -->
+    <div class="image-section-3">
+      <div class="poaching-image">
+        <img src="static/img/oxpecker-rhino.jpg" alt="fhfffffffffffffffff" loading="lazy">
+      </div>
+    </div>
+
+    <!-- Start causes section -->
+    <div class="causes-section">
+      <div class="section-header">
+        <h1>Causes</h1>
+        <p>There are many causes of rhino poaching in Africa.</p>
+      </div>
+    </div>
+
   <div class="placeholder">
     <p>placeholder</p>
   </div>