SFBadSteben/schachfreunde-badsteben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add hero section with background image and animated chess game

Browse Source
This commit is contained in:
Tobias Feigel
2025-06-14 23:15:47 +02:00
parent 3c5985d52f
commit cb9fe561e0
8 changed files with 3509 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/templates/default.php
+1 -38
View File
@@ -24,44 +24,7 @@
<body class="font-sans antialiased bg-gray-100 text-gray-900">
<?php snippet('navbar') ?>
<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>
<?php snippet('hero') ?>
<?= js('assets/js/navbar.js') ?>
</body>