Digitale Autonomie

Präsentation in html

Prompt:

Erstelle eine vollständige HTML-Seite mit folgendem Aufbau: 1. Kopfbereich (Header) mit dem Titel der Seite und optional einem kleinen Logo oder Symbol. Der Header soll klar abgesetzt und gut lesbar sein. 2. Horizontale Navigationsleiste direkt unter dem Header mit etwa 4 Links (z. B. „Startseite“, „Über uns“, „Angebot“, „Kontakt“). Die aktive Seite soll optisch hervorgehoben sein. 3. Mittlerer Inhaltsbereich (Main) mit einer zentrierten Box für den Hauptinhalt. Die Box soll gut lesbar sein, z. B. mit hellem Hintergrund und sanftem Schatten. In diesem Bereich soll beispielhaft eine Überschrift, ein Fließtextabschnitt und ein Bild (Platzhalter) eingefügt werden. 4. Fußbereich (Footer) am unteren Seitenrand mit kleingedruckten Angaben wie z. B. „© 2025 – Alle Rechte vorbehalten“, Impressum-Link und ggf. kleine Icons für soziale Medien. 5. Farbschema: Verwende eine moderne, angenehme Farbgebung mit dezenten Kontrasten. Zum Beispiel ein heller Hintergrund (z. B. #f8f9fa), dunkle Schriftfarbe (#222), und Akzentfarben in Blau- oder Grüntönen für Buttons, Links und Navigation. 6. Die Seite soll responsiv sein und sich auf verschiedene Bildschirmgrößen anpassen. Verwende dafür grundlegendes CSS oder ein einfaches CSS-Framework wie z. B. Flexbox oder Grid (kein Framework wie Bootstrap). Bitte gib den vollständigen HTML-Code inklusive CSS im <style>-Block aus, sodass die Seite ohne weitere Dateien funktioniert.