Personal Website Assignment

2026-11-06 12:34:00 +07:00
parent 7604223f74
commit 1472589b5c
14 changed files with 562 additions and 109 deletions
@@ -0,0 +1,77 @@
+import Link from "next/link";
+
+export default function Hobbies() {
+  return (
+    <div className="page">
+      {/* external CSS: seluruh tampilan halaman ini hanya memakai file styles.css */}
+      <link rel="stylesheet" href="/styles.css" />
+
+      <header>
+        <nav className="nav-bar">
+          <Link href="/">Home</Link>
+          <Link href="/about">About</Link>
+          <Link href="/hobbies">Hobbies</Link>
+          <Link href="/gallery">Gallery</Link>
+          <Link href="/contact">Contact</Link>
+        </nav>
+      </header>
+
+      <main className="main-wrapper">
+        <section className="box">
+          <h1 className="hobby-title">Hobi Saya</h1>
+          <p>Ini beberapa hal yang biasa saya lakukan di waktu luang.</p>
+          {/* daftar tidak berurutan (ul): ringkasan hobi */}
+          <ul className="hobby-list">
+            <li>Bermain game</li>
+            <li>Menonton film</li>
+            <li>Mendengarkan musik</li>
+          </ul>
+        </section>
+
+        <section className="box">
+          <h2 className="hobby-subtitle">Bermain Game</h2>
+          <img
+            className="hobby-img"
+            src="/images/hobibermaingame.jpg"
+            alt="Tangkapan layar profil pemain di game mobile yang menampilkan peringkat dan statistik"
+          />
+          <p>Saya suka bermain game Mobile Legends</p>
+        </section>
+
+        <section className="box">
+          <h2 className="hobby-subtitle">Menonton Film</h2>
+          <img
+            className="hobby-img"
+            src="/images/hobimenontonfilm.jpg"
+            alt="Adegan film seorang pria duduk di pantai berbatu dengan tebing di belakangnya"
+          />
+          <p>Saya juga suka menonton film</p>
+        </section>
+
+        <section className="box">
+          <h2 className="hobby-subtitle">Mendengarkan Musik</h2>
+          <img
+            className="hobby-img"
+            src="/images/hobimendengarkanmusik.jpg"
+            alt="Tangkapan layar aplikasi pemutar musik yang sedang memutar sebuah lagu"
+          />
+          <p>Saya juga suka mendengarkan musik, terutama genre pop rock</p>
+        </section>
+
+        <section className="box">
+          <h2 className="hobby-subtitle">Urutan Hobi Favorit</h2>
+          {/* daftar berurutan (ol): peringkat hobi dari yang paling disukai */}
+          <ol className="hobby-list">
+            <li>Mendengarkan musik</li>
+            <li>Menonton film</li>
+            <li>Bermain game</li>
+          </ol>
+        </section>
+      </main>
+
+      <footer className="footer-bar">
+        <p>&copy; 2026 Zagar</p>
+      </footer>
+    </div>
+  );
+}