Moderne Webseite für Traidendorf erstellt
- 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:
@@ -1,3 +1,132 @@
|
||||
# Traidendorf.de
|
||||
# Traidendorf Webseite
|
||||
|
||||
Webseite von Traidendorf.de
|
||||
Moderne Webseite für die Gemeinde Traidendorf mit Präsentation lokaler Vereine und Gewerbetreibender.
|
||||
|
||||
## 🌟 Features
|
||||
|
||||
- **Responsive Design**: Optimiert für alle Geräte (Desktop, Tablet, Mobile)
|
||||
- **Bootstrap 5**: Moderne UI-Komponenten und Grid-System
|
||||
- **Smooth Scrolling**: Sanfte Navigation zwischen Bereichen
|
||||
- **Animationen**: Fade-in-Effekte und Hover-Animationen
|
||||
- **SEO-optimiert**: Semantisches HTML5
|
||||
- **Schnelle Ladezeiten**: Optimierte Assets und CDN-Integration
|
||||
|
||||
## 📁 Projektstruktur
|
||||
|
||||
```
|
||||
Webseite/
|
||||
│
|
||||
├── index.html # Hauptseite
|
||||
├── css/
|
||||
│ └── style.css # Custom Styles
|
||||
├── js/
|
||||
│ └── script.js # Interaktive Funktionen
|
||||
└── README.md # Diese Datei
|
||||
```
|
||||
|
||||
## 🚀 Installation & Nutzung
|
||||
|
||||
### Lokale Entwicklung
|
||||
|
||||
1. Repository klonen oder Dateien herunterladen
|
||||
2. `index.html` in einem Browser öffnen
|
||||
3. Für Live-Entwicklung einen lokalen Server verwenden:
|
||||
|
||||
```bash
|
||||
# Mit Python
|
||||
python -m http.server 8000
|
||||
|
||||
# Mit Node.js (http-server)
|
||||
npx http-server
|
||||
|
||||
# Mit VS Code Live Server Extension
|
||||
# Rechtsklick auf index.html -> "Open with Live Server"
|
||||
```
|
||||
|
||||
### Deployment
|
||||
|
||||
Die Webseite kann auf jedem Webserver gehostet werden:
|
||||
|
||||
- **Statischer Hosting**: GitHub Pages, Netlify, Vercel
|
||||
- **Traditioneller Webserver**: Apache, Nginx
|
||||
- **Upload**: Einfach alle Dateien via FTP hochladen
|
||||
|
||||
## 📋 Inhalt
|
||||
|
||||
### Vereine
|
||||
- **SSC Traidendorf** - Sportlicher Schwimmclub
|
||||
- **Freiwillige Feuerwehr** - Sicherheit und Brandschutz
|
||||
|
||||
### Gewerbe
|
||||
- **Kanuschorsch** - Kanuverleih und Wassersport
|
||||
- **Anna Ebenbeck Keramik** - Handgefertigte Keramikkunst
|
||||
- **Dellentechnik Lang** - Professionelle Ausbeultechnik
|
||||
- **StolzHolz** - Hochwertige Holzarbeiten
|
||||
|
||||
### Sehenswürdigkeiten
|
||||
- **Schloss Traidendorf** - Historisches Wahrzeichen
|
||||
|
||||
## 🛠️ Technologien
|
||||
|
||||
- **HTML5**: Semantische Struktur
|
||||
- **CSS3**: Modern mit Flexbox, Grid, Animationen
|
||||
- **JavaScript (ES6+)**: Interaktive Features
|
||||
- **Bootstrap 5.3.2**: Framework für responsives Design
|
||||
- **Bootstrap Icons**: Iconographie
|
||||
|
||||
## 🎨 Anpassungen
|
||||
|
||||
### Farben ändern
|
||||
|
||||
In [css/style.css](css/style.css) die CSS-Variablen anpassen:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary-color: #0d6efd;
|
||||
--secondary-color: #6c757d;
|
||||
/* ... weitere Farben */
|
||||
}
|
||||
```
|
||||
|
||||
### Inhalte hinzufügen
|
||||
|
||||
Neue Karten in [index.html](index.html) hinzufügen:
|
||||
|
||||
```html
|
||||
<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">
|
||||
<!-- Inhalt hier -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 📱 Browser-Kompatibilität
|
||||
|
||||
- ✅ Chrome (aktuell)
|
||||
- ✅ Firefox (aktuell)
|
||||
- ✅ Safari (aktuell)
|
||||
- ✅ Edge (aktuell)
|
||||
- ✅ Mobile Browser (iOS Safari, Chrome Mobile)
|
||||
|
||||
## 🤝 Mitwirken
|
||||
|
||||
Verbesserungsvorschläge und Beiträge sind willkommen!
|
||||
|
||||
1. Änderungen vornehmen
|
||||
2. Testen
|
||||
3. Dokumentieren
|
||||
|
||||
## 📄 Lizenz
|
||||
|
||||
© 2026 traidendorf
|
||||
Credits: [webfarben.net](https://webfarben.net/)
|
||||
|
||||
## 📞 Kontakt
|
||||
|
||||
Für Aktualisierungen der Inhalte oder technische Fragen wenden Sie sich bitte an die Gemeindeverwaltung.
|
||||
|
||||
---
|
||||
|
||||
**Entwickelt mit ❤️ für Traidendorf**
|
||||
+5
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Vendored
+6
File diff suppressed because one or more lines are too long
Vendored
+7
File diff suppressed because one or more lines are too long
+370
@@ -0,0 +1,370 @@
|
||||
/* ============================================
|
||||
Custom Styles für Traidendorf Webseite
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--primary-color: #2c5f2d;
|
||||
--secondary-color: #6c757d;
|
||||
--success-color: #4a7c4e;
|
||||
--info-color: #5b9aa9;
|
||||
--warning-color: #d4a574;
|
||||
--danger-color: #c44536;
|
||||
--light-color: #f8f9fa;
|
||||
--dark-color: #212529;
|
||||
--accent-color: #7d9b76;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Global Styles
|
||||
============================================ */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Hero Section
|
||||
============================================ */
|
||||
|
||||
.hero-section {
|
||||
background: url('../img/Banner/IMG_2630.JPEG') center center no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: white;
|
||||
padding: 100px 0 80px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-section h1,
|
||||
.hero-section p,
|
||||
.hero-section .btn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.min-vh-75 {
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Cards
|
||||
============================================ */
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover .icon-box {
|
||||
transform: scale(1.1);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Navigation
|
||||
============================================ */
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: white;
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nav-link:hover::after,
|
||||
.nav-link.active::after {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Buttons
|
||||
============================================ */
|
||||
|
||||
.btn {
|
||||
border-radius: 50px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #2c5f2d;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #3d7a3f;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 20px rgba(44, 95, 45, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Sections
|
||||
============================================ */
|
||||
|
||||
section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Animations
|
||||
============================================ */
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 1s ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-delay {
|
||||
animation: fadeIn 1s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
.animate-fade-in-delay-2 {
|
||||
animation: fadeIn 1s ease-out 0.6s both;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Footer
|
||||
============================================ */
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer a {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: var(--info-color) !important;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive Styles
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
|
||||
.hero-section h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.display-5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.btn-lg {
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.icon-box i {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Utility Classes
|
||||
============================================ */
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Scrollbar Styling
|
||||
============================================ */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--light-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Back to Top Button
|
||||
============================================ */
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-to-top.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.back-to-top:hover {
|
||||
background: var(--accent-color);
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.back-to-top {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
+323
@@ -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>
|
||||
+229
@@ -0,0 +1,229 @@
|
||||
// ============================================
|
||||
// Smooth Scrolling für Navigation Links
|
||||
// ============================================
|
||||
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
|
||||
if (target) {
|
||||
const offsetTop = target.offsetTop - 70;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
|
||||
// Navbar in Mobile schließen
|
||||
const navbarCollapse = document.querySelector('.navbar-collapse');
|
||||
if (navbarCollapse.classList.contains('show')) {
|
||||
navbarCollapse.classList.remove('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Navbar beim Scrollen
|
||||
// ============================================
|
||||
|
||||
let lastScroll = 0;
|
||||
const navbar = document.querySelector('.navbar');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
// Navbar Schatten beim Scrollen
|
||||
if (currentScroll > 100) {
|
||||
navbar.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.15)';
|
||||
} else {
|
||||
navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Active Navigation Link beim Scrollen
|
||||
// ============================================
|
||||
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop;
|
||||
const sectionHeight = section.clientHeight;
|
||||
|
||||
if (window.pageYOffset >= (sectionTop - 100)) {
|
||||
current = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${current}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Fade-in Animation beim Scrollen
|
||||
// ============================================
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -100px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Cards beobachten
|
||||
document.querySelectorAll('.card').forEach((card) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(30px)';
|
||||
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||
observer.observe(card);
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Card Tilt Effekt (optional)
|
||||
// ============================================
|
||||
|
||||
document.querySelectorAll('.hover-lift').forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const rotateX = (y - centerY) / 20;
|
||||
const rotateY = (centerX - x) / 20;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Button Ripple Effekt
|
||||
// ============================================
|
||||
|
||||
document.querySelectorAll('.btn').forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
const ripple = document.createElement('span');
|
||||
const rect = this.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = e.clientX - rect.left - size / 2;
|
||||
const y = e.clientY - rect.top - size / 2;
|
||||
|
||||
ripple.style.width = ripple.style.height = size + 'px';
|
||||
ripple.style.left = x + 'px';
|
||||
ripple.style.top = y + 'px';
|
||||
ripple.classList.add('ripple');
|
||||
|
||||
this.appendChild(ripple);
|
||||
|
||||
setTimeout(() => {
|
||||
ripple.remove();
|
||||
}, 600);
|
||||
});
|
||||
});
|
||||
|
||||
// CSS für Ripple Effekt dynamisch hinzufügen
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.btn {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: scale(0);
|
||||
animation: ripple-animation 0.6s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ripple-animation {
|
||||
to {
|
||||
transform: scale(4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// ============================================
|
||||
// Jahr im Footer automatisch aktualisieren
|
||||
// ============================================
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const footerText = document.querySelector('footer p');
|
||||
if (footerText && footerText.textContent.includes('©')) {
|
||||
footerText.textContent = `© ${currentYear} traidendorf`;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// Loading Animation (optional)
|
||||
// ============================================
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
document.body.style.opacity = '0';
|
||||
document.body.style.transition = 'opacity 0.5s ease';
|
||||
|
||||
setTimeout(() => {
|
||||
document.body.style.opacity = '1';
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Externe Links in neuem Tab öffnen
|
||||
// ============================================
|
||||
|
||||
document.querySelectorAll('a[href^="http"]').forEach(link => {
|
||||
if (!link.hasAttribute('target')) {
|
||||
link.setAttribute('target', '_blank');
|
||||
link.setAttribute('rel', 'noopener noreferrer');
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// Console Message
|
||||
// ============================================
|
||||
|
||||
console.log('%c Willkommen auf traidendorf.de! ', 'background: linear-gradient(135deg, #2c5f2d 0%, #7d9b76 100%); color: white; padding: 10px 20px; font-size: 16px; font-weight: bold;');
|
||||
console.log('%c Website erstellt mit ❤️ für Traidendorf ', 'color: #2c5f2d; font-size: 12px;');
|
||||
|
||||
// ============================================
|
||||
// Back to Top Button
|
||||
// ============================================
|
||||
|
||||
const backToTopButton = document.getElementById('backToTop');
|
||||
|
||||
// Button anzeigen/ausblenden beim Scrollen
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
backToTopButton.classList.add('show');
|
||||
} else {
|
||||
backToTopButton.classList.remove('show');
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user