1
0

Create footer

This commit is contained in:
PA4KEV 2023-01-06 21:59:35 +01:00
parent b937629371
commit 294cea5ff7
4 changed files with 23 additions and 4 deletions

View File

@ -17,6 +17,7 @@ import Radio from './Pages/Radio/Radio';
import Components from './Pages/Radio/Components'; import Components from './Pages/Radio/Components';
import Linux from './Pages/Linux/Linux'; import Linux from './Pages/Linux/Linux';
import Footer from './UI/Footer';
function App() { function App() {
@ -24,7 +25,7 @@ function App() {
<Router> <Router>
<div className='row '> <div className='row '>
<Navigation /> <Navigation />
</div>
<Routes> <Routes>
<Route exact path='/' element={<Home />}></Route> <Route exact path='/' element={<Home />}></Route>
<Route exact path='/pages/software' element={<Software />}></Route> <Route exact path='/pages/software' element={<Software />}></Route>
@ -35,6 +36,9 @@ function App() {
<Route exact path='/pages/radio/components' element={<Components />}></Route> <Route exact path='/pages/radio/components' element={<Components />}></Route>
<Route exact path='/pages/linux' element={<Linux />}></Route> <Route exact path='/pages/linux' element={<Linux />}></Route>
</Routes> </Routes>
<Footer />
</div>
</Router> </Router>
); );
} }

View File

@ -26,8 +26,6 @@ const Home = () => {
<img src={`${process.env.PUBLIC_URL}/icons/github.png`} alt="github icon"/> <img src={`${process.env.PUBLIC_URL}/icons/github.png`} alt="github icon"/>
</a> </a>
</p> </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> </section>
</div> </div>
</div> </div>

3
src/UI/Footer.css Normal file
View File

@ -0,0 +1,3 @@
.link-light:hover {
color: #9999FF !important;
}

14
src/UI/Footer.js Normal file
View File

@ -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;