Started adding food web section

css/styles.css

@@ -124,6 +124,15 @@ h1 {
   box-shadow: 10px 15px var(--main-highlight-color);
 }
 
+.food-web-section {
+  width: 50%;
+  background-color: var(--background-section-color);
+  height: 27.5rem;
+  padding: 1em;
+  margin: 1em;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
+
 .location-section {
   width: 40%;
   background-color: var(--background-section-color);
@@ -140,6 +149,11 @@ h1 {
   text-align: center;
 }
 
+.section-header p {
+  padding-top: 0.25rem;
+  margin-top: 0.25rem;
+}
+
 .placeholder {
   visibility: hidden;
 }
@@ -171,6 +185,20 @@ h1 {
   box-shadow: 10px 15px var(--main-highlight-color);
 }
 
+.food-web-explanation {
+  width: 35%;
+  background-color: var(--background-section-color);
+  height: 20rem;
+  padding: 1em;
+  margin: 1em;
+  margin-left: auto;
+  margin-bottom: 5rem;
+  margin-top: -24rem;
+  margin-right: 7.5%;
+  box-shadow: 10px 15px var(--main-highlight-color);
+  text-align: center;
+}
+
 .poaching-image {
   width: 100%;
   height: 100%;
@@ -184,3 +212,18 @@ h1 {
   max-height: 100%;
   max-width: 100%;
 }
+
+.food-web-image {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+}
+
+.food-web-image img {
+  width: auto;
+  height: auto;
+  max-height: 90%;
+  max-width: 100%;
+}

index.html

@@ -62,35 +62,20 @@
   </div>
 
 
-    <!-- Start background section -->
-    <div class="background-section">
+    <!-- Start food web section -->
+    <div class="food-web-section">
       <div class="section-header">
-        <h1>Background</h1>
+        <h1>Food Web</h1>
       </div>
-    </div>
-
-    <!-- Start image section -->
-    <div class="image-section-1">
-      <div class="poaching-image">
-        <img src="static/img/" alt="">
-      </div>
-      <div class="image-caption">
-        <caption></caption>
+      <div class="food-web-image">
+        <img src="static/img/rhino-food-web.jpg" alt="Food Web of many organisms in the Kenyan Savanna, including the Rhino" loading="lazy">
       </div>
     </div>
 
-    <!-- Start location section -->
-    <div class="location-section">
+    <!-- Start food web explanation section -->
+    <div class="food-web-explanation">
       <div class="section-header">
-        <h1>Location or something</h1>
-      </div>
-    </div>
-
-    <!-- Start map section -->
-    <div class="map-section-1">
-      <iframe title="Map of Kenya" width="100%" height="90%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=31.684570312500004%2C-2.943040910055132%2C43.41796875000001%2C3.425691524418062&amp;layer=hot&amp;marker=0.24169850190165%2C37.55126953125" loading=lazy></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=0.242&amp;mlon=37.551#map=7/0.242/37.551&amp;layers=H">View Larger Map</a></small>
-      <div class="image-caption">
-        <caption></caption>
+        <p>Rhinos have no real predators in the wild escept for humans. Although adult rhinos don't have any predators in the wild, tertiary consumers like lions and hyenas depend on juvenile and baby rhinos for a food source.</p>
       </div>
     </div>