Update public/ki-kompetenzen.html

5676a6ec · Traboulsi · 8764059f · 5676a6ec
Commit 5676a6ec authored 7 months ago by Traboulsi
Hide whitespace changes
Inline Side-by-side

Showing

with 67 additions and 39 deletions
+67 -39
--- a/public/ki-kompetenzen.html
+++ b/public/ki-kompetenzen.html
@@ -16,6 +16,28 @@
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/css/main.css" rel="stylesheet">
+  <style>
+    .hero {
+      background: url('images/hero-background.jpg') no-repeat center center;
+      background-size: cover;
+      color: white;
+      padding: 50px 0;
+      text-align: center;
+    }
+    .card {
+      margin-bottom: 20px;
+    }
+    .video-container {
+      text-align: center;
+    }
+    .video-container iframe {
+      width: 100%;
+      height: 315px;
+    }
+  </style>
 </head>
 <body>
  <header id="header" class="header d-flex align-items-center fixed-top">
@@ -38,52 +60,58 @@
    </div>
  </header>
  <main>
-    <section class="container">
+    <section class="hero">
-     <p>
+      <div class="container">
-        <br>
-      </p>
-       <p>
-        <br>
-      </p>
-      <div>
        <h1>KI Kompetenzen</h1>
-        <p>Auf dieser Seite erfahren Sie, welche KI-Kompetenzen benötigt werden und wie diese erfasst werden können.</p>
+        <p>Die Schlüsselkompetenzen im Umgang mit künstlicher Intelligenz für Hochschul- und Unternehmenskontexte.</p>
-        <p>Weitere Details werden hier bald ergänzt.</p>
      </div>
-      <div>
+    </section>
-        <h2>Verantwortliche Personen</h2>
-        <ul>
+    <section class="container mt-5">
-          <li>Prof. Dr. Tobias Popović</li>
+      <div class="accordion" id="competenceAccordion">
-          <li>Dr. Diana Arfeli</li>
+        <div class="accordion-item">
-          <li>Maximilian Weber</li>
+          <h2 class="accordion-header" id="headingOne">
-          <li>Sunita Hirsch</li>
+            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-          <li>Tatyana Podgayetskaya</li>
+              Unsere Vorgehensweise
-        </ul>
+            </button>
-      </div>
+          </h2>
-      <div>
+          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#competenceAccordion">
-        <h2>Unsere Vorgehensweise</h2>
+            <div class="accordion-body">
-        <ol>
+              <ol>
-          <li>KI-Kompetenzen ermitteln und sortieren</li>
+                <li>KI-Kompetenzen ermitteln und sortieren</li>
-          <li>Regelmäßige Weiterbildungsangebote für Mitarbeitende und Studierende</li>
+                <li>Regelmäßige Weiterbildungsangebote für Mitarbeitende und Studierende</li>
-          <li>KI-Zertifikat als Anreiz für kompetenzorientiertes Lernen im Kontext künstlicher Intelligenz</li>
+                <li>KI-Zertifikat als Anreiz für kompetenzorientiertes Lernen im Kontext künstlicher Intelligenz</li>
-        </ol>
+              </ol>
+            </div>
+          </div>
+        </div>
+        <!-- Add more accordion items as needed -->
      </div>
-      <div>
+    </section>
-        <h2>Unsere KI-Kompetenzmatrix</h2>
-        <p>Beschreibung der Matrix, die technische und ethische Kompetenzen abbildet und in den Hochschulqualifikationsrahmen integriert ist.</p>
+    <section class="container mt-5">
+      <div class="row">
+        <div class="col-md-4">
+          <div class="card">
+            <img src="images/kompetenzmatrix.png" class="card-img-top" alt="KI-Kompetenzmatrix">
+            <div class="card-body">
+              <h5 class="card-title">KI-Kompetenzmatrix</h5>
+              <p class="card-text">Ein detaillierter Überblick über die erforderlichen KI-Kompetenzen, unterteilt in technische und ethische Bereiche.</p>
+            </div>
+          </div>
+        </div>
+        <!-- Add more cards as needed -->
      </div>
-      <div>
+    </section>
-        <h2>Schulungen und Zertifikate</h2>
-        <p>Details zu den Schulungen, dem KI-Zertifikat und wie die erlangten Kompetenzen dokumentiert und validiert werden.</p>
+    <section class="container mt-5">
+      <div class="video-container">
+        <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
      </div>
    </section>
  </main>
  <footer>
    <div class="container">
      <p>Um zur Startseite zurückzukehren, klicken Sie bitte auf den folgenden Link:</p>
-      <a href="index.html">Zurück zur Startseite</a>
+      <a
-      <p>&copy; 2024 KNIGHT Project. All rights reserved.</p>
-    </div>
-  </footer>
-</body>
-</html>