-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlargemouth-bass.html
129 lines (113 loc) · 5.72 KB
/
largemouth-bass.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/largemouth-bass.html" />
<meta property="og:type" content="quiz" />
<meta property="og:title" content="I'm a largemouth bass!" />
<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>Largemouth bass</h1>
<h3>Micropterus salmoides</h3>
<p>Tremendous! You’re <span>Micropterus salmoides,</span> the largemouth bass. Not suprisingly, this popular sport fish shares your love of the water. Just like you’re always on the go, the largemouth bass is an active swimmer and voracious predator that hunts a diverse array of prey. Plus, you’re both able to handle just about anything that comes up in life. This adaptability allows the bass to survive in a wide variety of climates and environmental conditions, making it one of the most ecologically-tolerant fish on the continent!</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/largemouth-bass.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%20largemouth%20bass!&url=https://fairmountwaterworks.org/interactive/river-character/largemouth-bass.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>