footer component

src/components/Footer/Footer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './footer.css';
+
+export const Footer = () => {
+    return (
+        <footer>
+            <div>2021 © Outstaffing</div>
+        </footer>
+    )
+}

src/components/Footer/footer.css

@@ -0,0 +1,11 @@
+footer {
+    padding: 0 5rem;
+  }
+  
+footer>div {
+    border-top: 2px solid #73c141;
+    padding: 1rem;
+    font-family: 'Muller';
+    font-weight: 300;
+    font-size: 1.2em;
+}

src/index.css

@@ -22,14 +22,3 @@ h1 {
   display: none;
 }
 
-footer {
-  padding: 0 5rem;
-}
-
-footer>div {
-  border-top: 2px solid #73c141;
-  padding: 1rem;
-  font-family: 'Muller';
-  font-weight: 300;
-  font-size: 1.2em;
-}

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 import App from './App';
+import { Footer } from './components/Footer/Footer';
 
 import './index.css';
 
@@ -10,9 +11,7 @@ ReactDOM.render(
   <Provider store={store}>
     <>
     <App />
-    <footer>
-      <div>2021 © Outstaffing</div>
-    </footer>
+    <Footer />
     </>
   </Provider>,
   document.getElementById('root')