-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
324 lines (299 loc) · 16.9 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iCloud</title>
<link rel="icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="styles/style.css">
<!-- check for apple fonts in map -->
</head>
<body class="home">
<header>
<nav>
<ul>
<!-- afstanden overal vast!! -->
<li>
<a href="#"><svg>
<g>
<path
d="M77.005 23.215c1.568 0 2.767-.779 3.382-2.06h.061V23H83V8.204h-2.552v5.793h-.061c-.615-1.302-1.855-2.092-3.392-2.092-2.726 0-4.479 2.143-4.479 5.65v.01c0 3.497 1.742 5.65 4.489 5.65Zm.768-2.153c-1.64 0-2.654-1.333-2.654-3.497v-.01c0-2.163 1.025-3.496 2.654-3.496 1.568 0 2.675 1.374 2.675 3.496v.01c0 2.133-1.096 3.497-2.675 3.497Zm-13.05 2.153c1.64 0 2.757-.758 3.32-1.917h.052V23h2.552V12.13h-2.552v6.297c0 1.579-.933 2.635-2.398 2.635-1.455 0-2.173-.872-2.173-2.41v-6.521h-2.552v7.024c0 2.522 1.363 4.06 3.751 4.06Zm-10.826 0c3.187 0 5.257-2.122 5.257-5.65v-.02c0-3.507-2.1-5.64-5.267-5.64-3.157 0-5.248 2.154-5.248 5.64v.02c0 3.518 2.06 5.65 5.258 5.65Zm.01-2.06c-1.63 0-2.665-1.303-2.665-3.59v-.02c0-2.256 1.056-3.568 2.645-3.568 1.619 0 2.664 1.302 2.664 3.568v.02c0 2.277-1.035 3.59-2.644 3.59ZM44.137 23h2.55V8.204h-2.55V23Zm-8.357.256c3.402 0 5.913-2.102 6.292-5.137l.02-.102H39.5l-.031.102c-.482 1.825-1.804 2.84-3.69 2.84-2.572 0-4.232-2.07-4.232-5.362v-.01c0-3.282 1.65-5.343 4.233-5.343 1.926 0 3.228 1.056 3.658 2.748l.051.195h2.593l-.01-.103c-.39-3.014-2.89-5.137-6.292-5.137-4.243 0-6.938 2.912-6.938 7.64v.01c0 4.727 2.685 7.66 6.938 7.66ZM25.424 10.572a1.4 1.4 0 1 0 0-2.8c-.799 0-1.424.626-1.424 1.406 0 .759.625 1.394 1.424 1.394ZM24.144 23h2.551V12.13h-2.552V23Z">
</path>
</g>
<g>
<path
d="M12.9 7.598c.608-.737 1.04-1.74 1.04-2.755 0-.14-.013-.28-.038-.394-.99.038-2.183.66-2.893 1.498-.559.635-1.079 1.65-1.079 2.666 0 .153.026.305.038.356.064.012.165.025.267.025.888 0 2.004-.597 2.664-1.396Zm.697 1.612c-1.484 0-2.69.901-3.464.901-.825 0-1.903-.85-3.197-.85C4.486 9.26 2 11.292 2 15.113c0 2.387.914 4.9 2.056 6.526.977 1.37 1.827 2.5 3.057 2.5 1.218 0 1.751-.812 3.261-.812 1.536 0 1.878.787 3.223.787 1.332 0 2.22-1.218 3.058-2.425.939-1.383 1.332-2.729 1.345-2.793-.076-.025-2.626-1.066-2.626-3.986 0-2.526 2.004-3.656 2.118-3.745-1.32-1.904-3.337-1.955-3.895-1.955Z">
</path>
</g>
</svg>
</a>
</li>
<li><svg>
<g>
<path
d="M41 0c6.075 0 11 4.925 11 11s-4.925 11-11 11H11C4.925 22 0 17.075 0 11S4.925 0 11 0h30Zm-2.534 6.9H35.99l-2.903 8.455h2.152l.558-1.918h2.862l.558 1.918h2.153L38.466 6.9Zm-5.246 0h-7.036v1.642h2.495v6.813h2.047V8.542h2.494V6.9Zm-8.305 0h-5.79v8.455h5.79v-1.642h-3.742v-1.859h3.523v-1.511h-3.523v-1.8h3.742V6.9Zm-10.313 0H10.7v8.455h4.016c.61 0 1.137-.1 1.58-.298.444-.199.787-.48 1.03-.844.243-.365.364-.793.364-1.285v-.012c0-.357-.087-.683-.26-.977a2.048 2.048 0 0 0-.706-.714 2.116 2.116 0 0 0-1.008-.304v-.11c.3-.042.568-.149.804-.32.236-.17.423-.383.562-.64.139-.256.208-.535.208-.836v-.011c0-.435-.107-.81-.32-1.125-.215-.314-.521-.556-.92-.725-.4-.17-.883-.254-1.448-.254Zm-1.855 4.728h1.382c.317 0 .585.043.804.128.218.086.384.211.498.377.113.166.17.37.17.611v.012c0 .37-.124.653-.372.85-.248.197-.608.295-1.08.295h-1.402v-2.273Zm24.536-2.92.945 3.251h-2.003l.947-3.251h.11Zm-24.536-.355h1.317c.386 0 .687.09.901.267.215.178.323.424.323.736v.012c0 .313-.116.558-.348.735-.231.177-.56.266-.984.266h-1.209V8.353Z"
fill="#FFF"></path>
</g>
</svg></li>
</ul>
<ul>
<!-- afstanden overal vast!!-->
<li><a href="#"><svg viewBox="0 0 107.61767578125 107.8623046875" height="22" width="22">
<g transform="matrix(1 0 0 1 -12.451127929687573 89.1611328125)">
<path
d="M41.4551 18.7012C43.3594 18.7012 44.7754 17.7246 47.0703 15.5762L64.6973-0.537109L97.7051-0.488281C112.256-0.439453 120.068-8.54492 120.068-22.8516L120.068-60.2539C120.068-74.5605 112.256-82.6172 97.7051-82.6172L34.8145-82.6172C20.2637-82.6172 12.4512-74.6094 12.4512-60.2539L12.4512-22.8516C12.4512-8.49609 20.2637-0.537109 34.8145-0.537109L37.1094-0.537109L37.1094 13.6719C37.1094 16.6992 38.6719 18.7012 41.4551 18.7012ZM66.3086-32.5195C63.7695-32.5195 62.3535-33.9355 62.3047-36.5234L61.6699-63.0859C61.6211-65.6738 63.5254-67.5781 66.2598-67.5781C68.9453-67.5781 70.9473-65.625 70.8984-63.0371L70.166-36.5234C70.1172-33.8867 68.7012-32.5195 66.3086-32.5195ZM66.3086-16.1621C63.3789-16.1621 60.8398-18.457 60.8398-21.3867C60.8398-24.2676 63.3301-26.6113 66.3086-26.6113C69.2383-26.6113 71.7285-24.3164 71.7285-21.3867C71.7285-18.4082 69.1895-16.1621 66.3086-16.1621Z"
fill="#FFF"></path>
</g>
</svg></a></li>
<li><a href="#"><svg viewBox="0 0 104.297607421875 74.9521484375" version="1.1" height="22" width="22">
<g transform="matrix(1 0 0 1 -12.451162109374991 72.7060546875)">
<path
d="M16.6504-56.1035L24.7559-56.1035C27.8809-56.1035 29.0039-57.2266 29.0039-60.3027L29.0039-68.4082C29.0039-71.5332 27.8809-72.6562 24.7559-72.6562L16.6504-72.6562C13.5742-72.6562 12.4512-71.5332 12.4512-68.4082L12.4512-60.3027C12.4512-57.2266 13.5742-56.1035 16.6504-56.1035ZM45.8496-56.1035L53.9551-56.1035C57.0312-56.1035 58.1543-57.2266 58.1543-60.3027L58.1543-68.4082C58.1543-71.5332 57.0312-72.6562 53.9551-72.6562L45.8496-72.6562C42.7246-72.6562 41.6016-71.5332 41.6016-68.4082L41.6016-60.3027C41.6016-57.2266 42.7246-56.1035 45.8496-56.1035ZM75-56.1035L83.1055-56.1035C86.1816-56.1035 87.3047-57.2266 87.3047-60.3027L87.3047-68.4082C87.3047-71.5332 86.1816-72.6562 83.1055-72.6562L75-72.6562C71.9238-72.6562 70.8008-71.5332 70.8008-68.4082L70.8008-60.3027C70.8008-57.2266 71.9238-56.1035 75-56.1035ZM104.15-56.1035L112.256-56.1035C115.381-56.1035 116.504-57.2266 116.504-60.3027L116.504-68.4082C116.504-71.5332 115.381-72.6562 112.256-72.6562L104.15-72.6562C101.074-72.6562 99.9512-71.5332 99.9512-68.4082L99.9512-60.3027C99.9512-57.2266 101.074-56.1035 104.15-56.1035ZM16.8945-26.9531L25-26.9531C28.125-26.9531 29.248-28.0762 29.248-31.1523L29.248-39.2578C29.248-42.334 28.125-43.457 25-43.457L16.8945-43.457C13.8184-43.457 12.6953-42.334 12.6953-39.2578L12.6953-31.1523C12.6953-28.0762 13.8184-26.9531 16.8945-26.9531ZM46.0938-26.9531L54.1992-26.9531C57.2754-26.9531 58.3984-28.0762 58.3984-31.1523L58.3984-39.2578C58.3984-42.334 57.2754-43.457 54.1992-43.457L46.0938-43.457C42.9688-43.457 41.8457-42.334 41.8457-39.2578L41.8457-31.1523C41.8457-28.0762 42.9688-26.9531 46.0938-26.9531ZM75.2441-26.9531L83.3496-26.9531C86.4258-26.9531 87.5488-28.0762 87.5488-31.1523L87.5488-39.2578C87.5488-42.334 86.4258-43.457 83.3496-43.457L75.2441-43.457C72.168-43.457 71.0449-42.334 71.0449-39.2578L71.0449-31.1523C71.0449-28.0762 72.168-26.9531 75.2441-26.9531ZM104.443-26.9531L112.5-26.9531C115.625-26.9531 116.748-28.0762 116.748-31.1523L116.748-39.2578C116.748-42.334 115.625-43.457 112.5-43.457L104.443-43.457C101.318-43.457 100.195-42.334 100.195-39.2578L100.195-31.1523C100.195-28.0762 101.318-26.9531 104.443-26.9531ZM16.8945 2.24609L25 2.24609C28.125 2.24609 29.248 1.12305 29.248-2.00195L29.248-10.0586C29.248-13.1836 28.125-14.3066 25-14.3066L16.8945-14.3066C13.8184-14.3066 12.6953-13.1836 12.6953-10.0586L12.6953-2.00195C12.6953 1.12305 13.8184 2.24609 16.8945 2.24609ZM46.0938 2.24609L54.1992 2.24609C57.2754 2.24609 58.3984 1.12305 58.3984-2.00195L58.3984-10.0586C58.3984-13.1836 57.2754-14.3066 54.1992-14.3066L46.0938-14.3066C42.9688-14.3066 41.8457-13.1836 41.8457-10.0586L41.8457-2.00195C41.8457 1.12305 42.9688 2.24609 46.0938 2.24609ZM75.2441 2.24609L83.3496 2.24609C86.4258 2.24609 87.5488 1.12305 87.5488-2.00195L87.5488-10.0586C87.5488-13.1836 86.4258-14.3066 83.3496-14.3066L75.2441-14.3066C72.168-14.3066 71.0449-13.1836 71.0449-10.0586L71.0449-2.00195C71.0449 1.12305 72.168 2.24609 75.2441 2.24609ZM104.443 2.24609L112.5 2.24609C115.625 2.24609 116.748 1.12305 116.748-2.00195L116.748-10.0586C116.748-13.1836 115.625-14.3066 112.5-14.3066L104.443-14.3066C101.318-14.3066 100.195-13.1836 100.195-10.0586L100.195-2.00195C100.195 1.12305 101.318 2.24609 104.443 2.24609Z"
fill="#FFF"></path>
</g>
</svg></a></li>
<li><a href="#"><svg viewBox="0 0 102.1480712890625 100.9267578125" version="1.1" height="20" width="20">
<g transform="matrix(1 0 0 1 -7.470952148437391 85.693359375)">
<path
d="M59.1797 15.1855C86.7676 15.1855 109.619-7.61719 109.619-35.2539C109.619-62.8418 86.7676-85.6934 59.1309-85.6934C31.543-85.6934 8.74023-62.8418 8.74023-35.2539C8.74023-7.61719 31.5918 15.1855 59.1797 15.1855ZM59.1797 5.27344C36.7188 5.27344 18.7012-12.793 18.7012-35.2539C18.7012-57.7148 36.6699-75.7324 59.1309-75.7324C81.5918-75.7324 99.6582-57.7148 99.707-35.2539C99.707-12.793 81.6406 5.27344 59.1797 5.27344ZM37.793-35.2051C37.793-32.5684 39.6973-30.7129 42.4316-30.7129L54.5898-30.7129L54.5898-18.5059C54.5898-15.8203 56.4453-13.9648 59.082-13.9648C61.8164-13.9648 63.7207-15.8203 63.7207-18.5059L63.7207-30.7129L75.8789-30.7129C78.5645-30.7129 80.4688-32.5684 80.4688-35.2051C80.4688-37.9395 78.5645-39.8438 75.8789-39.8438L63.7207-39.8438L63.7207-52.002C63.7207-54.7363 61.8164-56.5918 59.082-56.5918C56.4453-56.5918 54.5898-54.6875 54.5898-52.002L54.5898-39.8438L42.4316-39.8438C39.6973-39.8438 37.793-37.9395 37.793-35.2051Z"
fill="#FFF"></path>
</g>
</svg></a></li>
<li><a href="features.html?selection=0"><img src="images/quintenkok.png" alt="Quinten Kok"></a></li>
</ul>
</nav>
<section>
<section class="editbar">
<button type="button" name="add">
<svg viewBox="0 0 102.1480712890625 100.9267578125" width="20" height="20">
<g transform="matrix(1 0 0 1 -7.470952148437391 85.693359375)">
<path
d="M59.1797 15.1855C86.7676 15.1855 109.619-7.61719 109.619-35.2539C109.619-62.8418 86.7676-85.6934 59.1309-85.6934C31.543-85.6934 8.74023-62.8418 8.74023-35.2539C8.74023-7.61719 31.5918 15.1855 59.1797 15.1855ZM36.9629-35.2051C36.9629-38.0371 38.9648-40.0391 41.748-40.0391L54.3945-40.0391L54.3945-52.6855C54.3945-55.5176 56.3477-57.5195 59.1309-57.5195C61.9629-57.5195 63.9648-55.5176 63.9648-52.6855L63.9648-40.0391L76.6602-40.0391C79.3945-40.0391 81.4453-38.0371 81.4453-35.2051C81.4453-32.4219 79.3945-30.4688 76.6602-30.4688L63.9648-30.4688L63.9648-17.8223C63.9648-15.0391 61.9629-13.0371 59.1309-13.0371C56.3477-13.0371 54.3945-15.0391 54.3945-17.8223L54.3945-30.4688L41.748-30.4688C38.9648-30.4688 36.9629-32.4219 36.9629-35.2051Z">
</path>
</g>
</svg>Add Tile</button>
<button type="button" class="done">Done</button>
</section>
</section>
</header>
<main>
<!-- Account -->
<section class="accountsection">
<h1>Quinten</h1>
<h3>[email protected]</h3>
<h3>iCloud+</h3>
<img src="images/quintenkok.png" alt="Quinten Kok">
</section>
<!-- Photos -->
<section class="animatie">
<header>
<a href="#">
<h2>Photos</h2>
<h3>1237 photo's, 1337 video's</h3>
<img src="images/photos.png" alt="photos">
</a>
<button type="button" class="remove">-</button>
</header>
<section>
<img src="images/melt_my_eyez.jpg" alt="Melt my eyez see the future - Denzel Curry ">
<img src="images/igor.jpg" alt="Igor - Tyler, the creator">
<img src="images/love_is_pure.jpg" alt="love is pure - extremely bad man">
<img src="images/vaudeville_villain.jpg" alt="vaudeville villain - Viktor Vaugn">
<img src="images/awaken_my_love.png" alt="Awaken, My Love - Childish Gambino">
<img src="images/the_life_of_pablo.jpg" alt="the life of pablo - Kanye West">
<img src="images/operation_doomsday.jpg" alt="Operation Doomsday - MF DOOM">
<img src="images/flower_boy.png" alt="Flower Boy - Tyler, the creator">
</section>
</section>
<!-- Drive -->
<section class="animatie">
<header>
<a href="#">
<h2>Drive</h2>
<h3>All Files</h3>
<img src="images/drive.png" alt="Drive">
</a>
<button type="button" class="remove">-</button>
</header>
<section>
<ul>
<li>
Melt my eyez <span>MP3</span>
</li>
<li>
Lover Boy <span>MP3</span>
</li>
<li>
Love is pure <span>MP3</span>
</li>
</ul>
<ul>
<li>
Vaudeville villain <span>MP3</span>
</li>
<li>
Awaken, my love <span>MP3</span>
</li>
<li>
Life of pablo<span>MP3</span>
</li>
</ul>
</section>
</section>
<!-- Notes -->
<section class="animatie">
<header>
<a href="#">
<h2>Notes</h2>
<h3>All iCloud</h3>
<img src="images/notes.png" alt="Notes">
</a>
<button type="button" class="remove">-</button>
</header>
<section>
<ul>
<li>
<h4>Cocktail recipes</h4>
<time datetime="2022-11-08">8-11-2022</time> <span>Tom Collins:</span>
</li>
<li>
<h4>Nieuwe platen</h4>
<time datetime="2022-11-11">11-11-2022</time> <span>Melt my Eyez limited edition</span>
</li>
<li>
<h4>Kook recepten</h4>
<time datetime="2022-04-20">20-4-2022</time> <span>Putanesca</span>
</li>
</ul>
</section>
</section>
<!-- Overview -->
<section class="animatie">
<ul>
<li>
<img src="images/mail.png" alt="Mail">
<p>Mail</p>
</li>
<li>
<img src="images/photos.png" alt="Photos">
<p>Photos</p>
</li>
<li>
<img src="images/drive.png" alt="Drive">
<p>Drive</p>
</li>
<li>
<img src="images/notes.png" alt="Notes">
<p>Notes</p>
</li>
<li>
<img src="images/reminders.png" alt="Reminders">
<p>Reminders</p>
</li>
<li>
<img src="images/findmy.png" alt="Find my">
<p>Find my</p>
</li>
<li>
<img src="images/pages.png" alt="Pages">
<p>Pages</p>
</li>
<li>
<img src="images/numbers.png" alt="Numbers">
<p>Numbers</p>
</li>
<li>
<img src="images/contacts.png" alt="Contacts">
<p>Contacts</p>
</li>
<li>
<img src="images/calendar.png" alt="Calendar">
<p>Calendar</p>
</li>
<li>
<img src="images/keynotes.png" alt="Keynotes">
<p>Keynotes</p>
</li>
</ul>
<button type="button" class="remove">-</button>
</section>
<!-- Pages -->
<section class="animatie">
<header>
<a href="#">
<h2>Pages</h2>
<h3>Documents</h3>
<img src="images/pages.png" alt="Pages">
</a>
<button type="button" class="remove removed">-</button>
</header>
<section>
<ul>
<li>
Jazz <span>Pages</span>
</li>
<li>
Lofi/hiphop <span>Pages</span>
</li>
<li>
Rap <span>Pages</span>
</li>
</ul>
<ul>
<li>
Soul <span>Pages</span>
</li>
<li>
Classical <span>Pages</span>
</li>
<li>
J-Rock<span>Pages</span>
</li>
</ul>
</section>
</section>
<!-- homescreen veranderingen -->
<button class="klik">
Customise Home Page
</button>
</main>
<!-- footer -->
<footer>
<section>
<a href="features.html?selection=1">
<h2>Your Plan</h2>
</a>
<section>
<img src="images/icloudplus2.png" alt="icloud plus"> iCloud+
</section>
<p>2 TB Storage</p>
<span>Shared by Marco (Family Sharing) </span>
</section>
<section>
<a href="features.html?selection=2">
<h2>Your Storage</h2>
</a>
<img src="images/balk.png" alt="storage balk">
<p>232.47 GB Used</p>
<span>11% of 2 TB</span>
</section>
<section>
<a href="features.html?selection=4">
<h2>Data Recovery</h2>
</a>
<img src="images/iconsbalk.png" alt="icons">
<span>Restore deleted files, bookmarks, contacts and calendars.</span>
</section>
<article>
<!-- dit is de footer in de footer -->
<ul>
<li>System Status</li>
<li>Privacy Policy</li>
<li>Terms & Conditionss</li>
<li>Copyright © 2022 Apple Inc. All rights reserved.</li>
</ul>
</article>
</footer>
<script src="scripts/scriptindex.js"></script>
</body>
</html>