-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
961 lines (955 loc) · 61.7 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
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
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description"
content="Explore the story of Christophe Plantin and his journey in the 16th-century printing industry.">
<link rel="icon" type="image/svg+xml" href="/logo-moretus-plantin-museum.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inconsolata:[email protected]&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="src/css/reset.css">
<link rel="stylesheet" href="src/css/style.css">
<title>Plantin Story</title>
</head>
<body dir="ltr">
<header>
<svg style="display:none">
<symbol id="navicon" viewBox="0 0 56 56" fill="none">
<line class="nav__path" x1="17" y1="21" x2="38" y2="21" stroke="#B10A3A" stroke-width="2" />
<line class="nav__path" x1="17" y1="28" x2="38" y2="28" stroke="#B10A3A" stroke-width="2" />
<line class="nav__path" x1="17" y1="35" x2="38" y2="35" stroke="#B10A3A" stroke-width="2" />
<circle class="nav__circle" cx="28" cy="28" r="27" stroke="#B10A3A" stroke-width="2" />
</symbol>
<symbol id="close" viewBox="0 0 56 56" fill="none">
<rect x="1" y="1" width="54" height="54" rx="27" stroke="#B10A3A" stroke-width="2" />
<line x1="17.747" y1="36.8388" x2="36.8389" y2="17.747" stroke="#B10A3A" stroke-width="2" />
<line x1="19.1612" y1="17.747" x2="38.2531" y2="36.8388" stroke="#B10A3A" stroke-width="2" />
</symbol>
</svg>
<nav class="nav">
<div class="nav__buttons">
<a href="https://museumplantinmoretus.be/en" class="nav__button nav__button--left" aria-label="homepage Plantin-Moretus Museum" hreflang="en">
<svg width="56" height="57" viewBox="0 0 56 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle class="nav__circle" cx="28" cy="28.1111" r="27" stroke="#B10A3A" stroke-width="2" />
<path class="nav__path"
d="M38 29H39V27H38V29ZM18.2929 27.2929C17.9024 27.6834 17.9024 28.3166 18.2929 28.7071L24.6569 35.0711C25.0474 35.4616 25.6805 35.4616 26.0711 35.0711C26.4616 34.6805 26.4616 34.0474 26.0711 33.6569L20.4142 28L26.0711 22.3431C26.4616 21.9526 26.4616 21.3195 26.0711 20.9289C25.6805 20.5384 25.0474 20.5384 24.6569 20.9289L18.2929 27.2929ZM38 27L19 27V29L38 29V27Z"
fill="#B10A3A" />
</svg>
</a>
<button aria-label="hamburger menu" class="nav__button nav__button--menu nav__button--right hidden no-js"
aria-expanded="false" aria-controls="nav__list">
<svg role="img" aria-labelledby="svg-title" focusable="false">
<title id="svg-title">Menu</title>
<use id="iconlink" xlink:href="#navicon"></use>
</svg>
</button>
</div>
<ul class="nav__list no-js" id="nav__list">
<li class="nav__item"><a class="nav__link link-hover" href="index.html#start">start</a></li>
<li class="nav__item"><a class="nav__link link-hover" href="index.html#intro">introduction</a></li>
<li class="nav__item"><a class="nav__link link-hover" href="index.html#business-plan">a business plan</a></li>
<li class="nav__item"><a class="nav__link link-hover" href="index.html#first-prints">first prints</a></li>
<li class="nav__item"><a class="nav__link link-hover" href="index.html#heretics">heretics</a></li>
<li class="nav__item"><a class="nav__link link-hover" href="index.html#closure">closure</a></li>
</ul>
</nav>
<div class="header__content" id="start">
<ul class="story">
<li>
<a href="index.html" class="overlap">
<img class="overlap__item story__background" src="src/assets/svg/bookmark.svg" alt="bookmark" width="307"
height="64" />
<p class="overlap__item story__title link-hover">I. Plantin</p>
</a>
</li>
<li class="overlap story-hidden visually-hidden">
<img class="overlap__item story__background" src="src/assets/svg/bookmark-2.svg" alt="bookmark" width="307"
height="64" />
<p class="overlap__item story__title">II. 01/03/2025</p>
</li>
<li class="overlap story-hidden visually-hidden">
<img class="overlap__item story__background" src="src/assets/svg/bookmark-3.svg" alt="bookmark" width="307"
height="64" />
<p class="overlap__item story__title">III. 01/05/2025</p>
</li>
<li class="overlap story-hidden visually-hidden">
<img class="overlap__item story__background" src="src/assets/svg/bookmark-4.svg" alt="bookmark" width="307"
height="64" />
<p class="overlap__item story__title">IV. 01/07/2025</p>
</li>
<li class="overlap story-hidden visually-hidden">
<img class="overlap__item story__background" src="src/assets/svg/bookmark-5.svg" alt="bookmark" width="307"
height="64" />
<p class="overlap__item story__title">V. 01/09/2025</p>
</li>
<li class="overlap story-hidden visually-hidden">
<img class="overlap__item story__background" src="src/assets/svg/bookmark-6.svg" alt="bookmark" width="307"
height="64" />
<p class="overlap__item story__title">VI. 01/11/2025</p>
</li>
</ul>
<h1 class="visually-hidden">Christophe Plantin</h1>
<div class="overlap">
<svg class="header__path path overlap__item path-hidden" width="1800" height="500" viewBox="0 0 1440 396"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M-1.5001 96.5C62.8371 187.046 -31.6038 294.371 111.892 363.418C236.052 423.161 418.478 386.305 508.727 339.155C605.432 288.633 609.507 178.375 658.843 107.852C699.734 49.4004 792.845 -6.25552 934.763 2.11323C1076.68 10.482 1082.11 91.5104 1179.81 203.918C1277.51 316.326 1441.5 371.5 1441.5 371.5"
stroke="#6D762C" stroke-width="2" stroke-dasharray="12 12" />
</svg>
<div class="header__hero overlap__item">
<p class="hero__title hero__title--top container--s">Christophe</p>
<div class="hero__graphic graphic overlap">
<img class="graphic__svg hero__graphic--bg overlap__item" src="src/assets/svg/background-hero.svg"
alt="Plantin buste background" width="390" height="372" />
<picture class="graphic__img hero__graphic--fg overlap__item">
<source sizes="(min-width: 440px) 320px, calc(57.5vw + 79px)" type="image/avif" srcset="
src/assets/img/avif/plantin-buste_svqk1e_c_scale,w_100.avif 100w,
src/assets/img/avif/plantin-buste_svqk1e_c_scale,w_380.avif 380w,
src/assets/img/avif/plantin-buste_svqk1e_c_scale,w_626.avif 626w,
src/assets/img/avif/plantin-buste_svqk1e_c_scale,w_797.avif 797w">
<img src="src/assets/img/fallback/plantin-buste.png " alt="Christophe Plantin buste" width="1190"
height="1435" />
</picture>
</div>
<p class="hero__title hero__title--bottom container--s">Plantin</p>
<div class="hero__subtitle container--s overlap">
<img class="subtitle__svg overlap__item" src="src/assets/svg/background-subtitle.svg" alt="paint stroke"
width="379" height="213" />
<p class="subtitle__p overlap__item">And how to start a business in the 16th century</p>
</div>
<div class="hero__note note container--s overlap">
<img class="note__svg overlap__item" src="src/assets/svg/background-note.svg" alt="paper note" width="336"
height="107" />
<p class="note__p overlap__item">Follow in the footsteps of Plantin as the Plantin-Moretus Museum
brings his eventful
journey back alive!</p>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="intro" id="intro">
<h2 class="visually-hidden">Introduction</h2>
<div class="intro__year overlap">
<img class="year__svg overlap__item" src="src/assets/svg/background-year.svg" alt="fluent brush stroke"
width="800" height="405" />
<div class="year__mask overlap__item">
<p class="year__p year__p--after">
<span class="digit">1</span>
<span class="digit">5</span>
<span class="digit">5</span>
<span class="digit">0</span>
</p>
<p class="year__p year__p--before">
<span class="digit">2</span>
<span class="digit">0</span>
<span class="digit">2</span>
<span class="digit">5</span>
</p>
</div>
</div>
<div class="overlap">
<svg class="intro__path path overlap__item path-hidden" width="1818" height="874" viewBox="0 0 1818 874"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M1.40429 14.8551C56.5716 2.72584 189.36 -12.4882 279.174 23.6893C368.988 59.8669 421.883 233.208 428.108 327.054C438.476 483.375 371.227 772.632 565.672 787.514C808.73 806.117 837.65 689.687 1028.99 684.452C1220.32 679.217 1333.13 731.498 1468.23 823.489C1576.31 897.082 1745.43 871.818 1816.48 849.986"
stroke="#6D762C" stroke-width="2" stroke-linecap="square" stroke-dasharray="12 12" />
</svg>
<div class="intro__content container--s overlap__item">
<div class="intro__map overlap">
<img class="map__svg overlap__item" src="src/assets/svg/background-map.svg" alt="paper background"
width="529" height="506" />
<picture class="map__img overlap__item">
<source sizes="448px" type="image/avif" srcset="
src/assets/img/avif/map_vhapaw_c_scale,w_200.avif 200w,
src/assets/img/avif/map_vhapaw_c_scale,w_497.avif 497w,
src/assets/img/avif/map_vhapaw_c_scale,w_726.avif 726w,
src/assets/img/avif/map_vhapaw_c_scale,w_926.avif 926w,
src/assets/img/avif/map_vhapaw_c_scale,w_1000.avif 1000w">
<img src="src/assets/img/fallback/map.png" alt="Map of Antwerp" width="1032" height="600" />
</picture>
</div>
<div class="big-letter letter-i-1">I</div>
<p class="intro__p intro__p--1"><span class="replace-letter">I</span>t’s 1555 in <span
class="highlight">Antwerp</span>, a thriving hub
of
trade and ideas, and the perfect place for an ambitious entrepreneur
like you.
The printing press is revolutionizing the world, and books are in high demand. They’re spreading
knowledge
and
power—but
more importantly, they’re making money.</p>
<p class="intro__p intro__p--2"><span class="highlight">You’re Christophe Plantin,</span> and your goal is
simple: make a fortune by tapping into the booming book market.
The risks
are high. One wrong move could cost you everything. </p>
<p class="intro__p intro__p--3">But the rewards? They could set you up for life. With
ambition and
determination, you’re ready to build a printing empire. Will you succeed? Or fall into the dangers of
this
high-stakes
business?</p>
<div class="intro__bell overlap">
<img class="bell__svg overlap__item" src="src/assets/svg/background-bell.svg" alt="paper background bell"
width="260" height="295" />
<picture class="bell__img overlap__item">
<source sizes="260px" type="image/avif" srcset="
src/assets/img/avif/bell_cch36q_c_scale,w_200.avif 200w,
src/assets/img/avif/bell_cch36q_c_scale,w_516.avif 516w,
src/assets/img/avif/bell_cch36q_c_scale,w_733.avif 733w,
src/assets/img/avif/bell_cch36q_c_scale,w_944.avif 944w">
<img src="src/assets/img/fallback/bell.png" alt="Big bell" width="1000" height="780" />
</picture>
</div>
<img class="splash intro__splash" src="src/assets/svg/splash-1.svg" alt="ink splashes" width="172"
height="188" />
</div>
</div>
</section>
<section class="profile">
<h2 class="visually-hidden">Profile</h2>
<img class="profile__card--top" src="src/assets/svg/big-card-top.svg" alt="rough paper" width="1241"
height="70" />
<div class="overlap profile__overlap">
<img class="profile__card overlap__item" src="src/assets/svg/big-card.svg" alt="business card" width="1325"
height="857" />
<div class="profile__content overlap__item container--s">
<h3 class="profile__name">Christophe Plantin</h3>
<ul class="profile__basics">
<li class="basics__item">
<h4 class="basics__title">Born</h4>
<p class="basics__p">1520, near Tours, France</p>
</li>
<li class="basics__item">
<h4 class="basics__title">Profession</h4>
<p class="basics__p">Bookbinder and aspiring printer</p>
</li>
<li class="basics__item">
<h4 class="basics__title">Residence</h4>
<p class="basics__p">Antwerp, city of opportunity</p>
</li>
</ul>
<div class="profile__graphic overlap">
<img class="profile__svg overlap__item" src="src/assets/svg/background-profile.svg" alt="painted background"
width="319" height="355" />
<picture class="profile__img overlap__item">
<source sizes="316px" type="image/avif" srcset="
src/assets/img/avif/plantin-profile_ncpbfe_c_scale,w_200.avif 200w,
src/assets/img/avif/plantin-profile_ncpbfe_c_scale,w_570.avif 570w">
<img src="src/assets/img/fallback/plantin-profile.png" alt="Christophe Plantin portrait" width="550"
height="617" />
</picture>
</div>
<div class="profile__goals">
<h4 class="goals__title">Goals</h4>
<ul class="goals__list">
<li class="goals__item">
<p class="goals__p">Run 26 printing presses.</p>
<li>
<li class="goals__item">
<p class="goals__p">Print 25,000 books in one year.</p>
<li>
<li class="goals__item">
<p class="goals__p">Make a lot of money</p>
<li>
</ul>
</div>
<div class="profile__bio">
<h4 class="bio__title">Biography</h4>
<p class="bio__p">Christophe Plantin was born around 1520 in Touraine, France. His early years weren’t
easy—he
lost his mother as a child
and was raised by a cleric in Lyon, where he gained a modest education. After apprenticing as a
bookbinder
in Lyon, he
married and began building a trade. Paris, however, proved too risky for an ambitious printer, with
harsh
crackdowns on
anything deemed heretical. In 1548, Plantin moved to Antwerp, a thriving center of trade and printing,
hoping for a
fresh start in a safer, more prosperous city.</p>
</div>
</div>
</div>
<img class="profile__card--bottom" src="src/assets/svg/big-card-bottom.svg" alt="rough paper" width="1241"
height="88" />
</section>
<section class="humanists" id="business-plan">
<div class="overlap overlap--box">
<h2 class="visually-hidden">Humanists</h2>
<svg class="humanists__path path overlap__item path-hidden" width="1489" height="1291" viewBox="0 0 1489 1291"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M1488 35.4421C1472.46 135.281 1319.63 205.5 1124.5 205.5C864.15 205.5 822.648 79.224 596 35.4423C492.798 15.5068 329.184 -31 126.5 35.4424C-30.1909 86.8076 -27.5034 394.815 69.0408 458.998C145.404 509.764 220.752 518.804 329.184 518.804C448.556 518.804 673.983 528.397 673.983 852.845C673.983 952.132 747.516 1122.3 917.576 1203.48C1053.13 1275.42 1202.41 1290 1488 1290"
stroke="#6D762C" stroke-width="2" stroke-dasharray="20 20" />
</svg>
<div class="humanists__group overlap__item">
<div class="humanists__graphic overlap">
<img class="humanists__svg overlap__item" src="src/assets/svg/background-humanists.svg"
alt="background paper" width="658" height="484" />
<div class="humanists__imgs overlap__item">
<picture class="humanists__img humanists__davinci">
<source
sizes="(min-width: 1600px) 459px, (min-width: 960px) 28.55vw, (min-width: 740px) 459px, calc(61.67vw + 15px)"
type="image/avif" srcset="
src/assets/img/avif/davinci_u5m4cy_c_scale,w_200.avif 200w,
src/assets/img/avif/davinci_u5m4cy_c_scale,w_433.avif 433w,
src/assets/img/avif/davinci_u5m4cy_c_scale,w_599.avif 599w,
src/assets/img/avif/davinci_u5m4cy_c_scale,w_790.avif 790w,
src/assets/img/avif/davinci_u5m4cy_c_scale,w_865.avif 865w">
<img src="src/assets/img/fallback/davinci.png" alt="Davinci drawing" width="761" height="495" />
</picture>
<picture class="humanists__img humanists__lipsius">
<source
sizes="(min-width: 1600px) 458px, (min-width: 960px) 28.39vw, (min-width: 740px) 458px, calc(61.43vw + 16px)"
type="image/avif" srcset="
src/assets/img/avif/lipsius_l6998x_c_scale,w_200.avif 200w,
src/assets/img/avif/lipsius_l6998x_c_scale,w_593.avif 593w,
src/assets/img/avif/lipsius_l6998x_c_scale,w_736.avif 736w">
<img src="src/assets/img/fallback/lipsius.png" alt="Justus Lipsius" width="736" height="763" />
</picture>
</div>
</div>
<div class="humanists__content">
<div class="humanists__text container--s">
<div class="big-letter letter-e">E</div>
<p class="humanists__p humanists__p--1"><span class="replace-letter">E</span>ver since the Renaissance
kicked
off
in Italy, new ideas have been
bubbling up all
over Europe, and they’ve finally
made their way to the Low Countries. <span class="highlight">Humanism’s the big thing.</span> Scholars
are hungry for knowledge, and
books
are flying
off the shelves.</p>
<p class="humanists__p humanists__p--2"> People want to learn, to debate, to challenge the old ways. And
for
a
printer like
you, that’s an <span class="highlight">opportunity</span> to cash
in. Print those humanist works, and you’ll be rolling in it.</p>
</div>
<a href="https://museumplantinmoretus.be/en/printing-office" hreflang="en"
class="humanists__note note--arrow container--s overlap">
<img class="note__svg overlap__item" src="src/assets/svg/background-note-2.svg" alt="paper note"
width="336" height="146" />
<p class="note__p overlap__item">Curious about the humanist works that started it all? You can see these
up
close at the Plantin-Moretus Museum</p>
</a>
</div>
<div class="humanists__ideas overlap">
<div class="cta ideas__cta">
<p class="cta__p">Pop the Bubbles</p>
</div>
<div class="ideas__titles overlap__item">
<h3 class="ideas__title">Humanist</h3>
<h3 class="ideas__title">Ideas</h3>
</div>
<ul class="ideas__bubbles overlap__item">
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">"Truth cannot be controlled by any one institution."</p>
</li>
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">"The classics hold wisdom that can lead to progress."</p>
</li>
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">"Education is the key to a better world."</p>
</li>
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">"Reform, not repression, will bring true change."</p>
</li>
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">“The power of reason can challenge all authority.”</p>
</li>
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">“Knowledge belongs to all, not just the elite.”</p>
</li>
<li class="bubble overlap">
<img class="overlap__item bubble--before" src="src/assets/svg/background-bubble-before.svg" alt="bubble"
width="180" height="180" />
<img class="overlap__item bubble--after visually-hidden"
src="src/assets/svg/background-bubble-after.svg" alt="bubble" width="180" height="180" />
<p class="bubble__p overlap__item">"Human potential is limitless."</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="reformation">
<h2 class="visually-hidden">Reformation</h2>
<div class="overlap">
<img class="reformation__circle circle__dark overlap__item" src="src/assets/svg/reformation-circle.svg"
alt="circle" width="2002" height="2100" />
</div>
<div class="background overlap">
<svg class="reformation__path path overlap__item path-hidden" width="2125" height="404" viewBox="0 0 2125 404"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M1.37989 312.828C25.9297 225 188.877 93.3417 364.411 82.8724C623.429 67.4238 673.69 115.859 735.111 153.985C835.496 216.295 866.315 343.687 1054.34 382.379C1242.36 421.071 1336.77 400.066 1499.07 361.727C1626.5 331.625 1707.62 256.735 1879.81 83.7825C2013.86 -50.8664 2087.33 20.4008 2123.92 15.8611"
stroke="#6D762C" stroke-width="2" stroke-dasharray="12 12" />
</svg>
<div class="reformation__content overlap__item">
<div class="reformation__graphic overlap">
<img class="reformation__svg overlap__item" src="src/assets/svg/background-church.svg"
alt="background paper" width="524" height="487" />
<div class="reformation__imgs overlap__item container--s">
<picture class="reformation__img reformation__pope">
<source
sizes="(min-width: 1440px) 359px, (min-width: 960px) calc(28.04vw - 41px), (min-width: 720px) 388px, (min-width: 620px) calc(-32.5vw + 606px), 68.33vw"
type="image/avif" srcset="
src/assets/img/avif/pope_rbzbql_c_scale,w_200.avif 200w,
src/assets/img/avif/pope_rbzbql_c_scale,w_423.avif 423w,
src/assets/img/avif/pope_rbzbql_c_scale,w_571.avif 571w,
src/assets/img/avif/pope_rbzbql_c_scale,w_736.avif 736w">
<img src="src/assets/img/fallback/pope.png" alt="Catholic Church" width="661" height="765" />
</picture>
<picture class="reformation__img reformation__chalice">
<source
sizes="(min-width: 1420px) 199px, (min-width: 960px) calc(16.14vw - 29px), (min-width: 740px) 216px, (min-width: 620px) calc(-14vw + 310px), 37.67vw"
type="image/avif" srcset="
src/assets/img/avif/kelk_b3ubrf_c_scale,w_200.avif 200w,
src/assets/img/avif/kelk_b3ubrf_c_scale,w_352.avif 352w">
<img src="src/assets/img/fallback/kelk.png" alt="chalice" width="291" height="517" />
</picture>
</div>
</div>
<div class="reformation__text container--s">
<div class="big-letter letter-b">B</div>
<p class="reformation__p reformation__p--1"><span class="replace-letter">B</span>ut then, there’s the
Reformation. Things are heating up, and the <span class="highlight">Catholic Church</span>
is not a fan of all these new ideas.
Printing religious texts that question the old order? That’s a quick way to get yourself in trouble, or
worse, put on
trial...</p>
<p class="reformation__p reformation__p--2"><span class="highlight">The Spanish rulers</span> are keeping a
close eye on what gets printed,
and they’re not
afraid to crack down on anything they
don’t like. Sure, there’s a profit to be made, but it’s a <span class="highlight">risky game</span>. One
wrong move, and your
business (and
neck) could be on the line.</p>
</div>
</div>
</div>
</section>
<section class="strategy">
<h2 class="strategy__title container--s">What do you do?</h2>
<p class="strategy__p container--s">Who do you want to print for? Choose your business strategy.</p>
<div class="strategy__container overlap">
<svg class="strategy__path path overlap__item path-hidden" width="1440" height="642" viewBox="0 0 1440 642"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M-90 122.5C29.5 282 52.3 246.734 231.5 249.534C455.5 253.034 138.655 399.304 325 569.034C454 686.532 656.5 649.532 672.5 528.032C688.5 406.532 705.977 113.856 775.5 51.0323C858.5 -23.9694 1026 -18.9641 1093 95.5356C1182.19 247.955 1042 583 1321 600.5C1463.19 609.419 1515 527.333 1538 498"
stroke="#6D762C" stroke-width="2" stroke-dasharray="12 12" />
</svg>
<ul class="strategy__cards container--s overlap__item">
<li class="card">
<div class="card-inner">
<div class="card-front overlap">
<svg class="card__svg svg-front overlap__item card-hidden" width="420" height="420"
viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M239.928 14.3294L24.1437 0L0 420H402.898L420 259.412L402.898 14.3294H239.928Z"
fill="#ECEAE5" />
</svg>
<div class="card__content overlap__item">
<img class="card__img img__church" src="src/assets/img/fallback/card-1-img.jpg" alt="holy angel"
width="282" height="320" />
<h3 class="card__title">In the Name of the Church (and Profit)</h3>
</div>
</div>
<div class="card-back overlap">
<svg class="card__svg svg-back overlap__item card-hidden" width="420" height="420" viewBox="0 0 420 420"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M180.072 14.3294L395.856 0L420 420H17.1018L0 259.412L17.1018 14.3294H180.072Z"
fill="#ECEAE5" />
</svg>
<div class="card__content overlap__item">
<p class="card__p">You’ve decided to print for the Church. The demand is steady, and you stay on the
good side of the powerful Spanish
rulers. Your business grows slowly but surely. <span class="highlight">You’re secure</span>, but you
never feel like you’re truly
pushing boundaries.
While others might be risking it all, you’re just getting by, quietly profiting but <span
class="highlight">never fully
reaching your potential.</span></p>
</div>
</div>
</div>
</li>
<li class="card">
<div class="card-inner">
<div class="card-front overlap">
<svg class="card__svg svg-front overlap__item card-hidden" width="420" height="420"
viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M420 0H32.8436L0 177.535L13.9336 420L166.209 391.849L420 407.286L393.626 290.141L420 0Z"
fill="#ECEAE5" />
</svg>
<div class="card__content overlap__item">
<img class="card__img img__science" src="src/assets/img/fallback/card-2-img.jpg"
alt="scientific drawing" width="434" height="318" />
<h3 class="card__title">Fuel the hungry brains</h3>
</div>
</div>
<div class="card-back overlap">
<svg class="card__svg svg-back overlap__item card-hidden" width="420" height="420" viewBox="0 0 420 420"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H387.156L420 177.535L406.066 420L253.791 391.849L0 407.286L26.3744 290.141L0 0Z"
fill="#ECEAE5" />
</svg>
<div class="card__content overlap__item">
<p class="card__p">You choose to align with the humanists. They fund your printing press, and for a
while, it’s
smooth sailing. But the
risk is always there—being caught by the Church could ruin everything. You’re forced to <span
class="highlight">keep your
operation
small,</span>
operating under the radar. Your dream of a booming business never quite materializes, and your
success
remains
<span class="highlight">limited
to the shadows.</span>
</p>
</div>
</div>
</div>
</li>
<li class="card card-1 card--plantin">
<div class="card-inner">
<div class="card-front overlap">
<svg class="card__svg svg-front overlap__item card-hidden" width="420" height="420"
viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M351.984 24.675L21.5385 0L0 177.45V406.875H53.8462L420 420L405.83 287.175V14.7L351.984 24.675Z"
fill="#ECEAE5" />
</svg>
<div class="card__content overlap__item">
<img class="card__img img__both" src="src/assets/img/fallback/card-3-img.jpg" alt="scientific drawing"
width="332" height="366" />
<h3 class="card__title card__title--long"><span class="striped">Play It Safe.</span><br />Play Both
Sides.
</h3>
</div>
</div>
<div class="card-back overlap">
<svg class="card__svg svg-back overlap__item card-hidden" width="420" height="420" viewBox="0 0 420 420"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M68.0162 24.675L398.462 0L420 177.45V406.875H366.154L0 420L14.17 287.175V14.7L68.0162 24.675Z"
fill="#ECEAE5" />
</svg>
<div class="card__content overlap__item">
<p class="card__p">You decide to take the risk and play both sides. Printing for the Church ensures
stability, while
secretly supporting
the humanists feeds your intellectual ambitions. It’s a <span class="highlight">high-risk</span>
game, with close calls and
constant
balancing, but
<span class="highlight">it
pays off.</span> Your business thrives, and you begin to gain influence. The danger of being
caught is
ever-present, but you’re determined to make it work.
</p>
<p class="plantins-choice card__p--plantin">Plantin's Choice</p>
</div>
</div>
</div>
</li>
</ul>
<div class="strategy__buttons buttons-hidden">
<button class="button-prev" aria-label="previous">
<img src="src/assets/svg/menu-back.svg" alt="arrow previous" width="56" height="56" />
</button>
<button class="button-next" aria-label="next">
<img src="src/assets/svg/menu-next.svg" alt="arrow next" width="56" height="56" />
</button>
</div>
</div>
</section>
<section class="printing" id="first-prints">
<h2 class="visually-hidden">Printing</h2>
<div class="printing__container overlap">
<svg class="printing__path path overlap__item path-hidden" width="1867" height="887" viewBox="0 0 1867 887"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M1866 1C1859.16 60.0303 1777.8 163.924 1507.09 107.255C1168.71 36.4182 938.493 263.729 946.814 424.961C955.135 586.193 962.346 721.522 847.517 803.989C732.688 886.455 655.026 891.213 358.246 883.283C120.822 876.94 6.54729 774.914 1 681.875"
stroke="#6D762C" stroke-width="2" stroke-dasharray="12 12" />
</svg>
<article class="printing__group overlap__item">
<h3 class="visually-hidden">Start Printing</h3>
<div class="printing__graphic overlap">
<img class="printing__svg overlap__item" src="src/assets/svg/background-press.svg" alt="paper background"
width="555" height="664" />
<div class="printing__imgs overlap__item container--s">
<picture class="printing__img printing__stamp">
<source
sizes="(min-width: 1360px) 264px, (min-width: 1040px) 19.67vw, (min-width: 700px) 278px, (min-width: 620px) calc(-30vw + 473px), 48.67vw"
type="image/avif" srcset="
src/assets/img/avif/stamp_pessmk_c_scale,w_200.avif 200w,
src/assets/img/avif/stamp_pessmk_c_scale,w_430.avif 430w">
<img src="src/assets/img/fallback/stamp.png" alt="old stamp" width="368" height="248" />
</picture>
<picture class="printing__img printing__press">
<source
sizes="(min-width: 1360px) 370px, (min-width: 1040px) 28vw, (min-width: 720px) 388px, (min-width: 620px) calc(-32.5vw + 606px), 68.33vw"
type="image/avif" srcset="
src/assets/img/avif/prinitng-press_wqvqkp_c_scale,w_200.avif 200w,
src/assets/img/avif/prinitng-press_wqvqkp_c_scale,w_360.avif 360w,
src/assets/img/avif/prinitng-press_wqvqkp_c_scale,w_479.avif 479w,
src/assets/img/avif/prinitng-press_wqvqkp_c_scale,w_608.avif 608w,
src/assets/img/avif/prinitng-press_wqvqkp_c_scale,w_672.avif 672w">
<img src="src/assets/img/fallback/prinitng-press.png" alt="old printing press" width="672"
height="906" />
</picture>
</div>
<div class="overlap__item printing__cta cta">
<button class="printing__button cta__p printing__cta--p" id="cta-button" aria-label="Hold button to print">
Hold to Print
</button>
</div>
</div>
<div class="printing__text container--s">
<div class="printed overlap">
<p class="printing__p printing__p--1 printing__p--before overlap__item">The year is 1555, and you're off
to
a
strong start. With the printing press in full swing, you've got your first big
break: humanists are funding your work. These forward-thinkers are eager to spread their ideas, and
you've
got the
perfect setup to help them do just that. Religious books are the easy money, but it's the humanists who
are
willing to
put their faith (and their cash) into your hands for something bigger: spreading knowledge and ideas
that
challenge the
status quo.</p>
<p class="printing__p printing__p--1 printing__p--after overlap__item">The year is 1555, and you're off to
a
strong start. With the printing press in full swing, you've
got your first big
break: humanists are funding your work. These forward-thinkers are eager to spread their ideas, and
you've
got the
perfect setup to help them do just that. Religious books are the easy money, but it's the humanists who
are
willing to
put their faith (and their cash) into your hands for something bigger: spreading knowledge and ideas
that
challenge
the
status quo.</p>
</div>
<p class="printing__p printing__p--2">Orders come pouring in, and <span class="highlight">your business
starts to grow.</span> You're
printing
faster than
ever, and the cash is flowing in.
You're quickly gaining a reputation, but with all that success, of course, comes danger....</p>
</div>
</article>
</div>
</section>
<section class="heretics" id="heretics">
<h2 class="visually-hidden">Heretics</h2>
<div class="heretics__warning">
<p class="warning__p">ALERT ALERT ALERT ALERT ALERT</p>
</div>
<div class="heretics__container overlap">
<svg class="heretics__path path overlap__item path-hidden" width="1786" height="1247" viewBox="0 0 1786 1247"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="draw-path"
d="M1785 1C1747.5 20 1602.83 23.4654 1393.73 38.0149C1164 54 1006.53 55.1479 755.189 38.014C469.03 18.5061 314.102 -16.5069 167.073 61.5244C20.0439 139.556 9.71542 247.599 1.81717 295.118C-6.08108 342.637 41.3084 530.713 230.259 558.724C419.209 586.735 578.998 471.689 713.268 493.698C847.538 515.707 828.704 591.237 828.704 649.761C828.704 708.284 741.824 1032.41 828.704 1133.95C915.584 1235.5 1080.84 1246 1301.38 1246C1477.82 1246 1683.54 1158.46 1785 1120.95"
stroke="#6D762C" stroke-width="2" stroke-dasharray="12 12" />
</svg>
<div class="heretics__group overlap__item">
<div class="heretics__content container--s">
<p class="heretics__p subtitle heretics__subtitle">It’s 1562, and things are about to get messy...</p>
<p class="heretics__p heretics__p--1">You’ve been away in Paris, minding your business and securing deals
when
suddenly... bang! Your workshop gets raided. And
it's bad. A pamphlet, one full of <span class="highlight">heretical content,</span> was printed on your
presses.</p>
<div class="heretics__graphic overlap">
<img class="heretics__svg overlap__item" src="src/assets/svg/background-heretics.svg"
alt="paper background" width="400" height="273" />
<picture class="heretics__img overlap__item">
<source sizes="(min-width: 1120px) 416px, (min-width: 960px) 384px, 416px" type="image/avif" srcset="
src/assets/img/avif/heretics_ttpd4b_c_scale,w_200.avif 200w,
src/assets/img/avif/heretics_ttpd4b_c_scale,w_684.avif 684w">
<img src="src/assets/img/fallback/heretics.png" alt="heretics" width="600" height="350" />
</picture>
<img class="heretics__svg--foreground overlap__item" src="src/assets/svg/cross-foreground.svg"
alt="crossed out" width="369" height="404" />
</div>
<p class="heretics__p heretics__p--2">The authorities don’t care that you were in Paris, <span
class="highlight">they’re coming for
you now.</span> The pamphlet’s got your name on it, and
you know what that means: everything you’ve worked for is on the line. They swoop in, grabbing your
presses, your books,
everything in sight. Your equipment is gone, your books are gone, and just like that, your reputation is
shot.</p>
</div>
<div class="heretics__choice">
<div class="choice__graphic overlap">
<img class="choice__svg overlap__item" src="src/assets/svg/background-feet.svg"
alt="paper background footsteps" width="503" height="311" />
<picture class="choice__img overlap__item">
<source sizes="(min-width: 1120px) 416px, (min-width: 960px) 384px, 416px" type="image/avif" srcset="
src/assets/img/avif/feet_tmqqnh_c_scale,w_200.avif 200w,
src/assets/img/avif/feet_tmqqnh_c_scale,w_1000.avif 1000w">
<img src="src/assets/img/fallback/feet.png" alt="footsteps" width="1006" height="622" />
</picture>
</div>
<div class="choice__content container--s">
<h2 class="choice__title">What do you do?</h2>
<ul class="choice__list">
<li class="choice__option choice__option--1">
<h3 class="option__title">Fight back</h3>
<p class="option__p hidden">Do you think you can take on the Catholic Church in a legal battle? Not
in 1562, my friend. You try, but it’s a losing
game. The Church has all the power, and you end up with nothing but a ruined reputation. And if you
thought it would be
a physical fight, you’re up against Philip II’s army. Spoiler: you don’t win.</p>
</li>
<li class="choice__option choice__option--2">
<h3 class="option__title">Flee to Paris</h3>
<div class="option__p hidden">
<p>It’s not the boldest move, but at least you make it out alive. You flee to
Paris, laying low for almost
two years. When you finally return to Antwerp, hoping to pick up the pieces, you find your assets
sold off. You’re back
to square one, with nothing but a reputation in tatters and a long road ahead.</p>
<p class="plantins-choice option__p--plantin">Plantin's Choice</p>
</div>
</li>
<li class="choice__option">
<h3 class="option__title">Turn yourself in</h3>
<p class="option__p hidden">You yourself in and hope for mercy. But instead, you’re hit with a massive
fine, forced to swear off heretical teachings,
and sentenced to a life under house arrest. Your freedom is gone, and so is your future...
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="hiding overlap">
<div class="light"></div>
<h2 class="visually-hidden">Hiding</h2>
<div class="black-background overlap__item"></div>
<div class="hiding__content overlap__item">
<div class="hiding__text container--s">
<div class="big-letter letter-i-2">I</div>
<p class="hiding__p hiding__p--1"><span class="replace-letter">I</span>t seems the only way of having a chance
at success, is going into hiding.
When you return to Antwerp, everything has
been sold off. Your presses, your equipment, your furniture—gone. But not everything is lost. With the help
of
some
loyal friends and a few well-placed connections, you manage to buy back what you can.</p>
<p class="hiding__p hiding__p--2"> It isn’t much, but it is enough. You rebuilt. Slowly, but surely. The
business started to grow again, but the shadow of
those heresy charges never quite disappeared. So, you find a way to get rid of them for once and for all...
the Polyglot
Bible</p>
</div>
<div class="hiding__graphic overlap">
<img class="hiding__svg overlap__item" src="src/assets/svg/background-hiding.svg" alt="paper background"
width="451" height="518" />
<div class="hiding__imgs overlap__item">
<div class="hiding__img hiding__globe overlap">
<picture class="overlap__item globe__img">
<source sizes="272px" type="image/avif" srcset="
src/assets/img/avif/globe_f54d0a_c_scale,w_200.avif 200w,
src/assets/img/avif/globe_f54d0a_c_scale,w_364.avif 364w,
src/assets/img/avif/globe_f54d0a_c_scale,w_506.avif 506w,
src/assets/img/avif/globe_f54d0a_c_scale,w_518.avif 518w">
<img src="src/assets/img/fallback/globe.png" alt="globe" width="495" height="609" />
</picture>
<img class="globe--foreground overlap__item" src="src/assets/svg/foreground-globe.svg"
alt="swirl around planet" width="450" height="144" />
</div>
<picture class="hiding__img hiding__books">
<source sizes="(min-width: 1360px) 217px, (min-width: 960px) calc(15vw + 12px), 192px" type="image/avif"
srcset="
src/assets/img/avif/books_vmksa4_c_scale,w_200.avif 200w,
src/assets/img/avif/books_vmksa4_c_scale,w_435.avif 435w">
<img src="src/assets/img/fallback/books.png" alt="stack of books" width="344" height="283" />
</picture>
</div>
</div>
</div>
</section>
<section class="ending" id="closure">
<h2 class="visually-hidden">Closure</h2>
<div class="ending__container">
<div class="ending__group">
<div class="ending__content">
<div class="ending__text container--s">
<p class="ending__p ending__subtitle subtitle">But, things aren’t over yet ...</p>
<div class="big-letter letter-y">Y</div>
<p class="ending__p ending__p--2"><span class="replace-letter">Y</span>our journey as Plantin ends here,
but his story
is
far
from over. The Polyglot Bible
is just the start. It's a masterpiece
that leads to more successes, struggles, and daring decisions. Want to find out how he navigated the
challenges and see
his incredible work up close?</p>
<p class="ending__p ending__shoutout">Visit the Plantin-Moretus Museum and explore the rest of his
fascinating story!
</p>
</div>
<div class="ending__visuals overlap">
<a class="ending__cta cta overlap__item rinting__button"
href="https://ttk.recreatex.be/Exhibitions/Register?ID=193d593e-f57a-ed11-9592-a48785620fa0&refresh=y&language=en"
hreflang="en">
<p class="cta__p ending__cta--p">Plan your Visit</p>
</a>
<div class="ending__graphic overlap overlap__item">
<img class="ending__svg overlap__item" src="src/assets/svg/background-ending.svg"
alt="background paper museum" width="457" height="324" />
<picture class="ending__img overlap__item">
<source sizes="414px" type="image/avif" srcset="
src/assets/img/avif/museum-outside_oyi0h5_c_scale,w_200.avif 200w,
src/assets/img/avif/museum-outside_oyi0h5_c_scale,w_419.avif 419w,
src/assets/img/avif/museum-outside_oyi0h5_c_scale,w_595.avif 595w,
src/assets/img/avif/museum-outside_oyi0h5_c_scale,w_737.avif 737w,
src/assets/img/avif/museum-outside_oyi0h5_c_scale,w_811.avif 811w">
<img src="src/assets/img/fallback/museum-outside.png" alt="Plantin-Moretus Museum building"
width="770" height="510" />
</picture>
</div>
</div>
</div>
<div class="ending__footer container--s">
<a class="footer__back" href="index.html#start">
<p class="back__p endnote">Back to Top</p>
<img class="footer__arrow" src="src/assets/svg/menu-back.svg" alt="arrow up" width="56" height="56" />
</a>
<div class="footer__socials">
<p class="socials__p endnote">Follow our socials!</p>
<ul class="socials__list">
<li class="social">
<a href="https://www.instagram.com/plantinmoretus" hreflang="nl" aria-label="instagram"
class="social__link"><svg class="social__svg" width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="social__path"
d="M8.82102 0C3.97905 0 0 3.97372 0 8.82102V21.179C0 26.021 3.97372 30 8.82102 30H21.179C26.021 30 30 26.0263 30 21.179V8.82102C30 3.97905 26.0263 0 21.179 0H8.82102ZM8.82102 2.72727H21.179C24.5508 2.72727 27.2727 5.44922 27.2727 8.82102V21.179C27.2727 24.5508 24.5508 27.2727 21.179 27.2727H8.82102C5.44922 27.2727 2.72727 24.5508 2.72727 21.179V8.82102C2.72727 5.44922 5.44922 2.72727 8.82102 2.72727ZM23.054 5.71023C22.3668 5.71023 21.8182 6.25888 21.8182 6.94602C21.8182 7.63317 22.3668 8.18182 23.054 8.18182C23.7411 8.18182 24.2898 7.63317 24.2898 6.94602C24.2898 6.25888 23.7411 5.71023 23.054 5.71023ZM15 6.81818C10.4989 6.81818 6.81818 10.4989 6.81818 15C6.81818 19.5011 10.4989 23.1818 15 23.1818C19.5011 23.1818 23.1818 19.5011 23.1818 15C23.1818 10.4989 19.5011 6.81818 15 6.81818ZM15 9.54545C18.0309 9.54545 20.4545 11.9691 20.4545 15C20.4545 18.0309 18.0309 20.4545 15 20.4545C11.9691 20.4545 9.54545 18.0309 9.54545 15C9.54545 11.9691 11.9691 9.54545 15 9.54545Z"
fill="#B10A3A" />
</svg></a>
</li>
<li class="social">
<a href="https://www.facebook.com/museumplantinmoretus/" hreflang="nl" aria-label="facebook"
class="social__link"><svg width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="social__path"
d="M21.928 16.7476L22.7545 11.3592H17.5846V7.86252C17.5846 6.38836 18.3068 4.95146 20.6224 4.95146H22.9729V0.364102C22.9729 0.364102 20.8397 0 18.8003 0C14.5423 0 11.7594 2.58059 11.7594 7.25244V11.3592H7.02637V16.7476H11.7594V29.7735C12.7084 29.9224 13.6812 30 14.672 30C15.6629 30 16.6356 29.9224 17.5846 29.7735V16.7476H21.928Z"
fill="#B10A3A" />
</svg></a>
</li>
<li class="social">
<a href="https://www.tripadvisor.com/Attraction_Review-g188636-d242684-Reviews-Museum_Plantin_Moretus-Antwerp_Antwerp_Province.html"
hreflang="en" aria-label="trip advisor" class="social__link"><svg width="30" height="30"
viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_383_60)">
<path class="social__path"
d="M7.50927 13.1143C5.43001 13.1143 3.74902 14.7952 3.74902 16.8687C3.74902 18.9421 5.43001 20.623 7.50342 20.623C9.57683 20.623 11.2578 18.9421 11.2578 16.8687C11.2637 14.7952 9.58268 13.1143 7.50927 13.1143ZM7.50927 19.5571C6.02743 19.5571 4.82087 18.3564 4.82087 16.8687C4.82087 15.381 6.02157 14.1802 7.50927 14.1802C8.99697 14.1802 10.1918 15.3868 10.1918 16.8687C10.1918 18.3505 8.99112 19.5571 7.50927 19.5571Z"
fill="#B10A3A" />
<path class="social__path"
d="M7.52075 18.731C8.55265 18.731 9.38917 17.8944 9.38917 16.8626C9.38917 15.8307 8.55265 14.9941 7.52075 14.9941C6.48886 14.9941 5.65234 15.8307 5.65234 16.8626C5.65234 17.8944 6.48886 18.731 7.52075 18.731Z"
fill="#B10A3A" />
<path class="social__path"
d="M22.5034 13.1143C20.43 13.1143 18.749 14.7952 18.749 16.8687C18.749 18.9421 20.43 20.623 22.5034 20.623C24.5768 20.623 26.2578 18.9421 26.2578 16.8687C26.2578 14.7952 24.5768 13.1143 22.5034 13.1143ZM22.5034 19.5571C21.0216 19.5571 19.815 18.3564 19.815 16.8687C19.815 15.381 21.0157 14.1802 22.5034 14.1802C23.9911 14.1802 25.186 15.3868 25.186 16.8687C25.186 18.3505 23.9853 19.5571 22.5034 19.5571Z"
fill="#B10A3A" />
<path class="social__path"
d="M22.5149 18.731C23.5468 18.731 24.3833 17.8944 24.3833 16.8626C24.3833 15.8307 23.5468 14.9941 22.5149 14.9941C21.483 14.9941 20.6465 15.8307 20.6465 16.8626C20.6465 17.8944 21.483 18.731 22.5149 18.731Z"
fill="#B10A3A" />
<path class="social__path"
d="M27.786 11.5504L29.9941 9.35987H25.5193C23.0125 7.3216 18.8481 5.62305 14.9883 5.62305C11.1226 5.62305 6.99336 7.3216 4.48653 9.35987H0L2.20812 11.5504C0.843421 12.9093 0 14.7894 0 16.8687C0 21.0155 3.36197 24.3774 7.50879 24.3774C9.41234 24.3774 11.1519 23.6687 12.4756 22.4973L15.0176 24.3657L17.5303 22.5383L17.501 22.468C18.8305 23.6512 20.5759 24.3716 22.4971 24.3716C26.6439 24.3716 30.0059 21.0096 30.0059 16.8628C30 14.7894 29.1507 12.9093 27.786 11.5504ZM21.5541 9.41844C17.9988 9.86358 15.2109 12.7921 15 16.4177C14.7833 12.7863 11.9895 9.85186 8.42249 9.41844C10.2148 8.12988 12.499 7.49731 14.9883 7.49731C17.4775 7.49731 19.7618 8.12988 21.5541 9.41844ZM7.50879 22.5032C4.39282 22.5032 1.87427 19.9788 1.87427 16.8687C1.87427 13.7585 4.39867 11.2341 7.50879 11.2341C10.6189 11.2341 13.1433 13.7585 13.1433 16.8687C13.1374 19.9788 10.6189 22.5032 7.50879 22.5032ZM22.5029 22.5032C19.3928 22.5032 16.8684 19.9788 16.8684 16.8687C16.8684 13.7585 19.3928 11.2341 22.5029 11.2341C25.613 11.2341 28.1374 13.7585 28.1374 16.8687C28.1316 19.9788 25.613 22.5032 22.5029 22.5032Z"
fill="#B10A3A" />
</g>
</svg></a>
</li>
<li class="social">
<a href="https://www.youtube.com/user/PlantinMoretusmuseum" hreflang="nl" aria-label="youtube"
class="social__link"><svg width="30" height="26" viewBox="0 0 30 26" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="social__path"
d="M15 0C10.655 0 6.8149 0.500488 4.47115 0.880859C2.53305 1.19617 0.969051 2.81775 0.612981 4.96484C0.310997 6.79163 0 9.46423 0 12.8125C0 16.1608 0.310997 18.8334 0.612981 20.6602C0.969051 22.8073 2.53305 24.4338 4.47115 24.7441C6.82392 25.1245 10.6776 25.625 15 25.625C19.3224 25.625 23.1761 25.1245 25.5288 24.7441C27.4669 24.4338 29.0309 22.8073 29.387 20.6602C29.689 18.8284 30 16.1508 30 12.8125C30 9.47424 29.6935 6.79663 29.387 4.96484C29.0309 2.81775 27.4669 1.19617 25.5288 0.880859C23.1851 0.500488 19.345 0 15 0ZM15 2.5625C19.1917 2.5625 22.9372 3.03796 25.2043 3.40332C26.1779 3.56348 26.9396 4.37927 27.1154 5.44531C27.3948 7.13696 27.6923 9.64441 27.6923 12.8125C27.6923 15.9756 27.3948 18.488 27.1154 20.1797C26.9396 21.2457 26.1824 22.0665 25.2043 22.2217C22.9282 22.587 19.1647 23.0625 15 23.0625C10.8353 23.0625 7.06731 22.587 4.79567 22.2217C3.82212 22.0665 3.0604 21.2457 2.88462 20.1797C2.60517 18.488 2.30769 15.9856 2.30769 12.8125C2.30769 9.6344 2.60517 7.13696 2.88462 5.44531C3.0604 4.37927 3.81761 3.56348 4.79567 3.40332C7.05829 3.03796 10.8083 2.5625 15 2.5625ZM11.5385 5.48535V20.1397L13.2692 19.0586L21.3462 13.9336L23.0769 12.8125L21.3462 11.6914L13.2692 6.56641L11.5385 5.48535ZM13.8462 9.88965L18.4255 12.8125L13.8462 15.7354V9.88965Z"
fill="#B10A3A" />
</svg></a>
</li>
<li class="social">
<a href="https://www.pinterest.com/plantinmoretus/" hreflang="en" aria-label="pinterest"
class="social__link"><svg width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="social__path" fill-rule="evenodd" clip-rule="evenodd"
d="M14.814 0C6.59851 0 0 6.65197 0 14.9377C0 21.0878 3.61051 26.2341 8.83951 28.6194C8.83951 25.8181 8.81999 26.1792 10.9545 17.0706C9.78149 14.7034 10.6935 10.7952 13.32 10.7952C16.965 10.7952 14.4885 16.1993 14.067 18.3259C13.6935 19.958 14.9385 21.2139 16.4325 21.2139C19.296 21.2139 21.162 17.5728 21.162 13.3059C21.162 10.0418 18.9225 7.65674 15.063 7.65674C8.20051 7.65674 6.46051 15.2993 8.83951 17.6982C9.43801 18.6043 8.83951 18.6467 8.83951 19.8325C8.42401 21.0864 5.1045 19.2638 5.1045 14.5613C5.1045 10.2928 8.5905 5.27271 15.6855 5.27271C21.2865 5.27271 25.0215 9.41438 25.0215 13.8083C25.0215 19.7073 21.7845 23.9758 17.055 23.9758C15.4365 23.9758 13.9425 23.0964 13.4445 22.092C12.54 25.6102 12.357 27.3939 10.9545 29.3723C12.324 29.7489 13.6935 30 15.1875 30C23.403 30 30 23.348 30 15.0637C29.628 6.65241 23.0295 0 14.814 0Z"
fill="#B10A3A" />
</svg>
</a>
</li>
<li class="social">
<a href="https://medium.com/@museumplantinmoretus" hreflang="en" aria-label="medium"
class="social__link"><svg width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="social__path"
d="M8.46104 6.44531C13.134 6.44531 16.9218 10.2596 16.9218 14.9644C16.9218 19.6693 13.1337 23.4832 8.46104 23.4832C3.78841 23.4832 0 19.6693 0 14.9644C0 10.2596 3.78812 6.44531 8.46104 6.44531ZM21.9727 6.94434C24.3092 6.94434 26.2033 10.5347 26.2033 14.9644H26.2035C26.2035 19.393 24.3095 22.9845 21.973 22.9845C19.6366 22.9845 17.7425 19.393 17.7425 14.9644C17.7425 10.5358 19.6363 6.94434 21.9727 6.94434ZM28.5121 7.77969C29.3337 7.77969 30 10.9964 30 14.9644C30 18.9313 29.334 22.1492 28.5121 22.1492C27.6903 22.1492 27.0245 18.9322 27.0245 14.9644C27.0245 10.9966 27.6906 7.77969 28.5121 7.77969Z"
fill="#B10A3A" />
</svg></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="progress--bg"></div>
<div class="progress--fg"></div>
<div class="overlay"></div>
<script type="module" src="src/js/script.js"></script>
<script type="module" src="src/js/animations.js"></script>
</body>
</html>