-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
146 lines (123 loc) · 5.96 KB
/
index.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open Waters Chicago</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.1/cerulean/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="webpage/css/openwater.css" rel="stylesheet">
</head>
<body>
<style>
.jumbotron{
background-image:url("webpage/img/skyline_water.jpeg");
}
</style>
<div class="jumbotron" id="heroImage">
<div id="jumboText">
<div class="container">
<div class="col-xs-12 col-sm-offset-2">
<h1>Open Waters Chicago</h1>
<p>A data-driven conversation about Chicago's water resources</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<h2 class="centerThis">Lake Michigan</h2>
<img src="webpage/img/zoomChicago.jpg" class="img-responsive">
<h4 class="centerThis">
In a world and country of water scarcity, Chicago is fortunate to
set at the shores of almost 20% of the world's surface freshwater.<br>
</h4><br>
<a href="/beachHealth/beachClosings.html">
<button type="button" class="btn btn-primary center-block">Find Out More</button>
</a>
<h4 class="centerThis">
<strong>Abundance leads to compacency</strong>
</h4>
</div>
<div class="col-sm-6 col-md-4">
<h2 class="centerThis">The Chicago River</h2><br>
<img src="webpage/img/LaSalle_Street_bridge_20100731.jpg" class="img-responsive">
<h4 class="centerThis">
Chicago was founded on the banks of a stream by residents with big
visions for what would soon become the Chicago River. In 1900,
engineers redirected it, and today we live with both the advantages
and the adverse effects.<br>
</h4>
<h4 class="centerThis">
<strong>Our discharge travels the Mississippi River, waters
our food, and goes into the Gulf of Mexico</strong>
</h4>
</div>
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0">
<h2 class="centerThis">Rainfall</h2>
<img src="webpage/img/greenRoof.jpg" class="img-responsive">
<h4 class="centerThis">
This Chicago Climate Action plan says that scientists expect rain
events with higher intensity over shorter periods of time.
</h4>
<h4 class="centerThis">
<strong>Can our infrastructure handle this?</strong>
</h4>
</div>
</div>
</div>
<div class="blueBackground">
<h2 class="centerThis" style="padding:30px;">
Open Waters Chicago is a community of residents who are interested in
telling the story of our local water environment using data.<br><br>
Open Waters Chicago is open-sourced on
<a href="http://github.com/open-city/water" style="color:orange;" target="_blank">
GitHub. <i class="fa fa-github-alt"></i>
</a>
<br>
Become a contributor!
</h2>
</div>
<div class="container">
<div class="col-sm-offset-2">
<h1><strong>Join Us</strong></h1>
<h4>We meet every Tuesday evening at
<a href="http://opengovhacknight.org/" style="color:orange;" target="_blank">
OpenGov Hack Night.
</a>
Come work with us!
</h4>
</div>
<br>
<form>
<div class="form-group">
<div class="row">
<div class="col-sm-4" style="text-align:right;">
<label for="emailInput">Email address</label>
</div>
<div class="col-sm-4">
<input type="email" class="form-control" id="emailInput" placeholder="Join our e-mail list. No spam here.">
</div>
<div class="col-sm-4">
<button class="btn btn-primary" id="joinListBtn">Submit</button>
</div>
</div>
</div>
</form>
Contacts<br>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$('#joinListBtn').on('click', function () {
alert("Um...sorry, but this button doesn't do anything yet. Stay Tuned ;");
})
</script>
</body>
</html>