06_react/unterricht/tag35/01_reusable-components/src/App.jsx

@@ -1,4 +1,5 @@
 import Button from './components/buttons/Button';
+import FooterMain from './components/footers/FooterMain';
 import HeaderMain from './components/headers/HeaderMain';
 import InputAmount from './components/inputs/InputAmount';
 
@@ -8,6 +9,7 @@ function App(props) {
   return (
     <>
       <HeaderMain />
+      <main id="main">
         <div className="container py-5">
           <h2>Reusable Components</h2>
 
@@ -19,6 +21,8 @@ function App(props) {
           <br />
           <Button>Button 3</Button>
         </div>
+      </main>
+      <FooterMain />
     </>
   );
 }

06_react/unterricht/tag35/01_reusable-components/src/components/footers/FooterMain.jsx

@@ -0,0 +1,78 @@
+const FooterMain = (props) => {
+  // const { } = props;
+
+  return (
+    <footer className="m-footer-main footer-main">
+      <div className="container">
+        <div className="row">
+          <div className="col-12 col-md-4">
+            <div className="mb-3">
+              <h3>Address</h3>
+              <address>
+                John Wick
+                <br />
+                Musterstr. 33
+                <br />
+                5555 Frankfurt
+                <br />
+                Germany
+              </address>
+            </div>
+          </div>
+          <div className="col-12 col-md-4">
+            <div className="mb-3">
+              <h3>Links</h3>
+              {/* nav.menu-footer>ul.list>li*2>a[href="#"]{Link $} */}
+              <nav className="menu-footer">
+                <ul className="list">
+                  <li>
+                    <a href="#">Link 1</a>
+                  </li>
+                  <li>
+                    <a href="#">Link 2</a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div className="col-12 col-md-4">
+            <div className="mb-3">
+              <h3>Socials</h3>
+              {/* nav.menu-social>ul.list>li*5>a[href="#"]>span{Link $} */}
+              <nav className="menu-social">
+                <ul className="list">
+                  <li>
+                    <a href="#">
+                      <span>X (Twitter)</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Instagram</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Medium</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Twitch</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <span>Youtube</span>
+                    </a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default FooterMain;

06_react/unterricht/tag35/01_reusable-components/src/styles/03_base/_theme.scss

@@ -7,9 +7,29 @@ html {
 }
 
 html,
-body {
+body,
+#root,
+#app {
   height: 100%;
 }
+// Sticky Footer
+body,
+#root,
+#app {
+  display: flex;
+  flex-direction: column;
+}
+
+main,
+#main {
+  flex: 1 0 auto;
+}
+
+body > footer,
+.footer-main {
+  flex-shrink: 0;
+}
+// sticky end
 
 body {
   margin: 0;

06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_footerMain.scss

@@ -0,0 +1,45 @@
+@use '../03_base/colors' as *;
+
+.footer-main {
+  background-color: $color-black;
+  background: $linear-gradient-dark;
+  padding: 3rem 0;
+  [class^='col'] {
+    color: $color-white;
+    a {
+      color: $color-white;
+    }
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: 1.5rem;
+      color: $color-2;
+      padding: 0.5rem 0;
+      margin-bottom: 1rem;
+      letter-spacing: 2px;
+    }
+  }
+  // Mobile First
+  .row {
+    flex-direction: column;
+    > div {
+      &:nth-child(1) {
+        order: 3;
+      }
+      &:nth-child(2) {
+        order: 2;
+      }
+      &:nth-child(3) {
+        order: 1;
+      }
+    }
+  }
+  @media (min-width: 992px) {
+    // @include media-breakpoint-up(md) {
+    .row {
+      flex-direction: row;
+    }
+  }
+}

06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_index.scss

@@ -1,5 +1,6 @@
 @forward 'button';
 // @forward 'chuck-norris-joke';
+@forward 'footerMain';
 @forward 'header-main';
 @forward 'input-amount';
 @forward 'logo-main';

06_react/unterricht/tag35/meeting.md

@@ -0,0 +1,6 @@
+# Meeting Fr. 23.10.2026
+
+- [ ] Benjamin 14:20 - 14:30
+- [ ] Christian 14:30 - 14:40
+- [ ] Florian 14:40 - 14:50
+- [ ] Stefan 14:50 - 15:00