forked from fdnd-task/look-and-feel-corporate-identity
-
Notifications
You must be signed in to change notification settings - Fork 0
/
robuust.html
464 lines (454 loc) · 27.1 KB
/
robuust.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
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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/mobile.css">
<link rel="stylesheet" href="./styles/tablet.css">
<link rel="stylesheet" href="./styles/desktop.css">
<title>Robuust</title>
</head>
<body>
<header>
<img id="logo" src="images/logo_vervoerregio_amsterdam.png" alt="logo Vervoerregio Amsterdam">
<div id="after-curve"></div>
<div class="topnav">
<nav id="head-nav">
<a href="index.html">Home</a>
<a href="#">Ons doel</a>
<a href="#">Checklist</a>
<a href="#">Contact</a>
</nav>
</div>
</header>
<!-- Navigatie list aan linkerkant page, primair -->
<nav id="side-nav" aria-label="side-navigation">
<ol>
<li><button class="nav-button" id="nav-button" data-id="card2_0">Robuust</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_1">Structuur</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_2">Spaties / tabs</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_3">Afbeelding alternatieven</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_4">Alt-texten</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_5">Decoratieve afbeeldingen</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_6">Tekstuele alternatieven</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_7">Transcript</button></li>
<li><button class="nav-button" id="nav-button" data-id="card2_8">Tabel</button></li>
</ol>
</nav>
<main class="main-content">
<nav id="side-nav-primair" aria-label="primair-side-navigation">
<ul>
<li>
<a href="./waarneembaar.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Waarneembaar</p>
</a>
</li>
<li>
<a href="./bedienbaar.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Bedienbaar</p>
</a>
</li>
<li>
<a href="./begrijpelijk.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Begrijpelijk</p>
</a>
</li>
<li>
<a href="./robuust.html">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220"
height="140" viewBox="0 0 220 140">
<defs>
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1"
gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#b9005f" />
<stop offset="1" stop-color="#e30059" />
</linearGradient>
</defs>
<path id="Icon_awesome-folder" data-name="Icon awesome-folder"
d="M199.375,27.833h-82.5L89.375,4.5H20.625C9.234,4.5,0,12.335,0,22V127c0,9.665,9.234,17.5,20.625,17.5h178.75C210.766,144.5,220,136.665,220,127V45.333C220,35.668,210.766,27.833,199.375,27.833Z"
transform="translate(0 -4.5)" fill="url(#linear-gradient)" />
</svg>
<p>Robuust</p>
</a>
</li>
</ul>
</nav>
<!-- Hier komt de main content van de robuust page -->
<section class="cards-section" id="cards-section" aria-label="Criteria-robuust">
<div id="card2_0" class="card-heading">
<article id="introductie">
<h2>Robuust</h2>
<p>Om te voldoen aan <a class="tooltip"
href="https://wcag.nl/kennis/richtlijnen/wcag-2-1-richtlijnen/#robuust">WCAG
2.1 Principe 4: <span class="tooltiptext">Link naar de richtlijnen</span></a> Begrijpelijk
moet ervoor worden gezorgd dat mensen en software de
content kunnen begrijpen en snappen hoe de website werkt.</p>
<ul>
<li>Maak gebruik van foutloze code</li>
<li>Zorg voor maximale compatibiliteit met huidige en toekomstige browsers en andere
hulpprogramma’s.</li>
<li>Zorg ervoor dat hulptechnologieën begrijpen waar elke functie voor dient en in welke staat
deze zich bevindt.</li>
</ul>
<p class="p-onderwerp">Kies een onderwerp om te beginnen</p>
</article>
</div>
<!-- Card 1 -->
<div id="card2_1" class="card-heading hide-show">
<article id="structuur">
<h2>Structuur</h2>
<p>
Is de juiste structuur van de tekst aangegeven via de editor van
het CMS of in HTML-codes
</p>
</article>
<!-- Artikel Uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Als een website “onder water” goed in elkaar zit, dan is de basis
voor toegankelijkheid gelegd. Ontwikkelaars kunnen in de
technische standaard WCAG 2.1 meer lezen over technieken die
gebruikt kunnen worden om aan de toegankelijkheidseisen te
voldoen.
</p>
</div>
<!-- Tip button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Tip uitleg -->
<div id="article-tip" aria-label="structuur-tip">
<h3>Tip:</h3>
<p>
Voor het bouwen van websites zijn internationale standaarden
ontwikkeld. Door de standaarden te volgen gebruik je de code op de
manier waarop deze bedoeld is. Hulptechnologieën sluiten aan bij
de ze standaarden.
</p>
</div>
</div>
<!-- Card 2 -->
<div id="card2_2" class="card-heading hide-show">
<article id="spaties-tabs">
<h2>Spaties / Tabs</h2>
<p>
Er zijn geen spaties of tabs gebruikt om kolommen, tabellen of
speciale teksteffecten te maken.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Als je wilt dat jouw tekst in kolommen of in een tabel verschijnt,
gebruik dan niet de spatiebalk of de tab-toets om dit te doen,
omdat dit de tekst onbegrijpelijk maakt voor bezoekers die gebruik
maken van assistentietechnologie. Kolommen die op deze manier
worden aangemaakt worden rij voor rij gelezen, niet kolom voor
kolom.
</p>
</div>
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="tabel-tip">
<h3>Tip:</h3>
<p>
Tabellen moeten gemaakt worden met de tabelfuncties van de editor
in het CMS. Voor kolommen en woorden met letters die verder uit
elkaar staan, moet CSS gebruikt worden.
</p>
</div>
</div>
<!-- Card 3 -->
<div id="card2_3" class="card-heading hide-show">
<article id="afbeelding-alternatieven">
<h2>Afbeelding alternatieven</h2>
<p>
Afbeeldingen die informatie overdragen hebben een tekstueel
alternatief
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Door afbeeldingen te voorzien van een tekstueel alternatief maak
je ze dus toegankelijk voor bezoekers die de afbeeldingen niet
kunnen zien. Ook zoekmachines zoals Google maken gebruik van
tekstalternatieven bij het indexeren van websites.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="afbeelding-alternatief-tip">
<h3>Tip:</h3>
<p>
Een tekstueel alternatief werkt alleen als de beschrijving
adequaat is. In veel gevallen gaat het om ‘vertellen wat je ziet’.
Soms gaat het juist om ‘vertellen wat dit doet’, bijvoorbeeld bij
een button in een formulier. En als een afbeelding geen informatie
toevoegt, is het beter ook geen tekstalternatief te geven. Denk
goed na over de tekstuele beschrijving. Iemand die alleen de
tekstalternatieven ziet zou de informatie nog steeds moeten kunnen
begrijpen en de website nog steeds moeten kunnen gebruiken.
</p>
</div>
</div>
<!-- Card 4 -->
<div id="card2_4" class="card-heading hide-show">
<article id="alt-teksten">
<h2>Alt teksten</h2>
<p>
Afbeeldingen die als link worden gebruikt, hebben een alt-tekst
die het doel van de link beschrijft.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
De alt-tekst beschrijft het doel of de richting van de afbeelding
in plaats van de afbeelding zelf.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="alt-tekst-tip">
<h3>Tip:</h3>
<p>
Als de afbeelding in een link staat met een tekst erbij, dan is de
afbeelding ook niet-informatief en ook dan volstaat een leeg
alt-attribuut. De screenreader leest dan de linktekst op. Als de
afbeelding aanklikbaar is en in de link staat geen tekst, dan
gebruik je wel een alt-tekst en beschrijf je waar de afbeelding
naartoe linkt.
</p>
</div>
</div>
<!-- Card 5 -->
<div id="card2_5" class="card-heading hide-show">
<article id="decoratieve-afbeeldingen">
<h2>Decoratieve afbeeldingen</h2>
<p>
Decoratieve afbeeldingen kunnen door hulptechnologieën genegeerd
worden.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Decoratieve afbeeldingen zijn niet relevant voor gebruikers van
hulptechnologieën. De decoratieve afbeeldingen mogen de
begrijpelijkheid niet beïnvloeden.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="decoratieve-afbeeldingen-tip">
<h3>Tip:</h3>
<p>Dit kan bijvoorbeeld door de alt-tekst leeg te laten.</p>
</div>
</div>
<!-- Card 6 -->
<div id="card2_6" class="card-heading hide-show">
<article id="tekstuele-alternatieven">
<h2>Tekstuele alternatieven</h2>
<p>
Audio en video hebben een kort tekstueel alternatief dat de inhoud
beschrijft.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Alle vormen van audio en video moeten een kort tekstalternatief
krijgen. Dit is vergelijkbaar met de alt-tekst van afbeeldingen.
Door deze korte tekst weten bezoekers die hulptechnologie
gebruiken, ook als de audio of video zelf niet toegankelijk zou
zijn, in ieder geval waar ze mee te maken hebben.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="tekstuele-alternatieven-tip">
<h3>Tip:</h3>
<p>
Hoe je dit alternatief plaatst hangt af van de techniek die
gebruikt is om het multimediabestand op de webpagina te plaatsen.
</p>
</div>
</div>
<!-- Card 7 -->
<div id="card2_7" class="card-heading hide-show">
<article id="transcript">
<h2>Transcript</h2>
<p>
Filmpjes, bewegend beeld en audio hebben (indien nodig) een
transcript.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
In het transcript vertel je zo compleet mogelijk het verhaal van
het filmpje. Je vertelt wat er gebeurt, dus wat er te zien en te
horen is, en wat er gezegd wordt, door wie. Eventuele interactieve
elementen neem je ook op in het transcript.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="transcript-tip">
<h3>Tip:</h3>
<p>
Kun je in het filmpje bijvoorbeeld op een knop drukken, dan neem
je in het transcript een link op naar de pagina waar je die actie
kunt uitvoeren.
</p>
</div>
</div>
<!-- Card 8 -->
<div id="card2_8" class="card-heading hide-show">
<article id="tabel">
<h2>Tabel</h2>
<p>
Informatie die in een tabel hoort, staat ook écht in een tabel en
heeft de juiste HTML-code.
</p>
</article>
<!-- Article uitleg -->
<div class="article-uitleg">
<h3>Uitleg</h3>
<p class="uitleg">
Gegevens in de tabel hebben zowel horizontaal als verticaal een
relatie met elkaar. Met de juiste HTML-code kun je die relaties
expliciet maken. Je geeft dan aan welke cellen koppen zijn en
welke cellen gegevens bevatten. Bij complexe tabellen geef je ook
nog eens aan welke kop precies bij welke cellen hoort. Bezoekers
die hulptechnologie gebruiken hebben hier profijt van. Doordat de
relaties in de code staan kan de hulptechnologie de informatie uit
de tabel op een overzichtelijke en logische manier presenteren.
</p>
</div>
<!-- Tip Button -->
<!-- <button id="expand-tip">Tip!</button> -->
<!-- Article tip -->
<div id="article-tip" aria-label="tabel-tip">
<h3>Tip:</h3>
<p>
Sommige tabellen zitten heel ingewikkeld in elkaar, met meerdere
niveaus en koppen. Het kan dan nodig zijn om code toe te voegen
aan de tabel om de verbanden duidelijk te maken. Stel jezelf
echter de vraag of de tabel niet kan worden vereenvoudigd of
gesplitst in meerdere tabellen.
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-container">
<div class="footer-social-media">
<div class="logo-footer">
<a href="#"><img src="./images/logo_vervoerregio_amsterdam.png"></a>
</div>
<div class="icon-container">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z" />
</svg></a>
</div>
</div>
<div class="footer-adres">
<p class="contact-info kopje">Neem contact op</p>
<div class="adres-info">
<div class="svg-container">
<svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
</svg>
<svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
</svg>
<svg class="footer-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 256c-35.3 0-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64s-28.7 64-64 64z" />
</svg>
</div>
<div class="contact-info-container">
<p class="contact-info link">[email protected]</p>
<p class="contact-info">020-5273700</p>
<p class="contact-info">1000 AP Amsterdam, Postbus 626</p>
</div>
</div>
</div>
<div class="feedback-button">-Work in progess -</div>
</div>
<p id="copyright-year"></p>
</footer>
<script type="text/javascript" src="./scripts/javascript.js"></script>
</body>
</html>