-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmaple-tree.html
129 lines (113 loc) · 5.76 KB
/
maple-tree.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/maple-tree.html" />
<meta property="og:type" content="quiz" />
<meta property="og:title" content="I'm a maple tree!" />
<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>Maple tree</h1>
<h3>Acer rubrum</h3>
<p>Stupendous! You’re <span>Acer rubrum,</span> a type of maple tree. Neither of you is thrilled about flying, so you’re more likely to be found on land. Plus, you’re game to take a dip, but you’d prefer to stay out of the water. Similarly, maples are terrestrial, but when they drop their leaves in the fall, the leaves drift into rivers and lakes where they provide an important source of food and nutrients for small aquatic organisms. You also like to keep your space clean and tidy, and the red maple is no different. These trees keep the air, water, and soil clean by absorbing and storing pollutants!</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/maple-tree.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%20maple%20tree!&url=https://fairmountwaterworks.org/interactive/river-character/maple-tree.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>