Exsors
3abe945beb
- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak - Navigasi bersama tiap halaman - About: 4 metode CSS (internal, inline, eksternal, Tailwind) - Hobi: external CSS only, 3 foto pribadi - Gallery: Tailwind only via CDN, 3 foto pribadi - Kontak: tanpa form, link sosial media + email - Semua foto milik sendiri di /images - Tidak ada <form>, tidak ada script selain Tailwind CDN
40 lines
2.3 KiB
TypeScript
40 lines
2.3 KiB
TypeScript
import Script from "next/script";
|
|
import Nav from "../components/Nav";
|
|
|
|
export default function Gallery() {
|
|
return (
|
|
<div style={{ fontFamily: "Arial, Helvetica, sans-serif", lineHeight: 1.7, color: "#1f2937" }}>
|
|
{/* TAILWIND CSS ONLY: styling via kelas utility Tailwind (CDN script di bawah). Tidak ada internal/external CSS dan tidak ada style="" di halaman ini. */}
|
|
<Script src="https://cdn.tailwindcss.com" />
|
|
|
|
<header className="py-6 border-b border-gray-200">
|
|
<Nav />
|
|
<h1 className="text-2xl font-bold text-gray-900">Galeri Foto</h1>
|
|
<p className="text-gray-600">Kumpulan foto pribadi dengan keterangan.</p>
|
|
</header>
|
|
|
|
<main className="max-w-5xl mx-auto px-4 py-8">
|
|
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{/* Foto pribadi: ganti src dengan foto Anda sendiri di /images. Setiap gambar punya alt deskriptif. */}
|
|
<figure className="bg-white border rounded-lg p-3 shadow-sm">
|
|
<img src="/images/photo-gallery-1.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
|
|
<figcaption className="mt-2 text-sm text-gray-700">Peta game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
|
|
</figure>
|
|
<figure className="bg-white border rounded-lg p-3 shadow-sm">
|
|
<img src="/images/photo-gallery-2.jpg" alt="Tampilan game pixel art dengan karakter dan trofi, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
|
|
<figcaption className="mt-2 text-sm text-gray-700">Tampilan game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
|
|
</figure>
|
|
<figure className="bg-white border rounded-lg p-3 shadow-sm">
|
|
<img src="/images/photo-gallery-3.jpg" alt="Task Manager layar laptop, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
|
|
<figcaption className="mt-2 text-sm text-gray-700">Task Manager, hasil tangkapan layar saya sendiri.</figcaption>
|
|
</figure>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="py-6 border-t border-gray-200 text-center text-xs text-gray-500">
|
|
© 2026 Hulio
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|