Exsors
3abe945beb
- 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
55 lines
2.1 KiB
HTML
55 lines
2.1 KiB
HTML
<!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>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|