finish styling and stuff

contact.html

@@ -4,13 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact</title>
+    <link rel="stylesheet" href="contact.css">
 </head>
 <body style="box-sizing: border-box;">
     <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
-    <header style="margin: 1em auto; width: min(1500px,100%);">
-        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
-            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
-                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+    <header class="header">
+        <nav class="nav">
+            <ul class="nav-list">
+                <li><a href="index.html" target="_self" title="Home">Home</a></li>
                 <li><a href="about.html" target="_self" title="About me">About</a></li>
                 <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
                 <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
@@ -18,7 +19,38 @@
             </ul>
         </nav>
     </header>
-    
+
+    <main>
+        <section class="contact-card">
+
+            <div class="contact-content">
+                <h2>hi! you can contact me at</h2>
+                <p>Computer Science Student</p>
+                <div class="contact-options">
+
+                    <!-- WhatsApp -->
+                    <div class="contact-item">
+                        <a href="https://wa.me/6285102705905" target="_blank">
+                            <span class="contact-icon"> 📞 </span>
+                            <h3>WhatsApp</h3>
+                            <p>0851-0270-5905</p>
+                        </a>
+                    </div>
+
+                    <!-- Discord -->
+                    <div class="contact-item">
+                        <a href="https://discord.com/app" target="_blank">
+                            <span class="contact-icon">🎮</span>
+                            <h3>Discord</h3>
+                            <p>UnkNotNootwn</p>
+                            <small>@unknotnootwn_29083</small>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
     <footer class="footer">
         <p>Author: Nathan Handoko</p>
         <p>Email:<a href="mailto:nathan-h.inf25@ukwms.ac.id">nathan-h.inf25@ukwms.ac.id</a></p>