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

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Contact | [Your Name]</title>
+    <!-- internal CSS chosen on purpose: these rules apply to this one page only, so a single style block
+         avoids an extra file (external) and avoids repeating style="" on every element (inline) -->
+    <style>
+      body {
+        margin: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        line-height: 1.6;
+        color: #222222;
+        background-color: #fafafa;
+      }
+
+      header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 24px;
+        background-color: #1d4e89;
+      }
+
+      .brand {
+        margin: 0;
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      nav a {
+        margin-left: 16px;
+        color: #ffffff;
+        text-decoration: none;
+      }
+
+      nav a:hover,
+      nav a[aria-current="page"] {
+        text-decoration: underline;
+      }
+
+      main {
+        max-width: 760px;
+        margin: 0 auto;
+        padding: 24px;
+      }
+
+      h2 {
+        margin: 32px 0 8px;
+        font-size: 1.4rem;
+      }
+
+      footer {
+        padding: 16px 24px;
+        text-align: center;
+        font-size: 0.9rem;
+        color: #555555;
+        border-top: 1px solid #dddddd;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <p class="brand">[Your Name]</p>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="about.html">About</a>
+        <a href="hobbies.html">Hobbies</a>
+        <a href="gallery.html">Gallery</a>
+        <a href="contact.html" aria-current="page">Contact</a>
+      </nav>
+    </header>
+
+    <main>
+      <h1>Contact</h1>
+
+      <section>
+        <h2>Get in touch</h2>
+        <p>Email reaches me best. You can also find my code on GitHub.</p>
+        <ul>
+          <li>Email: <a href="mailto:your-email@example.com">your-email@example.com</a></li>
+          <!-- external link: opens a real site outside this project; replace your-username with your GitHub name -->
+          <li>GitHub: <a href="https://github.com/your-username" target="_blank" rel="noopener noreferrer">github.com/your-username</a></li>
+          <li>Instagram: [@your-handle]</li>
+        </ul>
+      </section>
+    </main>
+
+    <footer>
+      <p>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
+    </footer>
+  </body>
+</html>