-
Notifications
You must be signed in to change notification settings - Fork 0
/
contaminatedWater.html
104 lines (91 loc) · 4.44 KB
/
contaminatedWater.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!doctype HTML>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-165974634-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-165974634-1');
</script>
<meta charset="utf-8">
<title> Water Contamination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/intro/style-intro-small.css" rel="stylesheet" type="text/css" media="screen and (max-width:500px)">
<link href="styles/intro/style-intro-medium.css" rel="stylesheet" type="text/css" media="screen and (min-width:501px) and (max-width:800px)">
<link href="styles/intro/style-intro-large.css" rel="stylesheet" type="text/css" media="screen and (min-width:801px)">
<link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="js/contaminants.js"></script>
</head>
<body>
<h1> Water Contamination in the United States </h1>
<img src="images/water.png" width="100" id="waterdrop" alt="water drop">
<nav class="bar">
<ul class= "bar-ul">
<a href="whyWater.html"><li class="bar-li"> <h3>Why Water?</h3></li></a>
<a href="contaminatedWater.html"><li class="bar-li"><h3>Harm of Contaminated Water</h3></li></a>
<a href="waterQuality.html"><li class="bar-li"><h3>What's Your Water Quality?</h3></li></a>
</ul>
</nav>
<main id ="contentT">
<h3 id="harmOfWater">Harm of Water Contamination</h3>
<article id="content">
<p>Water is one of the core necessities that we need to survive. It is recommended for women to drink at least 2.7 liters a day and for men it’s 3.7 liters a day. Therefore, over time, contaminants found in our drinking water will accumulate and lead to acute and chronic health risks such as cancer and impaired body functions. Many of these contaminants can’t be smelled, seen, or tasted. </p>
<div class="contaminants">
<button id="arsenic" onClick="replaceContent(this.id)">
<img src="images/arsenic.png" alt="Avatar" class="image">
</button>
<button id="barium" onClick="replaceContent(this.id)">
<img src="images/barium.png" alt="Avatar" class="image">
</button>
<button id="cadmium" onClick="replaceContent(this.id)">
<img src="images/cadmium.png" alt="Avatar" class="image">
</button>
<button id="copper" onClick="replaceContent(this.id)">
<img src="images/copper.png" alt="Avatar" class="image">
</button>
<button id="lead" onClick="replaceContent(this.id)">
<img src="images/lead.png" alt="Avatar" class="image">
</button>
<button id="mercury" onClick="replaceContent(this.id)">
<img src="images/mercury.png" alt="Avatar" class="image">
</button>
<button id="selenium" onClick="replaceContent(this.id)">
<img src="images/selenium.png" alt="Avatar" class="image">
</button>
<button id="silver" onClick="replaceContent(this.id)">
<img src="images/silver.png" alt="Avatar" class="image">
</button>
</div>
<div class="current-contaminant">
<p> <b>Click on the contaminants </b> to learn more about the health effects they can have on the human body!</p>
</div>
<div id ="othersText">
<p>People across the United States have different levels of exposure to contaminants in their drinking water due to many factors such as their proximity to an agricultural or industrial area. <a href="others.html">Click here </a> to learn more about how the quality of water differs greatly across the United States. </p>
</div>
</article>
</main>
<footer>
<div id="col-C">
<h4> <a href="about.html">About Us </a></h4>
<h4> <a href="aboutProject.html">About the Project</a> </h4>
</div>
<div id="col-B">
<h4> <a href="waterinUS.html">Water in the United States </a></h4>
<h4> <a href="others.html">Case Studies </a></h4>
<h4> <a href="solutions.html">Solutions and Common Misconceptions </a></h4>
</div>
<div id="col-A">
<h4> <a href="contaminatedWater.html"> Harm of Contaminated Water </a></h4>
<h4> <a href="waterQuality.html"> What's Your Water Quality? </a></h4>
</div>
<div id="col-C">
<h4> <a href="index.html"> Landing Page </a></h4>
<h4> <a href="whyWater.html"> Why Water? </a></h4>
</div>
<img src="images/water.png" width="100" alt="water drop">
</footer>
</body>
</html>