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:
133
README.md
133
README.md
@@ -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
bootstrap-icons/bootstrap-icons.min.css
vendored
Normal file
5
bootstrap-icons/bootstrap-icons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
bootstrap-icons/fonts/bootstrap-icons.woff
Normal file
BIN
bootstrap-icons/fonts/bootstrap-icons.woff
Normal file
Binary file not shown.
BIN
bootstrap-icons/fonts/bootstrap-icons.woff2
Normal file
BIN
bootstrap-icons/fonts/bootstrap-icons.woff2
Normal file
Binary file not shown.
6
bootstrap/css/bootstrap.min.css
vendored
Normal file
6
bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
7
bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
370
css/style.css
Normal file
370
css/style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
img/Banner/IMG_2630.JPEG
Normal file
BIN
img/Banner/IMG_2630.JPEG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
323
index.html
Normal file
323
index.html
Normal 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>
|
||||||
229
js/script.js
Normal file
229
js/script.js
Normal file
@@ -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