-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
254 lines (231 loc) · 8.49 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
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="author" content="Robin van Rooij">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Centraal Museum - Hét kunstmuseum van Utrecht</title>
<link href="styles/style.css" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="images/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--google fonts: FranklinBook font-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;700;900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div> <!--deze div helpt bij het stylen van de responsive site: het naast elkaar zetten van de content op desktop groote (1024x857)-->
<!--iframe met video van het centraal museum vult het bovenste deel van het scherm-->
<iframe src="https://player.vimeo.com/video/546015896?dnt=1&loop=1&background=1"></iframe>
<img src="images/logo-left.svg" alt="logo centraal museum"> <!--logo van het museum-->
<a href="ontdek.html">Ontdek het museum</a> <!--link naar pagina 2-->
<button><!--hamburger menu button--> </button>
</div>
<nav> <!--hamburger menu, deze is verborgen tot op de button gedrukt wordt-->
<img src="images/logo.png" alt="logo centraal museum"> <!--logo van het museum-->
<h2>Plan uw bezoek</h2>
<ul>
<li><a href="href=ontdek.html">Zien en doen</a></li>
<li><a href="ontdek.html">Praktische informatie</a></li>
<li><a href="ontdek.html">Onderwijs, groepen en families</a></li>
<li><a href="ontdek.html">Zaalverhuur</a></li>
</ul>
<h2>Ontdek het museum</h2>
<ul>
<li><a href="ontdek.html">Ontmoet de iconen</a></li>
<li><a href="ontdek.html">Bekijk de collectie online</a></li>
<li><a href="ontdek.html">Tentoonstellingsarchief</a></li>
<li><a href="ontdek.html">Programmalijnen</a></li>
<li><a href="ontdek.html">Over de collectie</a></li>
</ul>
<h2>Over het museum</h2>
<ul>
<li><a href="ontdek.html">Steun het museum</a></li>
<li><a href="ontdek.html">Organisatie</a></li>
<li><a href="ontdek.html">Vacatures</a></li>
<li><a href="ontdek.html">Nieuws & pers</a></li>
<li><a href="ontdek.html">Klantenservice & contact</a></li>
</ul>
</nav>
<section>
<ul> <!--lijst met links naar andere pagina's-->
<li>
<a href="ontdek.html">Tickets</a>
</li>
<li>
<a href="ontdek.html">Nu te zien</a>
</li>
<li>
<a href="ontdek.html">Openingstijden & info</a>
</li>
</ul>
</section>
</header>
<main>
<!--op deze pagina staan artikelen over de verschillende tentoonstellingen die te zien zijn in het museum-->
<article> <!--artikel over tentoonstelling Joost van Bleiswijk-->
<a href="ontdek.html"><img src="images/joost.jpg" alt="foto van Joost van Bleiswijk"></a>
<p>03 JUL 2021 - 20 OKT 2021</p>
<a href="ontdek.html">
<h2>Joost van Bleiswijk: Reconnect</h2>
</a>
<a href="ontdek.html">Meer info</a>
</article>
<article> <!--artikel over tentoonstelling Antonis Pittas-->
<a href="ontdek.html"><img src="images/antonis.jpg" alt="foto van kunst door Antonis Pittas"></a>
<p>14 AUG 2021 - 31 OKT 2021</p>
<a href="ontdek.html">
<h2>Antonis Pittas</h2>
</a>
<a href="ontdek.html">Meer info</a>
</article>
<section> <!--in deze section kan je online foto's van de collectie bekijken-->
<h5>Collectie online</h5>
<a href="ontdek.html">
<h1>Blader door de collectie</h1>
</a>
<section> <!--in deze section staat een scrolbare lijst met foto's van kunstwerken-->
<ul>
<li>
<figure> <!--kunstwerk 1-->
<img src="images/carousel1.jpg" alt="foto van kunstwerk De koppelaarster van van Honthorst">
<figcaption>
<a href="ontdek.html">
<h3>De koppelaarster</h3>
</a>
<p>Gerard van Honthorst, 1625</p>
</figcaption>
</figure>
</li>
<li>
<figure> <!--kunstwerk 2-->
<img src="images/carousel2.jpg" alt="foto van Rood-blauwe leunstoel door Rietveld">
<figcaption>
<a href="ontdek.html">
<h3>Rood-blauwe leunstoel</h3>
</a>
<p>Gerrit Thomas Rietveld, 1950-1959</p>
</figcaption>
</figure>
</li>
<li>
<figure> <!--kunstwerk 3-->
<img src="images/dumas.jpg" alt="foto van The brides of Dracula door Marlene Dumas">
<figcaption>
<a href="ontdek.html">
<h3>The brides of Dracula</h3>
</a>
<p>Marlene Dumas, 1997</p>
</figcaption>
</figure>
</li>
</ul>
</section>
</section>
<section> <!--in deze section staan alle aanbevolen artikelen-->
<a href="ontdek.html"><h1>Aanbevolen</h1></a>
<article> <!--aanbevolen artikel 1-->
<a href="ontdek.html"><img src="images/lokaal.jpg" alt="poster voor evenement Utrecht Lokaal"></a>
<p>18 SEP 2021 - 28 NOV 2021</p>
<a href="ontdek.html">
<h2>Utrecht Lokaal: Jasper Hagenaar</h2>
</a>
<a href="ontdek.html">Meer info</a>
</article>
<article> <!--aanbevolen artikel 2-->
<a href="ontdek.html"><img src="images/botanisch.jpg" alt="foto van bomen"></a>
<p>11 SEP 2021 - 09 JAN 2022</p>
<a href="ontdek.html">
<h2>De botanische revolutie</h2>
</a>
<p>Over de noodzaak van kunst en tuinieren.</p>
<a href="ontdek.html">Meer info</a>
</article>
</section>
<section> <!--in deze section kan je je via een formulier aanmelden voor de mail lijst-->
<h3>Info over tentoonstellingen in uw mail?</h3>
<form action="#">
<input type="email" name="email" id="email" value="Uw mailadres" required>
<input type="submit" value="Inschrijven">
</form>
<a href="ontdek.html">Privacy statement</a>
</section>
<section> <!--in deze section staan nieuws artikelen en blog posts-->
<a href="ontdek.html">
<h1>Nieuws & blogs</h1>
</a>
<article> <!--nieuws artikel 1-->
<a href="ontdek.html"><img src="images/jeroen.jpg" alt="foto kunstwerk van Kooijmans"></a>
<p>03 SEPT 2021</p>
<a href="ontdek.html">
<h2>Jeroen Kooijmans schenkt film aan Centraal Museum</h2>
</a>
<p>New York is Eating Me & The Cactus Dance is 11 september 2021 te zien in Het HEM.</p>
</article>
<article> <!--nieuws artikel 2-->
<a href="ontdek.html"><img src="images/patricia.jpg" alt="foto kunstwerk 'Guess Who's Coming To Dinner Too'?"></a>
<p>26 AUG 2021</p>
<a href="ontdek.html">
<h2>Nieuwe aankoop van Patricia Kaersenhout</h2>
</a>
<p>Samen met drie andere musea is 'Guess Who's Coming To Dinner Too?' aangekocht.</p>
</article>
<article> <!--blog post 1-->
<a href="ontdek.html"><img src="images/merian.jpg" alt="foto kunstwerk van Merian"></a>
<p>23 AUG 2021</p>
<a href="ontdek.html">
<h2>Uit de schaduw van Maria Sibylla Merian</h2>
</a>
<p>Patricia Kaersenhout brengt een ode aan de onzichtbare vrouwen achter Merian.</p>
</article>
</section>
<section>
<a href="ontdek.html">Meer...</a> <!--link naar meer nieuws artikelen en blog posts-->
<ul> <!--lijst met social media links-->
<li>
<a href="ontdek.html"><img src="./images/facebook.png" alt="facebook icoon"></a>
<!--source: Pixel Perfect-->
</li>
<li>
<a href="ontdek.html"><img src="./images/twitter.png" alt="twitter icoon"></a>
<!--source: Pixel Perfect-->
</li>
<li>
<a href="ontdek.html"><img src="./images/whatsapp.png" alt="whatsapp icoon"></a>
<!--source: Pixel Perfect -->
</li>
</ul>
</section>
</main>
<footer>
<img src="images/logo.png" alt="logo centraal museum"> <!--logo museum-->
<h5>Contact</h5>
<p>Agnietenstraat 1</p>
<p>3512 XA Utrecht</p>
<a href="ontdek.html">
<address>info@centraalmuseum.nl</address>
</a>
<h5>Openingstijden</h5>
<p>Dinsdag t/m zondag 11.00 - 17.00 uur</p>
<a href="ontdek.html">Plan uw bezoek</a>
<ul> <!--lijst met social media links-->
<li>
<a href="ontdek.html"><img src="./images/twitter.png" alt="twitter icoon"></a>
<!--source: Pixel Perfect -->
</li>
<li>
<a href="ontdek.html"><img src="./images/facebook.png" alt="facebook icoon"></a>
<!--source: Pixel Perfect-->
</li>
<li>
<a href="ontdek.html"><img src="./images/instagram.png" alt="instagram icoon"></a>
<!--source: Pixel Perfect -->
</li>
<li>
<a href="ontdek.html"><img src="./images/youtube.png" alt="youtube icoon"></a>
<!--source: Pixel Perfect -->
</li>
</ul>
</footer>
<script src="scripts/script.js"></script>
</body>
</html>