-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgreat-blue-heron.html
129 lines (113 loc) · 5.65 KB
/
great-blue-heron.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/great-blue-heron.html" />
<meta property="og:type" content="quiz" />
<meta property="og:title" content="I'm a great blue heron!" />
<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>Great Blue Heron</h1>
<h3>Ardea herodias</h3>
<p>Superb! You’re <span>Ardea herodias,</span> the great blue heron. This elegant bird shares your attraction to flying and is a sight to behold with a wingspan of more than five feet! Similar to your low-key personality, herons stand quite still or move very slowly through shallow water as they look for food. Just like your willingness to eat almost anything, great blue herons have a diverse diet of fish, amphibians, reptiles, insects, and even small birds.</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/great-blue-heron.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%20great%20blue%20heron!&url=https://fairmountwaterworks.org/interactive/river-character/great-blue-heron.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>