webfarben/traidendorf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moderne Webseite für Traidendorf erstellt

Browse Source 
- Bootstrap 5 Framework lokal integriert
- Responsive Design mit Hintergrundbild
- Vereine: SSC Traidendorf, FF Traidendorf
- Gewerbe: Kanuschorsch, Anna Ebenbeck Keramik, Dellentechnik Lang, StolzHolz, webfarben.net, Baumer Maschinenverleih
- Sehenswürdigkeiten: Schloss Traidendorf, St. Leonhard Kirche
- Back-to-Top Button
- Custom Farbschema angepasst an lokales Bild
This commit is contained in:
webfarben
2026-02-05 18:28:30 +01:00
parent 7fe35c6511
commit 6d9a067312
10 changed files with 1071 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
index.html Normal file
View File

@@ -0,0 +1,323 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traidendorf - Unsere Gemeinde</title>
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="bootstrap-icons/bootstrap-icons.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark sticky-top" style="background-color: #2c5f2d;">
<div class="container">
<a class="navbar-brand fw-bold" href="#">
<i class="bi bi-house-heart-fill me-2"></i>Traidendorf
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#home">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#vereine">Vereine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gewerbe">Gewerbe</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sehenswuerdigkeiten">Sehenswürdigkeiten</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center min-vh-75">
<div class="col-lg-8 mx-auto text-center">
<h1 class="display-3 fw-bold mb-4 animate-fade-in">Willkommen in Traidendorf</h1>
<p class="lead mb-4 animate-fade-in-delay">
Entdecken Sie unsere lebendige Gemeinde mit ihren Vereinen,
Gewerbetreibenden und historischen Sehenswürdigkeiten
</p>
<div class="animate-fade-in-delay-2">
<a href="#vereine" class="btn btn-primary btn-lg me-2 mb-2">
<i class="bi bi-people-fill me-2"></i>Vereine entdecken
</a>
<a href="#gewerbe" class="btn btn-outline-light btn-lg mb-2">
<i class="bi bi-shop me-2"></i>Gewerbe erkunden
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Vereine Section -->
<section id="vereine" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">
<i class="bi bi-people-fill text-primary me-2"></i>Unsere Vereine
</h2>
<p class="lead text-muted">Das Vereinsleben macht unsere Gemeinde lebendig</p>
</div>
<div class="row g-4 justify-content-center">
<!-- SSC Traidendorf -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-trophy-fill display-4 text-primary"></i>
</div>
<h5 class="card-title fw-bold mb-3">SSC Traidendorf</h5>
<p class="card-text text-muted mb-4">
Stockschützenverein - Eistockschießen auf der Sommerbahn
</p>
<a href="https://ssc.traidendorf.de/" target="_blank" class="btn btn-primary">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- FF Traidendorf -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-fire display-4 text-danger"></i>
</div>
<h5 class="card-title fw-bold mb-3">Freiwillige Feuerwehr</h5>
<p class="card-text text-muted mb-4">
Ihre Sicherheit ist unsere Mission - 24/7 für Sie da
</p>
<a href="https://ff.traidendorf.de/" target="_blank" class="btn btn-danger">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gewerbe Section -->
<section id="gewerbe" class="py-5">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">
<i class="bi bi-shop text-success me-2"></i>Lokales Gewerbe
</h2>
<p class="lead text-muted">Qualität und Service aus der Region</p>
</div>
<div class="row g-4">
<!-- Kanuschorsch -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift bg-light">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-water display-4 text-info"></i>
</div>
<h5 class="card-title fw-bold mb-3">Kanuschorsch</h5>
<p class="card-text text-muted mb-4">
Kanuverleih und Wassersport-Abenteuer auf der Altmühl
</p>
<a href="https://www.kanuschorsch.de/" target="_blank" class="btn btn-info text-white">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- Anna Ebenbeck Keramik -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift bg-light">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-palette-fill display-4 text-warning"></i>
</div>
<h5 class="card-title fw-bold mb-3">Anna Ebenbeck Keramik</h5>
<p class="card-text text-muted mb-4">
Handgefertigte Keramik und künstlerische Unikate
</p>
<a href="https://www.anna-ebenbeck-keramik.de/" target="_blank" class="btn btn-warning">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- Dellentechnik Lang -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift bg-light">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-tools display-4 text-secondary"></i>
</div>
<h5 class="card-title fw-bold mb-3">Dellentechnik Lang</h5>
<p class="card-text text-muted mb-4">
Professionelle Ausbeultechnik ohne Lackierung für Ihr Fahrzeug
</p>
<a href="http://www.dellentechniker-lang.com/" target="_blank" class="btn btn-secondary">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- StolzHolz -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift bg-light">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-tree-fill display-4 text-success"></i>
</div>
<h5 class="card-title fw-bold mb-3">StolzHolz</h5>
<p class="card-text text-muted mb-4">
Hochwertige Holzarbeiten und maßgefertigte Möbel
</p>
<a href="https://stolzholz-schmid.de/" target="_blank" class="btn btn-success">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- webfarben.net -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift bg-light">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-laptop display-4" style="color: hsl(34, 72%, 46%);"></i>
</div>
<h5 class="card-title fw-bold mb-3">webfarben.net</h5>
<p class="card-text text-muted mb-4">
IT-Support, Webservices und Frontendentwicklung
</p>
<a href="https://webfarben.net" target="_blank" class="btn text-white" style="background-color:hsl(34, 72%, 46%);">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- Baumer Maschinenverleih -->
<div class="col-md-6 col-lg-4">
<div class="card h-100 shadow-sm hover-lift bg-light">
<div class="card-body text-center p-4">
<div class="icon-box mb-3">
<i class="bi bi-gear-fill display-4" style="color: #86af49;"></i>
</div>
<h5 class="card-title fw-bold mb-3">Baumer Maschinenverleih</h5>
<p class="card-text text-muted mb-4">
Professionelle Bau- und Gartenmaschinen sowie Dienstleistungen
</p>
<a href="https://baumer.traidendorf.de/" target="_blank" class="btn text-white" style="background-color: #86af49;">
Zur Webseite <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sehenswürdigkeiten Section -->
<section id="sehenswuerdigkeiten" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">
<i class="bi bi-geo-alt-fill text-danger me-2"></i>Sehenswürdigkeiten
</h2>
<p class="lead text-muted">Historische Schätze in Traidendorf</p>
</div>
<div class="row justify-content-center g-4">
<!-- Schloss Traidendorf -->
<div class="col-md-6 col-lg-5">
<div class="card shadow-lg hover-lift">
<div class="card-body text-center p-5">
<div class="icon-box mb-4">
<i class="bi bi-signpost-2-fill display-3 text-primary"></i>
</div>
<h3 class="card-title fw-bold mb-3">Schloss Traidendorf</h3>
<p class="card-text text-muted mb-4 fs-5">
Ein historisches Juwel mit jahrhundertealter Geschichte und beeindruckender Architektur
</p>
<a href="https://www.hammerschloss.de/" target="_blank" class="btn btn-primary btn-lg">
Mehr erfahren <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
<!-- St. Leonhard Kirche -->
<div class="col-md-6 col-lg-5">
<div class="card shadow-lg hover-lift">
<div class="card-body text-center p-5">
<div class="icon-box mb-4">
<i class="bi bi-signpost-2-fill display-3 text-primary"></i>
</div>
<h3 class="card-title fw-bold mb-3">St. Leonhard Kirche</h3>
<p class="card-text text-muted mb-4 fs-5">
Barocke Saalkirche aus dem Jahr 1684/85 mit spätgotischen Holzstatuen von Maria und Johannes dem Täufer
</p>
<a href="https://de.wikipedia.org/wiki/St._Leonhard_(Traidendorf)" target="_blank" class="btn btn-primary btn-lg">
Mehr erfahren <i class="bi bi-arrow-right ms-2"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-light py-4">
<div class="container">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<h5 class="fw-bold mb-3">
<i class="bi bi-house-heart-fill me-2"></i>Traidendorf
</h5>
<p class="text-muted">
Ihre Gemeinde im Herzen Bayerns
</p>
</div>
<div class="col-md-6 text-md-end">
<p class="mb-2">
© 2026 traidendorf
</p>
<p class="text-muted">
Credits: <a href="https://webfarben.net/" target="_blank" class="text-decoration-none text-info">webfarben.net</a>
</p>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<a href="#home" id="backToTop" class="back-to-top">
<i class="bi bi-arrow-up"></i>
</a>
<!-- Bootstrap JS Bundle -->
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>