rav4s
/
human-impact-website
mirror of https://github.com/Rav4s/human-impact-website
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add some content

main
Ravi Shah 5 years ago
parent
bc9536c8ba
commit
9cf8c55d61
2 changed files with 143 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      css/styles.css
  2. 72
      index.html

74
css/styles.css
View File

@ -2,15 +2,32 @@
--main-bg-color: #568ea3; --main-bg-color: #568ea3;
--main-card-bg-color: #E96400; --main-card-bg-color: #E96400;
--main-highlight-color: #a40e4c; --main-highlight-color: #a40e4c;
--background-section-color: #ababab;
--scrollbar-color: #dedede;
} }
::selection { ::selection {
background: var(--main-highlight-color); /* WebKit/Blink Browsers */ background: var(--main-highlight-color); /* WebKit/Blink Browsers */
} }
::-moz-selection {
::-moz-selection {
background: var(--main-highlight-color); /* Gecko Browsers */ 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; box-sizing: border-box;
} }
@ -92,3 +109,58 @@ h1 {
.Navbar__Items--right { .Navbar__Items--right {
margin-left: auto; 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);
}

72
index.html
View File

@ -3,10 +3,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<title>Impact of Poaching on Ecosystems</title> <title>Impact of Poaching on Ecosystems</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 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"> <link href="css/styles.css" rel="stylesheet" media="screen">
<!-- Rhino Icons by Twemoji. Generated using favicon.io --> <!-- Rhino Icons by Twemoji. Generated using favicon.io -->
<link rel="manifest" href="static/site.webmanifest"> <link rel="manifest" href="static/site.webmanifest">
@ -30,7 +30,75 @@
</div> </div>
<!-- End Top Navbar --> <!-- 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> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save