Add some content

5 years ago · 9cf8c55d61
2 changed files with 143 additions and 3 deletions
--- a/css/styles.css
+++ b/css/styles.css
@ -2,15 +2,32 @@
    --main-bg-color: #568ea3;
    --main-card-bg-color: #E96400;
    --main-highlight-color: #a40e4c;
+    --background-section-color: #ababab;
+    --scrollbar-color: #dedede;
 }

 ::selection {
    background: var(--main-highlight-color); /* WebKit/Blink Browsers */
 }
-  ::-moz-selection {
+
+::-moz-selection {
    background: var(--main-highlight-color); /* Gecko Browsers */
 }

+body::-webkit-scrollbar {
+  width: 15px;               /* width of the entire scrollbar */
+}
+
+body::-webkit-scrollbar-track {
+  background: var(--scrollbar-color);        /* color of the tracking area */
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: blue;    /* color of the scroll thumb */
+  border-radius: 20px;       /* roundness of the scroll thumb */
+  border: 5px solid var(--scrollbar-color);  /* creates padding around scroll thumb */
+}
+
 * {
    box-sizing: border-box;
 }
@ -92,3 +109,58 @@ h1 {
 .Navbar__Items--right {
    margin-left: auto;
 }
+
+.background-section {
+  width: 40%;
+  background-color: var(--background-section-color);
+  height: 20rem;
+  padding: 1em;
+  margin: 1em;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
+
+.location-section {
+  width: 40%;
+  background-color: var(--background-section-color);
+  height: 20rem;
+  padding: 1em;
+  margin: 1em;
+  margin-left: auto;
+  margin-bottom: 5rem;
+  margin-right: 2em;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
+
+.section-header {
+  text-align: center;
+}
+
+.placeholder {
+  visibility: hidden;
+}
+
+.image-section-1 {
+  width: 35%;
+  background-color: var(--background-section-color);
+  height: 17.5rem;
+  padding: 1em;
+  margin: 1em;
+  margin-left: auto;
+  margin-bottom: 5rem;
+  margin-top: -19.5rem;
+  margin-right: 10%;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
+
+.map-section-1 {
+  width: 35%;
+  background-color: var(--background-section-color);
+  height: 17.5rem;
+  padding: 1em;
+  margin: 1em;
+  margin-right: auto;
+  margin-bottom: 5rem;
+  margin-top: -23.5rem;
+  margin-left: 10%;
+  box-shadow: 10px 15px var(--main-highlight-color);
+}
--- a/index.html
+++ b/index.html
@ -3,10 +3,10 @@
 <html lang="en">

 <head>
+    <meta charset="UTF-8">
    <title>Impact of Poaching on Ecosystems</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This biology project looks into the impact of poaching on ecosystems.">
-    <meta charset="UTF-8">
    <link href="css/styles.css" rel="stylesheet" media="screen">
    <!-- Rhino Icons by Twemoji. Generated using favicon.io -->
    <link rel="manifest" href="static/site.webmanifest">
@ -30,7 +30,75 @@
  </div>
  <!-- End Top Navbar -->

-  <script src="js/redirects.js"></script>
+  <!-- Start background section -->
+  <div class="background-section">
+    <div class="section-header">
+      <h1>Background</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>
+  </div>
+
+  <!-- Start location section -->
+  <div class="location-section">
+    <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>
+    </div>
+  </div>
+
+
+    <!-- Start background section -->
+    <div class="background-section">
+      <div class="section-header">
+        <h1>Background</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>
+    </div>
+
+    <!-- Start location section -->
+    <div class="location-section">
+      <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>
+      </div>
+    </div>
+
+  <div class="placeholder">
+    <p>placeholder</p>
+  </div>
+
 </body>

 </html>