feat: add hero section with background image and animated chess game
This commit is contained in:
+3384
-14
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1,36 @@
|
||||
<section class="relative w-full">
|
||||
<!-- Hintergrundbild mit zweischichtigem Overlay -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img src="/assets/img/hero.jpg"
|
||||
alt="Hintergrundbild"
|
||||
class="w-full h-full object-cover opacity-50">
|
||||
<!-- Farbiges Overlay -->
|
||||
<div class="absolute inset-0 bg-blue-500/40"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content Container -->
|
||||
<div class="relative z-10 container mx-auto max-w-7xl px-4 py-24 md:py-32 sm:px-6 lg:px-8">
|
||||
<!-- Zwei-Spalten-Layout -->
|
||||
<div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
|
||||
<!-- Linke Spalte - Text -->
|
||||
<div class="w-full lg:w-1/2">
|
||||
<div class="prose prose-invert">
|
||||
<h2 class="text-4xl font-bold text-sf_blau-500 mb-6">Ihr Titel</h2>
|
||||
<p class="text-lg text-white">
|
||||
Ihr Text kommt hier. Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte - GIF -->
|
||||
<div class="w-3/4 md:w-1/2">
|
||||
<div class="rounded-lg overflow-hidden shadow-xl">
|
||||
<img src="/assets/img/Hort-Martius-2.gif"
|
||||
alt="Animation"
|
||||
class="w-full h-auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,28 +1,15 @@
|
||||
<?php
|
||||
/*
|
||||
Snippets are a great way to store code snippets for reuse
|
||||
or to keep your templates clean.
|
||||
|
||||
This header snippet is reused in all templates.
|
||||
It fetches information from the `site.txt` content file
|
||||
and contains the site navigation.
|
||||
|
||||
More about snippets:
|
||||
https://getkirby.com/docs/guide/templates/snippets
|
||||
*/
|
||||
?>
|
||||
<nav class="bg-sf_grau-100 shadow-lg sticky top-0 z-50">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-24 items-center justify-between">
|
||||
<!-- Logo (Links) -->
|
||||
<a href="https://www.schachfreunde-badsteben.de/" class="flex justify-center items-center">
|
||||
<div class="relative flex justify-center items-center md:mt-20">
|
||||
<a href="https://www.schachfreunde-badsteben.de/">
|
||||
<div class="relative flex justify-center items-center md:mt-6">
|
||||
<div class="hidden absolute inset-0 w-48 h-48 md:block">
|
||||
<svg width="100%" height="100%" viewBox="0 0 48 48">
|
||||
<circle cx="24" cy="24" r="24" fill="#cdcdcd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<svg class="w-18 h-18 md:w-32 md:h-32 relative" viewBox="0 0 316.97 324.57" fill="none">
|
||||
<svg class="w-18 h-18 md:w-32 md:h-32 relative md:top-7 md:left-7" viewBox="0 0 316.97 324.57" fill="none">
|
||||
<!-- Bestehendes SVG-Markup -->
|
||||
<defs>
|
||||
<style>
|
||||
@@ -56,7 +43,6 @@
|
||||
<path d="M162.91 201.98c-12.91-8.04-20.45-3.41-20.45-3.41 16.08 13.64 16.08 42.62 16.08 42.62 2.03-35.48 15.34-42.87 15.34-42.87-6.33-.24-10.96 3.66-10.96 3.66Z" class="cls-8"/>
|
||||
<path d="M162.96 200.71s.86-7.19 6.34-9.13c5.48-1.95 5.72 2.92 3.16 3.41-2.56.49-6.09.73-9.5 5.73Z" class="cls-8"/>
|
||||
<path fill="#0d0d0d" fill-rule="evenodd" d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/>
|
||||
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
/* ubuntu-300 - latin */
|
||||
@font-face {
|
||||
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||
|
||||
Reference in New Issue
Block a user