From 294cea5ff74c077e8781473fd76ec561f99454b8 Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Fri, 6 Jan 2023 21:59:35 +0100
Subject: [PATCH] Create footer

---
 src/App.js        |  8 ++++++--
 src/Pages/Home.js |  2 --
 src/UI/Footer.css |  3 +++
 src/UI/Footer.js  | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 src/UI/Footer.css
 create mode 100644 src/UI/Footer.js

diff --git a/src/App.js b/src/App.js
index 5df84ce..9cd1f8e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import Radio from './Pages/Radio/Radio';
 import Components from './Pages/Radio/Components';
 
 import Linux from './Pages/Linux/Linux';
+import Footer from './UI/Footer';
 
 
 function App() {
@@ -24,8 +25,8 @@ function App() {
     <Router>
       <div className='row '>
         <Navigation />
-      </div>
-      <Routes>
+
+        <Routes>
             <Route exact path='/' element={<Home />}></Route>
             <Route exact path='/pages/software' element={<Software />}></Route>
             <Route exact path='/pages/software/dxp-development' element={<DXPDevelopment />}></Route>
@@ -35,6 +36,9 @@ function App() {
             <Route exact path='/pages/radio/components' element={<Components />}></Route>
             <Route exact path='/pages/linux' element={<Linux />}></Route>
         </Routes>
+
+        <Footer />
+      </div>
     </Router>
     );
 }
diff --git a/src/Pages/Home.js b/src/Pages/Home.js
index c5c7086..9fa824a 100644
--- a/src/Pages/Home.js
+++ b/src/Pages/Home.js
@@ -26,8 +26,6 @@ const Home = () => {
                             <img src={`${process.env.PUBLIC_URL}/icons/github.png`} alt="github icon"/>
                         </a>
                     </p>
-                    <hr/>
-                    <p className="small">This site was made with: <a href="https://reactjs.org/" target="_blank"rel="noopener noreferrer">React</a>, <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> and <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a><br/>on <a href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</p>
                 </section>
             </div>
         </div>
diff --git a/src/UI/Footer.css b/src/UI/Footer.css
new file mode 100644
index 0000000..29957fa
--- /dev/null
+++ b/src/UI/Footer.css
@@ -0,0 +1,3 @@
+.link-light:hover {
+    color: #9999FF !important;
+}
\ No newline at end of file
diff --git a/src/UI/Footer.js b/src/UI/Footer.js
new file mode 100644
index 0000000..807cae9
--- /dev/null
+++ b/src/UI/Footer.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import './Footer.css';
+
+
+const Footer = (props) => {
+    return (
+        <footer className="bg-primary text-center text-lg-start text-light">            
+            <p className="small">This site was made with: <a className="link-light" href="https://reactjs.org/" target="_blank"rel="noopener noreferrer">React</a>, <a className="link-light" href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a className="link-light" href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> and <a className="link-light" href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> on <a className="link-light" href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</p>            
+        </footer>
+    )
+}
+
+export default Footer;