83 lines
3.5 KiB
HTML
83 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="fonts.css">
|
|
<style>
|
|
@page{ size: 148mm 105mm; margin:0; }
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
.card{width:148mm;height:105mm;position:relative;overflow:hidden;page-break-after:always;font-family:var(--font-sans);}
|
|
.card:last-child{page-break-after:auto;}
|
|
|
|
/* ---- FRONT ---- */
|
|
#front{
|
|
background:
|
|
radial-gradient(circle at 78% 20%, rgba(2,175,241,.30), transparent 45%),
|
|
radial-gradient(circle at 15% 85%, rgba(240,58,130,.26), transparent 45%),
|
|
var(--bg-midnight);
|
|
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
|
|
padding:14mm;color:var(--ink-light);
|
|
}
|
|
#front .wordmark{
|
|
font-family:var(--font-display);font-weight:800;font-size:44px;line-height:.98;
|
|
background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;
|
|
}
|
|
#front .tagline{margin-top:5mm;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--chaos-gold);font-weight:600;}
|
|
#front svg{position:absolute;top:-10mm;right:-10mm;opacity:.6;}
|
|
|
|
/* ---- BACK ---- */
|
|
#back{
|
|
background:var(--bg-midnight);
|
|
color:var(--ink-light);
|
|
padding:9mm 10mm;
|
|
display:flex;flex-direction:column;
|
|
}
|
|
#back .headrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:6mm;}
|
|
#back .brandmark{font-family:var(--font-display);font-weight:700;font-size:15px;}
|
|
#back .brandmark span{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
|
#back .tag{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--chaos-gold);}
|
|
|
|
#back .body{flex:1;display:flex;}
|
|
#back .msg{flex:1.3;border-right:1px solid rgba(245,241,234,.25);padding-right:8mm;}
|
|
#back .msg .lines div{border-bottom:.4px dotted rgba(245,241,234,.35);height:6.4mm;}
|
|
#back .addr{flex:1;padding-left:8mm;display:flex;flex-direction:column;}
|
|
#back .addr .stamp{
|
|
margin-left:auto;width:22mm;height:26mm;border:1px dashed var(--chaos-gold);border-radius:4px;
|
|
display:flex;align-items:center;justify-content:center;color:var(--chaos-gold);font-size:8px;text-align:center;letter-spacing:.08em;
|
|
}
|
|
#back .addr .lines{margin-top:auto;}
|
|
#back .addr .lines div{border-bottom:.4px dotted rgba(245,241,234,.35);height:6.4mm;}
|
|
#back .foot{margin-top:6mm;font-size:7.5px;color:var(--ink-muted);letter-spacing:.05em;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card" id="front">
|
|
<svg width="180" height="180" viewBox="0 0 180 180">
|
|
<circle cx="90" cy="90" r="60" stroke="#E3B63E" stroke-width="0.6" fill="none" opacity="0.55"></circle>
|
|
<circle cx="90" cy="90" r="80" stroke="#E3B63E" stroke-width="0.6" fill="none" stroke-dasharray="4 4" opacity="0.35"></circle>
|
|
<circle cx="90" cy="90" r="3" fill="#E3B63E"></circle>
|
|
</svg>
|
|
<div class="wordmark">Chrystal<br>Math</div>
|
|
<div class="tagline">Calculated Chaos.</div>
|
|
</div>
|
|
|
|
<div class="card" id="back">
|
|
<div class="headrow">
|
|
<div class="brandmark"><span>Chrystal Math</span></div>
|
|
<div class="tag">Calculated Chaos.</div>
|
|
</div>
|
|
<div class="body">
|
|
<div class="msg">
|
|
<div class="lines"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
|
</div>
|
|
<div class="addr">
|
|
<div class="stamp">Briefmarke</div>
|
|
<div class="lines"><div></div><div></div><div></div><div></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="foot">chrystalmath.de · @chrystalmath</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|