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/hobbies.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Hobbies | [Your Name]</title>
+    <!-- this page uses external CSS only: every style comes from styles.css -->
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <header class="site-header">
+      <p class="brand">[Your Name]</p>
+      <nav>
+        <a class="nav-link" href="index.html">Home</a>
+        <a class="nav-link" href="about.html">About</a>
+        <a class="nav-link" href="hobbies.html" aria-current="page">Hobbies</a>
+        <a class="nav-link" href="gallery.html">Gallery</a>
+        <a class="nav-link" href="contact.html">Contact</a>
+      </nav>
+    </header>
+
+    <main class="layout-container">
+      <h1 class="page-title">My Hobbies</h1>
+
+      <section class="hobby">
+        <img src="images/hobby-coding.png" alt="Laptop on a desk showing a code editor next to a notebook">
+        <div class="hobby-text">
+          <h2 class="section-title">Coding</h2>
+          <p>I write small programs to practice what I learn in class. A short script that works teaches me more than a page of notes.</p>
+        </div>
+      </section>
+
+      <section class="hobby">
+        <img src="images/hobby-photography.png" alt="Hands holding a camera pointed at a street scene">
+        <div class="hobby-text">
+          <h2 class="section-title">Photography</h2>
+          <p>I photograph places around me and pay attention to light. Most of the pictures on this site come from that habit.</p>
+        </div>
+      </section>
+
+      <section class="hobby">
+        <img src="images/hobby-reading.png" alt="Open book resting on a table beside a cup of tea">
+        <div class="hobby-text">
+          <h2 class="section-title">Reading</h2>
+          <p>I read a few pages every evening. Books on technology and short stories take turns on my shelf.</p>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <p>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
+    </footer>
+  </body>
+</html>