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
46 lines
2.5 KiB
HTML
46 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Home | [Your Name]</title>
|
|
<!-- this page uses inline CSS only: no style block, no linked stylesheet -->
|
|
</head>
|
|
<body style="margin: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: #222222; background-color: #fafafa;">
|
|
<header style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px 24px; background-color: #1d4e89;">
|
|
<p style="margin: 0; font-weight: bold; color: #ffffff;">[Your Name]</p>
|
|
<!-- shared navigation: same five links on every page -->
|
|
<nav>
|
|
<a href="index.html" aria-current="page" style="margin-left: 16px; color: #ffffff; text-decoration: underline;">Home</a>
|
|
<a href="about.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">About</a>
|
|
<a href="hobbies.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">Hobbies</a>
|
|
<a href="gallery.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">Gallery</a>
|
|
<a href="contact.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style="max-width: 760px; margin: 0 auto; padding: 24px;">
|
|
<section style="display: flex; flex-wrap: wrap; gap: 24px; align-items: center;">
|
|
<img src="images/profile.png" alt="Portrait of [Your Name] standing outdoors and facing the camera" style="width: 200px; height: 200px; object-fit: cover; border-radius: 50%;">
|
|
<div style="flex: 1; min-width: 240px;">
|
|
<h1 style="margin: 0 0 8px; font-size: 2rem;">Hi, I'm [Your Name]</h1>
|
|
<p style="margin: 0;">First-semester Informatics student learning to build websites with HTML and CSS.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 style="margin: 32px 0 8px; font-size: 1.4rem;">What I am learning now</h2>
|
|
<ul style="padding-left: 24px;">
|
|
<li>HTML structure and semantic tags</li>
|
|
<li>Four ways to write CSS and when to use each</li>
|
|
<li>Clean, consistent code</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<footer style="padding: 16px 24px; text-align: center; font-size: 0.9rem; color: #555555; border-top: 1px solid #dddddd;">
|
|
<p style="margin: 0;">© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|