19 lines
1,001 B
HTML
19 lines
1,001 B
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>
|
||
|
|
body { padding:48px; display:flex; gap:48px; align-items:center; }
|
||
|
|
.stack { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
|
||
|
|
.box { width:140px; height:80px; background:#F5F1E8; border:1px solid #D5CFC2; border-radius:3px; }
|
||
|
|
.pop { box-shadow: 0 1px 0 rgba(20,18,12,.04), 0 8px 24px -8px rgba(20,18,12,.16); }
|
||
|
|
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#5A5347; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="stack"><div class="box"></div><div class="lbl">flat · default</div></div>
|
||
|
|
<div class="stack"><div class="box pop"></div><div class="lbl">popover · 8 24 -8</div></div>
|
||
|
|
<div class="stack"><div class="box" style="box-shadow:inset 0 1px 0 rgba(20,18,12,.18)"></div><div class="lbl">inset · press state</div></div>
|
||
|
|
</body></html>
|