206 lines
9.2 KiB
HTML
206 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chrystal Math — Calculated Chaos.</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
/* page-specific additions, not general enough for style.css */
|
|
.hero{
|
|
min-height:88vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
|
|
}
|
|
.hero::before{
|
|
content:"";position:absolute;inset:0;pointer-events:none;
|
|
background:radial-gradient(ellipse 60% 50% at 80% 20%, color-mix(in srgb, var(--chaos-violet) 10%, transparent), transparent 70%);
|
|
}
|
|
.hero .arc{position:absolute;top:8%;right:6%;opacity:.35;pointer-events:none;}
|
|
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(52px,9vw,128px);line-height:.98;max-width:900px;letter-spacing:-.01em;}
|
|
.hero .sub{margin-top:30px;font-size:17px;color:var(--ink-muted);max-width:420px;font-weight:300;}
|
|
.hero .ctas{margin-top:44px;}
|
|
.scrolldown{position:absolute;bottom:36px;left:28px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-muted);opacity:.6;}
|
|
|
|
#ueber{border-top:1px solid var(--line);}
|
|
.about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:70px;align-items:center;}
|
|
.about-photo{aspect-ratio:4/5;border-radius:4px;
|
|
background:var(--bg-raised);
|
|
display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);}
|
|
.about-text p{max-width:480px;font-weight:300;}
|
|
.stats{display:flex;gap:44px;margin-top:34px;}
|
|
.stats div b{display:block;font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--ink);}
|
|
.stats div span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);}
|
|
|
|
#programm{background:var(--bg-raised);}
|
|
.show-list{margin-top:40px;border-top:1px solid var(--line);}
|
|
.show-row{display:grid;grid-template-columns:110px 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:.2s;}
|
|
.show-row:hover{background:var(--bg);}
|
|
.show-row .date b{display:block;font-family:var(--font-display);font-size:22px;color:var(--ink);}
|
|
.show-row .date span{font-size:11px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em;}
|
|
.show-row .info h4{font-family:var(--font-display);font-size:19px;margin-bottom:4px;color:var(--ink);}
|
|
.show-row .info p{font-size:13.5px;color:var(--ink-muted);margin:0;}
|
|
.show-row .tix{padding:9px 20px;border-radius:30px;border:1px solid var(--accent-cyan);color:var(--accent-cyan);font-size:12px;font-weight:600;white-space:nowrap;}
|
|
.show-row .tix:hover{background:var(--accent-cyan);color:var(--bg);}
|
|
|
|
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;}
|
|
.gallery div{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--ink-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);background:var(--bg-raised);}
|
|
|
|
.quote-section{text-align:center;}
|
|
.quote-section cite{display:block;margin-top:24px;font-style:normal;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}
|
|
|
|
#kontakt{background:var(--bg-raised);}
|
|
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
|
|
.contact-info a{display:block;margin-top:14px;font-size:15px;}
|
|
.contact-info .socials{display:flex;gap:14px;margin-top:26px;}
|
|
.contact-info .socials span{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-muted);}
|
|
.form-mock .f{margin-bottom:16px;}
|
|
.form-mock label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:6px;}
|
|
.form-mock .field{height:38px;border-radius:8px;background:var(--bg);border:1px solid var(--line-strong);}
|
|
.form-mock .field.tall{height:80px;}
|
|
.form-mock .send{margin-top:6px;width:100%;border:none;}
|
|
|
|
footer{padding:50px 0;border-top:1px solid var(--line);}
|
|
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
|
|
footer .brand{font-family:var(--font-display);font-weight:700;}
|
|
footer nav{display:flex;gap:20px;}
|
|
footer nav a{font-size:12px;color:var(--ink-muted);}
|
|
footer nav a:hover{color:var(--accent-cyan);}
|
|
footer p{font-size:12px;color:var(--ink-muted);margin:0;}
|
|
|
|
@media(max-width:820px){
|
|
.about-grid,.contact-grid{grid-template-columns:1fr;}
|
|
.gallery{grid-template-columns:repeat(2,1fr);}
|
|
.nav nav{display:none;}
|
|
.show-row{grid-template-columns:1fr;text-align:left;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="nav">
|
|
<div class="wrap">
|
|
<div class="brand text-gradient">Chrystal Math</div>
|
|
<nav>
|
|
<a href="#ueber">Über mich</a>
|
|
<a href="#programm">Programm</a>
|
|
<a href="#galerie">Galerie</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
<button class="theme-toggle" id="themeToggle">☾ Dark</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<svg class="arc" width="220" height="220" viewBox="0 0 220 220">
|
|
<circle cx="110" cy="110" r="95" stroke="#E3B63E" stroke-width="0.6" fill="none" stroke-dasharray="1 6" stroke-linecap="round"></circle>
|
|
</svg>
|
|
<div class="wrap">
|
|
<span class="eyebrow">Drag · Performance · Calculated Chaos</span>
|
|
<h1 class="text-gradient">Chrystal<br>Math</h1>
|
|
<p class="sub">Präzision mit Pailletten. Geometrie, die tanzen gelernt hat.</p>
|
|
<div class="ctas">
|
|
<a class="btn btn-ghost" href="#kontakt">Booking anfragen</a>
|
|
</div>
|
|
</div>
|
|
<div class="scrolldown wrap">↓ Scrollen</div>
|
|
</section>
|
|
|
|
<section id="ueber">
|
|
<div class="wrap about-grid">
|
|
<div class="about-photo">Foto-Platzhalter · 4:5</div>
|
|
<div class="about-text">
|
|
<span class="eyebrow">Über mich</span>
|
|
<h2>Exakt geplant,<br>wunderbar chaotisch.</h2>
|
|
<p>Chrystal Math verbindet strenge Geometrie mit theatralischem Glamour: Zirkel und Konstruktionslinien treffen auf Farbverlauf, Pailletten und einen bewussten Regelbruch mitten im Takt.</p>
|
|
<p>Seit [Jahr] auf Kölner Bühnen unterwegs — von kleinen Clubformaten bis zu größeren Bühnenshows.</p>
|
|
<div class="stats">
|
|
<div><b>40+</b><span>Auftritte</span></div>
|
|
<div><b>12</b><span>Formate</span></div>
|
|
<div><b>3</b><span>Städte</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="programm">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Programm</span>
|
|
<h2>Nächste Termine</h2>
|
|
<div class="show-list">
|
|
<div class="show-row">
|
|
<div class="date"><b>27.09</b><span>2026</span></div>
|
|
<div class="info"><h4>Kleiner Freitag</h4><p>Café Bach, Köln · Einlass 20 Uhr</p></div>
|
|
<a class="tix" href="#">Tickets</a>
|
|
</div>
|
|
<div class="show-row">
|
|
<div class="date"><b>11.10</b><span>2026</span></div>
|
|
<div class="info"><h4>Calculated Chaos — Late Show</h4><p>Ort folgt · Einlass 21 Uhr</p></div>
|
|
<a class="tix" href="#">Tickets</a>
|
|
</div>
|
|
<div class="show-row">
|
|
<div class="date"><b>02.11</b><span>2026</span></div>
|
|
<div class="info"><h4>Gastauftritt</h4><p>Ort folgt · Beginn 22 Uhr</p></div>
|
|
<a class="tix" href="#">Tickets</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="galerie">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Galerie</span>
|
|
<h2>Ein paar Eindrücke</h2>
|
|
<div class="gallery">
|
|
<div>Bild 1</div><div>Bild 2</div><div>Bild 3</div><div>Bild 4</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="quote-section">
|
|
<div class="wrap">
|
|
<blockquote>„Wie ein Zirkel, der plötzlich Lust auf Freestyle bekommt."</blockquote>
|
|
<cite>— Platzhalter-Zitat, z. B. aus einer Rezension</cite>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="kontakt">
|
|
<div class="wrap contact-grid">
|
|
<div class="contact-info">
|
|
<span class="eyebrow">Kontakt & Booking</span>
|
|
<h2>Lust auf calculated chaos<br>bei deinem Event?</h2>
|
|
<a href="mailto:hallo@chrystalmath.de">hallo@chrystalmath.de</a>
|
|
<a href="#">chrystalmath.de</a>
|
|
<div class="socials"><span>IG</span><span>TT</span><span>FB</span></div>
|
|
</div>
|
|
<div class="form-mock card">
|
|
<div class="f"><label>Name</label><div class="field"></div></div>
|
|
<div class="f"><label>E-Mail</label><div class="field"></div></div>
|
|
<div class="f"><label>Nachricht</label><div class="field tall"></div></div>
|
|
<button class="btn btn-primary send">Anfrage senden</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="wrap">
|
|
<div class="brand text-gradient">Chrystal Math</div>
|
|
<nav>
|
|
<a href="#ueber">Über mich</a>
|
|
<a href="#programm">Programm</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
</nav>
|
|
<p>© 2026 Chrystal Math · Calculated Chaos.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const btn = document.getElementById('themeToggle');
|
|
const root = document.documentElement;
|
|
btn.addEventListener('click', () => {
|
|
const isLight = root.getAttribute('data-theme') === 'light';
|
|
root.setAttribute('data-theme', isLight ? 'dark' : 'light');
|
|
btn.textContent = isLight ? '☾ Dark' : '☀ Light';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|