Initial homepage almost done

index.html

@@ -24,17 +24,17 @@
         </li>
     </nav>
     <header>
-      <h1>Wir feiern das 60 Jährige deutsch-türkische Anwerbeabkommen</h1>
+      <h1 class="headline">Wir feiern das 60 Jährige deutsch-türkische Anwerbeabkommen</h1>
-      <p>27.-30.09.2021<p>
+      <p class="program-date">27.-30.09.2021<p>
-      <a href="">Zum Programm &gt;</a>
+      <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>

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 {
+main {
-  font-size: 4rem;
+  padding-top: 10vh;
-  line-height: 5rem;
+  padding-bottom: 10vh;
 }