42 lines
No EOL
1.5 KiB
HTML
42 lines
No EOL
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<link rel="stylesheet" href="_card.css">
|
|
<style>
|
|
.badge { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px 0 6px; font-family:"IBM Plex Sans",sans-serif; font-size:11px; font-weight:600; border-radius:2px; }
|
|
.badge::before { content:""; width:4px; height:13px; border-radius:1px; }
|
|
.b1 { background:#DCE5E5; color:#3D6E70; } .b1::before { background:#3D6E70; }
|
|
.b2 { background:#EFDDCB; color:#B4541A; } .b2::before { background:#B4541A; }
|
|
.b3 { background:#DEDAEE; color:#5A4FA3; } .b3::before { background:#5A4FA3; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row">
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#3D6E70;"></div>
|
|
<div class="name">personal</div>
|
|
<div class="val">#3D6E70</div>
|
|
</div>
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#B4541A;"></div>
|
|
<div class="name">9tfox</div>
|
|
<div class="val">#B4541A</div>
|
|
</div>
|
|
|
|
<div class="swatch">
|
|
<div class="chip-color" style="background:#5A4FA3;"></div>
|
|
<div class="name">finacode</div>
|
|
<div class="val">#5A4FA3</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top:14px; gap:8px;">
|
|
<span class="badge b1">Personal</span>
|
|
<span class="badge b2">9TFox</span>
|
|
<span class="badge b3">Finacode</span>
|
|
</div>
|
|
<div class="legend" style="margin-top:12px">accent only · never page tint · 4px stripe + tinted bg</div>
|
|
</body></html> |