<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style id="grid-style">
/**
* RESET — http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0; padding: 0; border: 0;
font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section { display: block; }
body { line-height: 1.618; font-family: Arial, Helvetica, sans-serif; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
code, pre, samp { font-family: monospace; }
/**
* BASIC TYPE
*/
img, video { max-width: 100%; vertical-align: middle; }
p:not(:last-child) { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: .5em 0 .75em; line-height: 1.3; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.125em; }
h4 { font-size: 1em; }
/**
* BOX HACKING
*/
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
/* =============================================
Masonry (Columns) Layout
============================================= */
:root {
--bg-page: #f8fafc;
--bg-surface: #ffffff;
--fg-primary: #020617;
--fg-secondary: #475569;
--fg-muted: #94a3b8;
--accent: #64748b;
--accent-hover: #475569;
--border: #e2e8f0;
--page-bg: var(--bg-page);
--page-text: var(--fg-primary);
--header-title: #020617;
--header-subtitle: #020617;
--card-bg: var(--bg-surface);
--card-text: var(--fg-primary);
--item-bg: var(--bg-surface);
--item-color: var(--fg-primary);
--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--sb-thumb: color-mix(in oklab, var(--border), var(--fg-primary) 12%);
--sb-thumb-hover: color-mix(in oklab, var(--border), var(--fg-primary) 25%);
}
/* Base */
html, body { min-height: 100vh; }
body {
background-color: var(--page-bg);
color: var(--page-text);
font-family: var(--font-family);
line-height: 1.5;
}
/* Scrollbar */
html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
/* Page Header */
.page-header {
text-align: center;
padding: 3rem 1.5rem 2rem;
max-width: 75rem;
margin: 0 auto;
}
.page-header h1 {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
color: var(--header-title);
}
.page-header p {
font-size: 1rem;
opacity: 0.65;
margin: 0;
color: var(--header-subtitle);
}
.page-header::after {
content: "";
display: block;
width: 3rem;
height: 0.1875rem;
background: var(--page-text);
opacity: 0.15;
border-radius: 99px;
margin: 1.5rem auto 0;
}
/* Wrapper */
.grid-wrapper {
padding: 0 1.5rem 3rem;
max-width: 75rem;
margin: 0 auto;
}
/* Layout — Masonry (Columns) Layout */
.grid-container {
columns: 1;
column-gap: 1rem;
}
@media (min-width: 640px) {
.grid-container {
columns: 2;
}
}
@media (min-width: 1024px) {
.grid-container {
columns: 4;
}
}
.grid-item {
break-inside: avoid;
display: block;
margin-bottom: 1rem;
}
/* Cards */
.grid-img-wrap {
position: relative;
overflow: hidden;
}
.grid-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.grid-item:hover .grid-img {
transform: scale(1.05);
}
.grid-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
opacity: 0;
transition: opacity 0.3s ease;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-item:hover .grid-overlay {
opacity: 1;
}
.grid-btn-save {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: var(--accent);
color: white;
border: none;
padding: 0.625rem 1.125rem;
border-radius: 99px;
font-weight: 700;
font-size: 0.8125rem;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.grid-btn-save:hover {
background: var(--accent-hover);
transform: scale(1.04);
}
.grid-overlay-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
}
.grid-link {
background: rgba(255,255,255,0.95);
color: #111;
text-decoration: none;
padding: 0.375rem 0.875rem;
border-radius: 99px;
font-size: 0.6875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.375rem;
transition: background 0.2s ease;
}
.grid-link:hover {
background: #fff;
}
.grid-actions {
display: flex;
gap: 0.5rem;
}
.grid-icon-btn {
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: rgba(255,255,255,0.95);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #111;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.grid-icon-btn:hover {
background: #fff;
transform: scale(1.08);
}
.grid-text {
padding: 0.625rem 0.875rem 0.875rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.grid-title {
font-size: 0.8125rem;
font-weight: 600;
margin: 0;
color: var(--item-color);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.grid-pin-user {
display: flex;
align-items: center;
gap: 0.5rem;
}
.grid-pin-avatar-wrap {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.grid-pin-avatar {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.grid-pin-name {
font-size: 0.6875rem;
font-weight: 600;
color: var(--item-color);
opacity: 0.8;
}
.grid-pin-saves {
font-size: 0.6875rem;
opacity: 0.45;
margin-left: auto;
}
.grid-content {
border-radius: 1rem;
overflow: hidden;
height: 100%;
}
.grid-content {
background-color: #ffffff;
transition: box-shadow .35s ease;
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08);
}
.grid-item:hover .grid-content {
box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.1);
}
/* Animation — lift */
.grid-item {
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.grid-item:hover {
transform: translateY(-0.375rem);
}
</style>
<script>
window.addEventListener('message', (event) => {
if (event.data.type === 'update-css') {
const style = document.getElementById('grid-style');
if (style) style.textContent = "/**\n * RESET — http://meyerweb.com/eric/tools/css/reset/\n */\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmain, menu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n margin: 0; padding: 0; border: 0;\n font-size: 100%; font: inherit; vertical-align: baseline;\n}\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, main, menu, nav, section { display: block; }\nbody { line-height: 1.618; font-family: Arial, Helvetica, sans-serif; }\nol, ul { list-style: none; }\nblockquote, q { quotes: none; }\nblockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }\ntable { border-collapse: collapse; border-spacing: 0; }\na { text-decoration: none; }\ncode, pre, samp { font-family: monospace; }\n\n/**\n * BASIC TYPE\n */\nimg, video { max-width: 100%; vertical-align: middle; }\np:not(:last-child) { margin: 0 0 1em; }\nh1, h2, h3, h4 { margin: .5em 0 .75em; line-height: 1.3; }\nh1 { font-size: 1.5em; }\nh2 { font-size: 1.25em; }\nh3 { font-size: 1.125em; }\nh4 { font-size: 1em; }\n\n/**\n * BOX HACKING\n */\nhtml { box-sizing: border-box; }\n*, *:before, *:after { box-sizing: inherit; }\n" + event.data.css;
}
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
window.parent.postMessage({ type: 'exit-fullscreen' }, '*');
}
});
document.addEventListener('click', (e) => {
// Inside the preview iframe, disable links so they don't navigate away
// and leave the preview blank. Standalone exports keep functional links.
if (window.self !== window.top) {
const link = e.target.closest('a');
if (link) {
e.preventDefault();
e.stopPropagation();
}
}
window.parent.postMessage({ type: 'preview-click' }, '*');
});
</script>
</head>
<body>
<header class="page-header">
<h1>Inspiration Board</h1>
<p>A curated collection of ideas and visuals</p>
</header>
<div class="grid-wrapper">
<div class="grid-container">
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/forest/600/800" alt="Into the old-growth forest" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">Into the old-growth forest</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-0/48/48" alt="Morgan Lane" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Morgan Lane</span>
<span class="grid-pin-saves">2.4k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/mountain/600/400" alt="Above the clouds" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">Above the clouds</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-1/48/48" alt="Alex Rivera" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Alex Rivera</span>
<span class="grid-pin-saves">892 saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/ocean/600/600" alt="Still water" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">Still water</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-2/48/48" alt="Sophie Chen" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Sophie Chen</span>
<span class="grid-pin-saves">5.1k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/city/600/900" alt="After midnight in the old quarter" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">After midnight in the old quarter</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-3/48/48" alt="Jordan Park" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Jordan Park</span>
<span class="grid-pin-saves">1.3k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/desert/600/380" alt="The red dunes at dusk" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">The red dunes at dusk</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-4/48/48" alt="Nina Patel" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Nina Patel</span>
<span class="grid-pin-saves">3.7k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/river/600/720" alt="Following the river" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">Following the river</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-5/48/48" alt="Chris Hale" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Chris Hale</span>
<span class="grid-pin-saves">645 saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/bridge/600/450" alt="The suspension bridge" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">The suspension bridge</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-6/48/48" alt="Emma Woods" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Emma Woods</span>
<span class="grid-pin-saves">4.2k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/sunrise/600/340" alt="First light" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">First light</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-7/48/48" alt="Diego Rossi" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Diego Rossi</span>
<span class="grid-pin-saves">1.8k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/canyon/600/840" alt="The carved canyon" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">The carved canyon</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-8/48/48" alt="Zara Kim" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Zara Kim</span>
<span class="grid-pin-saves">2.9k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/valley/600/500" alt="The green valley" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">The green valley</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-9/48/48" alt="Tom Walsh" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Tom Walsh</span>
<span class="grid-pin-saves">756 saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/harbour/600/660" alt="Working harbour at dawn" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">Working harbour at dawn</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-10/48/48" alt="Priya Desai" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Priya Desai</span>
<span class="grid-pin-saves">3.3k saves</span>
</div>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-content">
<div class="grid-img-wrap">
<img src="https://picsum.photos/seed/meadow/600/420" alt="The summer meadow" class="grid-img" />
<div class="grid-overlay">
<button class="grid-btn-save">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
Save
</button>
<div class="grid-overlay-bottom">
<a href="#" class="grid-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
w3bits.com
</a>
<div class="grid-actions">
<button class="grid-icon-btn" aria-label="Share"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
<button class="grid-icon-btn" aria-label="More"><svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg></button>
</div>
</div>
</div>
</div>
<div class="grid-text">
<h3 class="grid-title">The summer meadow</h3>
<div class="grid-pin-user">
<div class="grid-pin-avatar-wrap"><img src="https://picsum.photos/seed/pin-11/48/48" alt="Ryan O'Brien" class="grid-pin-avatar" /></div>
<span class="grid-pin-name">Ryan O'Brien</span>
<span class="grid-pin-saves">1.1k saves</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Get the code
Subscribe to unlock this export and receive frontend tips, tools, and goodies. No spam.
Already subscribed? Enter your email to reactivate access.