-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (223 loc) · 11.6 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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Historische Financiële Crisissen Timeline</title>
<!-- Include Tailwind CSS from CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom styles -->
<style>
.timeline-dot {
position: absolute;
width: 12px;
height: 12px;
background-color: #3b82f6;
border-radius: 50%;
left: -22px;
top: 6px;
}
.timeline-line {
position: absolute;
width: 2px;
background-color: #e5e7eb;
top: 0;
bottom: 0;
left: -16px;
}
.hover-effect:hover {
transform: translateX(5px);
transition: transform 0.3s ease;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
<h1 class="text-3xl font-bold text-center mb-4 text-gray-800">
Historische Financiële Crisissen
</h1>
<p class="text-gray-600 text-center mb-8">
Een chronologisch overzicht van belangrijke financiële crisissen door de geschiedenis heen
</p>
<!-- Timeline Container -->
<div class="space-y-12">
<!-- 17e & 18e Eeuw -->
<div class="relative">
<h2 class="text-xl font-bold mb-4 bg-blue-50 p-3 rounded-lg text-blue-800">
17e & 18e Eeuw
</h2>
<div class="relative ml-4">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1637</h3>
<p class="text-gray-600">Tulpenmanie in Nederland</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1720</h3>
<p class="text-gray-600">South Sea Bubble & Mississippi Bubble</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1763</h3>
<p class="text-gray-600">Instorting bank in Amsterdam</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1772</h3>
<p class="text-gray-600">Faillissement banken Londen & Amsterdam</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1783-1788</h3>
<p class="text-gray-600">Franse financiële crisis</p>
</div>
</div>
</div>
</div>
<!-- 19e Eeuw -->
<div class="relative">
<h2 class="text-xl font-bold mb-4 bg-green-50 p-3 rounded-lg text-green-800">
19e Eeuw
</h2>
<div class="relative ml-4">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1825</h3>
<p class="text-gray-600">Britse economische recessie</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1837</h3>
<p class="text-gray-600">Amerikaanse depressie</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1857</h3>
<p class="text-gray-600">Amerikaanse economische recessie</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1873</h3>
<p class="text-gray-600">Lange Depressie</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1890</h3>
<p class="text-gray-600">Baring Crisis</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1893</h3>
<p class="text-gray-600">Amerikaanse recessie & Australische bankencrisis</p>
</div>
</div>
</div>
</div>
<!-- 1900-1950 -->
<div class="relative">
<h2 class="text-xl font-bold mb-4 bg-purple-50 p-3 rounded-lg text-purple-800">
1900-1950
</h2>
<div class="relative ml-4">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1901</h3>
<p class="text-gray-600">NY Stock Exchange crash</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1907</h3>
<p class="text-gray-600">Amerikaanse economische recessie</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1929</h3>
<p class="text-gray-600">Wall Street Crash & Grote Depressie</p>
</div>
</div>
</div>
</div>
<!-- 1950-2000 -->
<div class="relative">
<h2 class="text-xl font-bold mb-4 bg-yellow-50 p-3 rounded-lg text-yellow-800">
1950-2000
</h2>
<div class="relative ml-4">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1973</h3>
<p class="text-gray-600">Oliecrisis</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1987</h3>
<p class="text-gray-600">Black Monday</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1990</h3>
<p class="text-gray-600">Japanse zeepbel</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">1997-1998</h3>
<p class="text-gray-600">Aziatische financiële crisis</p>
</div>
</div>
</div>
</div>
<!-- 2000-Heden -->
<div class="relative">
<h2 class="text-xl font-bold mb-4 bg-red-50 p-3 rounded-lg text-red-800">
2000-Heden
</h2>
<div class="relative ml-4">
<div class="timeline-line"></div>
<div class="space-y-6">
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">2000-2001</h3>
<p class="text-gray-600">Dot-com bubble</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">2007-2008</h3>
<p class="text-gray-600">Wereldwijde financiële crisis</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">2010</h3>
<p class="text-gray-600">Europese staatsschuldencrisis</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">2014</h3>
<p class="text-gray-600">Russische financiële crisis</p>
</div>
<div class="relative hover-effect">
<div class="timeline-dot"></div>
<h3 class="text-lg font-semibold text-gray-800">2020</h3>
<p class="text-gray-600">Corona crash</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="text-center text-gray-500 text-sm">
<p>© 2025 Financiële Crisissen Timeline</p>
</div>
</div>
</body>
</html>