-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfreshwater-mussel.html
129 lines (113 loc) · 5.69 KB
/
freshwater-mussel.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
<!DOCTYPE html>
<html>
<head>
<title>Personality Quiz - Fairmount Water Works</title>
<meta name="viewport" content="target-densitydpi=device-dpi,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
minimal-ui,
user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta property="og:url" content="https://fairmountwaterworks.org/interactive/river-character/freshwater-mussel.html" />
<meta property="og:type" content="quiz" />
<meta property="og:title" content="I'm a freshwater mussel!" />
<meta property="og:description" content="Take the river character personality quiz." />
<meta property="og:image" content="https://fairmountwaterworks.org/interactive/river-character/assets/images/profiles/[email protected]" />
<link href="./dist/css/main.css" rel="stylesheet" />
<!-- GOOGLE ANALYTICS -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-86705712-3', 'auto');
ga('send', 'pageview');
function sendGAEvent(screen) {
ga('set', 'page', screen);
ga('send', 'pageview');
}
</script>
<style>
#clickBubbles {
display: block;
position: absolute;
z-index: 19;
width: 100px;
height: 100px;
pointer-events: none;
top: 0;
}
#clickBubbles>.bubble {
width: 30px;
height: 30px;
background: rgba(250, 250, 250, 0.25);
border-radius: 150px;
position: absolute;
-webkit-animation: float 0.5s ease-in;
-webkit-animation-fill-mode: forwards;
}
@keyframes float {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-200px);
opacity: 0;
}
}
</style>
<link href="./dist/css/main.css" rel="stylesheet" />
</head>
<body>
<div id="content" style="margin-top:30px;">
<div id="results" class="in">
<img src="assets/images/profiles/[email protected]" id="profile" alt="river creature image">
<h2>Your Match Made in the River</h2>
<h1>Freshwater Mussel</h1>
<h3>Over 300 Species in North America</h3>
<p>Magnificent! You're a freshwater mussel or pearly mussel. Like you, this mussel is as happy as a clam when it’s in the water. You’re also perfectly content just hanging out. Likewise, juvenile and adult mussels nestle themselves into the sand or gravel of the riverbed where they filter tiny bits of food out of the water. In fact, when lots of mussels are around, their filtering can clean the water for improve the environment for all the other species in the river!</p>
<h2 class="share-msg">share your match</h2>
<div class="social-share">
<img width="50" src="./assets/images/icon-facebook.png" alt="f" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('https://fairmountwaterworks.org/interactive/river-character/freshwater-mussel.html'),'facebook-share-dialog','width=626,height=436'); return false;">
<img width="50" src="./assets/images/icon-twitter.png" onclick="javascript:window.open('https://twitter.com/share?text=I%27m%20a%20freshwater%20mussel!&url=https://fairmountwaterworks.org/interactive/river-character/freshwater-mussel.html','Twitter-dialog','width=626,height=436'); return false;">
<img width="50" src="./assets/images/icon-instagram.png" onclick="window.open('https://www.instagram.com/fairmountww', 'width=626,height=436'); return false;">
</div>
<button onclick="location.href='index.html';" class="take-the-quiz">Take the quiz<img src="./assets/images/icon-arrow-white.svg" alt="arrow"></button>
</div>
</div>
<div id="animation"></div>
<div id="clickBubbles"></div>
<div id="water" data-water-level="10">
<div id="bubbles" data-bubble-height="10">
<div class="bubble x1"></div>
<div class="bubble x2"></div>
<div class="bubble x3"></div>
<div class="bubble x4"></div>
<div class="bubble x5"></div>
<div class="bubble x6"></div>
<div class="bubble x7"></div>
<div class="bubble x8"></div>
<div class="bubble x9"></div>
<div class="bubble x10"></div>
<div class="bubble x11"></div>
<div class="bubble x12"></div>
<div class="bubble x13"></div>
<div class="bubble x14"></div>
</div>
</div>
<script src="./js/lib/jquery-1.11.3.min.js"></script>
<script src="./js/lib/jquery.loadTemplate.min.js"></script>
<script src="./js/lib/createjs-2015.11.26.min.js"></script>
<script src="./js/controllers/utilities.js"></script>
<script src="./js/controllers/navigation.js"></script>
<script src="./js/controllers/questions.js"></script>
<script src="./js/controllers/result.js"></script>
<script src="./js/app.js"></script>
</body>
</html>