05_react/uebungen/u11_footer-main/src/App.jsx

@@ -1,12 +1,16 @@
+import FooterMain from './components/footers/FooterMain';
 import InputAmount from './components/inputs/InputAmount';
 
 function App(props) {
   // const { } = props;
 
   return (
-    <div className="container py-5">
-      <InputAmount />
-    </div>
+    <>
+      <div className="container py-5">
+        <InputAmount />
+      </div>
+      <FooterMain />
+    </>
   );
 }
 

05_react/uebungen/u11_footer-main/src/components/footers/FooterMain.jsx

@@ -0,0 +1,38 @@
+const FooterMain = (props) => {
+  // const { } = props;
+
+  return (
+    <footer className="m-footer-main footer-main">
+      <div className="container">
+        <div className="row">
+          <div className="col-12 col-sm">
+            <div className="mb-3">
+              <h3>Address</h3>
+            </div>
+          </div>
+          <div className="col-12 col-sm">
+            <div className="mb-3">
+              <h3>Links</h3>
+              <nav className="menu-footer">
+                <ul className="list">
+                  <li>
+                    <a href="#">Imprint</a>
+                  </li>
+                  <li>
+                    <a href="#">Legal Policy</a>
+                  </li>
+                </ul>
+              </nav>
+            </div>
+          </div>
+          <div className="col-12 col-sm">
+            <div className="mb-3">
+              <h3>Socials</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+export default FooterMain;

05_react/uebungen/u11_footer-main/src/styles/05_modules/_footer-main.scss

@@ -1,8 +1,8 @@
-.footer-main {
+.m-footer-main {
   background: $color-dark-blue; // Fallback für ältere Browser
   background: $linear-gradient-dark;
-  padding: 2rem 0;
-  .col {
+  padding: 3rem 0;
+  [class^='col'] {
     color: $color-white;
     h2,
     h3,
@@ -15,4 +15,23 @@
       letter-spacing: 2px;
     }
   }
+
+  .row {
+    flex-direction: column;
+    > div {
+      &:nth-child(1) {
+        order: 2;
+      }
+      &:nth-child(2) {
+        order: 1;
+      }
+    }
+  }
+
+  // @media (min-width:576px) {
+  @include media-breakpoint-up(sm) {
+    .row {
+      flex-direction: row;
+    }
+  }
 }

05_react/uebungen/u11_footer-main/src/styles/05_modules/_index.scss

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