generated from knso/webklar-preview-template
Testseite: mehrere Unterseiten, Tabs, Galerie, Preise, Formular
This commit is contained in:
1 parent
e42bac66ac
commit
9766c245a3
8 files changed
+368
-26
No files matched your search
@@ -0,0 +1,46 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const page = document.body.dataset.page
|
||||||
|
document.querySelectorAll('nav ul a').forEach(a => { if (a.dataset.page === page) a.classList.add('active') })
|
||||||
|
const menu = document.querySelector('.menu-btn')
|
||||||
|
if (menu) menu.addEventListener('click', () => document.querySelector('nav ul').classList.toggle('open'))
|
||||||
|
|
||||||
|
document.querySelectorAll('.tabs').forEach(tabs => {
|
||||||
|
const panels = document.querySelectorAll(tabs.dataset.panels)
|
||||||
|
tabs.querySelectorAll('button').forEach((b, i) => b.addEventListener('click', () => {
|
||||||
|
tabs.querySelectorAll('button').forEach(x => x.classList.remove('on'))
|
||||||
|
panels.forEach(p => p.classList.remove('on'))
|
||||||
|
b.classList.add('on'); panels[i].classList.add('on')
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
const box = document.querySelector('.lightbox')
|
||||||
|
if (box) {
|
||||||
|
document.querySelectorAll('.gallery button').forEach(b => b.addEventListener('click', () => {
|
||||||
|
const d = box.querySelector('div'); d.textContent = b.textContent; d.style.background = b.style.background
|
||||||
|
box.classList.add('on')
|
||||||
|
}))
|
||||||
|
box.addEventListener('click', () => box.classList.remove('on'))
|
||||||
|
}
|
||||||
|
|
||||||
|
const yearly = document.querySelector('#yearly')
|
||||||
|
if (yearly) yearly.addEventListener('change', () => {
|
||||||
|
document.querySelectorAll('[data-month]').forEach(el => {
|
||||||
|
const m = Number(el.dataset.month)
|
||||||
|
el.textContent = yearly.checked ? `${Math.round(m * 10)} € / Jahr` : `${m} € / Monat`
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const counter = document.querySelector('.counter')
|
||||||
|
if (counter) {
|
||||||
|
const out = counter.querySelector('output'); let n = 0
|
||||||
|
counter.querySelector('[data-step="-1"]').addEventListener('click', () => { n = Math.max(0, n - 1); out.value = n })
|
||||||
|
counter.querySelector('[data-step="1"]').addEventListener('click', () => { n += 1; out.value = n })
|
||||||
|
}
|
||||||
|
|
||||||
|
const form = document.querySelector('#kontakt-form')
|
||||||
|
if (form) form.addEventListener('submit', e => {
|
||||||
|
e.preventDefault()
|
||||||
|
document.querySelector('.notice').classList.add('on')
|
||||||
|
form.reset()
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Impressum · Test-Website</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body data-page="impressum">
|
||||||
|
<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>Impressum</h1></header>
|
||||||
|
<section class="wrap">
|
||||||
|
<p>Dies ist eine Testseite ohne echtes Unternehmen. Verantwortlich für den Betrieb: WEBklar GbR, siehe <a href="https://webklar.com/impressum">webklar.com/impressum</a>.</p>
|
||||||
|
</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>
|
||||||
+59
-26
@@ -3,33 +3,66 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Test-Website · WEBklar</title>
|
<title>Start · Test-Website</title>
|
||||||
<style>
|
<link rel="stylesheet" href="style.css">
|
||||||
:root { --bg:#0f0b1f; --card:#1b1533; --text:#f4f1ff; --muted:#b7aed6; --accent:#7c5cff; }
|
<script src="app.js" defer></script>
|
||||||
* { 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>
|
</head>
|
||||||
<body>
|
<body data-page="start">
|
||||||
<header>
|
<nav>
|
||||||
<h1>Test-Website</h1>
|
<a class="logo" href="index.html">Test-Website</a>
|
||||||
<p>Eine kleine Beispielseite, um die Projekt-Vorschau im WEBklar-Kundenbereich zu testen.</p>
|
<button class="menu-btn" aria-label="Menü">☰</button>
|
||||||
<a class="btn" href="#leistungen">Mehr erfahren</a>
|
<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>
|
</header>
|
||||||
<main id="leistungen">
|
<section class="wrap">
|
||||||
<section class="card"><h2>Schnell</h2><p>Statische Seite, sofort ausgeliefert.</p></section>
|
<div class="stats">
|
||||||
<section class="card"><h2>Responsiv</h2><p>Passt sich Handy, Tablet und Desktop an.</p></section>
|
<div class="card"><b>120+</b><span class="muted">zufriedene Testkunden</span></div>
|
||||||
<section class="card"><h2>Vorschau</h2><p>Jeder Git-Push aktualisiert diese Seite automatisch.</p></section>
|
<div class="card"><b>24 h</b><span class="muted">Antwortzeit</span></div>
|
||||||
</main>
|
<div class="card"><b>4,9</b><span class="muted">Sterne (erfunden)</span></div>
|
||||||
<footer>Testprojekt · WEBklar</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Kontakt · Test-Website</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body data-page="kontakt">
|
||||||
|
<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>Kontakt</h1><p>Das Formular ist nur zum Testen – es wird nichts gesendet oder gespeichert.</p></header>
|
||||||
|
<section class="wrap">
|
||||||
|
<div class="notice">Danke! (Test – es wurde nichts verschickt.)</div>
|
||||||
|
<form id="kontakt-form">
|
||||||
|
<label>Name <input name="name" required placeholder="Max Mustermann"></label>
|
||||||
|
<label>Anliegen
|
||||||
|
<select name="anliegen"><option>Neue Website</option><option>Wartung</option><option>Frage</option></select>
|
||||||
|
</label>
|
||||||
|
<label>Nachricht <textarea name="nachricht" rows="5" placeholder="Worum geht es?"></textarea></label>
|
||||||
|
<button class="btn" type="submit">Absenden (Test)</button>
|
||||||
|
</form>
|
||||||
|
</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>
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Leistungen · Test-Website</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body data-page="leistungen">
|
||||||
|
<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>Leistungen</h1><p>Wähle eine Kategorie und sieh dir die Details an.</p></header>
|
||||||
|
<section class="wrap">
|
||||||
|
<div class="tabs" data-panels=".l-panel">
|
||||||
|
<button class="on">Webdesign</button><button>Wartung</button><button>Hosting</button><button>SEO</button>
|
||||||
|
</div>
|
||||||
|
<div class="l-panel tab-panel on"><div class="grid">
|
||||||
|
<div class="card"><h3>Onepager</h3><p>Eine Seite, alles Wichtige auf einen Blick.</p></div>
|
||||||
|
<div class="card"><h3>Mehrseitige Website</h3><p>Für Firmen mit mehr Inhalt.</p></div>
|
||||||
|
<div class="card"><h3>Online-Shop</h3><p>Produkte verkaufen, einfach verwaltet.</p></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="l-panel tab-panel"><div class="grid">
|
||||||
|
<div class="card"><h3>Updates</h3><p>Regelmäßige Aktualisierungen.</p></div>
|
||||||
|
<div class="card"><h3>Änderungen</h3><p>Texte und Bilder tauschen lassen.</p></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="l-panel tab-panel"><div class="grid">
|
||||||
|
<div class="card"><h3>Server in Deutschland</h3><p>Schnell und datenschutzfreundlich.</p></div>
|
||||||
|
<div class="card"><h3>SSL inklusive</h3><p>Verschlüsselte Verbindung.</p></div>
|
||||||
|
</div></div>
|
||||||
|
<div class="l-panel tab-panel"><div class="grid">
|
||||||
|
<div class="card"><h3>Google-Profil</h3><p>Besser gefunden werden.</p></div>
|
||||||
|
<div class="card"><h3>Ladezeit</h3><p>Schnelle Seiten ranken besser.</p></div>
|
||||||
|
</div></div>
|
||||||
|
</section>
|
||||||
|
<section class="wrap" style="text-align:center">
|
||||||
|
<a class="btn" href="preise.html">Zu den Preisen</a>
|
||||||
|
</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>
|
||||||
+40
@@ -0,0 +1,40 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Preise · Test-Website</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body data-page="preise">
|
||||||
|
<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>Preise</h1><p>Alle Preise sind ausgedacht und nur zum Testen.</p></header>
|
||||||
|
<section class="wrap">
|
||||||
|
<label class="toggle"><input type="checkbox" id="yearly"> Jährlich zahlen (2 Monate gratis)</label>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card price"><h3>Basis</h3><div class="amount" data-month="19">19 € / Monat</div><p>1 Seite, Hosting</p><a class="btn ghost" href="kontakt.html?paket=basis">Auswählen</a></div>
|
||||||
|
<div class="card price featured"><h3>Plus</h3><div class="amount" data-month="39">39 € / Monat</div><p>5 Seiten, Hosting, Wartung</p><a class="btn" href="kontakt.html?paket=plus">Auswählen</a></div>
|
||||||
|
<div class="card price"><h3>Profi</h3><div class="amount" data-month="79">79 € / Monat</div><p>Unbegrenzte Seiten, Shop</p><a class="btn ghost" href="kontakt.html?paket=profi">Auswählen</a></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="wrap">
|
||||||
|
<h2>Wie viele Seiten brauchst du?</h2>
|
||||||
|
<div class="counter"><button data-step="-1" aria-label="weniger">−</button><output>0</output><button data-step="1" aria-label="mehr">+</button><span class="muted">Seiten</span></div>
|
||||||
|
</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>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
:root{--bg:#0f0b1f;--card:#1b1533;--card2:#241c44;--text:#f4f1ff;--muted:#b7aed6;--accent:#7c5cff;--ok:#3ecf8e}
|
||||||
|
*{box-sizing:border-box}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
|
||||||
|
a{color:#b9a8ff}
|
||||||
|
nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:rgba(15,11,31,.9);backdrop-filter:blur(8px);border-bottom:1px solid #2c2450}
|
||||||
|
nav .logo{font-weight:800;color:var(--text);text-decoration:none}
|
||||||
|
nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
|
||||||
|
nav ul a{display:block;padding:6px 12px;border-radius:999px;color:var(--muted);text-decoration:none}
|
||||||
|
nav ul a.active,nav ul a:hover{background:var(--card2);color:var(--text)}
|
||||||
|
.menu-btn{display:none;background:none;border:1px solid #3a3066;color:var(--text);border-radius:8px;padding:6px 10px;font-size:1rem}
|
||||||
|
@media (max-width:640px){.menu-btn{display:block}nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px 20px;border-bottom:1px solid #2c2450}nav ul.open{display:flex}}
|
||||||
|
header.hero{padding:72px 20px 56px;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;line-height:1.2}
|
||||||
|
.hero p{color:var(--muted);max-width:600px;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;border:0;cursor:pointer;font-size:1rem}
|
||||||
|
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--text)}
|
||||||
|
.wrap{max-width:1000px;margin:0 auto;padding:32px 20px}
|
||||||
|
h2{font-size:1.6rem;margin:0 0 16px}
|
||||||
|
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
|
||||||
|
.card{background:var(--card);border-radius:16px;padding:22px}
|
||||||
|
.card h3{margin:0 0 6px;font-size:1.1rem}
|
||||||
|
.card p{margin:0;color:var(--muted);font-size:.95rem}
|
||||||
|
.muted{color:var(--muted)}
|
||||||
|
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));text-align:center}
|
||||||
|
.stats b{display:block;font-size:2.2rem;color:#fff}
|
||||||
|
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
|
||||||
|
.tabs button{background:var(--card);color:var(--muted);border:0;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:.95rem}
|
||||||
|
.tabs button.on{background:var(--accent);color:#fff}
|
||||||
|
.tab-panel{display:none}.tab-panel.on{display:block}
|
||||||
|
details{background:var(--card);border-radius:12px;padding:14px 18px;margin-bottom:10px}
|
||||||
|
summary{cursor:pointer;font-weight:600}
|
||||||
|
details p{color:var(--muted);margin:10px 0 0}
|
||||||
|
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
|
||||||
|
.gallery button{aspect-ratio:4/3;border:0;border-radius:12px;cursor:pointer;color:#fff;font-weight:700;font-size:1.1rem}
|
||||||
|
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
|
||||||
|
.lightbox.on{display:flex}
|
||||||
|
.lightbox div{width:min(560px,100%);aspect-ratio:4/3;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800}
|
||||||
|
.price{display:flex;flex-direction:column;gap:12px}
|
||||||
|
.price .amount{font-size:2rem;font-weight:800}
|
||||||
|
.price.featured{outline:2px solid var(--accent)}
|
||||||
|
.toggle{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px}
|
||||||
|
form{display:grid;gap:14px;max-width:560px}
|
||||||
|
label{display:grid;gap:6px;font-weight:600}
|
||||||
|
input,select,textarea{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid #3a3066;background:var(--card);color:var(--text)}
|
||||||
|
.notice{background:#16352a;color:#c9f5df;border-radius:12px;padding:14px 18px;display:none}
|
||||||
|
.notice.on{display:block}
|
||||||
|
.counter{display:flex;align-items:center;gap:14px}
|
||||||
|
.counter button{width:44px;height:44px;border-radius:50%;border:0;background:var(--card2);color:#fff;font-size:1.4rem;cursor:pointer}
|
||||||
|
.counter output{font-size:1.6rem;font-weight:700;min-width:40px;text-align:center}
|
||||||
|
.timeline{border-left:2px solid var(--accent);padding-left:20px}
|
||||||
|
.timeline div{margin-bottom:22px}
|
||||||
|
.timeline b{color:#fff}
|
||||||
|
footer{text-align:center;color:var(--muted);font-size:.85rem;padding:32px 20px 48px;border-top:1px solid #2c2450;margin-top:32px}
|
||||||
|
footer a{margin:0 8px}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Über uns · Test-Website</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body data-page="ueber">
|
||||||
|
<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>Über uns</h1><p>Eine erfundene Geschichte für eine Testseite.</p></header>
|
||||||
|
<section class="wrap">
|
||||||
|
<h2>Unser Weg</h2>
|
||||||
|
<div class="timeline">
|
||||||
|
<div><b>2020</b><p class="muted">Gründung in einer Garage.</p></div>
|
||||||
|
<div><b>2022</b><p class="muted">Das erste Büro und zwei Mitarbeitende.</p></div>
|
||||||
|
<div><b>2024</b><p class="muted">100 Projekte abgeschlossen.</p></div>
|
||||||
|
<div><b>2026</b><p class="muted">Diese Testseite wird gebaut.</p></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="wrap">
|
||||||
|
<h2>Team</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card"><h3>Alex</h3><p>Design</p></div>
|
||||||
|
<div class="card"><h3>Sam</h3><p>Entwicklung</p></div>
|
||||||
|
<div class="card"><h3>Robin</h3><p>Kundenbetreuung</p></div>
|
||||||
|
</div>
|
||||||
|
</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