generated from knso/webklar-preview-template
Kenso Grimm
2dbf840238
Für die Lackwerk GmbH in Kaiserslautern wurde eine komplette One-Page-Website entwickelt, die sich visuell an einem hochwertigen Referenz-Template orientiert, aber eine eigenständige blaue Farbwelt mit eleganter Serifen-Typografie erhält. Die Hero-Section empfängt Besucher mit einem vollflächigen, blau getönten Hintergrundbild, dem echten Lackwerk-Logo in der Navigation und einer animierten Headline, bei der die Wörter Unfall, Delle, Beule und Kratzer rotierend eingeblendet werden — ergänzt um eine Vorteilsleiste mit Live-Google-Bewertung (4,8 Sterne, angebunden über die Google Places API mit Fallback). Darunter präsentiert die Leistungen-Section sechs Angebote — von Lackierungen aller Art über Smart Repair bis Oldtimer-Restauration — in abgerundeten Karten vor blauem Keyvisual-Hintergrund, wobei die letzte Karte ein Video der Keramikversiegelung zeigt. Die Referenzen-Section macht die Werkstattarbeit erlebbar: Ein interaktiver Vorher-Nachher-Schieberegler vergleicht einen Karosserieschaden mit dem fertigen Hochglanz-Finish, gespeist aus echten Werkstattfotos eines Porsche-911-Projekts. Im Über-uns-Bereich stellt sich Inhaber Patric Hertz mit persönlicher Philosophie vor, flankiert von rotierenden Kundenstimmen und einem Platzhalter für sein Profilbild. Die Kontakt-Section bündelt Adresse, Telefon, E-Mail und Öffnungszeiten neben einer interaktiven dunklen Karte (MapLibre) mit Marker und Routenplanung zur Gienanthstraße 2–4. Den Abschluss bildet ein Sticky-Reveal-Footer, der sich beim Scrollen unter der Seite hervorschiebt — mit Navigationslinks, Leistungsübersicht, Kontaktdaten und großem Logo-Schriftzug. Die Seite ist durchgehend responsiv, startet immer am Seitenanfang und funktioniert dank lokal eingebetteter Bilder auch offline.
196 lines
11 KiB
HTML
196 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Lackwerk — Autolackiererei & Karosserie</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500;1,8..60,600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root { --accent: #2FA4F0; }
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #0d0f12; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
|
|
a { color: #f0f0ec; text-decoration: none; }
|
|
a:hover { color: var(--accent); }
|
|
|
|
.lw-root { position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: #0d0f12; }
|
|
.lw-bg-base { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 78% 12%, #1c2530 0%, #12161b 42%, #0a0c0f 100%); }
|
|
.lw-bg-img { position: absolute; inset: 0; z-index: 1; filter: hue-rotate(85deg) saturate(1.15); }
|
|
.lw-bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.lw-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(18,60,120,0.32); mix-blend-mode: multiply; }
|
|
.lw-overlay-1 { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(9,11,14,0.82) 0%, rgba(9,11,14,0.34) 30%, rgba(9,11,14,0.30) 55%, rgba(9,11,14,0.86) 100%); }
|
|
.lw-overlay-2 { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(90% 70% at 22% 42%, rgba(9,11,14,0.55) 0%, rgba(9,11,14,0) 60%); }
|
|
.lw-topline { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5; }
|
|
|
|
nav.lw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 22px clamp(20px, 4vw, 56px); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, padding .35s ease; }
|
|
nav.lw-nav.scrolled { background: rgba(11,13,16,.92); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.10); padding-top: 14px; padding-bottom: 14px; }
|
|
.lw-nav-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
|
|
.lw-navlinks { display: flex; gap: 34px; align-items: center; }
|
|
.lw-navlinks.right { justify-content: flex-end; }
|
|
.lw-navlinks a { font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
|
|
.lw-logo { display: flex; align-items: center; justify-self: center; }
|
|
.lw-logo img { height: 26px; width: auto; display: block; }
|
|
.lw-burger { display: none; grid-column: 3; justify-self: end; background: transparent; border: 1.5px solid rgba(255,255,255,.28); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: #f4f3ef; align-items: center; }
|
|
.lw-burger span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
|
|
|
|
.lw-content { position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(120px, 16vh, 190px) clamp(20px, 4vw, 56px) 0; }
|
|
.lw-container { max-width: 1320px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; flex: 1; }
|
|
.lw-spacer { flex: 1; min-height: 40px; }
|
|
|
|
@keyframes lw-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
|
|
.lw-headline { max-width: 720px; margin: 0 auto; text-align: center; animation: lw-fadein .7s ease both; }
|
|
.lw-headline h1 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.08; letter-spacing: -.005em; color: #f5f4f0; font-size: clamp(36px, 4.8vw, 64px); margin-bottom: 22px; }
|
|
.lw-headline h1 .line { display: block; }
|
|
.lw-wordslot { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; text-align: left; }
|
|
.lw-word { display: inline-block; color: var(--accent); font-style: italic; will-change: transform, opacity; }
|
|
.lw-sub { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: #c5c9ce; max-width: 560px; margin: 0 auto; font-weight: 500; }
|
|
|
|
.lw-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px); padding: 28px 0 46px; }
|
|
.lw-benefit { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
|
|
.lw-benefit p { font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600; }
|
|
.lw-benefit img.icon { opacity: .95; }
|
|
.lw-benefit.last { justify-content: flex-end; gap: 14px; }
|
|
|
|
.lw-badge { display: inline-flex; flex-direction: column; gap: 3px; align-self: flex-start; background: #000; border: 1px solid rgba(255,255,255,.12); border-radius: 44px; padding: 11px 20px; transition: transform .3s ease, box-shadow .3s ease; }
|
|
.lw-badge:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
|
|
.lw-badge .name { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
|
|
.lw-badge .row { display: inline-flex; align-items: center; gap: 7px; }
|
|
.lw-badge .grau { color: #DBDED9; font-weight: 600; font-size: 15px; }
|
|
.lw-badge .grau.light { font-weight: 300; }
|
|
|
|
@media (max-width: 860px) {
|
|
.lw-navlinks { display: none; }
|
|
.lw-burger { display: inline-flex; }
|
|
.lw-benefits { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
|
|
}
|
|
@media (max-width: 520px) {
|
|
.lw-benefits { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="lw-root" id="top">
|
|
<div class="lw-bg-base"></div>
|
|
<div class="lw-bg-img">
|
|
<!-- TODO: eigenes Bild verwenden — aktuell Template-Bild von lack-box.de, per Filter blau -->
|
|
<img src="https://lack-box.de/wp-content/uploads/2020/07/startseite-01-tankklappe-squo-best.jpg" alt="">
|
|
</div>
|
|
<div class="lw-tint"></div>
|
|
<div class="lw-overlay-1"></div>
|
|
<div class="lw-overlay-2"></div>
|
|
<div class="lw-topline"></div>
|
|
|
|
<nav class="lw-nav" id="lwNav">
|
|
<div class="lw-nav-inner">
|
|
<div class="lw-navlinks">
|
|
<a href="#services">Services</a>
|
|
<a href="#techniken">Techniken</a>
|
|
</div>
|
|
<a href="#top" class="lw-logo"><img src="assets/logo-lackwerk.png" alt="Lackwerk"></a>
|
|
<div class="lw-navlinks right">
|
|
<a href="#ueber-uns">Über uns</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</div>
|
|
<button class="lw-burger" aria-label="Menü"><span></span></button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="lw-content">
|
|
<div class="lw-container">
|
|
<div class="lw-spacer"></div>
|
|
|
|
<div class="lw-headline">
|
|
<h1>
|
|
<span class="line">Rein mit
|
|
<span class="lw-wordslot" id="lwWordSlot"><span class="lw-word" id="lwWord">Kratzer</span></span>
|
|
</span>
|
|
<span class="line">Raus wie neu.</span>
|
|
</h1>
|
|
<p class="lw-sub">Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.</p>
|
|
</div>
|
|
|
|
<div class="lw-spacer"></div>
|
|
|
|
<div class="lw-benefits">
|
|
<div class="lw-benefit">
|
|
<p>Fahrzeug-Reparatur wie in der Vertragswerkstatt — nur günstiger</p>
|
|
</div>
|
|
<div class="lw-benefit">
|
|
<img class="icon" src="assets/benefit01.svg" alt="" width="22" height="27">
|
|
<p>Wir nutzen Premium-Lacke</p>
|
|
</div>
|
|
<div class="lw-benefit">
|
|
<img class="icon" src="assets/benefit02.svg" alt="" width="30" height="24">
|
|
<p>Wir verbauen nur Originalteile</p>
|
|
</div>
|
|
<div class="lw-benefit last">
|
|
<a class="lw-badge" href="https://www.google.com/maps/place/?q=place_id:ChIJY8mtmUUNlkcRTRMePruieWA" target="_blank" rel="noopener">
|
|
<span class="name">Lackwerk</span>
|
|
<span class="row">
|
|
<span class="grau" id="lwRating">4,8</span>
|
|
<img src="assets/review.svg" alt="Bewertung" width="66" height="10">
|
|
<span class="grau light" id="lwCount">(112)</span>
|
|
</span>
|
|
</a>
|
|
<img class="icon" src="assets/benefit03.svg" alt="" width="20" height="30">
|
|
<p>Wir arbeiten mit der gleichen Genauigkeit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Nav scroll state
|
|
var nav = document.getElementById('lwNav');
|
|
addEventListener('scroll', function () {
|
|
nav.classList.toggle('scrolled', scrollY > 30);
|
|
}, { passive: true });
|
|
|
|
// Rotating word (fixed slot width so "Rein mit" never shifts)
|
|
var WORDS = ['Unfall', 'Delle', 'Beule', 'Kratzer'];
|
|
var word = document.getElementById('lwWord');
|
|
var slot = document.getElementById('lwWordSlot');
|
|
function sizeSlot() {
|
|
var probe = document.createElement('span');
|
|
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;';
|
|
var cs = getComputedStyle(word);
|
|
probe.style.font = cs.font; probe.style.fontStyle = cs.fontStyle; probe.style.letterSpacing = cs.letterSpacing;
|
|
document.body.appendChild(probe);
|
|
var max = 0;
|
|
WORDS.forEach(function (w) { probe.textContent = w; max = Math.max(max, probe.getBoundingClientRect().width); });
|
|
probe.remove();
|
|
slot.style.width = Math.ceil(max + 2) + 'px';
|
|
}
|
|
sizeSlot();
|
|
addEventListener('resize', sizeSlot);
|
|
if (document.fonts && document.fonts.ready) document.fonts.ready.then(sizeSlot);
|
|
|
|
var i = WORDS.indexOf('Kratzer');
|
|
setInterval(function () {
|
|
i = (i + 1) % WORDS.length;
|
|
var next = WORDS[i];
|
|
word.animate(
|
|
[{ transform: 'translateY(0)', opacity: 1 }, { transform: 'translateY(-110%)', opacity: 0 }],
|
|
{ duration: 300, easing: 'cubic-bezier(.6,0,.4,1)', fill: 'forwards' }
|
|
).onfinish = function () {
|
|
word.textContent = next;
|
|
word.animate(
|
|
[{ transform: 'translateY(110%)', opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }],
|
|
{ duration: 340, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'forwards' }
|
|
);
|
|
};
|
|
}, 2400);
|
|
|
|
// Google-Bewertung: live via eigenem Backend-Endpunkt /api/reviews
|
|
// (Place ID: ChIJY8mtmUUNlkcRTRMePruieWA — API-Key bleibt server-seitig!)
|
|
fetch('/api/reviews').then(function (r) { return r.ok ? r.json() : null; }).then(function (d) {
|
|
if (!d) return;
|
|
if (d.rating) document.getElementById('lwRating').textContent = String(d.rating).replace('.', ',');
|
|
if (d.user_ratings_total) document.getElementById('lwCount').textContent = '(' + d.user_ratings_total + ')';
|
|
}).catch(function () { /* Fallback: statische Werte bleiben stehen */ });
|
|
</script>
|
|
</body>
|
|
</html>
|