63 lines
2.4 KiB
HTML
63 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
@page{ size: 420mm 594mm; margin:0; }
|
|
html,body{width:420mm;height:594mm;background:var(--bg);overflow:hidden;}
|
|
.sheet{
|
|
width:420mm;height:594mm;position:relative;
|
|
background:
|
|
radial-gradient(ellipse 55% 40% at 78% 12%, color-mix(in srgb, var(--chaos-violet) 10%, transparent), transparent 70%),
|
|
var(--bg);
|
|
color:var(--ink);
|
|
padding:26mm;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
.arc{position:absolute;top:6%;right:5%;opacity:.4;pointer-events:none;}
|
|
|
|
.eyebrow{font-size:15px;margin-top:14mm;}
|
|
|
|
.wordmark{
|
|
font-family:var(--font-display);font-weight:800;
|
|
font-size:118px;line-height:.95;margin-top:18mm;
|
|
background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;
|
|
}
|
|
.tagline{
|
|
font-size:19px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);
|
|
margin-top:10mm;font-weight:400;
|
|
}
|
|
|
|
.rule{height:1px;background:linear-gradient(90deg, var(--chaos-gold), transparent 70%);margin:16mm 0;width:50%;}
|
|
|
|
.details{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;}
|
|
.details .block b{display:block;font-family:var(--font-display);font-size:28px;color:var(--ink);font-weight:600;margin-bottom:3mm;}
|
|
.details .block span{font-size:12px;color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;}
|
|
|
|
.placeholder-note{
|
|
position:absolute;bottom:10mm;right:26mm;font-family:monospace;font-size:9px;color:var(--ink-muted);opacity:.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<svg class="arc" width="240" height="240" viewBox="0 0 240 240">
|
|
<circle cx="120" cy="120" r="100" stroke="#E3B63E" stroke-width="0.6" fill="none" stroke-dasharray="1 7" stroke-linecap="round"></circle>
|
|
</svg>
|
|
|
|
<span class="eyebrow">Calculated Chaos presents</span>
|
|
<div class="wordmark">Chrystal<br>Math</div>
|
|
<div class="tagline">Precision with sequins.</div>
|
|
|
|
<div class="rule"></div>
|
|
|
|
<div class="details">
|
|
<div class="block"><b>27. September</b><span>Einlass 20 Uhr · Beginn 21 Uhr</span></div>
|
|
<div class="block"><b>Café Bach</b><span>Köln</span></div>
|
|
<div class="block"><b>Tickets ab 12€</b><span>Link in Bio</span></div>
|
|
</div>
|
|
<div class="placeholder-note">Platzhalter — Datum/Ort/Preis vor Druck ersetzen</div>
|
|
</div>
|
|
</body>
|
|
</html>
|