fourth batch, finished gallery, no img because i stil digging my own phone gallery

gallery.html

@@ -8,10 +8,10 @@
 </head>
 <body>
     <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
-    <header class="header">
+    <header class="mx-auto max-w-7xl px-6 py-4">
         <nav class="nav">
-            <ul class="nav-list">
+            <ul class="flex list-none items-center gap-6 p-0">
-                <li><a href="index.html" target="_self" title="Home">Home</a></li>
+                <li class="mr-auto"><a href="index.html" target="_self" title="Home">Home</a></li>
                 <li><a href="about.html" target="_self" title="About me">About</a></li>
                 <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
                 <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
@@ -20,5 +20,47 @@
         </nav>
     </header>
     
+    <main class="mx-auto max-w-7xl px-6 pb-12">
+        <h1 class="mb-3 text-center text-3xl font-bold text-gray-800">
+            My Gallery
+        </h1>
+
+        <p class="mb-8 text-center text-gray-600">
+            A collection of my favorite moments.
+        </p>
+
+        <!-- Gallery section: menampilkan kumpulan foto dan caption -->
+        <section class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+
+            <figure class="rounded-xl border-gray-200 bg-white shadow-sm hover:shadow-lg">
+                <img src="images/foto1.jpg" alt="Deskripsi foto pertama" class="h-56 w-full object-cover">
+                <figcaption class="p-4 text-center font-medium text-gray-700">
+                    Caption Foto Pertama
+                </figcaption>
+            </figure>
+
+            <figure class="rounded-xl border-gray-200 bg-white shadow-sm hover:shadow-lg">
+                <img src="images/foto1.jpg" alt="Deskripsi foto pertama" class="h-56 w-full object-cover">
+                <figcaption class="p-4 text-center font-medium text-gray-700">
+                    Caption Foto Pertama
+                </figcaption>
+            </figure>
+            
+            <figure class="rounded-xl border-gray-200 bg-white shadow-sm hover:shadow-lg">
+                <img src="images/foto1.jpg" alt="Deskripsi foto pertama" class="h-56 w-full object-cover">
+                <figcaption class="p-4 text-center font-medium text-gray-700">
+                    Caption Foto Pertama
+                </figcaption>
+            </figure>
+
+        </section>
+    </main>
+
+    <footer class="mt-12 px-6 py-6 text-center text-gray-600">
+        <p>Author: Nathan Handoko</p>
+        <p>Email: nathan-h.inf25@ukwms.ac.id</p>
+        <p>Phone Number: 0851-0270-5905</p>
+    </footer>
+
 </body>
 </html>

hobbies.html

@@ -50,9 +50,8 @@
                 <div class="hobby-content">
                     <h2>Drawing</h2>
                     <p>
-                        Drawing is one of my favourite creative activities.
+                        Drawing is one of my favourite activities.
-                        I enjoy drawing different things and expressing
+                        I enjoy drawing different things and to discover something through illustrations.
-                        my ideas through illustrations.
                     </p>
                 </div>
             </article>
@@ -69,21 +68,14 @@
                     </p>
                 </div>
             </article>
-
         </section>
     </main>
 
     <footer class="footer">
         <p>Author: Nathan Handoko</p>
-        <p>
+        <p>Email:<a href="mailto:nathan-h.inf25@ukwms.ac.id">nathan-h.inf25@ukwms.ac.id</a></p>
-            Email:
-            <a href="mailto:nathan-h.inf25@ukwms.ac.id">
-                nathan-h.inf25@ukwms.ac.id
-            </a>
-        </p>
         <p>Phone Number: 0851-0270-5905</p>
     </footer>
 
-
 </body>
 </html>