46 lines
2.2 KiB
HTML
46 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Chrystal Math - Calculated Chaos</title>
|
|
<meta name="description" content="Zwei responsive CI-Beispiele für Chrystal Math.">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="container hero__grid">
|
|
<div>
|
|
<p class="eyebrow">Chrystal Math · Calculated Chaos</p>
|
|
<h1 id="hero-title" class="gradient-text">Smart. Sharp. Unexpected.</h1>
|
|
<p>Intelligenter Glamour, soziale Chemie und präzise gesetztes Chaos. Eine Bühne für Performance, Verbindung und Humor.</p>
|
|
<div class="actions">
|
|
<a class="button button--primary" href="#events">Termine ansehen</a>
|
|
<a class="button button--secondary" href="#about">Über Chrystal</a>
|
|
</div>
|
|
</div>
|
|
<div class="orbit-card" aria-hidden="true">
|
|
<span class="node-line"></span><span class="node"></span><span class="node"></span><span class="node"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="events" id="events" aria-labelledby="events-title">
|
|
<div class="container">
|
|
<div class="events__header">
|
|
<div><p class="eyebrow">Beispiel 02 · Eventkarte</p><h2 id="events-title">Calculated Chaos Live</h2></div>
|
|
<p>Eine einfache, wiederverwendbare Komponente für Shows, Workshops, Veröffentlichungen oder Social-Media-Teaser.</p>
|
|
</div>
|
|
<article class="event-card">
|
|
<div class="event-date"><strong>27</strong><span>SEPTEMBER</span></div>
|
|
<div><h3>Chrystal Math in Köln</h3><p>Doors 19:00 · Show 20:00 · Ort folgt</p></div>
|
|
<a class="button" href="#">Details ansehen</a>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<div class="swatches" aria-hidden="true"><span style="background:#F740A7"></span><span style="background:#08D4F3"></span><span style="background:#A146EE"></span><span style="background:#B7D92A"></span><span style="background:#D6C65B"></span></div>
|
|
<footer id="about">GFS Didot + Dosis · Cosmic Aubergine statt Schwarz</footer>
|
|
</body>
|
|
</html>
|