332 lines
14 KiB
HTML
332 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>AS Styleguide – Coaching & Beratung</title>
|
||
<meta name="description" content="Styleguide (HTML/CSS/JS) für Coaching & Beratung – Typografie, Komponenten, Layout-Grids." />
|
||
<link rel="preload" href="assets/fonts/gilroy/Gilroy-SemiBoldItalic.ttf" as="font" type="font/ttf" crossorigin>
|
||
<link rel="preload" href="assets/fonts/gilroy/Gilroy-Regular.ttf" as="font" type="font/ttf" crossorigin>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<a class="skip-link" href="#content">Zum Inhalt springen</a>
|
||
|
||
<header class="site-header" data-header>
|
||
<div class="container header-inner">
|
||
<a class="brand" href="#top" aria-label="Start">
|
||
<img class="brand-logo" src="assets/img/logo.svg" alt="AS – Coaching und Beratung" />
|
||
</a>
|
||
|
||
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
|
||
<span class="sr-only">Navigation öffnen</span>
|
||
<span class="burger" aria-hidden="true"></span>
|
||
</button>
|
||
|
||
<nav class="site-nav" id="site-nav" data-nav>
|
||
<a href="#typografie">Typografie</a>
|
||
<a href="#farben">Farben</a>
|
||
<a href="#komponenten">Komponenten</a>
|
||
<a href="#layouts">Layouts</a>
|
||
<a href="#sections">Sektionen</a>
|
||
</nav>
|
||
|
||
<div class="header-cta">
|
||
<a class="btn btn--ghost" href="#kontakt">Kontakt</a>
|
||
<a class="btn btn--primary" href="#cta">Termin anfragen</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="content">
|
||
<section class="hero" id="top">
|
||
<div class="hero-bg" aria-hidden="true">
|
||
<div class="hero-orb hero-orb--1"></div>
|
||
<div class="hero-orb hero-orb--2"></div>
|
||
<svg class="hero-wave" viewBox="0 0 1440 220" preserveAspectRatio="none">
|
||
<path d="M0,128 C240,220 480,64 720,128 C960,192 1200,64 1440,140 L1440,220 L0,220 Z"></path>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="container hero-grid">
|
||
<div class="hero-copy">
|
||
<p class="eyebrow">Bewerbercoaching · Selbstpräsentation · Profil-Schärfung</p>
|
||
<h1 class="display">
|
||
<span class="display-line">Souverän auftreten.</span>
|
||
<span class="display-line display-accent">Wirkung erzielen.</span>
|
||
</h1>
|
||
<p class="lead">
|
||
Für Fachkräfte in KMU, die im Bewerbungsprozess, im Kundentermin oder intern sichtbarer werden wollen –
|
||
klar, professionell und ohne Show.
|
||
</p>
|
||
|
||
<div class="hero-actions">
|
||
<a class="btn btn--primary btn--lg" href="#cta">Kostenloses Erstgespräch</a>
|
||
<a class="btn btn--secondary btn--lg" href="#produkte">Workbook & Minikurse</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="hero-side">
|
||
<figure class="hero-visual" aria-label="Atmosphärisches Hero-Bild">
|
||
<img src="assets/img/person-an-tafel.webp" alt="Coach vor einer Tafel im Workshop-Kontext" />
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="quickstart-segment" aria-labelledby="quickstart-title">
|
||
<div class="container">
|
||
<div class="hero-card quickstart-card-wrap">
|
||
<div class="hero-card-top">
|
||
<div class="pill">Styleguide</div>
|
||
<div class="badge">WP-ready</div>
|
||
</div>
|
||
|
||
<div class="card card--elevated quickstart-card">
|
||
<h2 class="h3" id="quickstart-title">Schnellstart-Komponenten</h2>
|
||
<p class="muted">Buttons, Cards, Formulare, Grids, Sektionen – bereits so aufgebaut, dass du daraus ein WP-Template werden kann.</p>
|
||
|
||
<div class="stack-sm">
|
||
<a class="btn btn--primary w-100" href="#komponenten">Zu den Komponenten</a>
|
||
<a class="btn btn--ghost w-100" href="#layouts">Zu den Layouts</a>
|
||
</div>
|
||
|
||
<hr class="divider"/>
|
||
|
||
<dl class="kv">
|
||
<div><dt>Primärfarbe</dt><dd><code>#EB825E</code></dd></div>
|
||
<div><dt>Text</dt><dd><code>#353535</code></dd></div>
|
||
<div><dt>Background</dt><dd><code>#FFFFFF</code></dd></div>
|
||
<div><dt>Fonts</dt><dd><code>Gilroy</code> (<code>SemiBold Italic</code> für Headlines)</dd></div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="section" id="farben">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2 class="h2">Design Tokens</h2>
|
||
<p class="muted">Farben, Radius, Schatten & Spacing als CSS-Variablen – damit das später in WP sauber skalierbar ist.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-3">
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#EB825E"></div>
|
||
<div class="swatch-meta"><div class="swatch-title">Accent</div><code>#EB825E</code></div>
|
||
</div>
|
||
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#353535"></div>
|
||
<div class="swatch-meta"><div class="swatch-title">Ink</div><code>#353535</code></div>
|
||
</div>
|
||
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#FFFFFF"></div>
|
||
<div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FFFFFF</code></div>
|
||
</div>
|
||
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background:#FAF7F2"></div>
|
||
<div class="swatch-meta"><div class="swatch-title">Surface / Card</div><code>#FAF7F2</code></div>
|
||
</div>
|
||
|
||
<div class="swatch">
|
||
<div class="swatch-color swatch-color--verlauf"></div>
|
||
<div class="swatch-meta"><div class="swatch-title">Verlauf / Hero Tile</div><code>#25201E (82% - 72%)</code></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong>Fokus-Ring:</strong> über <code>--focus</code> definiert (accent + transparency). Buttons/Inputs sind damit sofort „keyboard-friendly“.
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="typografie">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2 class="h2">Typografie</h2>
|
||
<p class="muted">Nur Gilroy: SemiBold Italic für Hero-/Display-Statements, reguläre Schnitte für Struktur, UI und Fließtext.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-2">
|
||
<div class="card">
|
||
<p class="label">Display / Hero (Gilroy SemiBold Italic)</p>
|
||
<p class="type-sample display-sample">Souverän auftreten. Wirkung erzielen.</p>
|
||
<p class="muted small">Regel: Gilroy SemiBold Italic nur für Hero/Display-Statements. UI, Navigation, Forms und Tabellen in regulären Gilroy-Schnitten.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<p class="label">Body / UI (Gilroy)</p>
|
||
<p class="type-sample body-sample">Klare Struktur. Ruhige Abstände. Seriöse UI. Das ist die Basis für WP-Templates und WooCommerce.</p>
|
||
<div class="inline">
|
||
<span class="tag">Regular</span>
|
||
<span class="tag">Medium</span>
|
||
<span class="tag">SemiBold</span>
|
||
<span class="tag">Bold</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="komponenten">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2 class="h2">Komponenten</h2>
|
||
<p class="muted">Basis-Bausteine für WP (Blocks) und später WooCommerce.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-3">
|
||
<div class="card">
|
||
<p class="label">Buttons</p>
|
||
<div class="stack-sm">
|
||
<button class="btn btn--primary">Primary</button>
|
||
<button class="btn btn--secondary">Secondary</button>
|
||
<button class="btn btn--ghost">Ghost</button>
|
||
<button class="btn btn--primary btn--lg">Large</button>
|
||
<button class="btn btn--primary" disabled>Disabled</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<p class="label">Badges / Pills</p>
|
||
<div class="inline wrap">
|
||
<span class="badge">Neu</span>
|
||
<span class="badge badge--soft">PDF</span>
|
||
<span class="pill">1:1 Coaching</span>
|
||
<span class="pill pill--soft">KMU Workshop</span>
|
||
<span class="tag">WP</span>
|
||
<span class="tag">WooCommerce</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<p class="label">Card Variationen</p>
|
||
<div class="stack-sm">
|
||
<div class="card card--elevated">
|
||
<strong>Elevated</strong>
|
||
<p class="muted small">Für Hero/CTA, Pricing, wichtige Kacheln.</p>
|
||
</div>
|
||
<div class="card card--bordered">
|
||
<strong>Bordered</strong>
|
||
<p class="muted small">Für ruhige Content-Listen, FAQs, Hinweise.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="layouts">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2 class="h2">Layouts & Content Grids</h2>
|
||
<p class="muted">Wiederverwendbare Raster: 2/3 Spalten, Feature-Grids, Split-Layouts – WP Block-kompatibel.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<p class="label">Feature Grid (3 Spalten)</p>
|
||
<div class="grid grid-3">
|
||
<div class="feature"><div class="feature-icon" aria-hidden="true"></div><h3 class="h3">Lebenslauf, der wirkt</h3><p class="muted">Struktur, Story, Ergebnisse – ohne Buzzwords.</p></div>
|
||
<div class="feature"><div class="feature-icon" aria-hidden="true"></div><h3 class="h3">Interview-Simulation</h3><p class="muted">Realistisch, ruhig, mit Feedback auf Wirkung.</p></div>
|
||
<div class="feature"><div class="feature-icon" aria-hidden="true"></div><h3 class="h3">Selbstpräsentation</h3><p class="muted">Ein klarer Pitch für Meetings, Kunden, Bewerbungen.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="sections">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2 class="h2">Website-Sektionen</h2>
|
||
<p class="muted">Beispiele für WooCommerce-Produktkacheln, FAQ und CTA.</p>
|
||
</div>
|
||
|
||
<div class="section-block" id="produkte">
|
||
<div class="block-head">
|
||
<h3 class="h2">Digitale Miniprodukte</h3>
|
||
<p class="muted">WooCommerce-ready: PDF, Workbook, Minikurs (Video), Bundle.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-3">
|
||
<article class="product card card--elevated">
|
||
<div class="product-top"><span class="badge badge--soft">PDF</span><span class="tag">20–30 Min</span></div>
|
||
<h4 class="h3">CV-Checkliste</h4>
|
||
<p class="muted">Die wichtigsten Hebel, um deinen Lebenslauf sofort professioneller wirken zu lassen.</p>
|
||
<div class="product-bottom"><div class="price">29 €</div><a class="btn btn--primary" href="#cta">Kaufen</a></div>
|
||
</article>
|
||
|
||
<article class="product card card--elevated">
|
||
<div class="product-top"><span class="badge badge--soft">Workbook</span><span class="tag">90 Min</span></div>
|
||
<h4 class="h3">Selbstpräsentation in 7 Schritten</h4>
|
||
<p class="muted">Struktur + Beispiele + Übungen, die du sofort anwenden kannst.</p>
|
||
<div class="product-bottom"><div class="price">49 €</div><a class="btn btn--primary" href="#cta">Kaufen</a></div>
|
||
</article>
|
||
|
||
<article class="product card card--elevated">
|
||
<div class="product-top"><span class="badge badge--soft">Videokurs</span><span class="tag">2–3 h</span></div>
|
||
<h4 class="h3">Interviewtraining kompakt</h4>
|
||
<p class="muted">Antworten strukturieren, Wirkung steuern, ruhig bleiben.</p>
|
||
<div class="product-bottom"><div class="price">149 €</div><a class="btn btn--primary" href="#cta">Kaufen</a></div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-block">
|
||
<div class="block-head">
|
||
<h3 class="h2">FAQ</h3>
|
||
<p class="muted">Accordion via JS.</p>
|
||
</div>
|
||
|
||
<div class="accordion" data-accordion>
|
||
<button class="accordion-item" type="button" aria-expanded="false">
|
||
<span>Wie läuft ein Erstgespräch ab?</span><span class="accordion-icon" aria-hidden="true"></span>
|
||
</button>
|
||
<div class="accordion-panel" hidden><p class="muted">15–20 Minuten. Ziel: Thema klären, Zielbild definieren, nächster Schritt.</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-block" id="cta">
|
||
<div class="cta card card--elevated">
|
||
<div>
|
||
<h3 class="cta-title">Bereit für ein Profil, das wirkt?</h3>
|
||
<p class="muted">Kurzes Erstgespräch, dann ein klarer Plan (kein BlaBla).</p>
|
||
</div>
|
||
<div class="cta-actions">
|
||
<a class="btn btn--primary btn--lg" href="#kontakt">Termin anfragen</a>
|
||
<a class="btn btn--ghost btn--lg" href="#produkte">Erst mal Workbook</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="kontakt">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<h2 class="h2">Kontakt</h2>
|
||
<p class="muted">Platzhalter – später in WP als Formular-Block.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="container footer-inner">
|
||
<p class="muted small">© <span data-year></span> AS – Coaching & Beratung. Styleguide / Prototype.</p>
|
||
<div class="footer-links">
|
||
<a href="#0">Impressum</a>
|
||
<a href="#0">Datenschutz</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|