Open demo

CSS code

HTML 
<div><span class="lbl">Portfolio home with a featured grid</span>
<section class="pf" aria-labelledby="pf-title">
  <header class="pf-top"><p class="pf-name">Ása Rún</p>
    <nav aria-label="Portfolio"><ul><li><a href="#work" aria-current="page">Work</a></li><li><a href="#series">Series</a></li><li><a href="#prints">Prints</a></li><li><a href="#contact">Contact</a></li></ul></nav></header>
  <h2 id="pf-title" class="pf-lead">Night photography from the quiet edges of the map. Commissions and print sales open from November.</h2>
  <ul class="pf-grid" role="list">
    <li class="pf-item pf-wide"><a href="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=1280&h=853&q=70" width="1280" height="853" loading="lazy" alt="A person standing under a bright arc of the Milky Way"></span><span class="pf-cap"><span>Under the arc</span><span>2025</span></span></a></li>
    <li class="pf-item pf-tall"><a href="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=640&h=800&q=70" width="640" height="800" loading="lazy" alt="A red full moon above glowing orange clouds"></span><span class="pf-cap"><span>Blood moon</span><span>2025</span></span></a></li>
    <li class="pf-item"><a href="https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=640&h=512&q=70" width="640" height="512" loading="lazy" alt="Green northern lights above a silhouetted pine forest"></span><span class="pf-cap"><span>Green hour</span><span>2024</span></span></a></li>
    <li class="pf-item"><a href="https://images.unsplash.com/photo-1534447677768-be436bb09401?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?auto=format&fit=crop&w=640&h=512&q=70" width="640" height="512" loading="lazy" alt="A small sailing boat on mirror-still water under a starry sky"></span><span class="pf-cap"><span>Night sail</span><span>2024</span></span></a></li>
    <li class="pf-item"><a href="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?auto=format&fit=crop&w=640&h=512&q=70" width="640" height="512" loading="lazy" alt="Stars seen through a narrow gap between curving sandstone canyon walls"></span><span class="pf-cap"><span>Canyon window</span><span>2023</span></span></a></li>
  </ul>
</section></div>

<div><span class="lbl">Series index</span>
<section class="si" aria-labelledby="si-title">
  <div class="si-head"><p class="si-kicker">Ása Rún · Series</p><h2 id="si-title">Three bodies of work</h2></div>
  <ol class="si-list">
    <li class="si-row"><span class="si-num" aria-hidden="true">01</span><div class="si-info"><h3><a class="si-link" href="#long-nights">Long Nights</a></h3><p>Northern winter · 2024–25 · 28 photographs</p></div><ul class="si-thumbs" role="list"><li><img src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="Purple and green aurora above a snowy valley"></li><li><img src="https://images.unsplash.com/photo-1436891620584-47fd0e565afb?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="A starry sky over a cone-shaped peak, reflected in a calm lake"></li><li><img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="Dark red mountain ridges under a heavy grey sky at dusk"></li></ul><span class="si-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
    <li class="si-row"><span class="si-num" aria-hidden="true">02</span><div class="si-info"><h3><a class="si-link" href="#dark-skies">Dark Skies</a></h3><p>Highland reserves · 2023–25 · 36 photographs</p></div><ul class="si-thumbs" role="list"><li><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The Milky Way and a shooting star over snowy mountains"></li><li><img src="https://images.unsplash.com/photo-1509773896068-7fd415d91e2e?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The Milky Way reflected in a still lake between dark forests"></li><li><img src="https://images.unsplash.com/photo-1488866022504-f2584929ca5f?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The Milky Way rising over dark hills with a few lights on the horizon"></li></ul><span class="si-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
    <li class="si-row"><span class="si-num" aria-hidden="true">03</span><div class="si-info"><h3><a class="si-link" href="#borrowed-light">Borrowed Light</a></h3><p>Studio edit · 2025 · 12 prints</p></div><ul class="si-thumbs" role="list"><li><img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The cloud-covered Earth seen from orbit, with part of a space station in the corner"></li><li><img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="City lights scattered across the night side of the Earth, seen from orbit"></li><li><img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="A glowing blue bubble-shaped nebula among clouds of gas and stars"></li></ul><span class="si-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
  </ol>
