forked from realNiklas/Menschenrechte
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
208 lines (188 loc) · 10 KB
/
Copy pathindex.html
File metadata and controls
208 lines (188 loc) · 10 KB
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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menschenrechte - Schulprojekt</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="nav-content">
<a href="index.html" class="logo">🌍 Menschenrechte</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="rights.html">Rechte</a></li>
<li><a href="challenges.html">Herausforderungen</a></li>
<li><a href="games.html" style="color: #667eea; font-weight: bold;">🎮 Spiele</a></li>
<li><a href="projects.html" style="color: #667eea; font-weight: bold;">📌 Projekte</a></li>
<li><a href="team.html" style="color: #667eea; font-weight: bold;">👥 Team</a></li>
<li><a href="action.html">Handeln</a></li>
<li><a href="about.html">Über mich</a></li>
<li><a href="contact.html" style="color: #667eea; font-weight: bold;">✉️ Kontakt</a></li>
<li><a href="sources.html">Quellen</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<h1 class="hero-title">🏆 75 Jahre Menschenrechte</h1>
<p class="hero-subtitle">Unsere Rechte, unsere Stimmen, unsere Zukunft!</p>
<div class="hero-images" style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 2rem auto;">
<img src="src/assets/image.png" alt="Menschenrechte" class="hero-image" style="max-width: 300px; width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: fadeInScale 1s ease-out;">
<img src="src/assets/IMG_0565.jpeg" alt="Gruppenbild der Klasse G8a" class="hero-image" style="max-width: 300px; width: 100%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: fadeInScale 1s ease-out;">
</div>
<div class="hero-text">
<div class="hero-block">
<h3>📜 Das Jubiläum</h3>
<p>Die Europäische Menschenrechtskonvention feierte 2025 ihr 75. Jubiläum. Dieses Jubiläum haben wir, die Klasse G8a der Freiherr-vom-Stein-Schule Immenhausen, zum Anlass genommen, uns mit den Menschenrechten, die sie garantiert, zu beschäftigen.</p>
</div>
<div class="hero-block">
<h3>🎨 Unsere Mission</h3>
<p>Um viele andere Kinder und Jugendliche an unseren Gedanken, Ideen und Hoffnungen teilhaben zu lassen, haben wir gemeinsam eine Website gefüllt, die wir auf unserer Schulhomepage verlinken, in den sozialen Medien und mit unseren Grundschulen im Verbund teilen. Um möglichst viele Leserinnen und Leser zu erreichen, haben wir die Artikel sprachlich etwas vereinfacht und Zeichnungen, Karikaturen, Comics, Geschichten, ein fiktives Tagebuch sowie verschiedene Kurzvideos gestaltet, die zum Nachdenken, Diskutieren und zum bewussten Umgang mit Menschenrechten anregen.</p>
</div>
<div class="hero-block">
<h3>💻 Die Website</h3>
<p>Die Homepage hat Leon aus dem Distanzunterricht heraus programmiert. Aufgrund einer Erkrankung darf er aktuell nicht am Präsenzunterricht teilnehmen, doch sein Avatar ist in der Schule immer dabei.</p>
</div>
</div>
<div class="hero-cta">
<button class="cta-btn" onclick="document.querySelector('.facts').scrollIntoView({behavior: 'smooth'})">Entdecke mehr 🚀</button>
<a href="https://www.europaeischer-wettbewerb.de/teilnahme/thema-und-aufgaben/" target="_blank" class="cta-btn-secondary">📌 Zum Wettbewerb</a>
</div>
</div>
</div>
</section>
<!-- Facts Section -->
<section class="facts">
<div class="container">
<h2>Wichtige Fakten</h2>
<div class="facts-grid">
<div class="fact-card">
<div class="fact-number">1948</div>
<p>Allgemeine Erklärung der Menschenrechte verabschiedet</p>
</div>
<div class="fact-card">
<div class="fact-number">30</div>
<p>Artikel in der Menschenrechtserklärung</p>
</div>
<div class="fact-card">
<div class="fact-number">193</div>
<p>UN-Mitgliedstaaten</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<h2>Erkunde die verschiedenen Bereiche</h2>
<div class="cta-grid">
<a href="rights.html" class="cta-card">
<div class="icon">⚖️</div>
<h3>Deine Rechte</h3>
<p>Erfahre, welche Menschenrechte es gibt</p>
</a>
<a href="challenges.html" class="cta-card">
<div class="icon">⚠️</div>
<h3>Herausforderungen</h3>
<p>Lerne über aktuelle Probleme</p>
</a>
<a href="games.html" class="cta-card" style="border: 2px solid #667eea; background: rgba(102, 126, 234, 0.05);">
<div class="icon">🎮</div>
<h3>Interaktive Spiele</h3>
<p>Quiz, Memory & Puzzle zum Lernen</p>
</a>
<a href="projects.html" class="cta-card" style="border: 2px solid #667eea; background: rgba(102, 126, 234, 0.05);">
<div class="icon">📌</div>
<h3>Schülerprojekte</h3>
<p>Kreative Werke unserer Mitschüler</p>
</a>
<a href="team.html" class="cta-card" style="border: 2px solid #667eea; background: rgba(102, 126, 234, 0.05);">
<div class="icon">👥</div>
<h3>Unser Team</h3>
<p>Lerne unser engagiertes Team kennen</p>
</a>
<a href="action.html" class="cta-card">
<div class="icon">✊</div>
<h3>So kannst du handeln</h3>
<p>Mache den Unterschied</p>
</a>
</div>
</div>
</section>
<!-- AI Notice -->
<section class="ai-notice">
<div class="container">
<p><small>Diese Website wurde als Schulprojekt mit Unterstützung digitaler Werkzeuge erstellt.</small></p>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div>
<h3>Über uns</h3>
<p>Eine Website zur Aufklärung über Menschenrechte für Schulen und Lernende.</p>
</div>
<div>
<h3>Navigation</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rights.html">Rechte</a></li>
<li><a href="challenges.html">Herausforderungen</a></li>
<li><a href="action.html">Handeln</a></li>
</ul>
</div>
<div>
<h3>Weitere Info</h3>
<ul>
<li><a href="about.html">Über den Autor</a></li>
<li><a href="sources.html">Quellenverzeichnis</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Menschenrechte Projekt. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<script>
// Counter Animation für die Zahlen
const animateCounters = () => {
const factCards = document.querySelectorAll('.fact-card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.dataset.animated) {
entry.target.dataset.animated = 'true';
const numberElement = entry.target.querySelector('.fact-number');
const finalNumber = parseInt(numberElement.textContent);
let currentNumber = 0;
// Berechne die Inkremente basierend auf der Zielzahl
const increment = Math.max(1, Math.floor(finalNumber / 50));
const duration = 2000; // 2 Sekunden
const steps = Math.ceil(duration / 30);
let step = 0;
const counter = setInterval(() => {
step++;
currentNumber = Math.min(finalNumber, currentNumber + increment);
numberElement.textContent = currentNumber;
if (currentNumber >= finalNumber) {
numberElement.textContent = finalNumber;
clearInterval(counter);
}
}, 30);
}
});
}, { threshold: 0.5 });
factCards.forEach(card => observer.observe(card));
};
document.addEventListener('DOMContentLoaded', animateCounters);
</script>
</body>
</html>