Grid di Bagian 1 masih memamerkan bidang gradasi; sekarang foto sungguhan masuk. Karena proyek ini harus bisa diunduh dan dijalankan tanpa jaringan, setiap foto digambar sebagai SVG inline yang disandikan menjadi data URI — sebuah berkas gambar utuh yang tinggal di dalam atribut src. Bagian 2 sekaligus memperkenalkan pemain utamanya: object-fit: cover, properti yang memangkas gambar agar mengisi bidang apa pun tanpa melar atau gepeng. Di akhir bagian ini beranda.html pertama kali ikut disimpan sebagai snapshot, dan sesudah titik itu HTML tidak berubah lagi hingga proyek selesai.
Foto SVG sebagai Data URI #
Pola src-nya selalu sama: data:image/svg+xml, diikuti SVG yang telah dienkode — %3C menggantikan <, %3E menggantikan >, dan %23 menggantikan # pada warna heksadesimal. Setiap SVG digambar pada viewBox yang mengikuti token rasio Bagian 1; foto panorama Senja di Deraung misalnya dibuat pada viewBox='0 0 840 360', tepat 21:9. Struktur satu item galeri terlihat seperti ini:
html
<figure class="galeri-item galeri-item--lebar" data-kategori="pemandangan">
<a class="galeri-tautan" href="#senja-di-deraung"><span class="galeri-media galeri-media--pemandangan">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840 360'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f0a35e'/%3E%3Cstop offset='1' stop-color='%23a8432c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='840' height='360' fill='url(%23a)'/%3E%3Ccircle cx='610' cy='150' r='42' fill='%23ffe0a3'/%3E%3Cpolygon points='0,360 250,170 520,360' fill='%23602a38'/%3E%3Cpolygon points='330,360 590,215 840,360' fill='%23401c2b'/%3E%3C/svg%3E" alt="Siluet perbukitan bertingkat dengan matahari terbenam di Deraung" width="840" height="360" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Senja di Deraung</strong> <span class="galeri-meta">Pemandangan · 35 mm · f/8 · 1/125 dtk</span></figcaption>
</figure>Tiga atribut pada <img> wajib diperhatikan. width dan height memberi rasio intrinsik sebelum berkas selesai dimuat sehingga ruangnya tidak melompat; alt mendeskripsikan isi foto bagi pembaca layar; dan loading="lazy" menunda pemuatan foto yang belum masuk layar. Keterangan foto hidup di <figcaption> berisi judul tebal dan baris meta bergaya catatan eksif — lensa, bukaan, dan kecepatan rana.
Media Area dan object-fit: cover #
Bidang foto ditata dalam dua lapis. .galeri-media mengisi penuh area yang disewa figure di grid dan memotong apa pun yang keluar dari radiusnya, sedangkan .galeri-foto mengisi media itu sendiri:
css
.galeri-media {
height: 100%;
overflow: hidden;
border-radius: var(--radius-sedang);
}
.galeri-foto {
width: 100%;
height: 100%;
object-fit: cover;
}object-fit: cover membuat browser menskalakan gambar sampai kedua dimensi bidang terisi penuh, lalu memangkas sisi yang lebih panjang; titik tengah gambar tetap di tengah karena object-position bawaan bernilai 50% 50%. Bandingkan dengan pilihan lainnya:
| Nilai | Perilaku | Kapan dipilih |
|---|---|---|
cover | bidang terisi penuh, kelebihan sisi terpangkas | galeri, kartu, hero |
contain | seluruh gambar terlihat, muncul sisi kosong | logo, dokumen produk |
fill | gambar dirusak skalanya agar patuh bidang | hampir tidak pernah |
overflow: hidden pada media belum terasa sekarang, tetapi ia penting nanti: saat hover memperbesar foto di Bagian 5, pembesaran itulah yang terpotong rapi di tepi kartu. Lapis terakhir adalah tiga latar cadangan per kategori — .galeri-media--pemandangan hijau, --urban biru keabuan, dan --makro cokelat gelap. Latar ini terlihat sesaat sebelum SVG selesai digambar atau bila src gagal, sehingga pengunjung tidak pernah dihadapi kotak kosong yang mencolok.
Snapshot tahap ini:
css
/* ============================================================
Galeri Sudut Cahaya — stylesheet tahap 2
Foto SVG data URI masuk: media area, object-fit, latar cadangan per kategori
============================================================ */
/* ---------- 1. Design token ---------- */
:root {
color-scheme: dark;
--warna-latar: #10151a;
--warna-permukaan: #1b232b;
--warna-teks: #f1f4f6;
--warna-teks-lembut: #9db0bd;
--warna-garis: #2b3742;
--warna-utama: #e8a13d;
--warna-utama-teks: #241703;
--warna-fokus: #ffd479;
--jarak-1: 4px;
--jarak-2: 8px;
--jarak-3: 12px;
--jarak-4: 16px;
--jarak-5: 24px;
--jarak-6: 32px;
--jarak-7: 48px;
--radius-sedang: 12px;
--radius-penuh: 999px;
--lebar-halaman: 1160px;
--unit-lintasan: 96px;
--celah-galeri: 14px;
--rasio-lanskap: 16 / 9;
--rasio-panorama: 21 / 9;
--rasio-potret: 2 / 3;
--rasio-besar: 7 / 4;
--durasi-gerak: 220ms;
}
/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
body {
margin: 0;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
line-height: 1.6;
background: var(--warna-latar);
color: var(--warna-teks);
}
h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; }
html { scroll-behavior: smooth; }
::selection { background: var(--warna-utama); color: var(--warna-utama-teks); }
/* ---------- 3. Kerangka halaman ---------- */
.pembungkus {
max-width: var(--lebar-halaman);
margin-inline: auto;
padding-inline: var(--jarak-4);
}
.kepala-galeri {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--jarak-2);
padding-block: var(--jarak-5);
border-bottom: 1px solid var(--warna-garis);
}
.merek { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; color: var(--warna-utama); }
.tagline { color: var(--warna-teks-lembut); font-size: 0.95rem; }
.pengantar { max-width: 66ch; padding-block: var(--jarak-6) var(--jarak-4); }
.pengantar h2 { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.1rem); line-height: 1.25; margin-bottom: var(--jarak-3); }
.pengantar p { color: var(--warna-teks-lembut); }
.kaki-galeri { margin-top: var(--jarak-7); border-top: 1px solid var(--warna-garis); }
.kaki-isi {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--jarak-2);
padding-block: var(--jarak-5);
color: var(--warna-teks-lembut);
font-size: 0.9rem;
}
/* ---------- 4. Bilah filter ---------- */
.bilah-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--jarak-2);
padding-block: var(--jarak-4);
}
.tombol-filter {
font: inherit;
font-size: 0.92rem;
padding: var(--jarak-1) var(--jarak-4);
border: 1px solid var(--warna-garis);
border-radius: var(--radius-penuh);
background: var(--warna-permukaan);
color: var(--warna-teks);
cursor: pointer;
}
.hitung-galeri { margin-left: auto; color: var(--warna-teks-lembut); font-size: 0.9rem; }
.hitung-galeri span { font-weight: 700; color: var(--warna-teks); }
/* ---------- 5. Grid galeri ---------- */
.galeri {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: var(--unit-lintasan);
grid-auto-flow: dense;
gap: var(--celah-galeri);
padding-block: var(--jarak-2) var(--jarak-5);
}
.galeri-item {
position: relative;
margin: 0;
display: flex;
flex-direction: column;
grid-row: span 2;
}
.galeri-item--lebar { grid-column: span 2; grid-row: span 3; }
.galeri-item--tinggi { grid-row: span 5; }
.galeri-item--besar { grid-column: span 2; grid-row: span 4; }
.galeri-item--panorama { grid-column: span 3; grid-row: span 3; }
/* ---------- 6. Media foto dan object-fit ---------- */
.galeri-tautan { display: block; flex: 1; min-height: 0; border-radius: var(--radius-sedang); }
.galeri-media {
height: 100%;
overflow: hidden;
border-radius: var(--radius-sedang);
}
.galeri-foto {
width: 100%;
height: 100%;
object-fit: cover;
}
.galeri-media--pemandangan { background: linear-gradient(165deg, #2e6f5e 0%, #17453c 70%); }
.galeri-media--urban { background: linear-gradient(165deg, #3d4a5c 0%, #1f2733 70%); }
.galeri-media--makro { background: linear-gradient(165deg, #6d4a2f 0%, #2f1f14 70%); }
/* ---------- 7. Keterangan (versi awal) ---------- */
.galeri-keterangan { padding: var(--jarak-2) var(--jarak-4); font-size: 0.88rem; color: var(--warna-teks-lembut); }html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galeri Sudut Cahaya</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="kepala-galeri pembungkus">
<h1 class="merek">Galeri Sudut Cahaya</h1>
<p class="tagline">Koleksi foto pemandangan, urban, dan makro</p>
</header>
<main class="pembungkus">
<section class="pengantar">
<h2>Sepuluh momen pilihan</h2>
<p>Sepuluh foto dikurasi dari tiga kategori dan disusun pada grid yang ritmenya mengikuti rasio masing-masing bidang. Gunakan bilah filter untuk menyaring koleksi, dan arahkan kursor ke foto untuk melihat keterangannya.</p>
</section>
<div class="bilah-filter" id="bilah-filter" role="group" aria-label="Saring foto menurut kategori">
<button type="button" class="tombol-filter" data-kategori="semua" aria-pressed="true">Semua</button>
<button type="button" class="tombol-filter" data-kategori="pemandangan" aria-pressed="false">Pemandangan</button>
<button type="button" class="tombol-filter" data-kategori="urban" aria-pressed="false">Urban</button>
<button type="button" class="tombol-filter" data-kategori="makro" aria-pressed="false">Makro</button>
<p class="hitung-galeri">Menampilkan <span id="hitung-galeri">10</span> foto</p>
</div>
<div class="galeri">
<figure class="galeri-item galeri-item--lebar" data-kategori="pemandangan">
<a class="galeri-tautan" href="#senja-di-deraung"><span class="galeri-media galeri-media--pemandangan">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840 360'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f0a35e'/%3E%3Cstop offset='1' stop-color='%23a8432c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='840' height='360' fill='url(%23a)'/%3E%3Ccircle cx='610' cy='150' r='42' fill='%23ffe0a3'/%3E%3Cpolygon points='0,360 250,170 520,360' fill='%23602a38'/%3E%3Cpolygon points='330,360 590,215 840,360' fill='%23401c2b'/%3E%3C/svg%3E" alt="Siluet perbukitan bertingkat dengan matahari terbenam di Deraung" width="840" height="360" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Senja di Deraung</strong> <span class="galeri-meta">Pemandangan · 35 mm · f/8 · 1/125 dtk</span></figcaption>
</figure>
<figure class="galeri-item" data-kategori="pemandangan">
<a class="galeri-tautan" href="#kabut-telaga-raya"><span class="galeri-media galeri-media--pemandangan">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%239fc4bd'/%3E%3Cstop offset='1' stop-color='%2357837c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='450' fill='url(%23b)'/%3E%3Ccircle cx='190' cy='110' r='34' fill='%23e8f2ee'/%3E%3Cpolygon points='0,340 240,190 470,340' fill='%23314b4a'/%3E%3Cpolygon points='260,340 520,215 800,340' fill='%23243738'/%3E%3Crect y='340' width='800' height='110' fill='%232c4344'/%3E%3C/svg%3E" alt="Kabut pagi menyelimuti telaga dan dua bukit berlapis" width="800" height="450" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Kabut Telaga Raya</strong> <span class="galeri-meta">Pemandangan · 24 mm · f/11 · 1/60 dtk</span></figcaption>
</figure>
<figure class="galeri-item" data-kategori="urban">
<a class="galeri-tautan" href="#gang-lampu-neon"><span class="galeri-media galeri-media--urban">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%23141821'/%3E%3Crect x='40' y='60' width='180' height='390' fill='%231d2430'/%3E%3Crect x='250' y='20' width='220' height='430' fill='%23232c3b'/%3E%3Crect x='500' y='90' width='260' height='360' fill='%231d2430'/%3E%3Crect x='250' y='20' width='220' height='16' fill='%23e84d8a'/%3E%3Crect x='40' y='60' width='180' height='10' fill='%2340c4b5'/%3E%3Crect x='500' y='90' width='260' height='10' fill='%23e8a13d'/%3E%3Crect x='285' y='80' width='24' height='36' fill='%2340c4b5'/%3E%3Crect x='330' y='80' width='24' height='36' fill='%23e84d8a'/%3E%3Crect x='375' y='80' width='24' height='36' fill='%2340c4b5'/%3E%3Crect x='540' y='140' width='20' height='28' fill='%23e8a13d'/%3E%3Crect x='580' y='140' width='20' height='28' fill='%2340c4b5'/%3E%3Crect x='620' y='140' width='20' height='28' fill='%23e84d8a'/%3E%3C/svg%3E" alt="Dinding gedung bertumpuk dengan jalur lampu neon merah, hijau, dan kuning" width="800" height="450" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Gang Lampu Neon</strong> <span class="galeri-meta">Urban · 50 mm · f/2 · 1/30 dtk</span></figcaption>
</figure>
<figure class="galeri-item galeri-item--tinggi" data-kategori="makro">
<a class="galeri-tautan" href="#tetes-embun-pakis"><span class="galeri-media galeri-media--makro">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 900'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232f6b3a'/%3E%3Cstop offset='1' stop-color='%2312301c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='600' height='900' fill='url(%23c)'/%3E%3Cellipse cx='300' cy='480' rx='210' ry='380' fill='%233d7d47'/%3E%3Cpath d='M300 120 L300 860' stroke='%23245530' stroke-width='10'/%3E%3Ccircle cx='300' cy='430' r='58' fill='%23cfe8d5'/%3E%3Ccircle cx='282' cy='410' r='14' fill='%23ffffff'/%3E%3C/svg%3E" alt="Tetes embun besar di permukaan daun pakis berwarna hijau pekat" width="600" height="900" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Tetes Embun Pakis</strong> <span class="galeri-meta">Makro · 90 mm · f/4 · 1/200 dtk</span></figcaption>
</figure>
<figure class="galeri-item galeri-item--panorama" data-kategori="urban">
<a class="galeri-tautan" href="#jembatan-kota-batavia"><span class="galeri-media galeri-media--urban">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1050 300'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232c3d55'/%3E%3Cstop offset='1' stop-color='%231a2433'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1050' height='300' fill='url(%23d)'/%3E%3Crect x='140' y='70' width='16' height='180' fill='%230e131c'/%3E%3Crect x='510' y='40' width='16' height='210' fill='%230e131c'/%3E%3Crect x='880' y='70' width='16' height='180' fill='%230e131c'/%3E%3Cpolyline points='0,140 148,120 300,150 518,90 740,150 888,120 1050,140' fill='none' stroke='%23566b8a' stroke-width='4'/%3E%3Crect y='250' width='1050' height='50' fill='%230e131c'/%3E%3Ccircle cx='100' cy='240' r='8' fill='%23ffd479'/%3E%3Ccircle cx='350' cy='240' r='8' fill='%23ffd479'/%3E%3Ccircle cx='620' cy='240' r='8' fill='%23ffd479'/%3E%3Ccircle cx='900' cy='240' r='8' fill='%23ffd479'/%3E%3C/svg%3E" alt="Bentang jembatan kabel dengan tiga menara dan lampu kuning saat petang" width="1050" height="300" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Jembatan Kota Batavia</strong> <span class="galeri-meta">Urban · 70 mm · f/9 · 2 dtk · tripod</span></figcaption>
</figure>
<figure class="galeri-item" data-kategori="pemandangan">
<a class="galeri-tautan" href="#bukit-lavanya"><span class="galeri-media galeri-media--pemandangan">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Cdefs%3E%3ClinearGradient id='e' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfa9d9'/%3E%3Cstop offset='1' stop-color='%238a5f9e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='450' fill='url(%23e)'/%3E%3Ccircle cx='640' cy='95' r='30' fill='%23f2e6f5'/%3E%3Cpolygon points='0,450 190,260 420,450' fill='%235d3a75'/%3E%3Cpolygon points='250,450 480,290 720,450' fill='%233f2657'/%3E%3Cpolygon points='0,450 640,340 800,450 0,450' fill='%232a183c'/%3E%3C/svg%3E" alt="Rangkaian bukit ungu berlapis di bawah langit senja lavender" width="800" height="450" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Bukit Lavanya</strong> <span class="galeri-meta">Pemandangan · 85 mm · f/5.6 · 1/250 dtk</span></figcaption>
</figure>
<figure class="galeri-item galeri-item--besar" data-kategori="urban">
<a class="galeri-tautan" href="#fasad-kaca-merdeka"><span class="galeri-media galeri-media--urban">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 400'%3E%3Crect width='700' height='400' fill='%2322303f'/%3E%3Crect x='30' y='30' width='150' height='100' fill='%233a556e'/%3E%3Crect x='210' y='30' width='150' height='100' fill='%23517893'/%3E%3Crect x='390' y='30' width='150' height='100' fill='%233a556e'/%3E%3Crect x='570' y='30' width='100' height='100' fill='%23517893'/%3E%3Crect x='30' y='160' width='150' height='100' fill='%23517893'/%3E%3Crect x='210' y='160' width='150' height='100' fill='%233a556e'/%3E%3Crect x='390' y='160' width='150' height='100' fill='%23517893'/%3E%3Crect x='570' y='160' width='100' height='100' fill='%233a556e'/%3E%3Crect x='30' y='290' width='640' height='80' fill='%231a2531'/%3E%3C/svg%3E" alt="Fasad kaca gedung perkantoran berpola jendela biru keabu-abuan" width="700" height="400" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Fasad Kaca Merdeka</strong> <span class="galeri-meta">Urban · 24 mm · f/8 · 1/160 dtk</span></figcaption>
</figure>
<figure class="galeri-item" data-kategori="makro">
<a class="galeri-tautan" href="#mata-kupu-kupu"><span class="galeri-media galeri-media--makro">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23274023'/%3E%3Cstop offset='1' stop-color='%230f1d10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='450' fill='url(%23f)'/%3E%3Cellipse cx='330' cy='225' rx='150' ry='95' fill='%23d98e32' transform='rotate(-18 330 225)'/%3E%3Cellipse cx='470' cy='225' rx='150' ry='95' fill='%23d98e32' transform='rotate(18 470 225)'/%3E%3Cellipse cx='400' cy='225' rx='18' ry='95' fill='%231d1509'/%3E%3Ccircle cx='290' cy='200' r='26' fill='%23f2e2b6'/%3E%3Ccircle cx='510' cy='200' r='26' fill='%23f2e2b6'/%3E%3C/svg%3E" alt="Sayap kupu-kupu jingga dengan bercak krem terlihat dari dekat" width="800" height="450" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Mata Kupu-Kupu</strong> <span class="galeri-meta">Makro · 100 mm · f/2.8 · 1/320 dtk</span></figcaption>
</figure>
<figure class="galeri-item galeri-item--tinggi" data-kategori="makro">
<a class="galeri-tautan" href="#heliconia-merah"><span class="galeri-media galeri-media--makro">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 900'%3E%3Crect width='600' height='900' fill='%23101c14'/%3E%3Cpath d='M320 900 L300 260' stroke='%23245530' stroke-width='14' fill='none'/%3E%3Cpolygon points='300,260 180,320 260,380' fill='%23c23b3b'/%3E%3Cpolygon points='300,340 420,390 330,450' fill='%23c23b3b'/%3E%3Cpolygon points='300,420 170,470 270,530' fill='%23e86a5a'/%3E%3Cpolygon points='300,500 430,550 330,610' fill='%23c23b3b'/%3E%3Cpolygon points='300,580 180,630 280,690' fill='%23e86a5a'/%3E%3C/svg%3E" alt="Juntungan bunga heliconia merah bertingkat di latar hijau gelap" width="600" height="900" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Heliconia Merah</strong> <span class="galeri-meta">Makro · 60 mm · f/5.6 · 1/125 dtk</span></figcaption>
</figure>
<figure class="galeri-item galeri-item--lebar" data-kategori="pemandangan">
<a class="galeri-tautan" href="#danau-warna-fajar"><span class="galeri-media galeri-media--pemandangan">
<img class="galeri-foto" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840 360'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f2c9a0'/%3E%3Cstop offset='1' stop-color='%23b86a4e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='840' height='360' fill='url(%23g)'/%3E%3Ccircle cx='420' cy='160' r='38' fill='%23ffe9c9'/%3E%3Cpolygon points='0,250 220,170 430,250' fill='%234f3450'/%3E%3Cpolygon points='360,250 600,160 840,250' fill='%233a2440'/%3E%3Crect y='250' width='840' height='110' fill='%23302a44'/%3E%3Cpolygon points='380,250 420,290 460,250' fill='%23ffe9c9'/%3E%3C/svg%3E" alt="Danau tenang saat fajar dengan pantulan matahari di antara dua bukit" width="840" height="360" loading="lazy">
</span></a>
<figcaption class="galeri-keterangan"><strong class="galeri-judul">Danau Warna Fajar</strong> <span class="galeri-meta">Pemandangan · 28 mm · f/13 · 1/45 dtk</span></figcaption>
</figure>
</div>
</main>
<footer class="kaki-galeri">
<div class="pembungkus kaki-isi">
<p>Galeri Sudut Cahaya — koleksi latihan CSS Grid dan object-fit</p>
<p>Semua foto digambar sebagai SVG data URI</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>Ringkasan #
Koleksi kini berisi foto sungguhan: SVG data URI di atribut src, area media yang mengisi rentang grid, dan object-fit: cover yang memangkas setiap gambar tanpa mengubah skalanya secara tidak jujur. HTML proyek juga terkunci mulai titik ini. Bagian 3 mengunci bentuknya lebih jauh lagi: empat token rasio dijadwalkan bekerja sebagai aspect-ratio ketika grid menjadi satu kolom.