-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (167 loc) · 10.6 KB
/
index.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Biocaching</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Biocaching is an online game in which the objective is to identify and document observations of plants, animals and other life forms out in the field." />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ff8700" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="theme-color" content="#ff8700" />
<meta property="og:title" content="Biocaching" />
<meta property="og:description" content="Biocaching is an online game in which the objective is to identify and document observations of plants, animals and other life forms out in the field." />
<meta property="og:image" content="back3.jpg" />
<script>
var language = window.navigator.userLanguage || window.navigator.language;
if (language == 'no' || language == 'nn' || language == 'nb' || language == 'no-nn' || language == 'no-nn' || language == 'nn-no' || language == 'nno' || language == 'nob' || language == 'nor') {
window.location = 'norwegian.html';
}
</script>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300|Roboto+Slab:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<div class="menu">
<h1>Biocaching</h1>
<ul id="desktop-ul">
<li><a href="#spill">The game</a></li>
<li><a href="#bakgrunn">About</a></li>
<li><a href="#media">In media</a></li>
<li><a href="#teamet">The team</a></li>
<li><a href="#kontakt">Contact</a></li>
</ul>
<img aria-role="button" aria-hidden="true" src="menu.svg" onclick="menuToggle()" />
</div>
</nav>
<nav id="menu" class="mobile-menu" aria-hidden="true">
<ul>
<li><a href="#spill" onclick="menuToggle()">The game</a></li>
<li><a href="#bakgrunn" onclick="menuToggle()">About</a></li>
<li><a href="#media" onclick="menuToggle()">In media</a></li>
<li><a href="#teamet" onclick="menuToggle()">The team</a></li>
<li><a href="#kontakt" onclick="menuToggle()">Contact</a></li>
</ul>
<img aria-role="button" src="close.svg" onclick="menuToggle()" />
</nav>
<header aria-hidden="true" id="b-image-header">
</header>
<section class="spill" id="spill">
<article>
<div class="embed">
<iframe src="https://player.vimeo.com/video/139995056?color=ff8800&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</article>
</section>
<section class="bakgrunn" id="bakgrunn">
<article>
<h2>About</h2>
<div class="col-wrap">
<p class="text-col-one">All types of species have value in the Biocaching game: plants, birds, mammals, insects, mushrooms, fishes; any species you come across. You start by taking a photo so that the species can be identified. An observation also includes the time and place and may optionally include other information, such as the number of individuals, a comment, gender, size, colour and age or stage.<br><br>After the observation is submitted in the game, you are rewarded with points. Players may get additional points for the amount of information submitted, being the first to observe a species in an area, to have observed all species within a predefined group, or other achievements. Players will also be able so see and interact with other players' observations, through comments and likes, which in turn can provide points.</p>
<p class="text-col-two">Observations will be forwarded to national and international databases for biodiversity observations. As such playing the Biocaching game is a contribution to research and environment monitoring.<br><br>While Biocaching first and foremost is about having fun by learning, reporting and competing, there is a serious element to it. For both science and management dealing with changes in our environment, it is vital to have access to as much quality observations as possible. Since observations are documented with media files they can be quality controlled, and by openly sharing all generated data.</p>
</div>
</article>
</section>
<section aria-hidden="true" id="b-img"></section>
<section class="i-media" id="media">
<article>
<h2>In media</h2>
<ul>
<li><a href="http://www.cw.no/artikkel/utvikling/hacking-pa-honefoss">Hacking på Hønefoss - Computer World</a></li>
<li><a href="https://kulturognaturreise.wordpress.com/2015/06/16/moro-med-apne-data/">Moro med åpne data - Kultur og Naturreise</a></li>
<li><a href="http://www.hack4.no/hack4/konkurransen/vinnerne-av-hack4no">Vinnerne av Hack4No - Hack4.no</a></li>
<li><a href="http://hack4.no/hack4/konkurransen/84-hack4no/99-gi-tein-og-biopin-it-gar-videre">Gi tein og BioPin.it går videre - Hack4.no</a></li>
<li><a href="https://medium.com/@secondmuse/how-citizen-scientists-are-revolutionizing-data-collection-dcd4335a0b6c">How Citizen Scientists Are Revolutionizing Data Collection - SecondMuse</a></li>
<li><a href="http://www.eoesummit.org/news/eye-on-earth-announces-finalists-and-winners-of-data-innovation-challenges/">Eye on Earth announces finalists and winners of Data Innovation Challenges - Eye on Earth</a></li>
<li><a href="http://environment.govmu.org/English/News/Pages/Biocaching-Project.aspx">Press Conference Minister of Environment Sustainable Development, and Disaster and Beach Management</a></li>
<li><a href="http://www.va.se/nyheter/2015/10/28/spela-dig-till-biologisk-mangfald/">Spela dig till biologisk mångfald - Veckans Affärer</a></li>
<li><a href="http://kartverket.no/Om-Kartverket/Nyheter/norske-hacke-lag-til-topps-i-helsinki/">Norske hacke-lag til topps i Helsinki - Kartverket</a></li>
<li><a href="http://www.digi.no/bedriftsteknologi/2015/12/04/norsk-mobilapp-har-fatt-internasjonal-oppmerksomhet">Norsk mobilapp har fått internasjonal oppmerksomhet - digi.no</a></li>
</ul>
</article>
</section>
<section class="teamet" id="teamet">
<article>
<h2>The team</h2>
<div class="person">
<img src="albin_small.jpg" alt="Image of Albin" />
<div>
<h3>Albin Larsson</h3>
<p>Albin is currently studying Orienteering and Technology: informations and media technology at Nyköpings gymnasium in Sweden. He also freelances for both local and international clients. On his free time Albin practice orienteering and makes maps.</p>
</div>
</div>
<div class="person">
<img src="alice_small.jpg" alt="Image of Alice" />
<div>
<h3>Alice Polenghi</h3>
<p>Alice is an italian graphic designer specialized in maps and wayfinding design. She's now based in Tromsø, Norway, where she works as freelance designer. In the free time she likes walking out in the nature, dancing swing and manufacturing things.</p>
</div>
</div>
<div class="person">
<img src="bjorn_small.jpg" alt="Image of Bjørn" />
<div>
<h3>Bjørn Hjelle</h3>
<p>Bjørn has been a programmer and systems architect for years, for small and large organisations. He currently works for Acando Norway AS where he specialises in search technology. He enjoys being out in nature and learning about how species interact and how the processes in nature work.</p>
</div>
</div>
<div class="person">
<img src="davide_small.jpg" alt="Image of Davide" />
<div>
<h3>Davide Rapotez</h3>
<p>Davide is a psychology student from Italy, and he's particurarly interested in perception psychology and design thinking. He's also based in Tromsø and collaborates with Alice, with focus on the user experience. In his spare time he likes dancing swing, reading more psychology books and being out inthe nature.</p>
</div>
</div>
<div class="person">
<img src="peter_small.jpg" alt="Image of Peter" />
<div>
<h3>Peter Bremer</h3>
<p>Peter has a masters degree in urban planning and has been working with web development for over 20 years. Coming from the Netherlands, he now lives in Trondheim, Norway. He has a passion for map making, hiking and photography.</p>
</div>
</div>
</article>
</section>
<section aria-hidden="true" id="back-img-two"></section>
<section class="kontakt" id="kontakt">
<article>
<h2>Contact</h2>
<p>E-mail: <a href="mailto:[email protected]">[email protected]</a> <img class="facebook-img" aria-hidden="true" src="facebook.png" alt="Facebook image" /> <a href="https://www.facebook.com/biocaching">Facebook</a></p>
</article>
</section>
<script src="menu.js"></script>
<script src="viewport-units-buggyfill.js"></script>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67613018-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.scrolldepth.min.js"></script>
<script>
$.scrollDepth({
elements: ['#spill', '#bakgrunn', '#media', '#teamet', '#kontakt'],
userTiming: true,
gtmOverride: true,
nonInteraction: false
});
</script>
</body>
</html>