This repository was archived by the owner on Oct 18, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscenes.html
More file actions
293 lines (282 loc) · 19.2 KB
/
scenes.html
File metadata and controls
293 lines (282 loc) · 19.2 KB
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300' rel='stylesheet' type='text/css'>
<title>Scènes | Kerstwandeling CrossPoint</title>
<meta name="description" content="De oude kerstwandeling scenes-pagina voor CrossPoint" />
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Stylesheets/stylesheet.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/menu.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/clock.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/snow.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/calendar.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="source/scripts/Bigmac.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="title">
<input type="checkbox" id="menu">
<label id="burgertje" for="menu" onclick></label>
<nav role="off-canvas">
<div id="sidebarlogo">
<a href="http://crosspointgetsewoud.nl" target="_blank"><img src="source/images/logo.png" alt="Het CrossPoint logo" id="crosspoint-logo"></a>
</div>
<div id="media">
<a href="https://nl-nl.facebook.com/crosspointgetsewoud/" target="_blank"><img src="source/images/facebook-logo.png" alt="Het facebook logo" id="facebook-logo" class="socialmedia-logo"></a>
<a href="http://crosspointgetsewoud.nl" target="_blank"><img src="source/images/internet-logo.png" alt="Het internet logo" id="internet-logo" class="socialmedia-logo"></a>
<a href="mailto:kerstwandeling@crosspointgetsewoud.nl?subject=Feedback Kerstwandeling&bcc=cemre8@live.nl"><img src="source/images/email-logo.png" alt="Het email logo" id="email-logo" class="socialmedia-logo"></a>
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="vooraf.html">Vooraf</a></li>
<li><a href="route.html">Route en kaart</a></li>
<li><a href="scenes.html">Scènes</a></li>
<li><a href="kerstverhaal.html">Het kerstverhaal</a></li>
<li><a href="afloop.html">Achteraf</a></li>
<li><a href="crosspoint.html">Over Crosspoint</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1 id="page-title">Scènes</h1>
</div>
<div class="Accords">
<button class="accordion">Scène 1</button>
<div class="panel">
<p>
De zuilen in het Lentepark. Je hoort de muziek en loopt een museum binnen. Het is het museum van de schepping. Je ziet prachtige schilderijen, gemaakt door leerlingen van HVC. De muziek doet je denken aan de bekende serie Planet Earth. De conservator
van het museum heet je welkom en nodigt je uit om te genieten. Het museum van de schepping laat prachtige beelden van onze wereld zien. Ook in onze wereld, met al zijn duistere kanten, is er hoop en licht. En niet te vergeten, jij
bent bijzonder!
</p>
<!-- <iframe style="border:none" src="https://s3.amazonaws.com/files.photosnack.com/iframejs/widget.html?hash=pdxp0nmmv&t=1513621543" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>-->
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo1.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo2.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo3.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo4.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo5.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo6.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo7.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo8.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo9.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo10.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo11.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo12.jpeg" style="width:100%">
<img class="mySlides w3-animate-fading" src="source/images/slideshow/photo12.jpeg" style="width:100%">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(5)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(6)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(7)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(8)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(9)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(10)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(11)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(12)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(13)"></span>
</div>
</div>
<br>
<br>
</div>
<button class="accordion">Scène 2</button>
<div class="panel">
<p>
Ook nu is er een speurtocht. Op deze plek worden de formulieren uitgedeeld. De kinderen gaan op zoek naar de sterren! En op die sterren staan letters die je moet opschrijven. En met al die letters kun je een woord maken. (Aan het einde van de kerstwandeling,
scène 12, kun je het formulier weer inleveren. Na afloop van de wandeling trekken we een winnaar!) En volg vanaf nu het spoor van de lichtjes! Je kan natuurlijk ook kijken bij de route (kijk bij het hamburger-menu).
</p>
<br>
<br>
</div>
<button class="accordion">Scène 3</button>
<div class="panel">
<p>
Als in de bijbel het kerstverhaal beschreven wordt, begint dat met een gesprek tussen de jonge Maria en een engel. Ze ontvangt wonderlijk nieuws en begrijpt er eigenlijk niets van. Er staat iets bijzonders te gebeuren in deze wereld. De geboorte van een
klein kind zal alles anders maken. De geboorte van een ster?
</p>
<br>
<br>
</div>
<button class="accordion">Scène 4</button>
<div class="panel">
<p>
Op deze plek wordt een gedicht voorgedragen door de zwangere Maria. En misschien herken je in haar wel de tienermoeder die er alleen voor staat? Mensen om haar heen roddelen. Wat maakt dat veel kapot. Als je niet oppast laat je iemand zo maar in de kou
staan. Niet doen.
</p>
<br>
<br>
</div>
<button class="accordion">Scène 4 - Gedicht</button>
<div class="panel">
<p id="gedicht-scenes">
Ik zat net op een bankje<br> In ’t park hier heel vlakbij<br> En hoorde mensen praten<br> Ze spraken over mij<br>
<br> Ik werd nogal veroordeeld<br> Om wat ik heb gedaan<br> En zou me moeten schamen<br> Hoe kon het toch bestaan<br>
<br> Dat voelde heel verdrietig<br> Heel zwaar en diep bedrukt<br> Mijn leven is gebroken<br> ’t lijkt allemaal mislukt<br>
<br> Er kwam opeens een man aan<br> Hij zat en zweeg naast mij<br> En na een paar minuten<br> Keek hij me aan en zei<br>
<br> Ooit was ik ook een outcast<br> Verdacht in een schandaal<br> Ik weet dus wat je doormaakt<br> Vertel me je verhaal<br>
<br> Ik kon alleen maar huilen<br> Het was niet meer normaal<br> Totdat ik eind’lijk leeg was<br> En hij zei: mooi verhaal<br>
<br> Hij pakte toen mijn hand vast<br> En zei: geef dit maar door<br> Helpen doe je meestal<br> Met je hand en met je oor.<br>
<br> Stel vragen en wees zwijgzaam<br> Zo helpen wij elkaar<br> De wereld is je bankje<br> Ga zitten luister maar<br>
</p>
<br>
<br>
</div>
<button class="accordion">Scène 5</button>
<div class="panel">
<p>
Een tweegesprek tussen Jozef en Maria. Ze zijn onderweg. De twijfel slaat toe. Gaat het allemaal wel goed komen? In dat tweegesprek eindigt Maria met het zingen van twee coupletten van een lied van Marco Borsato. In de vroegte van de morgen. De begeleiding is in alle eenvoud. Als u het lied wilt terugluisteren, dan kan je het hieronder vinden.
</p>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/Pfkb4X7E9p0?rel=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<br>
<br>
</div>
<button class="accordion">Scène 6</button>
<div class="panel">
<p>
Een beetje ‘knullige’ engel komt aanlopen bij een groepje herders. Ze weten niet wat ze meemaken. Maar uiteindelijk ontdekken de herders dat de engel schokkend nieuws heeft te vertellen. Een bijzonder kind is geboren en daarmee wordt alles anders. God maakt een nieuw begin. Hij komt dichtbij en geeft hoop te midden van wanhoop, licht te midden van duisternis, vergeving te midden van schuld. En je begrijpt, daarom willen de herders op zoek gaan naar het kind dat geboren is.
</p>
<br>
<br>
</div>
<button class="accordion">Scène 7</button>
<div class="panel">
<p>
Ook de wijzen (geleerde mensen uit die tijd) nodigen onsuit om mee te gaan en de ster te volgen. Ze geloven dat God grote dingen doet: Hij laat deze wereld nooit los! Het wordt een vrolijke optocht met gezellige muziek. Laat je meenemen in het feestgedruis! Als u een indruk wilt krijgen, hieronder is een lied.
</p>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/rmqiu1lZlZg?rel=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<br>
<br>
</div>
<button class="accordion">Scène 8</button>
<div class="panel">
<p>
We zijn terug bij Jozef en Maria. Ze zijn op zoek naar een plek om te overnachten. En het kindje kan bijna geboren worden. Daarom kloppen ze aan bij een ‘herberg’. Er ontstaat een gesprek met de herbergier. (De herbergier lag al te slapen. Het duurt even voordat hij wakker is.)
</p>
<br>
<br>
</div>
<button class="accordion">Scène 9</button>
<div class="panel">
<p>
Het engelenkoor zingt al een prachtig lied. God maakt een nieuw begin in deze wereld. Het licht is sterker dan de duisternis. Een klein en kwetsbaar nieuw begin. God biedt onvoorwaardelijk zijn liefde aan. En vergeet niet, de impact is groot. Tot op de dag van vandaag. (Anders had je deze wandeling ook niet gelopen 😊)
</p>
<br>
<br>
</div>
<button class="accordion">Scène 10</button>
<div class="panel">
<p>
Een herder staat op de zeepkist. Om hem heen staan andere personen (dorpsbewoner, soldaat, zwerver) en zij horen van het wonderlijke verhaal dat hij heeft meegemaakt: Een engel, engelenzang en God die een nieuw begin maakt. Een kind dat geboren is. En de aansporing klinkt om door te lopen! Ga op zoek naar dit kind en leer God kennen in zijn liefde!
</p>
<br>
<br>
</div>
<button class="accordion">Scène 11</button>
<div class="panel">
<p>
Midden in Getsewoud een opvallend beeld. Een oude stal met Jozef en Maria. Hun kindje Jezus is geboren. Een klein jongetje, hij lijkt heel gewoon. Maar hij is de Zoon van God, licht in de duisternis, redder bij uitstek, bron van liefde en vergeving, man van vrede en recht. Een ster is geboren. In Hem biedt God een nieuw begin aan, een uniek reddingsplan te midden van gebrokenheid en gebrekkigheid. (Maar verbijsterend genoeg vertelt de bijbel ook dat mensen Hem later niet zullen begrijpen. Hij zal onschuldig veroordeeld worden en sterven aan een kruis, 33 jaar oud. Maar Gods macht is sterker dan de dood. Jezus staat op. Hij leeft! Licht is sterker dan de duisternis!)
<br>
Naast de stal staan mensen die een prachtig lied zingen. Het lied laat je horen hoe jij de echte betekenis van kerst in jouw leven kunt ontdekken. Hieronder kunt u het lied nog een keer luisteren.
</p>
<audio controls>
<source src="source/music/scene_liedje.mp3" type="audio/mpeg">
Helaas is uw smartphone niet in staat om dit audiofragment af te spelen, wij adviseren u om bij te werken naar de nieuwste updates.
</audio>
<br>
<br>
</div>
<button class="accordion">Scène 12</button>
<div class="panel">
<p>
Nu kom je op het marktplein met een koopman, een timmerman, een visverkoper, etc. Maar ook met veel gezelligheid, muziek. En ja, hier kunnen de kinderen hun formulier van de speurtocht inleveren. Het is feest! En dat moet aan alles te merken zijn.
</p>
<br>
<br>
</div>
<button class="accordion">Scène 13</button>
<div class="panel">
<p>
Hier staan opnieuw schildersezels. Maar nu staan er spiegels op: Jij bent een mooi kunstwerk! Jij bent geliefd door God! Sta op en schitter in Gods licht! (En je kunt hier ook een foto laten maken. Toffe herinnering aan deze kerstwandeling!)
</p>
<br>
<br>
</div>
<button class="accordion">Scène 14</button>
<div class="panel">
<p>
Samen met WoonZorgcentrum In ’t Zomerpark hebben we een heuse herberg gemaakt. Gezellige live muziek op de achtergrond en warme chocomel. Op de heuvel vind je ook een verlicht kruis, gemaakt door leerlingen van het HVC. Je kunt er een kaarsje aansteken, een gebed doen.
</p>
<br>
<br>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
<script>
var slideIndex = 1;
showDivs(slideIndex);
var myIndex = 0;
carousel();
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-white";
}
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9000);
}
</script>
</body>
</html>