Initial commit: Assignment 1 Personal Website Project
- 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
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>About | [Your Name]</title>
|
||||
|
||||
<!-- external CSS: linked file styles the header, nav, main wrapper (.layout-container), table and lists -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Tailwind CSS: CDN script powers the utility classes on the badge below -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- internal CSS: this style block sets the page background and body font (class selector) and the heading colour (id selector) -->
|
||||
<style>
|
||||
.page-about {
|
||||
background-color: #f4f1ea;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
#bio-title {
|
||||
color: #1d4e89;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="page-about">
|
||||
<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" aria-current="page">About</a>
|
||||
<a class="nav-link" href="hobbies.html">Hobbies</a>
|
||||
<a class="nav-link" href="gallery.html">Gallery</a>
|
||||
<a class="nav-link" href="contact.html">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- external CSS: .layout-container from styles.css controls the width and padding of this wrapper -->
|
||||
<main class="layout-container">
|
||||
<h1 id="bio-title" class="page-title">About Me</h1>
|
||||
|
||||
<!-- Tailwind CSS: utility classes style this badge (shape, colour, spacing, font) -->
|
||||
<span class="inline-block rounded-full bg-blue-700 px-3 py-1 text-sm font-semibold text-white">Informatics, Semester 1</span>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Bio</h2>
|
||||
<p>I am [Your Name], a first-semester student in the Informatics program. This semester I take Web Programming, where I write pages by hand and learn why each CSS method exists. Outside class I [describe your interests here].</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Education</h2>
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Level</th>
|
||||
<th>School</th>
|
||||
<th>Years</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bachelor, Informatics</td>
|
||||
<td>[Your University]</td>
|
||||
<td>2026 to present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Senior high school</td>
|
||||
<td>[Your High School]</td>
|
||||
<td>[Years]</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Milestones</h2>
|
||||
<ol class="steps">
|
||||
<li>Started the Informatics program in 2026.</li>
|
||||
<li>Wrote my first HTML page in Web Programming.</li>
|
||||
<li>Built this site with four CSS methods.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Favorite quote</h2>
|
||||
<!-- inline CSS: style="" on this one element only; it takes priority over the internal and external rules -->
|
||||
<blockquote style="margin: 0; padding: 12px 16px; border-left: 4px solid #1d4e89; background-color: #ffffff; font-style: italic; color: #333333;">
|
||||
Talk is cheap. Show me the code.
|
||||
<footer>Linus Torvalds</footer>
|
||||
</blockquote>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
export default function AboutHead() {
|
||||
return (
|
||||
<>
|
||||
{/* INTERNAL CSS: <style> di <head>. Selektor id #about-page atur latar/background, selektor kelas .about-card atur kotak konten. */}
|
||||
<style>
|
||||
{`
|
||||
#about-page {
|
||||
background: #fafafa;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
line-height: 1.7;
|
||||
color: #1f2937;
|
||||
}
|
||||
.about-header {
|
||||
padding: 26px 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.about-main {
|
||||
max-width: 700px;
|
||||
margin: 32px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.about-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
background: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.about-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.about-table th,
|
||||
.about-table td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.about-h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
.about-h2 {
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.about-p {
|
||||
font-size: 15px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
.about-list {
|
||||
padding-left: 20px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
.about-quote {
|
||||
font-style: italic;
|
||||
color: #4b5563;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.about-footer {
|
||||
padding: 20px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import Nav from "../components/Nav";
|
||||
import "../hobbies/styles.css"; /* EKSTERNAL CSS: .layout-container di styles.css atur tata letak wrapper ini */
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div id="about-page" className="layout-container">
|
||||
{/* INTERNAL CSS: #about-page + .about-card dll. di about/head.tsx */}
|
||||
{/* EKSTERNAL CSS: .layout-container dari styles.css mengatur wrapper layout halaman ini */}
|
||||
<header className="about-header">
|
||||
<Nav />
|
||||
<h1 className="about-h1">Tentang Saya</h1>
|
||||
</header>
|
||||
|
||||
<main className="about-main">
|
||||
<section className="about-card">
|
||||
<p className="about-p">Nama: Hulio</p>
|
||||
<p className="about-p">Semester: 3</p>
|
||||
<p className="about-p">Kuliah: Informatika</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="about-footer">© 2026 Hulio</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import Link from "next/link";
|
||||
|
||||
const pages = [
|
||||
{ href: "/Hulio", label: "Beranda" },
|
||||
{ href: "/Hulio/about", label: "Tentang" },
|
||||
{ href: "/Hulio/hobbies", label: "Hobi" },
|
||||
{ href: "/Hulio/gallery", label: "Foto" },
|
||||
{ href: "/Hulio/contact", label: "Kontak" },
|
||||
] as const;
|
||||
|
||||
export default function Nav() {
|
||||
return (
|
||||
<nav aria-label="Navigasi utama" style={{ padding: "16px 0", borderBottom: "1px solid #e5e7eb" }}>
|
||||
{/* Navbar yang sama muncul di setiap halaman, taut ke semua 5 halaman situs. */}
|
||||
<ul style={{ display: "flex", gap: "20px", listStyle: "none", padding: 0, margin: 0, justifyContent: "center" }}>
|
||||
{pages.map((p) => (
|
||||
<li key={p.href} style={{ margin: 0 }}>
|
||||
<Link
|
||||
href={p.href}
|
||||
style={{ textDecoration: "none", color: "#374151", fontWeight: 500, fontSize: "15px" }}
|
||||
>
|
||||
{p.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Contact | [Your Name]</title>
|
||||
<!-- internal CSS chosen on purpose: these rules apply to this one page only, so a single style block
|
||||
avoids an extra file (external) and avoids repeating style="" on every element (inline) -->
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #222222;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
background-color: #1d4e89;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin-left: 16px;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a[aria-current="page"] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 32px 0 8px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 16px 24px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #555555;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<p class="brand">[Your Name]</p>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="hobbies.html">Hobbies</a>
|
||||
<a href="gallery.html">Gallery</a>
|
||||
<a href="contact.html" aria-current="page">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>Contact</h1>
|
||||
|
||||
<section>
|
||||
<h2>Get in touch</h2>
|
||||
<p>Email reaches me best. You can also find my code on GitHub.</p>
|
||||
<ul>
|
||||
<li>Email: <a href="mailto:your-email@example.com">your-email@example.com</a></li>
|
||||
<!-- external link: opens a real site outside this project; replace your-username with your GitHub name -->
|
||||
<li>GitHub: <a href="https://github.com/your-username" target="_blank" rel="noopener noreferrer">github.com/your-username</a></li>
|
||||
<li>Instagram: [@your-handle]</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
import Nav from "../components/Nav";
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div style={{ fontFamily: "Arial, Helvetica, sans-serif", lineHeight: 1.7, color: "#1f2937", maxWidth: "700px", margin: "40px auto", padding: "0 24px" }}>
|
||||
{/* Kontak: gaya bebas. Pakai inline styling sederhana agar informasi kontak jelas. Tidak ada <form> di mana-mana di situs ini. */}
|
||||
<header style={{ padding: "24px 0", borderBottom: "1px solid #e5e7eb" }}>
|
||||
<Nav />
|
||||
<h1 style={{ fontSize: "24px", fontWeight: 700, margin: 0 }}>Kontak Saya</h1>
|
||||
<p style={{ fontSize: "15px", color: "#6b7280", margin: "6px 0 0 0" }}>Hubungi lewat media sosial di bawah.</p>
|
||||
</header>
|
||||
|
||||
<main style={{ marginTop: "24px" }}>
|
||||
<section style={{ marginBottom: "24px" }}>
|
||||
<h2 style={{ fontSize: "19px", fontWeight: 600, marginTop: 0, marginBottom: "10px" }}>Media sosial</h2>
|
||||
<ul style={{ paddingLeft: "20px", margin: 0 }}>
|
||||
<li style={{ marginBottom: "6px" }}>
|
||||
<a href="https://github.com/Exsors-Code/" target="_blank" rel="noopener noreferrer" style={{ color: "#2563eb", textDecoration: "none" }}>GitHub</a>
|
||||
</li>
|
||||
<li style={{ marginBottom: "6px" }}>
|
||||
<a href="https://www.linkedin.com/in/exsors-undefined-506283449/" target="_blank" rel="noopener noreferrer" style={{ color: "#2563eb", textDecoration: "none" }}>LinkedIn</a>
|
||||
</li>
|
||||
<li style={{ marginBottom: "6px" }}>
|
||||
<a href="https://www.instagram.com/hulioxds" target="_blank" rel="noopener noreferrer" style={{ color: "#2563eb", textDecoration: "none" }}>Instagram</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 style={{ fontSize: "19px", fontWeight: 600, marginTop: 0, marginBottom: "10px" }}>Email</h2>
|
||||
<p style={{ fontSize: "15px", margin: 0 }}>huliofernando19@gmail.com</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer style={{ padding: "24px 0", borderTop: "1px solid #e5e7eb", fontSize: "13px", color: "#9ca3af", textAlign: "center" }}>
|
||||
© 2026 Hulio
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Gallery | [Your Name]</title>
|
||||
<!-- this page uses Tailwind CSS only: the CDN script below is the sole style source -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 font-sans leading-relaxed text-gray-900">
|
||||
<header class="flex flex-wrap items-center justify-between bg-blue-800 px-6 py-4">
|
||||
<p class="font-bold text-white">[Your Name]</p>
|
||||
<nav class="flex gap-4">
|
||||
<a class="text-white hover:underline" href="index.html">Home</a>
|
||||
<a class="text-white hover:underline" href="about.html">About</a>
|
||||
<a class="text-white hover:underline" href="hobbies.html">Hobbies</a>
|
||||
<a class="text-white underline" href="gallery.html" aria-current="page">Gallery</a>
|
||||
<a class="text-white hover:underline" href="contact.html">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="mx-auto max-w-5xl p-6">
|
||||
<h1 class="mb-4 text-3xl font-bold">Gallery</h1>
|
||||
|
||||
<!-- responsive grid: 1 column on phones, 2 on tablets, 3 on desktops -->
|
||||
<section>
|
||||
<h2 class="mb-4 text-xl font-bold">Photos I took</h2>
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<img class="h-56 w-full object-cover" src="images/gallery-01.png" alt="[Describe photo 1: subject, place, light]">
|
||||
<figcaption class="p-3 text-sm text-gray-600">Photo 1: [place and date]</figcaption>
|
||||
</figure>
|
||||
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<img class="h-56 w-full object-cover" src="images/gallery-02.png" alt="[Describe photo 2: subject, place, light]">
|
||||
<figcaption class="p-3 text-sm text-gray-600">Photo 2: [place and date]</figcaption>
|
||||
</figure>
|
||||
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<img class="h-56 w-full object-cover" src="images/gallery-03.png" alt="[Describe photo 3: subject, place, light]">
|
||||
<figcaption class="p-3 text-sm text-gray-600">Photo 3: [place and date]</figcaption>
|
||||
</figure>
|
||||
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<img class="h-56 w-full object-cover" src="images/gallery-04.png" alt="[Describe photo 4: subject, place, light]">
|
||||
<figcaption class="p-3 text-sm text-gray-600">Photo 4: [place and date]</figcaption>
|
||||
</figure>
|
||||
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<img class="h-56 w-full object-cover" src="images/gallery-05.png" alt="[Describe photo 5: subject, place, light]">
|
||||
<figcaption class="p-3 text-sm text-gray-600">Photo 5: [place and date]</figcaption>
|
||||
</figure>
|
||||
<figure class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<img class="h-56 w-full object-cover" src="images/gallery-06.png" alt="[Describe photo 6: subject, place, light]">
|
||||
<figcaption class="p-3 text-sm text-gray-600">Photo 6: [place and date]</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="border-t border-gray-300 px-6 py-4 text-center text-sm text-gray-600">
|
||||
<p>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
import Script from "next/script";
|
||||
import Nav from "../components/Nav";
|
||||
|
||||
export default function Gallery() {
|
||||
return (
|
||||
<div style={{ fontFamily: "Arial, Helvetica, sans-serif", lineHeight: 1.7, color: "#1f2937" }}>
|
||||
{/* TAILWIND CSS ONLY: styling via kelas utility Tailwind (CDN script di bawah). Tidak ada internal/external CSS dan tidak ada style="" di halaman ini. */}
|
||||
<Script src="https://cdn.tailwindcss.com" />
|
||||
|
||||
<header className="py-6 border-b border-gray-200">
|
||||
<Nav />
|
||||
<h1 className="text-2xl font-bold text-gray-900">Galeri Foto</h1>
|
||||
<p className="text-gray-600">Kumpulan foto pribadi dengan keterangan.</p>
|
||||
</header>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-4 py-8">
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Foto pribadi: ganti src dengan foto Anda sendiri di /images. Setiap gambar punya alt deskriptif. */}
|
||||
<figure className="bg-white border rounded-lg p-3 shadow-sm">
|
||||
<img src="/images/photo-gallery-1.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
|
||||
<figcaption className="mt-2 text-sm text-gray-700">Peta game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
|
||||
</figure>
|
||||
<figure className="bg-white border rounded-lg p-3 shadow-sm">
|
||||
<img src="/images/photo-gallery-2.jpg" alt="Tampilan game pixel art dengan karakter dan trofi, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
|
||||
<figcaption className="mt-2 text-sm text-gray-700">Tampilan game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
|
||||
</figure>
|
||||
<figure className="bg-white border rounded-lg p-3 shadow-sm">
|
||||
<img src="/images/photo-gallery-3.jpg" alt="Task Manager layar laptop, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
|
||||
<figcaption className="mt-2 text-sm text-gray-700">Task Manager, hasil tangkapan layar saya sendiri.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="py-6 border-t border-gray-200 text-center text-xs text-gray-500">
|
||||
© 2026 Hulio
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,32 @@
|
||||
import Nav from "../components/Nav";
|
||||
import "./styles.css"; /* EKSTERNAL CSS ONLY: semua styling dari styles.css lewat kelas, tidak ada style="" di halaman ini */
|
||||
|
||||
export default function Hobbies() {
|
||||
return (
|
||||
<div className="layout-container">
|
||||
{/* EKSTERNAL CSS: .layout-container, .hobby-card, dll. dari styles.css mengatur tampilan */}
|
||||
<header className="hobbies-header">
|
||||
<Nav />
|
||||
</header>
|
||||
|
||||
<main className="hobbies-main">
|
||||
<section className="hobby-card">
|
||||
{/* Foto pribadi: screenshot akun game saya sendiri. */}
|
||||
<img src="/images/photo-hobby-read.jpg" alt="Screenshot akun game saya, foto pribadi" width="300" height="200" />
|
||||
</section>
|
||||
|
||||
<section className="hobby-card">
|
||||
{/* Foto pribadi: screenshot kode game saya sendiri. */}
|
||||
<img src="/images/photo-hobby-bike.jpg" alt="Screenshot kode game saya, foto pribadi" width="300" height="200" />
|
||||
</section>
|
||||
|
||||
<section className="hobby-card">
|
||||
{/* Foto pribadi: peta game pixel art hasil tangkapan layar saya sendiri. */}
|
||||
<img src="/images/photo-hobby-code.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" width="300" height="200" />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="hobbies-footer">© 2026 Hulio</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/* EKSTERNAL STYLESHEET untuk halaman hobi (External CSS ONLY).
|
||||
Semua styling via kelas di file ini, tidak ada <style> atau style="" di halaman. */
|
||||
.layout-container {
|
||||
max-width: 720px;
|
||||
margin: 34px auto;
|
||||
padding: 0 20px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
line-height: 1.7;
|
||||
color: #1f2937;
|
||||
}
|
||||
.hobbies-header {
|
||||
padding: 26px 0;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
.hobbies-main {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.hobbies-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.hobby-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.hobby-card img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.hobbies-footer {
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
.hobbies-list {
|
||||
padding-left: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
@@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,18 @@
|
||||
import Nav from "./components/Nav";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div style={{ fontFamily: "Arial, Helvetica, sans-serif", lineHeight: 1.7, color: "#1f2937", background: "#ffffff" }}>
|
||||
{/* Halaman pakai INLINE CSS saja: setiap elemen diestyle lewat style="" di tag itu sendiri. */}
|
||||
<header style={{ padding: "34px 24px 10px 24px", borderBottom: "1px solid #e5e7eb" }}>
|
||||
<Nav />
|
||||
<h1 style={{ fontSize: "28px", fontWeight: 700, margin: "0 0 10px 0" }}>Yo halo bung</h1>
|
||||
<p style={{ fontSize: "18px", margin: 0 }}>Perkenalkan nama saya guwe aku watashi Hulio</p>
|
||||
</header>
|
||||
|
||||
<footer style={{ padding: "24px", borderTop: "1px solid #e5e7eb", fontSize: "13px", color: "#9ca3af", textAlign: "center" }}>
|
||||
© 2026 Hulio
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/* external stylesheet: linked from about.html and hobbies.html */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #222222;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
background-color: #1d4e89;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
margin-left: 16px;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link[aria-current="page"] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* layout container: wraps the main content on pages that link this file */
|
||||
.layout-container {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 32px 0 8px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bullets {
|
||||
padding-left: 24px;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.steps {
|
||||
padding-left: 24px;
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #c9c9c9;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background-color: #e3ebf5;
|
||||
}
|
||||
|
||||
.hobby {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hobby img {
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.hobby-text {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
padding: 16px 24px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #555555;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,21 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
/* selalu light mode agar teks dan font selalu terbaca; hapus blok dark mode di atas */
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert h-5 w-[100px]"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the{" "}
|
||||
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
|
||||
page.tsx
|
||||
</code>{" "}
|
||||
file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert h-[14px] w-4"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={14}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||