diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1085cf7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Mehrere Aufgaben</title>
+<style>
+  body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+  }
+  .main-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 20px;
+  }
+  .container {
+    text-align: center;
+    background-color: #ffffff;
+    padding: 20px;
+    margin: 10px 0;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    width: 80%; /* Anpassen für unterschiedliche Breiten */
+    max-width: 600px; /* Maximalbreite festlegen */
+  }
+  h1 {
+    color: #333;
+  }
+  p {
+    color: #666;
+    margin: 10px 0;
+  }
+  .button {
+    display: inline-block;
+    background-color: #007BFF;
+    color: #ffffff;
+    padding: 10px 20px;
+    text-decoration: none;
+    font-size: 16px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+    margin-top: 10px;
+  }
+  .button:hover {
+    background-color: #0056b3;
+  }
+</style>
+</head>
+<body>
+
+<div class="main-container">
+  <div class="container">
+    <h1>Aufgabenüberschrift 1</h1>
+    <p>Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 1.</p>
+    <a href="zielSeite1.html" class="button">Weiter zur Aufgabe 1</a>
+  </div>
+  <div class="container">
+    <h1>Aufgabenüberschrift 2</h1>
+    <p>Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 2.</p>
+    <a href="zielSeite2.html" class="button">Weiter zur Aufgabe 2</a>
+  </div>
+  <!-- Weitere Aufgabencontainer hier hinzufügen -->
+</div>
+
+</body>
+</html>
