ajout du footer avec les liens et les partenaires

GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js

@@ -1,20 +1,23 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import LogoSqdc from "./partenaires/sqdc.jpg";
+import LogoGov from "./partenaires/quebec.jpg";
+import LogoTG from "./partenaires/tg.jpg";
 
 
 const Footer = () => {
 
     return (
         <footer className="footer-container footer">
-            <div className="row">
+            <div className="footer-links">
-                <div className="col-4">
+                <div className="footer-link">
-                    <Link to="/aboutUs" className="text-light">À Propos</Link>
+                    <Link className="nav-link" to="/aboutUs">À Propos</Link>
                 </div>
-                <div className="col-4">
+                <div className="footer-link">
-                    <a className="text-light" >Nous Contacter</a>
+                    <Link className="nav-link" to="/contactUs">Nous contacter</Link>
                 </div>
-                <div className="col-4">
+                <div className="footer-link">
-                    <a className="text-light" >Vie Privée</a>
+                    <Link className="nav-link" to="/privacy">Vie privée</Link>
                 </div>
             </div>
             <br />
@@ -24,17 +27,14 @@ const Footer = () => {
                 </h4>
             </div>
             <div >
-                <h6 >- Nos partenaires -</h6>
+                <h6 className="footer-partner-title">- Nos partenaires -</h6>
             </div>
-            <div className="row">
+            <div className="footer-partners">
-                <div className="col-4">
+                <img className="partner-img" src={LogoSqdc} />
+                <img className="partner-img" src={LogoGov} />
+                <img className="partner-img" src={LogoTG} />
             </div>
-                <div className="col-4">
+            <div className="footer-copyrights">
-                </div>
-                <div className="col-4">
-                </div>
-            </div>
-            <div className="row text-white">
                 &copy; 2022 - Les Grosses Mitaines à Ginette et Monique, inc.
             </div>
         </footer>

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -4,6 +4,11 @@ body {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
+    min-height: 100%;
+}
+
+html{
+    height:100%;
 }
 
 .home-text{
@@ -106,9 +111,36 @@ body {
     background-color: plum;
 }
 
+
+
 .footer-container{
+    color: black;
     margin-top: 5%;
-    background-color: black;
+    padding: 2% 3% 2% 3%;
+    background-color: white;
+}
+
+.footer-links{
+    display: flex;
+}
+
+.footer-link{
+    color:purple;
+    text-shadow: 5px 5px 10px rgba(0, 0, 0, .75);
+    margin:auto;
+}
+
+.footer-link:hover{
+    color: plum;
+}
+
+.footer-partners{
+    display:flex;
+}
+.partner-img{
+    margin:auto;
+    height:50px;
+
 }
 
 /* specification pour les écrans plus petits / cells */