webseite-sass-js/dev/assets/scss/05_modules/_footer-main.scss

@@ -0,0 +1,18 @@
+.footer-main {
+  background: $color-dark-blue; // Fallback für ältere Browser
+  background: $linear-gradient-dark;
+  padding: 2rem 0;
+  .col {
+    color: $color-white;
+    h2,
+    h3,
+    h4,
+    h5 {
+      font-size: 1.5rem;
+      color: $color-5;
+      padding: 0.5rem 0;
+      margin-bottom: 1rem;
+      letter-spacing: 2px;
+    }
+  }
+}

webseite-sass-js/dev/assets/scss/05_modules/_header-main.scss

@@ -0,0 +1,25 @@
+.header-main {
+  width: 100%;
+  height: 400px;
+  background-color: $color-3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  // .content-box {
+  //   figure {
+  //     width: 280px;
+  //     figcaption {
+  //       position: absolute;
+  //       clip: rect(1px, 1px, 1px, 1px);
+  //       clip-path: inset(0 0 99.9% 99.9%);
+  //       overflow: hidden;
+  //       height: 1px;
+  //       width: 1px;
+
+  //       padding: 0;
+  //       border: 0;
+  //     }
+  //   }
+  // }
+}

webseite-sass-js/dev/assets/scss/05_modules/_index.scss

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

webseite-sass-js/dev/assets/scss/05_modules/_logo-main.scss

@@ -0,0 +1,14 @@
+figure.logo-main {
+  width: 280px;
+  figcaption {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(0 0 99.9% 99.9%);
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+
+    padding: 0;
+    border: 0;
+  }
+}

webseite-sass-js/dev/assets/scss/05_modules/_menu-main.scss

@@ -0,0 +1,20 @@
+.menu-main {
+  background-color: $color-5;
+
+  ul.list {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    justify-content: center;
+    li {
+      a {
+        display: inline-block;
+        text-decoration: none;
+        text-transform: uppercase;
+        color: $color-white;
+        padding: 0.5rem 1rem;
+      }
+    }
+  }
+}