Browse Source

Added rest of explanation

main
Ravi Shah 5 years ago
parent
commit
4be2cceaa8
  1. 12
      css/styles.css
  2. 4
      index.html

12
css/styles.css

@ -15,7 +15,7 @@
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: 15px; /* width of the entire scrollbar */
width: 20px; /* width of the entire scrollbar */
} }
body::-webkit-scrollbar-track { body::-webkit-scrollbar-track {
@ -23,6 +23,12 @@ body::-webkit-scrollbar-track {
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 7.5px solid var(--scrollbar-color); /* creates padding around scroll thumb */
}
body::-webkit-scrollbar-thumb:hover {
background-color: blue; /* color of the scroll thumb */ background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */
border: 5px solid var(--scrollbar-color); /* creates padding around scroll thumb */ border: 5px solid var(--scrollbar-color); /* creates padding around scroll thumb */
@ -188,12 +194,12 @@ h1 {
.food-web-explanation { .food-web-explanation {
width: 35%; width: 35%;
background-color: var(--background-section-color); background-color: var(--background-section-color);
height: 20rem;
height: 25rem;
padding: 1em; padding: 1em;
margin: 1em; margin: 1em;
margin-left: auto; margin-left: auto;
margin-bottom: 5rem; margin-bottom: 5rem;
margin-top: -24rem;
margin-top: -27rem;
margin-right: 7.5%; margin-right: 7.5%;
box-shadow: 10px 15px var(--main-highlight-color); box-shadow: 10px 15px var(--main-highlight-color);
text-align: center; text-align: center;

4
index.html

@ -64,7 +64,7 @@
<!-- Start food web section --> <!-- Start food web section -->
<div class="food-web-section"> <div class="food-web-section">
<div class="section-header">
<div class="section-header" style="margin-bottom: 1em;">
<h1>Food Web</h1> <h1>Food Web</h1>
</div> </div>
<div class="food-web-image"> <div class="food-web-image">
@ -75,7 +75,7 @@
<!-- Start food web explanation section --> <!-- Start food web explanation section -->
<div class="food-web-explanation"> <div class="food-web-explanation">
<div class="section-header"> <div class="section-header">
<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>
<p>The organisms in green are primary producers and include star grass and acacia. Primary consumers (blue), including the rhino, mouse, termite, and gazelle (all herbivores), consume these producers. The mongoose (secondary consumer) eats the mouse & termite, and is an omnivore. The primary & secondary consumers are eaten by tertiary consumers (yellow), which include the lion, caracal, hyena, and crocodile (all carnivores). Finally, the vulture (detritivore), a quaternary consumer, consumes the remains of all other consumers. 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. Poaching rhinos removes a large food source for these tertiary consumers, and can cause their populations to fall.</p>
</div> </div>
</div> </div>

Loading…
Cancel
Save