21 lines
1.5 KiB
HTML
21 lines
1.5 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-dark);padding:24px 28px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:34px;align-items:center;justify-content:center}
|
|
.opt{display:flex;flex-direction:column;align-items:center;gap:11px}
|
|
.opt img{display:block;filter:invert(92%) sepia(10%) saturate(380%) brightness(98%)}
|
|
.cut{width:118px;height:90px;border-radius:6px 52px 6px 6px;position:relative;overflow:hidden;
|
|
background:radial-gradient(120% 100% at 70% 16%,#C9B299,#7A5C3E 40%,#3B2C1E 74%,#1E1A16)}
|
|
.cut img{position:absolute;right:9px;bottom:8px;width:58px;filter:invert(1);opacity:.13}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-on-dark-2);letter-spacing:.04em;text-align:center}
|
|
.lab b{color:var(--fg-on-dark-1);font-weight:600}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="opt"><img src="../assets/mark-rings.svg" height="44"><span class="lab"><b>Orbit</b><br>primary</span></div>
|
|
<div class="opt"><img src="../assets/mark-rings-drift.svg" height="44"><span class="lab">Drift</span></div>
|
|
<div class="opt"><img src="../assets/mark-rings-cascade.svg" height="44"><span class="lab">Cascade</span></div>
|
|
<div class="opt"><img src="../assets/accent-concentric.svg" height="44"><span class="lab">Concentric</span></div>
|
|
<div class="opt"><div class="cut"><img src="../assets/mark-rings.svg"></div><span class="lab">rounded cut-out<br>+ watermark @13%</span></div>
|
|
</div>
|
|
</body></html>
|