From 95f97161efb9f60e16db61bfdd15b7bd3d0d1116 Mon Sep 17 00:00:00 2001
From: rav4s <ravidhruvishshah@gmail.com>
Date: Thu, 15 Apr 2021 13:06:03 -0500
Subject: [PATCH] Added causes section

---
 css/styles.css | 26 ++++++++++++++++++++++++++
 index.html     | 15 +++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/css/styles.css b/css/styles.css
index 7be4ff5..2bb95f9 100644
--- a/css/styles.css
+++ b/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);
diff --git a/index.html b/index.html
index 5b0f8f8..fdf9136 100644
--- a/index.html
+++ b/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>