diff --git a/Projekt_Ordner/Obai_Albek_Bewerbungsfoto.jpeg b/Projekt_Ordner/Obai_Albek_Bewerbungsfoto.jpeg
new file mode 100644
index 0000000..83d1b54
Binary files /dev/null and b/Projekt_Ordner/Obai_Albek_Bewerbungsfoto.jpeg differ
diff --git a/Projekt_Ordner/aboutMe.css b/Projekt_Ordner/aboutMe.css
index e69de29..d060d35 100644
--- a/Projekt_Ordner/aboutMe.css
+++ b/Projekt_Ordner/aboutMe.css
@@ -0,0 +1,151 @@
+/* ====== Basics ====== */
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
+  color: #111827;
+}
+.page { 
+    min-height: 100%; 
+    display: flex; 
+    flex-direction: column; 
+}
+.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
+/* Topbar: volle Breite + Flex */
+.topbar {
+  background: #1f2937;
+  color: #e5e7eb;
+}
+
+/* Container in der Topbar NICHT zentrieren, sondern vollbreit */
+.topbar .container {
+  max-width: none;      /* wichtig: nicht auf 1100px begrenzen */
+  width: 100%;
+  margin: 0;
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+}
+
+/* Brand nach links, Menü wird nach rechts „geschoben“ */
+.topbar .brand { margin-right: auto; }
+
+/* Menü rechts ausrichten + Abstände über gap (nicht Padding 60px) */
+.topbar .menu {
+  margin-left: auto;    /* alternativ zur brand-Regel */
+  display: flex;
+  gap: 24px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.topbar .menu a {
+  color: #e5e7eb;
+  text-decoration: none;
+  font-size: 14px;
+  padding: 6px 10px;    /* kleines Klickziel statt 60px */
+}
+
+.topbar .menu a:hover { text-decoration: underline; }
+
+.card {
+  background: #ffffff;
+  margin: 24px auto 0;
+ 
+}
+.hero {
+  display: grid;
+  grid-template-columns: 500px 1fr;  /* Bild links, Text rechts */
+  gap: 48px;
+  align-items: center;
+  padding: 36px 0 60px;
+}
+.avatar img {
+  width: 250px; height: 250px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 2px solid #cfcfcf;
+  display: block;
+}
+.intro {
+  line-height: 1.6;
+  color: #374151;
+  margin: 0;
+  font-size: larger;
+}
+
+/* ====== Footer / Kontakt ====== */
+.footer {
+  margin-top: auto;
+  background: #1f2937;
+  color: #e5e7eb;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.contact {
+  display: grid;
+  grid-template-columns: 1fr 1fr;    /* links Formular, rechts Infos */
+  gap: 200px;
+  padding: 42px 0 48px;
+}
+
+/* Formular */
+.contact-form h2 {
+  font-size: 30px;
+  letter-spacing: .06em;
+  margin: 0 0 12px;
+}
+form { display: grid; gap: 12px; max-width: 420px; }
+input, textarea, button {
+  border: none;
+  border-radius: 6px;
+  padding: 10px 12px;
+  font-size: 14px;
+}
+textarea { min-height: 180px; resize: vertical; }
+button {
+  width: 110px;
+  background: #0b0b0b;
+  color: #fff;
+  cursor: pointer;
+  transition: transform .06s ease, filter .2s ease;
+}
+button:hover { filter: brightness(1.1); }
+button:active { transform: translateY(1px); }
+
+/* Kontaktinfos rechts */
+.contact-info h3 {
+  font-size: 30px;
+  margin: 0 0 8px;
+  letter-spacing: .06em;
+}
+.contact-info p { margin: 0 0 18px; color: #d1d5db; font-size: 20px; }
+
+/* Social Icons (ohne externe Libraries) */
+.social { display: flex; gap: 14px; align-items: center; }
+.icon {
+  width: 36px; height: 36px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  background: #334155;
+  color: #e5e7eb;
+  text-decoration: none;
+  font-weight: 700;
+  user-select: none;
+  transition: transform .06s ease, filter .2s ease;
+}
+.icon:hover { filter: brightness(1.15); }
+.icon:active { transform: translateY(1px); }
+.icon.in { font-size: 13px; }   /* „in“ etwas kleiner aussehen lassen */
+.icon.ig { font-size: 16px; }
+.icon.gh { font-size: 18px; }
+
+/* ====== Responsive ====== */
+@media (max-width: 900px) {
+  .hero { grid-template-columns: 1fr; text-align: left; }
+  .avatar { order: 0; }
+  .contact { grid-template-columns: 1fr; gap: 36px; }
+  form { max-width: 100%; }
+}
diff --git a/Projekt_Ordner/aboutMe.html b/Projekt_Ordner/aboutMe.html
index c27b0ff..a07060a 100644
--- a/Projekt_Ordner/aboutMe.html
+++ b/Projekt_Ordner/aboutMe.html
@@ -1,31 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="aboutMe.css" rel="stylesheet">
-    <title>About me</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <link href="aboutMe.css" rel="stylesheet" />
+  <title>About me</title>
 </head>
 <body>
-     <div class="page">
+  <div class="page">
+    <!-- Topbar -->
     <nav class="topbar">
-      <h1 class="brand">Obai Albek</h1>
-      <ul class="menu">
-        <li><a href="#">Homepage</a></li>
-        <li><a href="#">Help</a></li>
-      </ul>
+      <div class="container">
+        <h1 class="brand">Obai Albek</h1>
+        <ul class="menu">
+          <li><a href="#">Homepage</a></li>
+          <li><a href="#">Help</a></li>
+        </ul>
+      </div>
     </nav>
 
+    <!-- Weißer Content-Block mit Bild + Text -->
     <main class="card">
-      <header class="hero">
-      
-      </header>
+      <div class="container hero">
+        <figure class="avatar">
+          <img src="Obai_Albek_Bewerbungsfoto.jpeg" alt="Obai Albek"/>
+        </figure>
+        <p class="intro">
+          Hi, I'm Obai Albek, a computer science student with a strong passion for data structures,
+          algorithms, and software development. This project is part of my journey to better understand
+          how core concepts in computer science work — and to make them more visual and interactive
+          for others. Feel free to explore, learn, and get in touch if you have questions or feedback!
+        </p>
+      </div>
     </main>
 
+    <!-- Dunkler Footer mit Kontakt -->
     <footer class="footer">
-      
+      <div class="container contact">
+        <section class="contact-form">
+          <h2>MESSAGE ME</h2>
+          <form>
+            <input type="text" name="user_name" placeholder="Name" required />
+            <input type="email" name="user_email" placeholder="Email" required />
+            <input type="text" name="subject" placeholder="Subject" required />
+            <textarea name="message" placeholder="Type your Message here..." required></textarea>
+            <button type="submit">Send</button>
+          </form>
+        </section>
+
+        <section class="contact-info">
+          <h3>CALL ME</h3>
+          <p>0049 178 3740356</p>
+
+          <h3>OR EMAIL</h3>
+          <p>obay.albeek@gmail.com</p>
+
+          <h3>SOCIAL ME</h3>
+          <div class="social">
+            <a aria-label="Facebook" href="#" class="icon fb">f</a>
+            <a aria-label="LinkedIn" href="#" class="icon in">in</a>
+            <a aria-label="Instagram" href="#" class="icon ig">◐</a>
+            <a aria-label="GitHub" href="#" class="icon gh">🐙</a>
+          </div>
+        </section>
+      </div>
     </footer>
   </div>
-    
 </body>
-</html>
\ No newline at end of file
+</html>