247 lines
10 KiB
HTML
247 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chrystal Math — One Pager</title>
|
|
<meta name="description" content="Ein atmosphärischer One-Pager im Chrystal-Math-Stil mit klarer Typografie, Farbverläufen und typischen HTML-Elementen für Webauftritte.">
|
|
<meta property="og:title" content="Chrystal Math — One Pager">
|
|
<meta property="og:description" content="Ein stilvoller One-Pager mit freier Typografie, harmonischer Farbwelt und gängigen Web-Komponenten.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400..800&family=Manrope:wght@200..800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main-content">Zum Inhalt springen</a>
|
|
|
|
<header class="site-header">
|
|
<div class="container header-inner">
|
|
<a href="#hero" class="brand" aria-label="Startseite Chrystal Math">
|
|
<svg viewBox="0 0 180 48" aria-hidden="true" class="brand-mark">
|
|
<text x="0" y="34" class="brand-word">Chrystal</text>
|
|
<circle cx="144" cy="20" r="3.5"></circle>
|
|
<path d="M149 20 L164 12 L176 18"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<nav class="main-nav" aria-label="Hauptnavigation">
|
|
<a href="#about">Konzept</a>
|
|
<a href="#elements">Elemente</a>
|
|
<a href="#showcase">Showcase</a>
|
|
<a href="#contact">Kontakt</a>
|
|
</nav>
|
|
|
|
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Farbschema wechseln">
|
|
<span aria-hidden="true">◐</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section class="hero section" id="hero">
|
|
<div class="container hero-grid">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">Calculated Chaos</p>
|
|
<h1>Elegante Systeme für mutige digitale Präsenz.</h1>
|
|
<p class="lead">Dieser One-Pager überträgt die visuelle Sprache aus dem Artwork in eine webtaugliche Oberfläche mit freier Typografie, klarer Hierarchie und kontrollierten Neon-Akzenten.</p>
|
|
<div class="button-row">
|
|
<a class="button button-primary" href="#showcase">Beispiele ansehen</a>
|
|
<a class="button button-secondary" href="#contact">Kontaktblock</a>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="hero-panel" aria-label="Gestaltungsprinzipien">
|
|
<div class="panel-card glow-card">
|
|
<p class="panel-label">Prinzip</p>
|
|
<h2>Präzision trifft Glamour</h2>
|
|
<p>Die Oberfläche kombiniert Display-Serif, nüchterne Sans-Serif, geometrische Linien, ruhige Flächen und sparsame Lichtpunkte.</p>
|
|
</div>
|
|
<ul class="stat-list" role="list">
|
|
<li>
|
|
<span class="stat-value">2</span>
|
|
<span class="stat-label">freie Schriftfamilien</span>
|
|
</li>
|
|
<li>
|
|
<span class="stat-value">4</span>
|
|
<span class="stat-label">primäre Neon-Akzente</span>
|
|
</li>
|
|
<li>
|
|
<span class="stat-value">100%</span>
|
|
<span class="stat-label">statische HTML/CSS-Basis</span>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
<div class="hero-orbit hero-orbit-left" aria-hidden="true"></div>
|
|
<div class="hero-orbit hero-orbit-right" aria-hidden="true"></div>
|
|
</section>
|
|
|
|
<section class="section" id="about">
|
|
<div class="container split-section">
|
|
<div>
|
|
<p class="section-kicker">Konzept</p>
|
|
<h2>Ein präziser One-Pager mit editorialer Haltung.</h2>
|
|
</div>
|
|
<div>
|
|
<p>Die Inszenierung bleibt dramatisch, ohne ins rein Dekorative zu kippen. Dunkle Nachtflächen, kontrollierte Verläufe und feine Linien schaffen Tiefe, während die Typografie die emotionale Hauptrolle übernimmt.</p>
|
|
<p>Statt eines harten Schwarztons nutzt die Seite ein dunkles Blau-Violett als Grundfläche. Dadurch bleibt das Konzept atmosphärisch, wirkt aber auf längeren Webseiten weicher und hochwertiger.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="elements">
|
|
<div class="container">
|
|
<div class="section-heading">
|
|
<p class="section-kicker">HTML-Elemente</p>
|
|
<h2>Gängige Bausteine in einem konsistenten System.</h2>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<article class="card feature-card">
|
|
<h3>Typografie</h3>
|
|
<p>Headlines nutzen die Display-Serif, Lesetexte und Interfaces die Sans-Serif. So bleibt die Seite charakterstark und zugleich gut lesbar.</p>
|
|
<a href="#typography-demo" class="text-link">Zur Schriftprobe</a>
|
|
</article>
|
|
|
|
<article class="card feature-card accent-cyan">
|
|
<h3>Navigation</h3>
|
|
<p>Eine reduzierte Hauptnavigation führt klar durch die wichtigsten Inhaltsblöcke und bleibt auch mobil gut erfassbar.</p>
|
|
<a href="#form-demo" class="text-link">Zum Formular</a>
|
|
</article>
|
|
|
|
<article class="card feature-card accent-lime">
|
|
<h3>Akzente</h3>
|
|
<p>Sterne, Linien und Knotenpunkte erscheinen punktuell. Sie strukturieren Inhalte, statt bloß als Effekt zu dienen.</p>
|
|
<a href="#table-demo" class="text-link">Zur Tabelle</a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section showcase" id="showcase">
|
|
<div class="container showcase-grid">
|
|
<article class="card large-card" id="typography-demo">
|
|
<p class="section-kicker">Schriftprobe</p>
|
|
<h2>Display-Serif für Bühne. Sans-Serif für Struktur.</h2>
|
|
<p class="drop-cap">Diese Kombination eignet sich für kulturelle, kreative und kampagnenartige Webauftritte, bei denen Präsenz und Lesbarkeit zugleich wichtig sind.</p>
|
|
<blockquote>
|
|
„Calculated chaos“ funktioniert am stärksten dann, wenn jede dramatische Geste von einem ruhigen Raster getragen wird.
|
|
</blockquote>
|
|
</article>
|
|
|
|
<article class="card" id="table-demo">
|
|
<p class="section-kicker">Tabelle</p>
|
|
<h3>Farbrollen</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Rolle</th>
|
|
<th>Farbe</th>
|
|
<th>HEX</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Fläche</td>
|
|
<td>Deep Night</td>
|
|
<td>#0F1020</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Primär</td>
|
|
<td>Electric Pink</td>
|
|
<td>#FF4FBF</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sekundär</td>
|
|
<td>Crystal Cyan</td>
|
|
<td>#22D7FF</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Akzent</td>
|
|
<td>Acid Lime</td>
|
|
<td>#D6FF3F</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</article>
|
|
|
|
<article class="card" id="form-demo">
|
|
<p class="section-kicker">Formular</p>
|
|
<h3>Kontakt aufnehmen</h3>
|
|
<form class="contact-form">
|
|
<div class="form-field">
|
|
<label for="name">Name</label>
|
|
<input id="name" name="name" type="text" placeholder="Dein Name">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="email">E-Mail</label>
|
|
<input id="email" name="email" type="email" placeholder="name@example.org">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="message">Nachricht</label>
|
|
<textarea id="message" name="message" rows="5" placeholder="Beschreibe dein Projekt oder deinen Bedarf."></textarea>
|
|
</div>
|
|
<button class="button button-primary" type="submit">Nachricht senden</button>
|
|
</form>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container content-grid">
|
|
<article class="card list-card">
|
|
<p class="section-kicker">Listen</p>
|
|
<h3>Geeignete Einsatzfelder</h3>
|
|
<ul>
|
|
<li>Kultur- und Eventwebsites.</li>
|
|
<li>Persönliche Brand- und Portfolioseiten.</li>
|
|
<li>Kampagnen-Landingpages mit starker visueller Handschrift.</li>
|
|
<li>Community-Projekte mit editorialem Anspruch.</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="card info-card">
|
|
<p class="section-kicker">Hinweis</p>
|
|
<h3>Barrierefreiheit bleibt Pflicht.</h3>
|
|
<p>Neonfarben werden nur für Akzente verwendet. Lesetexte laufen auf ruhigen Flächen mit hohem Kontrast, damit die Gestaltung auch praktisch funktioniert.</p>
|
|
<details>
|
|
<summary>Was ist hier bewusst reduziert?</summary>
|
|
<p>Übermäßige Glows, reines Schwarz, laute Animationen und zu viele konkurrierende Farbverläufe wurden vermieden.</p>
|
|
</details>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer section" id="contact">
|
|
<div class="container footer-grid">
|
|
<div>
|
|
<p class="section-kicker">Footer</p>
|
|
<h2>Bereit für eine elegante Webpräsenz?</h2>
|
|
<p>Dieser One-Pager ist als Ausgangspunkt gedacht und enthält typische HTML-Elemente, mit denen sich weitere Seiten oder Komponenten leicht ergänzen lassen.</p>
|
|
</div>
|
|
<address>
|
|
<p>Chrystal Math Studio</p>
|
|
<a href="mailto:hello@example.com">hello@example.com</a><br>
|
|
<a href="https://example.com" target="_blank" rel="noopener noreferrer">example.com</a>
|
|
</address>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function () {
|
|
const root = document.documentElement;
|
|
const toggle = document.querySelector('[data-theme-toggle]');
|
|
let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
root.setAttribute('data-theme', theme);
|
|
if (toggle) {
|
|
toggle.addEventListener('click', function () {
|
|
theme = theme === 'dark' ? 'light' : 'dark';
|
|
root.setAttribute('data-theme', theme);
|
|
});
|
|
}
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|