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
62 lines
3.4 KiB
HTML
62 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Gallery | [Your Name]</title>
|
|
<!-- this page uses Tailwind CSS only: the CDN script below is the sole style source -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans leading-relaxed text-gray-900">
|
|
<header class="flex flex-wrap items-center justify-between bg-blue-800 px-6 py-4">
|
|
<p class="font-bold text-white">[Your Name]</p>
|
|
<nav class="flex gap-4">
|
|
<a class="text-white hover:underline" href="index.html">Home</a>
|
|
<a class="text-white hover:underline" href="about.html">About</a>
|
|
<a class="text-white hover:underline" href="hobbies.html">Hobbies</a>
|
|
<a class="text-white underline" href="gallery.html" aria-current="page">Gallery</a>
|
|
<a class="text-white hover:underline" href="contact.html">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="mx-auto max-w-5xl p-6">
|
|
<h1 class="mb-4 text-3xl font-bold">Gallery</h1>
|
|
|
|
<!-- responsive grid: 1 column on phones, 2 on tablets, 3 on desktops -->
|
|
<section>
|
|
<h2 class="mb-4 text-xl font-bold">Photos I took</h2>
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
|
<img class="h-56 w-full object-cover" src="images/gallery-01.png" alt="[Describe photo 1: subject, place, light]">
|
|
<figcaption class="p-3 text-sm text-gray-600">Photo 1: [place and date]</figcaption>
|
|
</figure>
|
|
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
|
<img class="h-56 w-full object-cover" src="images/gallery-02.png" alt="[Describe photo 2: subject, place, light]">
|
|
<figcaption class="p-3 text-sm text-gray-600">Photo 2: [place and date]</figcaption>
|
|
</figure>
|
|
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
|
<img class="h-56 w-full object-cover" src="images/gallery-03.png" alt="[Describe photo 3: subject, place, light]">
|
|
<figcaption class="p-3 text-sm text-gray-600">Photo 3: [place and date]</figcaption>
|
|
</figure>
|
|
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
|
<img class="h-56 w-full object-cover" src="images/gallery-04.png" alt="[Describe photo 4: subject, place, light]">
|
|
<figcaption class="p-3 text-sm text-gray-600">Photo 4: [place and date]</figcaption>
|
|
</figure>
|
|
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
|
<img class="h-56 w-full object-cover" src="images/gallery-05.png" alt="[Describe photo 5: subject, place, light]">
|
|
<figcaption class="p-3 text-sm text-gray-600">Photo 5: [place and date]</figcaption>
|
|
</figure>
|
|
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
|
<img class="h-56 w-full object-cover" src="images/gallery-06.png" alt="[Describe photo 6: subject, place, light]">
|
|
<figcaption class="p-3 text-sm text-gray-600">Photo 6: [place and date]</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="border-t border-gray-300 px-6 py-4 text-center text-sm text-gray-600">
|
|
<p>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|