</section></div>
CSS 
/* Dark photographer portfolio. Colours are checked for contrast on the near-black ground. */
.pf,.si{--pf-bg:#0c0d10;--pf-surface:#15171c;--pf-ink:#eceae6;--pf-muted:#a3a7b0;--pf-accent:#f2b56b;color:var(--pf-ink)}

/* 1. Portfolio home with a featured grid */
.pf-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:18px;border-bottom:1px solid #2a2d35}
.pf-name{font-size:1.05rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.pf-top ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px}
.pf-top a{display:inline-block;padding:4px 0;font-size:.9rem;color:var(--pf-muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.pf-top a:hover{color:var(--pf-ink)}
.pf-top a[aria-current=page]{color:var(--pf-ink);border-bottom-color:var(--pf-accent)}
.pf-lead{max-width:30ch;margin:34px 0 30px;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.pf-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:28px 16px}
@media (min-width:768px){.pf-grid{grid-template-columns:repeat(3,1fr)}.pf-wide{grid-column:span 2}}
.pf-item a{display:flex;flex-direction:column;height:100%;color:var(--pf-ink);text-decoration:none}
.pf-img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--pf-surface)}
.pf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s}
@media (min-width:768px){.pf-tall .pf-img{aspect-ratio:auto;flex:1}}
.pf-tall img{object-position:50% 25%}
.pf-grid li:nth-child(n+3) .pf-img{aspect-ratio:5/4}
.pf-cap{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font-size:.92rem}
.pf-cap span:last-child{color:var(--pf-muted);font-variant-numeric:tabular-nums}
.pf-item a:hover img,.pf-item a:focus-visible img{transform:scale(1.04);opacity:1}
.pf-top a:focus-visible,.pf-item a:focus-visible{outline:3px solid var(--pf-accent);outline-offset:4px;border-radius:4px}

