Improved the footer styling and layout.

DiksonIvySon · Jan 16, 2024 · fff3ab2 · fff3ab2
1 parent ad28909
commit fff3ab2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -189,7 +189,14 @@ img {
 }
 
 /* styling the footer ..................................................................................................*/
+.footer {
+  padding: 30px;
+}
 
+.footer .footer-logo {
+  display: flex;
+  justify-content: center;
+}
 
 .inFooter-container {
   display: flex;
@@ -214,6 +221,10 @@ img {
   border-radius: 15px;
 }
 
+.footer div h4 {
+  margin-top: 0;
+}
+
 .footer div ul {
   margin-left: 0px;
   padding-left: 0px;
@@ -229,7 +240,13 @@ img {
 }
 
 .footer div ul li a:hover {
-  color: #F4CE14;
+  color: burlywood;
+}
+
+.footer hr {
+  height: 10px;
+  background-color: burlywood;
+  border: none;
 }
 
 /* styling the main section .................................................................................................................................*/

diff --git a/src/Components/footer.js b/src/Components/footer.js
@@ -1,5 +1,6 @@
 import React, {Component} from "react";
 import { NavLink } from "react-router-dom";
+import Logo from "./Logo";
 import restaurant from './assets/restaurant.jpg'
 
 class Footer extends Component {
@@ -11,6 +12,9 @@ class Footer extends Component {
     render() {
         return(
             <footer className="footer">
+                <div className="footer-logo">
+                    <Logo />
+                </div>
                 <div className="inFooter-container">
                     <div className="footer-img">
                         <img src={restaurant}></img>
@@ -22,7 +26,7 @@ class Footer extends Component {
                             <li><NavLink to="/about">About</NavLink></li>
                             <li><NavLink to="/menu">Menu</NavLink></li>
                             <li><NavLink to="/bookingPage">Reservation</NavLink></li>
-                            {/*<li><NavLink to="/orderOnline">Order Online</NavLink></li>*/}
+                            <li><NavLink to="/orderOnline">Open cart</NavLink></li>
                             <li><NavLink to="/login">Login</NavLink></li>
                         </ul>
                     </div>
@@ -43,6 +47,10 @@ class Footer extends Component {
                         </ul>
                     </div>
                 </div>
+                <hr />
+                <div>
+                    <p>Copyright @ 2024 Dikson Thabo Manganye All rights reserved</p>
+                </div>
             </footer>
         );
     }