index.html.md

# index.html

The finished result as one file. Save it as index.html and open it.

```html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Editorial portfolio hero</title>
<style>
*{box-sizing:border-box;margin:0}
:root{--paper:#f2ede4;--ink:#16130f;--acc:#e5471b}
body{background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif;min-height:100vh;overflow-x:hidden}
.top{display:flex;justify-content:space-between;padding:26px 40px;font:600 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);animation:in .8s both}
.hero{padding:40px 40px 0;position:relative}
.meta{display:flex;justify-content:space-between;font:500 13px ui-sans-serif,system-ui,sans-serif;margin-bottom:10px;animation:in .8s .1s both}
h1{font-weight:400;font-size:clamp(64px,15.5vw,230px);line-height:.86;letter-spacing:-.05em}
h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
h1 .ln span{display:block;transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.8,.2,1) forwards}
h1 .ln:nth-child(2) span{animation-delay:.18s;font-style:italic;color:var(--acc);padding-left:8vw}
h1 .ln:nth-child(3) span{animation-delay:.36s}
@keyframes rise{to{transform:none}}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.badge{position:absolute;right:6vw;top:46%;width:150px;height:150px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:700 12px ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em;text-align:center;animation:spin 14s linear infinite,in 1s .9s both}
.badge b{font-size:34px;font-family:Georgia,serif;font-weight:400}
@keyframes spin{to{transform:rotate(360deg)}}
.bot{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:34px 40px;margin-top:26px;border-top:1px solid var(--ink);font:400 18px/1.55 ui-sans-serif,system-ui,sans-serif;animation:in .9s .8s both}
.bot b{font-family:Georgia,serif;font-size:20px}
.mq{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--paper)}
.mq div{display:inline-block;padding:16px 0;font:italic 30px Georgia,serif;animation:mq 22s linear infinite}
.mq span{margin:0 28px}.mq em{color:var(--acc);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}
@media(max-width:760px){.bot{grid-template-columns:1fr}.top,.hero,.bot{padding-left:20px;padding-right:20px}.badge{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}h1 .ln span{transform:none}}
</style></head><body>
<div class="top"><span>Mara Ellison</span><span>Index · Work · About · Contact</span><span>Available 2027</span></div>
<header class="hero"><div class="meta"><span>Independent designer & art director</span><span>Lisbon / Remote</span></div>
<h1><span class="ln"><span>Quiet</span></span><span class="ln"><span>ideas, loud</span></span><span class="ln"><span>results.</span></span></h1>
<div class="badge"><div><b>12</b><br>YEARS OF<br>BRAND WORK</div></div></header>
<div class="bot"><p><b>Hello.</b> I help young companies look like they have always known who they are: identity, editorial systems and websites with a point of view.</p><p><b>Recent clients</b><br>Halden Press · Orbit Coffee · Fieldnote · Marlow & Co.</p></div>
<div class="mq"><div><span>Brand identity</span><em>✦</em><span>Editorial design</span><em>✦</em><span>Web design</span><em>✦</em><span>Packaging</span><em>✦</em><span>Art direction</span><em>✦</em><span>Brand identity</span><em>✦</em><span>Editorial design</span><em>✦</em><span>Web design</span><em>✦</em><span>Packaging</span><em>✦</em><span>Art direction</span><em>✦</em></div></div>
</body></html>

```