76 lines
3.1 KiB
HTML
76 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="fonts.css">
|
|
<style>
|
|
@page{ size: 210mm 297mm; margin:0; }
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
html,body{width:210mm;height:297mm;}
|
|
.sheet{
|
|
width:210mm;height:297mm;position:relative;
|
|
background:var(--bg-midnight);
|
|
color:var(--ink-light);font-family:var(--font-sans);
|
|
padding:18mm 20mm;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
.construction{position:absolute;top:-30mm;right:-30mm;opacity:.5;}
|
|
|
|
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:.24em;text-transform:uppercase;color:var(--chaos-gold);margin-top:2mm;font-weight:600;}
|
|
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:rgba(245,241,234,.3);font-family:monospace;}
|
|
|
|
footer{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(245,241,234,.15);padding-top:5mm;font-size:8.5px;color:var(--ink-muted);letter-spacing:.03em;}
|
|
footer .col b{color:var(--ink-light);display:block;font-family:var(--font-sans);font-weight:600;margin-bottom:1mm;font-size:8.5px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
<svg class="construction" width="220" height="220" viewBox="0 0 220 220">
|
|
<circle cx="110" cy="110" r="70" stroke="#E3B63E" stroke-width="0.6" fill="none" opacity="0.45"></circle>
|
|
<circle cx="110" cy="110" r="95" stroke="#E3B63E" stroke-width="0.6" fill="none" stroke-dasharray="4 4" opacity="0.28"></circle>
|
|
<line x1="110" y1="15" x2="110" y2="205" stroke="#E3B63E" stroke-width="0.5" opacity="0.25"></line>
|
|
<circle cx="110" cy="110" r="3" fill="#E3B63E"></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>
|