From 9cf8c55d611842ce865f482f51106bfda2d88447 Mon Sep 17 00:00:00 2001 From: rav4s Date: Fri, 9 Apr 2021 13:01:43 -0500 Subject: [PATCH] Add some content --- css/styles.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 143 insertions(+), 3 deletions(-) diff --git a/css/styles.css b/css/styles.css index 2083ee1..9a5c4ff 100644 --- 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); +} diff --git a/index.html b/index.html index 7fbccc9..a3a2ce8 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,10 @@ + Impact of Poaching on Ecosystems - @@ -30,7 +30,75 @@ - + +
+
+

Background

+
+
+ + +
+
+ +
+
+ +
+
+ + +
+
+

Location or something

+
+
+ + +
+
View Larger Map +
+ +
+
+ + + +
+
+

Background

+
+
+ + +
+
+ +
+
+ +
+
+ + +
+
+

Location or something

+
+
+ + +
+
View Larger Map +
+ +
+
+ +
+

placeholder

+
+