third batch, fixing some css on aboout me

about.css

@@ -0,0 +1,16 @@
+.about-nav {
+    margin-bottom: 3eem;
+}
+
+.about-nav ul {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    list-style-type: none;
+    gap: 2eem;
+    padding: 0;
+}
+
+.about-nav li:first-child {
+    margin-right: auto;
+}

about.html

@@ -6,14 +6,40 @@
     <title>About</title>
     <link rel="stylesheet" href="about.css">
 <style>
+    #about-page {
+        box-sizing: border-box;
+        background-color: #e8e8e8;
+        color: #222222;
+        font-family: Arial, sans-serif;
+    }
+
+    .flex-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        background-color: #ffffff;
+        border: 1px solid #bdbdbd;
+        border-radius: 12px;
+        padding: 30px;
+    }
+
+    .text-container {
+        width: min(100%, 50em);
+        line-height: 1.7;
+        background-color: #f5f5f5;
+        border: 1px solid #cccccc;
+        border-radius: 13px;
+        padding: 20px;
+    }
 
 </style>
 </head>
 
-<body style="box-sizing: border-box;">
+<body id="about-page">
     <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
-    <header style="margin: 1em auto; width: min(1500px,100%);">
+    <header class="header" style="margin: 1em auto; width: min(1500px,100%);">
-        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
+        <nav class="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>
                 <li><a href="about.html" target="_self" title="About me">About</a></li>
@@ -47,7 +73,7 @@
                     </ol>
                 </div>
                 <h2 > My Favourite Quote?</h2>
-                <p>Would You Intercept Me? I'd Intercept Me!</p>
+                <p style="text-align: center; font-style: italic;">Would You Intercept Me? I'd Intercept Me!</p>
             </div>
         </section>
     </main>

index.html

@@ -24,7 +24,7 @@
         <section>
             <div class="flex-container" style="display: flex; flex-direction: column; align-items: center;" >
                 <h1 style="text-align: center;"> Welcome to my First Personal website </h1>  
-                <img height="300" width="200" src="images/3798a1a2-4816-4eb6-8cd2-0d5ccddc2113.jpg" alt="Foto profil Nathan">
+                <img height="300" width="200" src="images/3798a1a2-4816-4eb6-8cd2-0d5ccddc2113.jpg" alt="Foto profil Nathan" style="border-radius: 1em; max-width:100%; object-fit: cover; object-position: bottom;">
                 <div class="text-container">       
                     <h2 style="text-align: center;"> Hello, I'm Nathan </h2>
                     <p style="text-align: center; font-style: italic;"> "Would You Learn Me? I'd Learn Me!"</p>