19 lines
1.1 KiB
HTML
19 lines
1.1 KiB
HTML
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0}
|
|
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box;font-family:var(--font-body)}
|
|
.card{position:relative;background:var(--ground-raised);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:22px 24px;overflow:hidden;max-width:340px}
|
|
.card::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:200px;opacity:.06;pointer-events:none}
|
|
.k{position:relative;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 8px}
|
|
.t{position:relative;font-family:var(--font-display);font-size:23px;color:var(--fg-1);margin:0 0 6px}
|
|
.d{position:relative;font-size:13px;color:var(--fg-2);line-height:1.55;margin:0}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="card">
|
|
<p class="k">Code</p>
|
|
<p class="t">Small tools</p>
|
|
<p class="d">Bone panel, hairline border, a greeble at 4.5%. No heavy shadow box.</p>
|
|
</div>
|
|
</div>
|
|
</body></html>
|