-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbrook-trout.html
129 lines (113 loc) · 5.82 KB
/
brook-trout.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/brook-trout.html" />
<meta property="og:type" content="quiz" />
<meta property="og:title" content="I'm a brook trout!" />
<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>Brook trout</h1>
<h3>Salvelinus fontinalis</h3>
<p>Incredible! You’re <span>Salvelinus fontinalis,</span> also known as brook trout. Like you, this distinctively patterned fish is happiest when it’s in the water. As sensitive souls, you’re both easily affected by what happens around you. The brook trout needs pure, clear water to thrive, and its population has been severely impacted by pollution and habitat loss. This decline in numbers affects other species too, because much like your willingness to help others, the brook trout acts as a nursery by carrying baby mussels in its gills. Once the tiny mussels grow large enough, they drop off the trout into stream bed where they live as adults.</p>
<h2 class="share-msg">share your match</h2>
<div class="social-share">
<img width="50" src="./assets/images/icon-facebook.png" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('https://fairmountwaterworks.org/interactive/river-character/brook-trout.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%20brook%20trout!&url=https://fairmountwaterworks.org/interactive/river-character/brook-trout.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>