72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
@page{ size: 210mm 297mm; margin:0; }
|
|
html,body{width:210mm;height:297mm;}
|
|
.sheet{
|
|
width:210mm;height:297mm;position:relative;
|
|
background:var(--bg);
|
|
color:var(--ink);
|
|
padding:18mm 20mm;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
.arc{position:absolute;top:-20mm;right:-20mm;opacity:.4;}
|
|
|
|
header{display:flex;justify-content:space-between;align-items:flex-start;}
|
|
header .brandmark{font-family:var(--font-display);font-weight:700;font-size:22px;}
|
|
header .brandmark span{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
|
header .tagline{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);margin-top:2mm;}
|
|
header .contact{text-align:right;font-size:9.5px;color:var(--ink-muted);line-height:1.7;}
|
|
|
|
.quip{
|
|
margin-top:14mm;font-family:var(--font-accent);font-style:italic;font-weight:600;
|
|
font-size:15px;color:var(--chaos-pink);max-width:100mm;
|
|
}
|
|
|
|
.rule{height:1px;background:linear-gradient(90deg, var(--chaos-gold), transparent 70%);margin:8mm 0 0;}
|
|
|
|
.bodyfield{flex:1;margin-top:14mm;}
|
|
.bodyfield .placeholder{font-size:10px;color:var(--ink-muted);opacity:.5;font-family:monospace;}
|
|
|
|
footer{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line);padding-top:5mm;font-size:8.5px;color:var(--ink-muted);letter-spacing:.03em;}
|
|
footer .col b{color:var(--ink);display:block;font-weight:600;margin-bottom:1mm;font-size:8.5px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<svg class="arc" width="200" height="200" viewBox="0 0 200 200">
|
|
<circle cx="100" cy="100" r="85" stroke="#E3B63E" stroke-width="0.6" fill="none" stroke-dasharray="1 7" stroke-linecap="round"></circle>
|
|
</svg>
|
|
|
|
<header>
|
|
<div>
|
|
<div class="brandmark"><span>Chrystal Math</span></div>
|
|
<div class="tagline">Calculated Chaos.</div>
|
|
</div>
|
|
<div class="contact">
|
|
Chrystal Math<br>
|
|
Musterstraße 12, 50667 Köln<br>
|
|
hallo@chrystalmath.de<br>
|
|
chrystalmath.de
|
|
</div>
|
|
</header>
|
|
|
|
<div class="quip">„Exakt geplant, wunderbar aus der Reihe getanzt."</div>
|
|
|
|
<div class="rule"></div>
|
|
|
|
<div class="bodyfield">
|
|
<div class="placeholder">— Fließtext beginnt hier —</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="col"><b>Kontakt</b>hallo@chrystalmath.de · +49 (0) 000 000000</div>
|
|
<div class="col"><b>Web</b>chrystalmath.de · @chrystalmath</div>
|
|
<div class="col"><b>Bank</b>IBAN DE00 0000 0000 0000 00</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|