67 lines
3.1 KiB
PHP
67 lines
3.1 KiB
PHP
<?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') ?>
|