Files
w11_48_Zagar_personalPage/app/hobbies/page.tsx
T
2026-11-06 12:34:00 +07:00

78 lines
2.6 KiB
TypeScript

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>
);
}