-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
177 lines (150 loc) · 8.3 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
176
177
<html><head><base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Het is weer tijd voor Halloween</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Het is weer tijd voor Halloween</h1>
</header>
<div class="spook-switch">
<label for="spooky-input">
<div class="input-title">Spooky modus:</div>
<div class="input-subtitle">Waarschuwing: heel eng.</div>
</label>
<svg display="none">
<symbol id="light" viewBox="0 0 576 512"><path fill="currentColor" d="M154.7 103.7C138.7 93.9 128 76.2 128 56c0-30.9 25.1-56 56-56c24.2 0 44.7 15.3 52.6 36.7C252.5 33.5 269.8 32 288 32s35.5 1.5 51.4 4.7C347.3 15.3 367.8 0 392 0c30.9 0 56 25.1 56 56c0 20.2-10.7 37.9-26.7 47.7c1.8 7.4 2.7 15.5 2.7 24.3c0 70.7-60.9 128-136 128s-136-57.3-136-128c0-8.8 .9-16.8 2.7-24.3zM240 128a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm112-16a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm0 64c0-26.5-28.7-48-64-48s-64 21.5-64 48s28.7 48 64 48s64-21.5 64-48zm-32-8c0 13.3-14.3 24-32 24s-32-10.7-32-24s14.3-24 32-24s32 10.7 32 24zM50.3 178.3c20.8-16.4 51-12.8 67.4 8L143.5 219c73.7 93.5 215.4 93.5 289.1 0l25.8-32.7c16.4-20.8 46.6-24.4 67.4-8s24.4 46.6 8 67.4l-25.8 32.7c-17.7 22.4-37.9 41.3-59.9 56.7l0 64.9 16.6 0c3.9-27.1 27.2-48 55.4-48c30.9 0 56 25.1 56 56c0 2.7-.2 5.4-.6 8l-13 53.3c-5.8 23.8-26.3 40.9-50.4 42.6l0 .1-4 0-28 0L96 512l-28 0-4 0 0-.1c-24.1-1.7-44.6-18.8-50.4-42.6L.6 416c-.4-2.6-.6-5.3-.6-8c0-30.9 25.1-56 56-56c28.2 0 51.6 20.9 55.4 48l16.6 0 0-64.9c-22-15.4-42.3-34.3-59.9-56.7L42.3 245.7c-16.4-20.8-12.8-51 8-67.4zM256 352c-35.3 0-64 28.7-64 64l192 0c0-35.3-28.7-64-64-64l-64 0z"/>
</symbol>
<symbol id="dark" viewBox="0 0 512 512"><path fill="currentColor" d="M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9c0 .4 0 .7 0 1.1l0 64c0 26.5 21.5 48 48 48l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 64 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16l0 48 48 0c26.5 0 48-21.5 48-48l0-64c0-.4 0-.7 0-1.1zM96 256a64 64 0 1 1 128 0A64 64 0 1 1 96 256zm256-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
</svg>
<label class="switch">
<input id="spooky-input" class="switch__input" type="checkbox" role="switch" name="dark" />
<svg class="switch__icon light" width="24px" height="24px" aria-hidden="true">
<use href="#light" />
</svg>
<svg class="switch__icon dark" width="24px" height="24px" aria-hidden="true">
<use href="#dark" />
</svg>
<span class="switch__inner"></span>
<span class="switch__sr">Dark Mode</span>
</label>
</div>
<main>
<div class="info-section">
<h2>Durf jij te komen?</h2>
<p>🎃 Datum: 15 Maart 2025</p>
<p>⏰ Tijd: 20:00 - 01:00</p>
<p>📍 Locatie: Tbd</p>
<p>👻 Je favoriete Halloween feest is opgestaan uit de dood. Kom feesten en val in de prijzen met je meest creatieve kostuum!</p>
<a href="/event.ics" download="event.ics">Voeg het event toe aan je kalender</a>
</div>
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="images/fairlyodd.JPG" alt="Farly Odd Parents" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/utrecht.JPG" alt="Het gaybrapad en het nijntje stoplicht" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/yipyip.JPG" alt="Yipyipyipyipyipyipiyip" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/hertogjan.JPG" alt="Hertog Jan" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/spook.JPG" alt="Spook" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/mondriaan.JPG" alt="Mondriaan kunstwerk" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/dracula.JPG" alt="Dracula" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/zombie.JPG" alt="Zombie" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/fight.JPG" alt="Fighter" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/skin.JPG" alt="Skin Scientists" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/scoobydoo.JPG" alt="Scooby doo team" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/lindalezeressen.JPG" alt="Linda lezeressen" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/birds.JPG" alt="The birds" width="800" height="400">
</div>
<div class="carousel-item">
<img src="images/cake.JPG" alt="Let them eat cake" width="800" height="400">
</div>
</div>
<a href="#" class="carousel-control left"><</a>
<a href="#" class="carousel-control right">></a>
</div>
<div class="contact-form-section">
<h2>RSVP (Reservering Spooky Verkleed Partijtje)</h2>
<form class="spooky-form " method="POST" id="form">
<input type="hidden" name="access_key" value="4575277f-2c60-4954-9e96-e82b972c3bb5">
<label for="naam">Wat is jouw naam?</label>
<input type="text" placeholder="Skelet Pompoenhoofd" id="naam" name="Naam" required>
<label for="hoeveel">Hoeveel engerds meldt jij aan?</label>
<select id="hoeveel" name="Hoeveel" required>
<option value="1">Ik been zo alleen (1)</option>
<option value="2">Ik neem een slachtoffer mee (2)</option>
<option value="3">Ik kom met een enge kinder tweeling (3)</option>
<option value="4">Ik breng een spookfamilie mee (4)</option>
<option value="5+">Het is eng hoeveel vrienden ik heb (5+)</option>
</select>
<label for="email" >Ik wil spooky updates ontvangen over dit evenement</label>
<input type="email"placeholder="[email protected]" id="email" name="email">
<label for="message">Laat een eng bericht achter..</label>
<textarea id="message" name="message" placeholder="Er was eens een meisje.. die altijd al naar een verkleedfeest wilde en ze vonden alleen haar linkerarm terug..."></textarea>
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<button type="submit">Stuur dit bericht, als je durft...</button>
<div id="result-fail" style="display: none";>
OOeeeehhhh er ging iets verkeerd... Heeel eng.. heeeel spooky.....
</div>
<div id="result-success" style="display: none";>
<h3>Je bericht is succesvol verstuurd</h3>
<video autoplay loop muted playsinline>
<source src="/gifs/spooky-success.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</form>
<div class="info-section">
<h2>FAQ</h2>
<p>Moet je je verkleden?: Ja! Het event is leuker en mensen verkleden zich gekker als iedereen zeker weet dat iedereen verkleed komt. </p>
<p> Mag ik een +1 meenemen?: Ja! Gebruik het spooooky formulier om ons even te laten weten met hoeveel mensen je komt zodat we daar rekening mee kunnen houden.</p>
<p>Kost het geld? Soort van, wij coveren de organisatie kosten en wat te drinken aan het begin, maar op een gegeven moment wordt de bar betaald.</p>
</div>
<script>
</script>
</div>
<a href="mailto:[email protected]">Vragen? Ideeen? Email ons!</a>
<div class="ghost emoji" style="top: 20%; left: 5%;">👻</div>
<div class="ghost emoji" style="top: 40%; right: 5%;">👻</div>
<div class="ghost emoji" style="bottom: 10%; left: 10%;">👻</div>
<div class="ghost emoji" style="top: 10%; right: 5%;">👻</div>
<div class="ghost emoji" style="bottom: 12%; left: 20%;">👻</div>
<!-- Floating Pumpkins -->
<div class="pumpkin pumpkin1 emoji">🎃</div>
<div class="pumpkin pumpkin2 emoji">🎃</div>
<div class="pumpkin pumpkin3 emoji">🎃</div>
<div class="pumpkin pumpkin4 emoji">🎃</div>
<!-- Floating Scared -->
<div class="scared scared2 emoji">😱</div>
<div class="scared scared3 emoji">😱</div>
</body>
</main>
<footer>
<script src="index.js"></script>
</footer>
</html>