fourth batch, finish the about but still not yet able to find the exact img because i simply dont had any

hobbies.html

@@ -4,14 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hobbies</title>
+    <!-- External CSS : Mengatur seluruh style dari Hobbies-->
     <link rel="stylesheet" href="hobbies.css">
 </head>
-<body style="box-sizing: border-box;">
+<body>
     <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
-    <header style="margin: 1em auto; width: min(1500px,100%);">
-        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
-            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
-                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+    <header class="header">
+        <nav class="nav">
+            <ul class="nav-list">
+                <li >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>
@@ -19,6 +20,73 @@
             </ul>
         </nav>
     </header>
-    
+    <main class="hobbies-main">
+        <h1 class="page-title">My Hobbies</h1>
+
+        <p class="page-intro">
+            Everyone has their own way to enjoy their free time.
+            Here are some of my favourite activities.
+        </p>
+
+        <!-- Hobby section: menampilkan tiga hobi beserta foto dan deskripsinya -->
+        <section class="hobbies-container">
+
+            <article class="hobby-item">
+                <img src="images/video-games.jpg"
+                     alt="Foto saya sedang bermain video game">
+
+                <div class="hobby-content">
+                    <h2>Playing Video Games</h2>
+                    <p>
+                        I enjoy playing video games during my free time.
+                        Gaming helps me relax and gives me an opportunity
+                        to explore different worlds and challenges.
+                    </p>
+                </div>
+            </article>
+
+            <article class="hobby-item">
+                <img src="images/drawing.jpg"
+                     alt="Foto saya sedang menggambar">
+
+                <div class="hobby-content">
+                    <h2>Drawing</h2>
+                    <p>
+                        Drawing is one of my favourite creative activities.
+                        I enjoy drawing different things and expressing
+                        my ideas through illustrations.
+                    </p>
+                </div>
+            </article>
+
+            <article class="hobby-item">
+                <img src="images/piano.jpg"
+                     alt="Foto saya sedang bermain piano">
+
+                <div class="hobby-content">
+                    <h2>Playing the Piano</h2>
+                    <p>
+                        I occasionally play the piano during my free time.
+                        It is a fun activity that allows me to enjoy music
+                        and practice my musical skills.
+                    </p>
+                </div>
+            </article>
+
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>Author: Nathan Handoko</p>
+        <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>