Initial commit: Assignment 1 Personal Website Project

- 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

app/Hulio/gallery.html

@@ -0,0 +1,61 @@
+<!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>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
+    </footer>
+  </body>
+</html>