23 lines
1.4 KiB
HTML
23 lines
1.4 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);display:flex;gap:26px;align-items:center}
|
||
.cut{width:150px;height:184px;position:relative;flex:none;
|
||
border-radius:8px 80px 8px 8px;overflow:hidden;
|
||
background:radial-gradient(120% 90% at 72% 12%, #C9B299 0%, #7A5C3E 38%, #3B2C1E 72%, #1E1A16 100%);}
|
||
.cut::after{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:180px;opacity:.10;mix-blend-mode:overlay}
|
||
.mark{position:absolute;right:12px;bottom:12px;width:70px;opacity:.12;filter:invert(1)}
|
||
.meta h4{font-family:var(--font-display);font-size:21px;color:var(--fg-1);margin:0 0 8px}
|
||
.meta p{font-size:12.5px;color:var(--fg-2);line-height:1.55;margin:0;max-width:280px}
|
||
.meta code{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep)}
|
||
</style></head><body>
|
||
<div class="wrap">
|
||
<div class="cut"><img class="mark" src="../assets/mark-rings.svg"></div>
|
||
<div class="meta">
|
||
<h4>Never a plain rectangle</h4>
|
||
<p>Imagery is clipped to a rounded cut-out and carries the rings watermark at 4–10%. Warm chiaroscuro placeholder shown.</p>
|
||
<p style="margin-top:8px"><code>border-radius: 6px 92px 6px 6px</code></p>
|
||
</div>
|
||
</div>
|
||
</body></html>
|