generated from knso/webklar-preview-template
36 lines
1.8 KiB
HTML
36 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Test-Website · WEBklar</title>
|
|
<style>
|
|
:root { --bg:#0f0b1f; --card:#1b1533; --text:#f4f1ff; --muted:#b7aed6; --accent:#7c5cff; }
|
|
* { box-sizing:border-box; }
|
|
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
|
|
header { padding:72px 20px 48px; text-align:center; background:radial-gradient(circle at 50% 0,#3a2a85 0,var(--bg) 70%); }
|
|
h1 { font-size:clamp(2rem,6vw,3.2rem); margin:0 0 12px; }
|
|
header p { color:var(--muted); max-width:560px; margin:0 auto 28px; }
|
|
.btn { display:inline-block; background:var(--accent); color:#fff; padding:12px 24px; border-radius:999px; text-decoration:none; font-weight:600; }
|
|
main { max-width:960px; margin:0 auto; padding:24px 20px 64px; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
|
|
.card { background:var(--card); border-radius:16px; padding:22px; }
|
|
.card h2 { margin:0 0 6px; font-size:1.1rem; }
|
|
.card p { margin:0; color:var(--muted); font-size:.95rem; }
|
|
footer { text-align:center; color:var(--muted); font-size:.85rem; padding:24px 20px 40px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Test-Website</h1>
|
|
<p>Eine kleine Beispielseite, um die Projekt-Vorschau im WEBklar-Kundenbereich zu testen.</p>
|
|
<a class="btn" href="#leistungen">Mehr erfahren</a>
|
|
</header>
|
|
<main id="leistungen">
|
|
<section class="card"><h2>Schnell</h2><p>Statische Seite, sofort ausgeliefert.</p></section>
|
|
<section class="card"><h2>Responsiv</h2><p>Passt sich Handy, Tablet und Desktop an.</p></section>
|
|
<section class="card"><h2>Vorschau</h2><p>Jeder Git-Push aktualisiert diese Seite automatisch.</p></section>
|
|
</main>
|
|
<footer>Testprojekt · WEBklar</footer>
|
|
</body>
|
|
</html>
|