From 504e821cfa750d7eca04639d75f3007085fb0d36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Fri, 24 Sep 2021 20:35:11 +0200
Subject: [PATCH] Initial homepage almost done

---
 index.html | 10 +++++-----
 styles.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index b7419d7..63004ff 100644
--- a/index.html
+++ b/index.html
@@ -24,17 +24,17 @@
         </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>
+      <h1 class="headline">Wir feiern das 60 Jährige deutsch-türkische Anwerbeabkommen</h1>
+      <p class="program-date">27.-30.09.2021<p>
+      <a href="" class="headline-cta">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>
+      <h1>
         Zum Anwerbeabkommen
-      </p>
+      </h1>
       <p>
         Das Anwerbeabkommen mit der Türkei wurde am 30. Oktober 1961 vom dritten Kabinett unter Kanzler Konrad Adenauer in Bad Godesberg unterzeichnet.
       </p>
diff --git a/styles.css b/styles.css
index c3402d3..920c1da 100644
--- a/styles.css
+++ b/styles.css
@@ -12,6 +12,8 @@ body {
   --navigation-font: #ffffff;
   --side-padding: 10vw;
   --max-content-width: 925px;
+  padding: 0;
+  margin: 0;
 }
 
 .navigation {
@@ -21,6 +23,7 @@ body {
   right: 0;
   display: flex;
   padding: 0 var(--side-padding);
+  z-index: 1000;
 }
 
 .navigation-link {
@@ -32,6 +35,8 @@ body {
 .logo {
   margin-right: auto;
   background-color: var(--primary);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 .menu {
@@ -52,8 +57,47 @@ body {
 }
 
 header {
-  height: 90vh;
+  height: 100vh;
   justify-content: center;
+  background-image: url(/img/header.png);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+header::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(208,36, 36, 0.83);
+  mix-blend-mode: multiply;
+}
+
+header > * {
+  z-index: 1;
+  color: white;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
+.headline {
+  font-size: 4rem;
+  line-height: 5rem;
+}
+
+.program-date {
+  font-size: 3rem;
+  line-height: 4rem;
+}
+
+.headline-cta {
+  color: white;
+  text-decoration: none;
 }
 
 header,
@@ -70,7 +114,7 @@ main > * {
   max-width: var(--max-content-width);
 }
 
-h1 {
-  font-size: 4rem;
-  line-height: 5rem;
+main {
+  padding-top: 10vh;
+  padding-bottom: 10vh;
 }