/* 2. Series index: each title link stretches over its whole row */
.si-head{margin-bottom:8px}
.si-kicker{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-accent)}
.si-head h2{margin-top:4px;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em}
.si-list{list-style:none}
.si-row{position:relative;display:grid;grid-template-columns:56px 1fr auto 28px;align-items:center;gap:20px;padding:22px 12px;border-bottom:1px solid #2a2d35;transition:background-color .25s}
.si-row:hover{background:var(--pf-surface)}
.si-num{font:500 .85rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--pf-muted)}
.si-info h3{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.si-info p{margin-top:4px;font-size:.88rem;color:var(--pf-muted)}
.si-link{color:inherit;text-decoration:none}
.si-link::after{content:"";position:absolute;inset:0;border-radius:6px}
.si-link:focus-visible{outline:none}
.si-link:focus-visible::after{outline:3px solid var(--pf-accent);outline-offset:-3px}
.si-thumbs{list-style:none;display:flex;gap:8px}
.si-thumbs img{width:96px;height:72px;object-fit:cover;display:block;border-radius:3px;filter:grayscale(.7) brightness(.8);transition:filter .3s}
.si-row:hover .si-thumbs img,.si-row:focus-within .si-thumbs img{filter:none}
.si-arrow{display:grid;place-items:center;color:var(--pf-muted);transition:color .25s,transform .25s}
.si-arrow svg{width:22px;height:22px}
.si-row:hover .si-arrow,.si-row:focus-within .si-arrow{color:var(--pf-accent);transform:translate(3px,-3px)}
@media (max-width:767px){.si-row{grid-template-columns:40px 1fr 24px;gap:12px 14px;padding:18px 6px}.si-thumbs{grid-column:2/4;grid-row:2}.si-thumbs li{flex:1}.si-thumbs img{width:100%;height:auto;aspect-ratio:4/3}
  .si-arrow{grid-column:3;grid-row:1}.si-info h3{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.pf-top a,.pf-img img,.si-row,.si-thumbs img,.si-arrow{transition:none}.pf-item a:hover img,.pf-item a:focus-visible img{transform:none}
  .si-row:hover .si-arrow,.si-row:focus-within .si-arrow{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Portfolio home with a featured grid</span>
<section class="pf" data-bs-theme="dark" aria-labelledby="pf-title">
  <header class="pf-top d-flex flex-wrap align-items-center justify-content-between"><p class="pf-name">Ása Rún</p>
    <nav aria-label="Portfolio"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#work" aria-current="page">Work</a></li><li class="nav-item"><a class="nav-link" href="#series">Series</a></li><li class="nav-item"><a class="nav-link" href="#prints">Prints</a></li><li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li></ul></nav></header>
  <h2 id="pf-title" class="pf-lead">Night photography from the quiet edges of the map. Commissions and print sales open from November.</h2>
  <div class="row pf-grid">
    <div class="pf-item col-md-8"><a href="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=1280&h=853&q=70" width="1280" height="853" loading="lazy" alt="A person standing under a bright arc of the Milky Way"></span><span class="pf-cap"><span>Under the arc</span><span>2025</span></span></a></div>
    <div class="pf-item col-md-4 pf-tall"><a href="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=640&h=800&q=70" width="640" height="800" loading="lazy" alt="A red full moon above glowing orange clouds"></span><span class="pf-cap"><span>Blood moon</span><span>2025</span></span></a></div>
    <div class="pf-item col-md-4"><a href="https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=640&h=512&q=70" width="640" height="512" loading="lazy" alt="Green northern lights above a silhouetted pine forest"></span><span class="pf-cap"><span>Green hour</span><span>2024</span></span></a></div>
    <div class="pf-item col-md-4"><a href="https://images.unsplash.com/photo-1534447677768-be436bb09401?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?auto=format&fit=crop&w=640&h=512&q=70" width="640" height="512" loading="lazy" alt="A small sailing boat on mirror-still water under a starry sky"></span><span class="pf-cap"><span>Night sail</span><span>2024</span></span></a></div>
    <div class="pf-item col-md-4"><a href="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?auto=format&fit=crop&w=2000&q=70"><span class="pf-img"><img src="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?auto=format&fit=crop&w=640&h=512&q=70" width="640" height="512" loading="lazy" alt="Stars seen through a narrow gap between curving sandstone canyon walls"></span><span class="pf-cap"><span>Canyon window</span><span>2023</span></span></a></div>
  </div>
</section></div>

<div><span class="lbl">Series index</span>
<section class="si" data-bs-theme="dark" aria-labelledby="si-title">
  <div class="si-head"><p class="si-kicker">Ása Rún · Series</p><h2 id="si-title" class="si-title">Three bodies of work</h2></div>
  <ol class="list-group list-group-flush si-list">
    <li class="list-group-item list-group-item-action si-row"><span class="si-num" aria-hidden="true">01</span><div class="si-info"><h3><a class="si-link stretched-link" href="#long-nights">Long Nights</a></h3><p>Northern winter · 2024–25 · 28 photographs</p></div><ul class="si-thumbs list-unstyled m-0"><li><img src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="Purple and green aurora above a snowy valley"></li><li><img src="https://images.unsplash.com/photo-1436891620584-47fd0e565afb?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="A starry sky over a cone-shaped peak, reflected in a calm lake"></li><li><img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="Dark red mountain ridges under a heavy grey sky at dusk"></li></ul><span class="si-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
    <li class="list-group-item list-group-item-action si-row"><span class="si-num" aria-hidden="true">02</span><div class="si-info"><h3><a class="si-link stretched-link" href="#dark-skies">Dark Skies</a></h3><p>Highland reserves · 2023–25 · 36 photographs</p></div><ul class="si-thumbs list-unstyled m-0"><li><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The Milky Way and a shooting star over snowy mountains"></li><li><img src="https://images.unsplash.com/photo-1509773896068-7fd415d91e2e?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The Milky Way reflected in a still lake between dark forests"></li><li><img src="https://images.unsplash.com/photo-1488866022504-f2584929ca5f?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The Milky Way rising over dark hills with a few lights on the horizon"></li></ul><span class="si-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
    <li class="list-group-item list-group-item-action si-row"><span class="si-num" aria-hidden="true">03</span><div class="si-info"><h3><a class="si-link stretched-link" href="#borrowed-light">Borrowed Light</a></h3><p>Studio edit · 2025 · 12 prints</p></div><ul class="si-thumbs list-unstyled m-0"><li><img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="The cloud-covered Earth seen from orbit, with part of a space station in the corner"></li><li><img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="City lights scattered across the night side of the Earth, seen from orbit"></li><li><img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=320&h=240&q=70" width="160" height="120" loading="lazy" alt="A glowing blue bubble-shaped nebula among clouds of gas and stars"></li></ul><span class="si-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
  </ol>
</section></div>
CSS 
/* Dark photographer portfolio on Bootstrap: data-bs-theme="dark", .nav for the menu, the grid
   (.col-md-8 + .col-md-4) for the featured row, and a flush .list-group with .stretched-link. */
.pf,.si{--pf-bg:#0c0d10;--pf-surface:#15171c;--pf-ink:#eceae6;--pf-muted:#a3a7b0;--pf-accent:#f2b56b;color:var(--pf-ink)}

/* 1. Portfolio home with a featured grid */
.pf-top{gap:12px 24px;padding-bottom:18px;border-bottom:1px solid #2a2d35}
.pf-name{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.pf-top .nav{gap:4px 22px;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:4px;--bs-nav-link-font-size:.9rem;--bs-nav-link-color:var(--pf-muted);--bs-nav-link-hover-color:var(--pf-ink)}
.pf-top .nav-link{border-bottom:1px solid transparent}
.pf-top .nav-link[aria-current=page]{color:var(--pf-ink);border-bottom-color:var(--pf-accent)}
.pf-lead{max-width:30ch;margin:34px 0 30px;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.pf-grid{--bs-gutter-x:16px;--bs-gutter-y:28px}
.pf-item a{display:flex;flex-direction:column;height:100%;color:var(--pf-ink);text-decoration:none}
.pf-img{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--pf-surface)}
.pf-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s}
@media (min-width:768px){.pf-tall .pf-img{aspect-ratio:auto;flex:1}}
.pf-tall img{object-position:50% 25%}
.pf-grid .pf-item:nth-child(n+3) .pf-img{aspect-ratio:5/4}
.pf-cap{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font-size:.92rem}
.pf-cap span:last-child{color:var(--pf-muted);font-variant-numeric:tabular-nums}
.pf-item a:hover img,.pf-item a:focus-visible img{transform:scale(1.04);opacity:1}
.pf-top .nav-link:focus-visible,.pf-item a:focus-visible{box-shadow:none;outline:3px solid var(--pf-accent);outline-offset:4px;border-radius:4px}

/* 2. Series index */
.si-head{margin-bottom:8px}
.si-kicker{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-accent)}
.si-title{margin:4px 0 0;font-size:1.75rem;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.si-list{--bs-list-group-bg:transparent;--bs-list-group-color:var(--pf-ink);--bs-list-group-border-color:#2a2d35;--bs-list-group-action-color:var(--pf-ink);--bs-list-group-action-hover-bg:var(--pf-surface);--bs-list-group-action-hover-color:var(--pf-ink);--bs-list-group-action-active-bg:var(--pf-surface);--bs-list-group-action-active-color:var(--pf-ink)}
.si-row{display:grid;grid-template-columns:56px 1fr auto 28px;align-items:center;gap:20px;padding:22px 12px;transition:background-color .25s}
.si-list .si-row:last-child{border-bottom-width:1px}
.si-num{font:500 .85rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--pf-muted)}
.si-info h3{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.si-info p{margin:4px 0 0;font-size:.88rem;color:var(--pf-muted)}
.si-link{color:inherit;text-decoration:none}
.si-link.stretched-link::after{border-radius:6px}
.si-link:focus-visible{outline:none}
.si-link:focus-visible::after{outline:3px solid var(--pf-accent);outline-offset:-3px}
.si-thumbs{display:flex;gap:8px}
.si-thumbs img{width:96px;height:72px;object-fit:cover;display:block;border-radius:3px;filter:grayscale(.7) brightness(.8);transition:filter .3s}
.si-row:hover .si-thumbs img,.si-row:focus-within .si-thumbs img{filter:none}
.si-arrow{display:grid;place-items:center;color:var(--pf-muted);transition:color .25s,transform .25s}
.si-arrow svg{width:22px;height:22px}
.si-row:hover .si-arrow,.si-row:focus-within .si-arrow{color:var(--pf-accent);transform:translate(3px,-3px)}
@media (max-width:767px){.si-row{grid-template-columns:40px 1fr 24px;gap:12px 14px;padding:18px 6px}.si-thumbs{grid-column:2/4;grid-row:2}.si-thumbs li{flex:1}.si-thumbs img{width:100%;height:auto;aspect-ratio:4/3}
  .si-arrow{grid-column:3;grid-row:1}.si-info h3{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.pf-img img,.si-row,.si-thumbs img,.si-arrow{transition:none}.pf-item a:hover img,.pf-item a:focus-visible img{transform:none}
  .si-row:hover .si-arrow,.si-row:focus-within .si-arrow{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#a3a7b0] uppercase">Portfolio home with a featured grid</span>
<section aria-labelledby="pf-title">
  <header class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-b border-[#2a2d35] pb-[18px]"><p class="text-[1.05rem] font-bold tracking-[.32em] uppercase">Ása Rún</p>
    <nav aria-label="Portfolio"><ul class="flex flex-wrap gap-x-[22px] gap-y-1"><li><a class="inline-block border-b border-transparent py-1 text-[.9rem] text-[#a3a7b0] transition-colors duration-200 hover:text-[#eceae6] aria-[current=page]:border-[#f2b56b] aria-[current=page]:text-[#eceae6] motion-reduce:transition-none focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="#work" aria-current="page">Work</a></li><li><a class="inline-block border-b border-transparent py-1 text-[.9rem] text-[#a3a7b0] transition-colors duration-200 hover:text-[#eceae6] aria-[current=page]:border-[#f2b56b] aria-[current=page]:text-[#eceae6] motion-reduce:transition-none focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="#series">Series</a></li><li><a class="inline-block border-b border-transparent py-1 text-[.9rem] text-[#a3a7b0] transition-colors duration-200 hover:text-[#eceae6] aria-[current=page]:border-[#f2b56b] aria-[current=page]:text-[#eceae6] motion-reduce:transition-none focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="#prints">Prints</a></li><li><a class="inline-block border-b border-transparent py-1 text-[.9rem] text-[#a3a7b0] transition-colors duration-200 hover:text-[#eceae6] aria-[current=page]:border-[#f2b56b] aria-[current=page]:text-[#eceae6] motion-reduce:transition-none focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="#contact">Contact</a></li></ul></nav></header>
  <h2 id="pf-title" class="mt-[34px] mb-[30px] max-w-[30ch] text-[clamp(1.5rem,3.4vw,2.3rem)] leading-[1.2] font-medium tracking-[-.02em]">Night photography from the quiet edges of the map. Commissions and print sales open from November.</h2>
  <ul class="grid grid-cols-1 gap-x-4 gap-y-7 md:grid-cols-3" role="list">
    <li class="md:col-span-2"><a class="group flex h-full flex-col text-[#eceae6] focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=2000&q=70"><span class="relative block overflow-hidden rounded bg-[#15171c] aspect-[3/2]"><img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=1280&h=853&q=70" class="absolute inset-0 block size-full object-cover opacity-88 transition-[scale,opacity] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:scale-104 group-hover:opacity-100 group-focus-visible:scale-104 group-focus-visible:opacity-100 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100" width="1280" height="853" loading="lazy" alt="A person standing under a bright arc of the Milky Way"></span><span class="flex justify-between gap-3 pt-2.5 text-[.92rem]"><span>Under the arc</span><span class="text-[#a3a7b0] tabular-nums">2025</span></span></a></li>
    <li><a class="group flex h-full flex-col text-[#eceae6] focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=2000&q=70"><span class="relative block overflow-hidden rounded bg-[#15171c] aspect-[3/2] md:aspect-auto md:flex-1"><img src="https://images.unsplash.com/photo-1532767153582-b1a0e5145009?auto=format&fit=crop&w=640&h=800&q=70" class="absolute inset-0 block size-full object-cover object-[50%_25%] opacity-88 transition-[scale,opacity] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:scale-104 group-hover:opacity-100 group-focus-visible:scale-104 group-focus-visible:opacity-100 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100" width="640" height="800" loading="lazy" alt="A red full moon above glowing orange clouds"></span><span class="flex justify-between gap-3 pt-2.5 text-[.92rem]"><span>Blood moon</span><span class="text-[#a3a7b0] tabular-nums">2025</span></span></a></li>
    <li><a class="group flex h-full flex-col text-[#eceae6] focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=2000&q=70"><span class="relative block overflow-hidden rounded bg-[#15171c] aspect-[5/4]"><img src="https://images.unsplash.com/photo-1483347756197-71ef80e95f73?auto=format&fit=crop&w=640&h=512&q=70" class="absolute inset-0 block size-full object-cover opacity-88 transition-[scale,opacity] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:scale-104 group-hover:opacity-100 group-focus-visible:scale-104 group-focus-visible:opacity-100 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100" width="640" height="512" loading="lazy" alt="Green northern lights above a silhouetted pine forest"></span><span class="flex justify-between gap-3 pt-2.5 text-[.92rem]"><span>Green hour</span><span class="text-[#a3a7b0] tabular-nums">2024</span></span></a></li>
    <li><a class="group flex h-full flex-col text-[#eceae6] focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="https://images.unsplash.com/photo-1534447677768-be436bb09401?auto=format&fit=crop&w=2000&q=70"><span class="relative block overflow-hidden rounded bg-[#15171c] aspect-[5/4]"><img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?auto=format&fit=crop&w=640&h=512&q=70" class="absolute inset-0 block size-full object-cover opacity-88 transition-[scale,opacity] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:scale-104 group-hover:opacity-100 group-focus-visible:scale-104 group-focus-visible:opacity-100 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100" width="640" height="512" loading="lazy" alt="A small sailing boat on mirror-still water under a starry sky"></span><span class="flex justify-between gap-3 pt-2.5 text-[.92rem]"><span>Night sail</span><span class="text-[#a3a7b0] tabular-nums">2024</span></span></a></li>
    <li><a class="group flex h-full flex-col text-[#eceae6] focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#f2b56b]" href="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?auto=format&fit=crop&w=2000&q=70"><span class="relative block overflow-hidden rounded bg-[#15171c] aspect-[5/4]"><img src="https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?auto=format&fit=crop&w=640&h=512&q=70" class="absolute inset-0 block size-full object-cover opacity-88 transition-[scale,opacity] duration-700 ease-[cubic-bezier(.2,.7,.2,1)] group-hover:scale-104 group-hover:opacity-100 group-focus-visible:scale-104 group-focus-visible:opacity-100 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus-visible:scale-100" width="640" height="512" loading="lazy" alt="Stars seen through a narrow gap between curving sandstone canyon walls"></span><span class="flex justify-between gap-3 pt-2.5 text-[.92rem]"><span>Canyon window</span><span class="text-[#a3a7b0] tabular-nums">2023</span></span></a></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#a3a7b0] uppercase">Series index</span>
<section aria-labelledby="si-title">
  <div class="mb-2"><p class="text-xs leading-[normal] font-bold tracking-[.14em] text-[#f2b56b] uppercase">Ása Rún · Series</p><h2 id="si-title" class="mt-1 text-[1.75rem] leading-[1.15] font-bold tracking-[-.02em]">Three bodies of work</h2></div>
  <ol>
    <li class="group relative grid grid-cols-[40px_1fr_24px] items-center gap-x-3.5 gap-y-3 border-b border-[#2a2d35] px-1.5 py-[18px] transition-colors duration-250 hover:bg-[#15171c] motion-reduce:transition-none md:grid-cols-[56px_1fr_auto_28px] md:gap-5 md:px-3 md:py-[22px]"><span class="font-mono text-[.85rem] leading-none font-medium text-[#a3a7b0]" aria-hidden="true">01</span><div><h3 class="text-[1.25rem] font-semibold tracking-[-.01em] md:text-[1.5rem]"><a class="text-inherit after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:outline-3 focus-visible:after:-outline-offset-3 focus-visible:after:outline-[#f2b56b]" href="#long-nights">Long Nights</a></h3><p class="mt-1 text-[.88rem] text-[#a3a7b0]">Northern winter · 2024–25 · 28 photographs</p></div><ul class="col-span-2 col-start-2 row-start-2 flex gap-2 md:col-span-1 md:col-start-3 md:row-start-1" role="list"><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="Purple and green aurora above a snowy valley"></li><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1436891620584-47fd0e565afb?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="A starry sky over a cone-shaped peak, reflected in a calm lake"></li><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="Dark red mountain ridges under a heavy grey sky at dusk"></li></ul><span class="col-start-3 row-start-1 grid place-items-center text-[#a3a7b0] transition-[color,translate] duration-250 group-focus-within:translate-x-[3px] group-focus-within:-translate-y-[3px] group-focus-within:text-[#f2b56b] group-hover:translate-x-[3px] group-hover:-translate-y-[3px] group-hover:text-[#f2b56b] motion-reduce:transition-none motion-reduce:group-hover:translate-0 motion-reduce:group-focus-within:translate-0 md:col-start-4 [&>svg]:size-[22px]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
    <li class="group relative grid grid-cols-[40px_1fr_24px] items-center gap-x-3.5 gap-y-3 border-b border-[#2a2d35] px-1.5 py-[18px] transition-colors duration-250 hover:bg-[#15171c] motion-reduce:transition-none md:grid-cols-[56px_1fr_auto_28px] md:gap-5 md:px-3 md:py-[22px]"><span class="font-mono text-[.85rem] leading-none font-medium text-[#a3a7b0]" aria-hidden="true">02</span><div><h3 class="text-[1.25rem] font-semibold tracking-[-.01em] md:text-[1.5rem]"><a class="text-inherit after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:outline-3 focus-visible:after:-outline-offset-3 focus-visible:after:outline-[#f2b56b]" href="#dark-skies">Dark Skies</a></h3><p class="mt-1 text-[.88rem] text-[#a3a7b0]">Highland reserves · 2023–25 · 36 photographs</p></div><ul class="col-span-2 col-start-2 row-start-2 flex gap-2 md:col-span-1 md:col-start-3 md:row-start-1" role="list"><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="The Milky Way and a shooting star over snowy mountains"></li><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1509773896068-7fd415d91e2e?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="The Milky Way reflected in a still lake between dark forests"></li><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1488866022504-f2584929ca5f?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="The Milky Way rising over dark hills with a few lights on the horizon"></li></ul><span class="col-start-3 row-start-1 grid place-items-center text-[#a3a7b0] transition-[color,translate] duration-250 group-focus-within:translate-x-[3px] group-focus-within:-translate-y-[3px] group-focus-within:text-[#f2b56b] group-hover:translate-x-[3px] group-hover:-translate-y-[3px] group-hover:text-[#f2b56b] motion-reduce:transition-none motion-reduce:group-hover:translate-0 motion-reduce:group-focus-within:translate-0 md:col-start-4 [&>svg]:size-[22px]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
    <li class="group relative grid grid-cols-[40px_1fr_24px] items-center gap-x-3.5 gap-y-3 border-b border-[#2a2d35] px-1.5 py-[18px] transition-colors duration-250 hover:bg-[#15171c] motion-reduce:transition-none md:grid-cols-[56px_1fr_auto_28px] md:gap-5 md:px-3 md:py-[22px]"><span class="font-mono text-[.85rem] leading-none font-medium text-[#a3a7b0]" aria-hidden="true">03</span><div><h3 class="text-[1.25rem] font-semibold tracking-[-.01em] md:text-[1.5rem]"><a class="text-inherit after:absolute after:inset-0 after:rounded-md focus-visible:outline-none focus-visible:after:outline-3 focus-visible:after:-outline-offset-3 focus-visible:after:outline-[#f2b56b]" href="#borrowed-light">Borrowed Light</a></h3><p class="mt-1 text-[.88rem] text-[#a3a7b0]">Studio edit · 2025 · 12 prints</p></div><ul class="col-span-2 col-start-2 row-start-2 flex gap-2 md:col-span-1 md:col-start-3 md:row-start-1" role="list"><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="The cloud-covered Earth seen from orbit, with part of a space station in the corner"></li><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="City lights scattered across the night side of the Earth, seen from orbit"></li><li class="flex-1 md:flex-none"><img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=320&h=240&q=70" class="block aspect-[4/3] h-auto w-full rounded-[3px] object-cover brightness-80 grayscale-70 transition-[filter] duration-300 group-focus-within:brightness-100 group-focus-within:grayscale-0 group-hover:brightness-100 group-hover:grayscale-0 motion-reduce:transition-none md:h-[72px] md:w-24" width="160" height="120" loading="lazy" alt="A glowing blue bubble-shaped nebula among clouds of gas and stars"></li></ul><span class="col-start-3 row-start-1 grid place-items-center text-[#a3a7b0] transition-[color,translate] duration-250 group-focus-within:translate-x-[3px] group-focus-within:-translate-y-[3px] group-focus-within:text-[#f2b56b] group-hover:translate-x-[3px] group-hover:-translate-y-[3px] group-hover:text-[#f2b56b] motion-reduce:transition-none motion-reduce:group-hover:translate-0 motion-reduce:group-focus-within:translate-0 md:col-start-4 [&>svg]:size-[22px]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7M8 7h9v9"/></svg></span></li>
  </ol>
</section></div>

About this set

Two dark layouts for a photographer’s portfolio, where a black ground lets night and landscape photos glow. Portfolio home with a featured grid has the photographer’s name in spaced capitals, a small menu with the current page underlined in amber, a large intro line, and a grid of five night photographs: a wide feature beside a tall image, then three more, each with a title and a year under it. Series index lists three bodies of work as numbered rows with the title, place, years and photo count, three preview thumbnails that move from muted greyscale to colour on hover or focus, and an arrow that nudges up when the row is active; on phones the thumbnails drop under the title. Each title link stretches over its whole row, so the row is one big target without wrapping the images in the link. The Bootstrap version runs in data-bs-theme=”dark” with .nav, .col-md-8 and .col-md-4 for the grid and a flush .list-group with .stretched-link. The Tailwind version matches it with utilities. No JavaScript.

What’s included

  • Portfolio home with a menu, intro line and featured photo grid
  • Series index rows with numbers, metadata and preview thumbnails
  • Whole row is clickable through one stretched title link
  • Contrast checked on a near-black background
  • Bootstrap version uses data-bs-theme="dark", .nav, .list-group and .stretched-link

Accessibility

The menu is a labelled nav with aria-current on the current page, and text colours reach at least 4.5:1 on the dark ground. Every photo, including the series previews, has descriptive alt text, and the series rows are a single link each named by the series title. Links show a 3px amber outline on focus, and the row highlight and arrow respond to focus as well as hover. Zoom and arrow movement stop under prefers-reduced-motion.

Customise it

All colours are custom properties on .pf and .si: --pf-bg, --pf-surface, --pf-ink, --pf-muted and --pf-accent. In Bootstrap the list colours are the --bs-list-group-* variables on .si-list; in Tailwind replace the #f2b56b, #15171c and #a3a7b0 values.