generated from knso/webklar-preview-template
Testseite: mehrere Unterseiten, Tabs, Galerie, Preise, Formular
This commit is contained in:
webklar-system committed
1 parent
e42bac66ac
commit
9766c245a3
8 files changed
+368
-26
No files matched your search
+59
-26
@@ -3,33 +3,66 @@
|
||||
<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>
|
||||
<title>Start · Test-Website</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="app.js" defer></script>
|
||||
</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>
|
||||
<body data-page="start">
|
||||
<nav>
|
||||
<a class="logo" href="index.html">Test-Website</a>
|
||||
<button class="menu-btn" aria-label="Menü">☰</button>
|
||||
<ul>
|
||||
<li><a data-page="start" href="index.html">Start</a></li>
|
||||
<li><a data-page="leistungen" href="leistungen.html">Leistungen</a></li>
|
||||
<li><a data-page="preise" href="preise.html">Preise</a></li>
|
||||
<li><a data-page="ueber" href="ueber-uns.html">Über uns</a></li>
|
||||
<li><a data-page="kontakt" href="kontakt.html">Kontakt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<header class="hero">
|
||||
<h1>Willkommen auf der Test-Website</h1>
|
||||
<p>Eine Beispielseite mit mehreren Unterseiten, Buttons, Tabs, Galerie und Formular – zum Ausprobieren der Website-Analyse.</p>
|
||||
<a class="btn" href="leistungen.html">Leistungen ansehen</a>
|
||||
<a class="btn ghost" href="kontakt.html">Kontakt aufnehmen</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>
|
||||
<section class="wrap">
|
||||
<div class="stats">
|
||||
<div class="card"><b>120+</b><span class="muted">zufriedene Testkunden</span></div>
|
||||
<div class="card"><b>24 h</b><span class="muted">Antwortzeit</span></div>
|
||||
<div class="card"><b>4,9</b><span class="muted">Sterne (erfunden)</span></div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="wrap">
|
||||
<h2>Was möchtest du wissen?</h2>
|
||||
<div class="tabs" data-panels=".start-panel">
|
||||
<button class="on">Für Privatkunden</button><button>Für Firmen</button><button>Für Vereine</button>
|
||||
</div>
|
||||
<div class="start-panel tab-panel on card"><h3>Privatkunden</h3><p>Persönliche Beratung, faire Preise, schnelle Umsetzung.</p></div>
|
||||
<div class="start-panel tab-panel card"><h3>Firmen</h3><p>Websites, Shops und Wartung aus einer Hand.</p></div>
|
||||
<div class="start-panel tab-panel card"><h3>Vereine</h3><p>Vergünstigte Pakete für gemeinnützige Vereine.</p></div>
|
||||
</section>
|
||||
<section class="wrap">
|
||||
<h2>Galerie</h2>
|
||||
<p class="muted">Klick auf ein Bild, um es groß anzuzeigen.</p>
|
||||
<div class="gallery">
|
||||
<button style="background:linear-gradient(135deg,#7c5cff,#3ecf8e)">Projekt A</button>
|
||||
<button style="background:linear-gradient(135deg,#ff6b6b,#ffb347)">Projekt B</button>
|
||||
<button style="background:linear-gradient(135deg,#00b4d8,#7c5cff)">Projekt C</button>
|
||||
<button style="background:linear-gradient(135deg,#f72585,#7209b7)">Projekt D</button>
|
||||
<button style="background:linear-gradient(135deg,#43aa8b,#90be6d)">Projekt E</button>
|
||||
<button style="background:linear-gradient(135deg,#f9c74f,#f8961e)">Projekt F</button>
|
||||
</div>
|
||||
<div class="lightbox"><div></div></div>
|
||||
</section>
|
||||
<section class="wrap">
|
||||
<h2>Häufige Fragen</h2>
|
||||
<details><summary>Ist das eine echte Firma?</summary><p>Nein, das ist eine Testseite von WEBklar.</p></details>
|
||||
<details><summary>Wofür ist die Seite da?</summary><p>Um Klicks, Seitenaufrufe und die Heatmap der Website-Analyse zu testen.</p></details>
|
||||
<details><summary>Werden Formulardaten gespeichert?</summary><p>Nein, das Kontaktformular verschickt nichts.</p></details>
|
||||
</section>
|
||||
<footer>
|
||||
Testprojekt von WEBklar – keine echte Firma.<br>
|
||||
<a href="impressum.html">Impressum</a><a href="kontakt.html">Kontakt</a><a href="#top" onclick="scrollTo(0,0);return false">Nach oben ↑</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user