knso/lackwerk-kl
Archived
1
0
Fork 0
generated from knso/webklar-preview-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modernisierung der Lackwerk-Webseite

Browse Source 
Im Ordner alt webseite/ lag ein HTTrack-Mirror der alten Seite von lackwerk-kl.de – eine starre 950px-Seite von 2014/2022 mit fixem Layout, Stock-Fotos und einer simplen Bildergalerie. Nicht responsive, nicht mehr zeitgemäß.

Was ich Schritt für Schritt gemacht habe
1. Firma recherchiert
Aus Altseite, Google, Branchenverzeichnissen und Facebook ein vollständiges Profil erstellt:

Lackwerk GmbH, Gienanthstr. 2–4, Kaiserslautern · Inhaber Patric Hertz · gegründet 2014
Leistungen, Öffnungszeiten, Rechtsdaten (HRB 31677, USt DE295225567)
Bewertungen: 5,0★ bei 72 Google-Bewertungen, 100 % empfohlen (Facebook), 334 Follower
2. Echte Bilder von Facebook geholt (wie von dir gewünscht)
Von der öffentlichen Seite derlackspezialist die echten Arbeitsfotos extrahiert und heruntergeladen:

Lackierer in der Spritzkabine → Hero-Bild
komplette Porsche-911-Restauration (Rohzustand → Grundierung → frisch lackiert → Hochglanz) → Referenz-Galerie
Logo + einige Werkstattmotive aus der Altseite als Ergänzung
3. Neue Webseite gebaut – ein sauberes, modernes index.html (21st-inspiriert, aber seriös):

Bereich	Inhalt
Header	Glasig, sticky, Wortmarke, Mobile-Menü
Hero	Dunkel-elegant, echtes Kabinen-Foto, Gradient-Text, Trust-Zahlen
Trust-Leiste	Meisterqualität, alle Marken, faire Preise
Leistungen	6 Karten mit Icons & Hover-Effekt
Über uns	Firmengeschichte + Patric Hertz
Prozess	4 Schritte von Anfrage bis Übergabe
Referenzen	Bento-Galerie mit Lightbox (echte Fotos)
Bewertungen	Nur belegbare Kennzahlen, keine erfundenen Zitate
Kontakt	Daten, Öffnungszeiten, funktionierende Google-Map
Footer	Impressum & Datenschutz als Modals
Markenfarbe Blau (passend zum Logo), Fonts Sora/Inter, dezente Scroll-Animationen, voll responsiv.

4. Im Browser getestet & gefixt
Alle Sektionen, Modal, Map und schnelles Scrollen geprüft. Zwei Details korrigiert: Header-Umbruch bei mittlerer Breite + Absicherung, damit bei schnellem Scrollen keine Sektion unsichtbar bleibt.

Dateien
index.html – neue Webseite (ersetzt die Platzhalter-Vorlage)
assets/ – Logo + Werkstattmotive
assets/work/ – echte Facebook-Arbeitsfotos
Alte Seite unter alt webseite/ unberührt als Referenz
This commit is contained in:
Kenso Grimm
2026-07-12 14:38:27 +02:00
parent 59bfd1b2d1
commit 5acd7046d3
41 changed files with 2484 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
alt webseite/alte webseite/www.lackwerk-kl.de/scripts/index70c6.css Normal file
View File

@@ -0,0 +1,17 @@
.S0 { margin:0 auto; background-color:rgb(255,255,255); }
.S1 { line-height:13.6608px; -line-height:14px; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; color:#ffffff; text-decoration:none; }
.S10 { line-height:17.6856px; -line-height:18px; font-family:HelvLight; font-size:15px; font-style:normal; font-weight:normal; color:#2a2a2a; text-decoration:none; display:inline; }
.S11 { line-height:17.6856px; -line-height:18px; font-family:HelvLight; font-size:15px; font-style:normal; font-weight:bold; color:#8b0000; text-decoration:none; display:inline; }
.S12 { background-color:rgba(255,255,0,0.862); }
.S13 { background-color:rgb(139,37,0); border:outset 2px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; }
.S14 { line-height:13.6608px; -line-height:14px; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; color:#000000; text-decoration:none; }
.S15 { background-color:rgba(255,246,143,0); }
.S16 { background-color:rgb(255,255,0); border:outset 2px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; }
.S2 { background-color:rgb(223,227,229); }
.S3 { line-height:26.1833px; -line-height:26px; font-family:Arial; font-size:23px; font-style:normal; font-weight:normal; color:#595959; text-decoration:none; display:inline; }
.S4 { cursor:pointer; }
.S5 { line-height:17.0761px; -line-height:17px; font-family:Arial; font-size:15px; font-style:normal; font-weight:bold; color:#333333; text-decoration:none; display:inline; }
.S6 { line-height:17.0761px; -line-height:17px; font-family:Arial; font-size:15px; font-style:normal; font-weight:bold; color:#000000; text-decoration:none; display:inline; }
.S7 { line-height:17.0761px; -line-height:17px; font-family:Arial; font-size:15px; font-style:normal; font-weight:bold; color:#333333; text-decoration:underline; display:inline; }
.S8 { line-height:14.7992px; -line-height:15px; font-family:Arial; font-size:13px; font-style:normal; font-weight:bold; color:#333333; text-decoration:none; display:inline; }
.S9 { line-height:17.6856px; -line-height:18px; font-family:HelvLight; font-size:15px; font-style:normal; font-weight:bold; color:#2a2a2a; text-decoration:none; display:inline; }