Folgender Promt dient als Ausgangsbasis. Passen Sie ihn nach Ihren Vorstellungen an.

---

Erstelle mir einen übersichtlichen HTML Block für den ersten Organisationsabschnitt eines Moodle Kurses.
Der Block soll enthalten:
    1.    Einen dezenten Banner Bereich mit einem Titel und einem Untertitel
    2.    Darunter zwi nebeneinanderliegende Kästen mit folgenden Überschriften: Ablauf und Leistungsnachweise
    3.    Die Kästen sollen leicht eingefärbt sein, gut lesbar und mobil tauglich
    4.    Verwende ausschließlich Inline Styles, kein externes CSS, kein JavaScript
    5.    Der HTML Code soll direkt in Moodle in einem Text und Medienfeld funktionieren
Bitte liefere nur den HTML Code, ohne zusätzliche Erklärungen.

---

<!-- Einstiegsblock Variante A -->

<div style="margin:0 0 20px 0;">



<!-- Banner -->

<div style="background:#1976d2;color:#fff;padding:20px;border-radius:10px;">

<h2 style="margin:0;font-size:26px;">Willkommen im Kurs</h2>

<p style="margin:6px 0 0 0;font-size:16px;">Kurzer Überblick zum Einstieg.</p>

</div>



<!-- Infokästen -->

<div style="display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;">



<div style="flex:1;min-width:250px;background:#e3f2fd;border-radius:8px;padding:12px;">

<strong style="font-size:16px;">Ablauf</strong>

<p style="margin:6px 0 0 0;">Wie der Kurs strukturiert ist und was pro Woche ansteht.</p>

</div>



<div style="flex:1;min-width:250px;background:#e8f5e9;border-radius:8px;padding:12px;">

<strong style="font-size:16px;">Leistungsnachweise</strong>

<p style="margin:6px 0 0 0;">Kurze Infos zu Abgaben und Prüfungsleistungen.</p>

</div>



<div style="flex:1;min-width:250px;background:#fff3e0;border-radius:8px;padding:12px;">

<strong style="font-size:16px;">Kommunikation</strong>

<p style="margin:6px 0 0 0;">Wie du Fragen stellen kannst und wie wir im Kurs arbeiten.</p>

</div>



</div>

</div>

Sie können nun das HTML in Ihre Zwischenablage kopieren. In Ihrem Moodle Kurs fügen Sie dann ein Text- und Medienfeld hinzu und klicken dort auf den HTML Button.

Fügen Sie nun den von der KI erzeugten HTML Text ein und klicken Sie anschließend erneut auf den HTML Button, um in die normale Ansicht zurückzukehren.

Jetzt sehen Sie direkt, wie der Block im Kurs dargestellt wird. 

Nun können Sie direkt in die Felder klicken, und den Text innerhalb der Blöcke anpassen.

Das war es auch schon. Sie können das Text und Medienfeld jederzeit wieder über „Bearbeiten“ anpassen, ohne den HTML Code erneut öffnen oder verändern zu müssen.