generated from knso/webklar-preview-template
69 lines
3.3 KiB
HTML
69 lines
3.3 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Start · Test-Website</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="app.js" defer></script>
|
||
</head>
|
||
<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>
|
||
<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>
|