Initial Commit

2025-06-14 17:42:12 +02:00
commit 815dbb4139
23 changed files with 3606 additions and 0 deletions
@@ -0,0 +1,66 @@
+<?php
+    /*
+      Templates render the content of your pages.
+
+      They contain the markup together with some control structures
+      like loops or if-statements. The `$page` variable always
+      refers to the currently active page.
+
+      To fetch the content from each field we call the field name as a
+      method on the `$page` object, e.g. `$page->title()`.
+
+      This default template must not be removed. It is used whenever Kirby
+      cannot find a template with the name of the content file.
+
+      Snippets like the header and footer contain markup used in
+      multiple templates. They also help to keep templates clean.
+
+      More about templates: https://getkirby.com/docs/guide/templates/basics
+    */
+?>
+<?php snippet('header') ?>
+
+<body class="font-sans antialiased bg-gray-100 text-gray-900">
+    <nav class="bg-blue-600 p-4 shadow-md">
+        <div class="container mx-auto flex justify-between items-center">
+            <a href="#" class="text-white text-2xl font-bold">Mein Logo</a>
+            <div class="space-x-4">
+                <a href="#" class="text-white hover:text-blue-200">Startseite</a>
+                <a href="#" class="text-white hover:text-blue-200">Über Uns</a>
+                <a href="#" class="text-white hover:text-blue-200">Dienstleistungen</a>
+                <a href="#" class="text-white hover:text-blue-200">Kontakt</a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mx-auto mt-8 p-4 bg-white rounded-lg shadow-lg max-w-4xl">
+        <h1 class="text-4xl font-bold text-gray-800 mb-6 text-center">Willkommen auf meiner Webseite!</h1>
+
+        <p class="text-lg leading-relaxed mb-4">
+            Dies ist ein Beispielinhalt für Ihre Webseite. Der Text ist in einem zentralen Container eingefasst,
+            der die Breite begrenzt, um die Lesbarkeit zu verbessern und das Design ansprechender zu gestalten.
+            Probieren Sie, die Größe Ihres Browserfensters zu ändern, um zu sehen, wie sich der Inhalt anpasst.
+        </p>
+
+        <p class="text-lg leading-relaxed mb-4">
+            Tailwind CSS ermöglicht es uns, schnell und effizient modernes Design zu erstellen,
+            ohne benutzerdefiniertes CSS schreiben zu müssen. Alle Stile werden direkt in der HTML-Klasse definiert,
+            was die Entwicklung beschleunigt und die Wartung vereinfacht.
+        </p>
+
+        <h2 class="text-3xl font-semibold text-gray-700 mt-8 mb-4">Einige Vorteile von Tailwind CSS:</h2>
+        <ul class="list-disc list-inside text-lg leading-relaxed mb-4 ml-4">
+            <li>Schnelle Entwicklung dank Utility-First-Ansatz</li>
+            <li>Hochgradig anpassbar</li>
+            <li>Responsives Design out-of-the-box</li>
+            <li>Geringere CSS-Dateigröße in Produktionsumgebungen (nach Purging)</li>
+        </ul>
+
+        <p class="text-lg leading-relaxed">
+            Fügen Sie hier Ihren eigenen Inhalt hinzu, um Ihre Webseite individuell zu gestalten.
+            Ob Texte, Bilder oder interaktive Elemente – alles passt perfekt in diesen responsiven Container.
+        </p>
+    </div>
+</body>
+
+<?php snippet('footer') ?>