-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (167 loc) · 9.45 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
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kinder im Zoo</title>
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/pages-animation.css">
<link rel="stylesheet" href="styles/pages.css">
<link rel="stylesheet" href="styles/bookmarks.css">
<script src="script/bookmarks.js" defer></script>
<script src="script/pages.js" defer></script>
<script src="script/swiped-events.min.js" defer></script>
</head>
<body>
<header>
</header>
<main id="main">
<div id="page-wrapper">
<div id="bookmarks">
<div class="bookmark-wrapper"><div class="bookmark" data-page="2" data-page-to="4"><img class="bookmark-img" src="assets/img/icon/Affe.svg" alt="Animal"></div></div>
<div class="bookmark-wrapper"><div class="bookmark" data-page="5" data-page-to="7"><img class="bookmark-img" src="assets/img/icon/Orka.svg" alt="Animal"></div></div>
<div class="bookmark-wrapper"><div class="bookmark" data-page="8" data-page-to="8"><img class="bookmark-img" src="assets/img/icon/Elefant.svg" alt="Animal"></div></div>
<div class="bookmark-wrapper"><div class="bookmark" data-page="9" data-page-to="9"><img class="bookmark-img" src="assets/img/icon/Strauss.svg" alt="Animal"></div></div>
</div>
<div class="page-turner" id="page-turner-left"><img src="assets/img/icon/Pfeil.svg" alt=" "></div>
<div class="page-turner" id="page-turner-right"><img src="assets/img/icon/Pfeil.svg" alt=" "></div>
<div class="page-swiper" id="page-swiper"></div>
<div class="page active" id="start-page">
<!-- start page -->
<!-- <div class="background overlay" style="background-image: url('assets/img/MediaJam_Title_Text.png');"></div> -->
<img id="start-page-title" src="assets/img/MediaJam_Title_Text.png" alt="">
<img class="start-page-animal" id="start-page-bat" src="assets/img/MediaJam_Title_Bat.png" alt="">
<img class="start-page-animal" id="start-page-bear" src="assets/img/MediaJam_Title_Bear.png" alt="">
<img class="start-page-animal" id="start-page-lion" src="assets/img/MediaJam_Title_Lion.png" alt="">
<img class="start-page-animal" id="start-page-snake" src="assets/img/MediaJam_Title_Snake.png" alt="">
</div>
<div class="page" id="zoo-page">
<!-- zoo page -->
<div class="background" style="background-image: url('assets/img/MediaJam_Bookpages_Page1.png');"></div>
</div>
<!-- monkey -->
<div class="page">
<!-- sad monkey -->
<div class="background" style="background-image: url('assets/img/MediaJam_Bookpages_Ape.png');"></div>
<div class="background overlay" style="background-image: url('assets/video/affe.gif');"></div>
<img src="" alt="Sprechblase" class="speechbubble">
</div>
<div class="page">
<!-- happy monkey -->
<a href="https://www.youtube.com/watch?v=zBkaC80Ew2g&t=1177s" target="_blank" rel="noopener noreferrer">
<div class="background" style="background-image: url('assets/raw/chimp_photo.jpg');"></div>
</a>
</div>
<div class="page facts-wrapper">
<!-- monkey facts -->
<div class="facts">
<h2>Schimpansen</h2>
<ul>
<li>
leben in großen Gruppen von 20 bis 150 Tieren
</li>
<li>
bewegen sich üblicherweise in einem Bereich von drei bis fünf Quadratkilometern.
</li>
<li>
sind unsere nächsten lebenden Verwandten im Tierreich. Wir teilen ca. 98% unserer DNA mit ihnen, was auf eine gemeinsame evolutionäre Geschichte hinweist. Zusätzlich zu genetischen Ähnlichkeiten zeigen Schimpansen auch komplexe soziale Strukturen, kognitive Fähigkeiten und sogar Verhaltensweisen, die denen der Menschen ähneln. Ihre Fähigkeit zur Werkzeugnutzung, sozialen Interaktion und emotionalen Ausdruck macht sie zu faszinierenden Lebewesen, die uns viel über uns selbst und unsere Evolution lehren können.
</li>
</ul>
<p></p>
</div>
</div>
<!-- orca -->
<div class="page">
<!-- sad orca -->
<div class="background" style="background-image: url('assets/img/MediaJam_Bookpages_Orca.png');"></div>
<div class="background overlay" style="background-image: url('assets/img/orca.png');"></div>
<img src="" alt="Sprechblase" class="speechbubble">
</div>
<div class="page">
<!-- happy orca -->
<a href="https://www.youtube.com/watch?v=KfohQP7XY7U&t=1287s" target="_blank" rel="noopener noreferrer">
<div class="background" style="background-image: url('assets/raw/orca_photo.jpg');"></div>
</a>
</div>
<div class="page facts-wrapper">
<!-- orca facts -->
<div class="facts">
<h2>Orcas</h2>
<ul>
<li>sind soziale Tiere die in Gruppen von 5-70 Tieren leben und oft ein Leben lang zusammen bleiben</li>
<li>legen je nach Art und Saison zwischen 15 und 50 Kilomenter am Tag zurück</li>
<li>verbingen die meiste Zeit mit der Beutesuche und Jagen</li>
<li>leben in der Regel in Freiheit länger als in Gefangenschaft</li>
</ul>
</div>
</div>
<!-- elephant -->
<div class="page">
<!-- sad elephant -->
<div class="background" style="background-image: url('assets/img/MediaJam_Bookpages_Ape.png');"></div>
<div class="background overlay" style="background-image: url('assets/video/Elefant.gif');"></div>
<img src="" alt="Sprechblase" class="speechbubble">
</div>
<!-- <div class="page">
<!-- happy elephant - ->
<div class="background" style="background-image: url('assets/raw/chimp_photo.jpg');"></div>
</div>
<div class="page facts-wrapper">
<!-- elephant facts - ->
<div class="facts">
<p>elephant facts</p>
</div>
</div> -->
<!-- ostrich -->
<div class="page">
<!-- sad ostrich -->
<div class="background" style="background-image: url('assets/img/MediaJam_Bookpages_Ape.png');"></div>
<div class="background overlay" style="background-image: url('assets/video/Strauss.gif');"></div>
<img src="" alt="Sprechblase" class="speechbubble">
</div>
<!-- <div class="page">
<!-- happy ostrich - ->
<div class="background" style="background-image: url('assets/raw/chimp_photo.jpg');"></div>
</div>
<div class="page facts-wrapper">
<!-- ostrich facts - ->
<div class="facts">
<p>ostrich facts</p>
</div>
</div> -->
<div class="page facts-wrapper" id="credits">
<!-- credits -->
<div id="credit-images">
<div class="credit">
<img src="assets/img/Credits_Alex.png" alt="">
<span>Alex</span>
</div>
<div class="credit">
<img src="assets/img/Credits_Ellie.png" alt="">
<span>Ellie</span>
</div>
<div class="credit">
<img src="assets/img/Credits_Lukas.png" alt="">
<span>Lukas</span>
</div>
<div class="credit">
<img src="assets/img/Credits_Sina.png" alt="">
<span>Sina</span>
</div>
</div>
<h1>Zoobewohner</h1>
<div id="photo-credits">
<div class="credit">
<img src="assets/img/Credits_Robert.png" alt="">
<span>Robert</span>
</div>
<p>Alle Fotos von <strong>Robert Marc Lehmann</strong>. <br> Wir nutzen diese ohne Erlaubnis, mit <br> der Intention auf Tierleid hinzuweisen. <br>
<a href="https://www.robertmarclehmann.com/" target="_blank" rel="noopener noreferrer">https://www.robertmarclehmann.com/</a> <br>
<a href="https://www.youtube.com/@MissionErde" target="_blank" rel="noopener noreferrer">https://www.youtube.com/@MissionErde</a> <br>
<a href="https://missionerde.de/" target="_blank" rel="noopener noreferrer">https://missionerde.de/</a></p>
</div>
</div>
</div>
</main>
</body>
</html>