Photo Gallery HTML Template
Display photography or artwork with a simple responsive gallery grid and captions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Field Notes Gallery</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #0d0c1d; color: white; }
header { text-align: center; padding: 4rem 1.5rem 2rem; }
header h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
header p { color: rgba(255,255,255,0.7); margin-top: 0.75rem; }
.gallery { max-width: 1100px; margin: 0 auto 4rem; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
figure { border-radius: 1.2rem; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
img { display: block; width: 100%; height: 240px; object-fit: cover; filter: saturate(0.9); }
figcaption { padding: 1rem; font-size: 0.95rem; color: rgba(255,255,255,0.8); }
</style>
</head>
<body>
<header>
<h1>Field Notes</h1>
<p>Photographs from the California coast and the high desert, captured on 35mm.</p>
</header>
<main class="gallery">
<figure>
<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800&q=80" alt="Redwood forest" />
<figcaption>Redwood State Park · 7:15am</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80" alt="Highway through the desert" />
<figcaption>Mojave drive · Midday heat</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=800&q=80" alt="Sunset over ocean cliffs" />
<figcaption>Big Sur · Golden hour</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1482192597420-4817fdd7e8b0?auto=format&fit=crop&w=800&q=80" alt="Joshua Tree silhouettes" />
<figcaption>Joshua Tree · Twilight silhouettes</figcaption>
</figure>
</main>
</body>
</html>