30 lines
1.9 KiB
HTML
30 lines
1.9 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:26px 30px;box-sizing:border-box;font-family:var(--font-body)}
|
|
.ramp{display:flex;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-1)}
|
|
.sw{flex:1;height:86px;display:flex;align-items:flex-end;padding:8px 6px;box-sizing:border-box}
|
|
.sw span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:-.02em}
|
|
.row{display:flex;justify-content:space-between;margin-top:12px}
|
|
.row span{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);flex:1;text-align:center}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="ramp">
|
|
<div class="sw" style="background:#F4EFE6"><span style="color:#7A5C3E">50</span></div>
|
|
<div class="sw" style="background:#EDE6D9"><span style="color:#7A5C3E">100</span></div>
|
|
<div class="sw" style="background:#E0D5C3"><span style="color:#5A4630">200</span></div>
|
|
<div class="sw" style="background:#C9B299"><span style="color:#3B2C1E">300</span></div>
|
|
<div class="sw" style="background:#A8855F"><span style="color:#221E18">400</span></div>
|
|
<div class="sw" style="background:#7A5C3E"><span style="color:#F4EFE6">500</span></div>
|
|
<div class="sw" style="background:#5A4630"><span style="color:#F4EFE6">600</span></div>
|
|
<div class="sw" style="background:#3B2C1E"><span style="color:#EDE6D9">700</span></div>
|
|
<div class="sw" style="background:#2E2720"><span style="color:#EDE6D9">800</span></div>
|
|
<div class="sw" style="background:#221E18"><span style="color:#EDE6D9">900</span></div>
|
|
<div class="sw" style="background:#1E1A16"><span style="color:#B7A488">950</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<span>#F4EFE6</span><span>bone</span><span>sand</span><span>sepia</span><span>tobacco</span><span>espresso</span><span>ink #221E18</span>
|
|
</div>
|
|
</div>
|
|
</body></html>
|