diff --git a/img/header.png b/img/header.png
new file mode 100644
index 0000000..07ff35b
Binary files /dev/null and b/img/header.png differ
diff --git a/img/header2x.png b/img/header2x.png
new file mode 100644
index 0000000..cefc31b
Binary files /dev/null and b/img/header2x.png differ
diff --git a/index.html b/index.html
index d01a026..b7419d7 100644
--- a/index.html
+++ b/index.html
@@ -7,42 +7,43 @@
 
     <meta name="description" content="">
     <meta name="Keywords" content="">
-    <style>
-      body {
-        font-family: sans-serif;
-        font-size: 24px;
-        line-height: 2em;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-
-      main {
-        width: 100%;
-        max-width: 1000px;
-      }
-
-      h1 {
-        font-size: 4rem;
-        line-height: 5rem;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/styles.css" media="all" />
   </head>
   <body>
-    <main>
-      <h1>60 Jahre deutsch-türkisches Anwerbeabkommen</h1>
-
-      <p>
-        Diese Seite ist im Aufbau.
-      </p>
-
-      <ul>
-        <li>
-          <a href="./unterricht">
-            Unterrichtsmaterialien finden Sie hier
-          </a>
+    <nav class="navigation">
+      <a href="/" class="logo navigation-link">Logo</a>
+      <ul class="menu">
+        <li class="menu-item">
+          <a href="" class="navigation-link">Geschichte</a>
         </li>
-      </ul>
+        <li class="menu-item">
+          <a href="" class="navigation-link">Veranstaltungen</a>
+        </li>
+        <li class="menu-item">
+          <a href="" class="navigation-link">Unterrichtsmaterial</a>
+        </li>
+    </nav>
+    <header>
+      <h1>Wir feiern das 60 Jährige deutsch-türkische Anwerbeabkommen</h1>
+      <p>27.-30.09.2021<p>
+      <a href="">Zum Programm &gt;</a>
+    </header>
+    <main>
+      <p>
+        Am 30.10. 2021 jährt sich das bundesdeutsche Anwerbeabkommen mit der Türkei zum sechzigsten Mal. In der Woche vom 26.10. bis 30.10.2021 sind zahlreiche Veranstaltungen geplant, die die Stadt Köln federführend oder als Kooperationspartner ausrichten wird. Auf den folgenden Seiten finden Sie dazu eine kurze Übersicht.
+      </p>
+      <p>
+        Zum Anwerbeabkommen
+      </p>
+      <p>
+        Das Anwerbeabkommen mit der Türkei wurde am 30. Oktober 1961 vom dritten Kabinett unter Kanzler Konrad Adenauer in Bad Godesberg unterzeichnet.
+      </p>
+      <p>
+        Auf der Basis dieses Abkommens bewarben sich zwischen 1961 und dem Anwerbestopp im Jahre 1973 mehr als zweieinhalb Millionen Menschen aus der Türkei um eine Arbeitserlaubnis in Deutschland; ein Viertel davon wurde angenommen. Von den etwa 867.000 Eingereisten, damals als „Gastarbeiter“ bezeichnet, kehrten rund 500.000 wieder in die Türkei zurück. Andere blieben, begründeten in Deutschland neue Existenzen und sind selbst oder über ihre Nachkommen ein fester Bestandteil unserer deutschen Gesellschaft.
+      </p>
+      <p>
+        Ähnliche Abkommen schloss die Bundesrepublik Deutschland auch mit anderen, so etwa mit Italien (1955), Griechenland (1960), Spanien (1960), Marokko (1963), Südkorea (1963), Portugal (1964), Tunesien (1965) und dem damaligen Jugoslawien (1968).
+      </p>
     </main>
   </body>
 </html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c3402d3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,76 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 24px;
+  line-height: 2em;
+  display: flex;
+  flex-direction: column;
+  --primary: #D02424;
+  --navigation-font: #ffffff;
+  --side-padding: 10vw;
+  --max-content-width: 925px;
+}
+
+.navigation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  padding: 0 var(--side-padding);
+}
+
+.navigation-link {
+  color: var(--navigation-font);
+  text-decoration: none;
+  padding: 12px 24px;
+}
+
+.logo {
+  margin-right: auto;
+  background-color: var(--primary);
+}
+
+.menu {
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-item {
+  background-color: var(--primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 12px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+header {
+  height: 90vh;
+  justify-content: center;
+}
+
+header,
+main {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--side-padding);
+  padding-right: var(--side-padding);
+}
+
+header > *,
+main > * {
+  max-width: var(--max-content-width);
+}
+
+h1 {
+  font-size: 4rem;
+  line-height: 5rem;
+}
