02_advanced/unterricht/tag16/website-static/assets/css/main.css

@@ -12084,6 +12084,69 @@ blockquote {
   font-family: "Gloria Hallelujah", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
 
+.header-main {
+  width: 100%;
+  height: 30vh; /* viewport height */
+  height: 300px;
+  background-color: #ddd;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-main figcaption {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.menu-main {
+  margin: 0;
+  padding: 0;
+  background-color: #101010;
+}
+.menu-main ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.menu-main ul.list {
+  display: flex;
+}
+.menu-main ul.list li a {
+  outline: none;
+}
+.menu-main ul.list li a:hover, .menu-main ul.list li a:focus {
+  color: #101010;
+  background-color: #f2ebbf;
+}
+.menu-main ul.list li a {
+  display: inline-block;
+  color: #f2ebbf;
+  background-color: #101010;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: all 0.25s ease-out;
+}
+.menu-main ul.sublist {
+  position: absolute;
+}
+.menu-main ul ul {
+  display: none;
+}
+.menu-main ul > li:hover ul,
+.menu-main ul > li:focus ul,
+.menu-main ul > li:focus-within ul {
+  display: block;
+}
+
 .box {
   width: 100px;
   height: 100px;

02_advanced/unterricht/tag16/website-static/dev/scss/03_base/_colors.scss

@@ -7,6 +7,7 @@ $color-5: #f06060;
 
 $color-red: $color-5;
 $color-white: white; // falls weiß geändert wird z.B.: #f8f8f8
+$color-black: #101010;
 
 $color-dark-blue: #283e4a;
 $linear-gradient-dark: linear-gradient(180deg, rgba(40, 62, 74, 1) 0%, rgba(24, 32, 38, 1) 100%);

02_advanced/unterricht/tag16/website-static/dev/scss/05_modules/_header-main.scss

@@ -0,0 +1,11 @@
+.header-main {
+  width: 100%;
+  height: 30vh; /* viewport height */
+  height: 300px;
+
+  background-color: #ddd;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}

02_advanced/unterricht/tag16/website-static/dev/scss/05_modules/_index.scss

@@ -0,0 +1,3 @@
+@import 'header-main';
+@import 'logo-main';
+@import 'menu-main';

02_advanced/unterricht/tag16/website-static/dev/scss/05_modules/_logo-main.scss

@@ -0,0 +1,10 @@
+.logo-main figcaption {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

02_advanced/unterricht/tag16/website-static/dev/scss/05_modules/_menu-main.scss

@@ -0,0 +1,49 @@
+// Menu Main - Komponente
+.menu-main {
+  margin: 0;
+  padding: 0;
+  background-color: $color-black;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul.list {
+    display: flex;
+    li {
+      a {
+        outline: none; // nur wenn focus definiert wurde und einen hohen Kontrast hat.
+        &:hover,
+        &:focus {
+          color: $color-black;
+          background-color: $color-3;
+        }
+        display: inline-block;
+        color: $color-3;
+        background-color: $color-black;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        text-transform: uppercase;
+        transition: all 0.25s ease-out;
+      }
+    }
+  }
+
+  ul.sublist {
+    position: absolute;
+  }
+
+  ul ul {
+    display: none; // TODO: change to not visible
+  }
+
+  ul > li:hover,
+  ul > li:focus,
+  ul > li:focus-within {
+    ul {
+      display: block;
+    }
+  }
+}