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,59 @@
+import Link from "next/link";
+
+export default function Contact() {
+  return (
+    <div className="page">
+      {/* external CSS: dipilih karena styles.css sudah berisi gaya navbar, kotak, dan footer yang sama dengan halaman lain, jadi tampilan seragam dan mudah diubah dari satu file */}
+      <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="contact-title">Hubungi Saya</h1>
+          <p>Kamu bisa menghubungi saya lewat kontak berikut.</p>
+        </section>
+
+        <section className="box">
+          <h2 className="contact-subtitle">Kontak</h2>
+          <ul className="contact-list">
+            <li>
+              <span className="contact-label">Email</span>
+              <a className="contact-link" href="mailto:zagar-n.inf25@ukwms.ac.id">
+                zagar-n.inf25@ukwms.ac.id
+              </a>
+            </li>
+            <li>
+              <span className="contact-label">Instagram</span>
+              {/* link eksternal: membuka situs di luar halaman sendiri pada tab baru */}
+              <a
+                className="contact-link"
+                href="https://www.instagram.com/jmn_zn14"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @jmn_zn14
+              </a>
+            </li>
+            <li>
+              <span className="contact-label">Domisili</span>
+              <span>Surabaya, Jawa Timur</span>
+            </li>
+          </ul>
+        </section>
+      </main>
+
+      <footer className="footer-bar">
+        <p>&copy; 2026 Zagar</p>
+      </footer>
+    </div>
+  );
+}