memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changement des Nav.Link pour des Link avec nav-link en class. Permet de ne pas reloader la page quand on la change tout en changeant l'URL

Browse Source
This commit is contained in:
Medenos 2022-09-27 22:40:07 -04:00
parent 938cbb42d2
commit f03d50b474
3 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
View File

@ -1,10 +1,42 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom";
const Footer = () => { const Footer = () => {
return ( return (
<footer> <footer className="footer-container footer">
Footer <div className="row">
<div className="col-4">
<Link to="/aboutUs" className="text-light">À Propos</Link>
</div>
<div className="col-4">
<a className="text-light" >Nous Contacter</a>
</div>
<div className="col-4">
<a className="text-light" >Vie Privée</a>
</div>
</div>
<br />
<div>
<h4 className="footer-msg">
Joignez les plus de 1 000 Québécois qui ont décidés d'acheter GM!
</h4>
</div>
<div >
<h6 >- Nos partenaires -</h6>
</div>
<div className="row">
<div className="col-4">
</div>
<div className="col-4">
</div>
<div className="col-4">
</div>
</div>
<div className="row text-white">
&copy; 2022 - Les Grosses Mitaines à Ginette et Monique, inc.
</div>
</footer> </footer>
); );
} }

24
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
View File

@ -1,32 +1,32 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav'; import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'; import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown'; import { Link } from "react-router-dom";
const Topbar = () => { const Topbar = () => {
return ( return (
<Navbar expand="sm" className="topbar-container"> <Navbar expand="sm" className="topbar-container">
<Container> <Container>
<Navbar.Brand href="/"> <Link className="navbar-brand" to="/">
<img src="/images/LesGrossesMitaines.png" height="45"/> <img src="/images/LesGrossesMitaines.png" height="45"/>
</Navbar.Brand> </Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto"> <Nav className="me-auto">
<Nav.Link href="/" > <Link className="nav-link" to="/" >
Maison Maison
</Nav.Link> </Link>
<Nav.Link href="/aboutUs" > <Link className="nav-link" to="/aboutUs" >
À propos de nous À propos de nous
</Nav.Link> </Link>
<Nav.Link href="/contactUs" > <Link className="nav-link" to="/contactUs" >
Contactez-nous Contactez-nous
</Nav.Link> </Link>
<Nav.Link href="/privacy" > <Link className="nav-link" to="/privacy" >
Vie privée Vie privée
</Nav.Link> </Link>
</Nav> </Nav>
</Navbar.Collapse> </Navbar.Collapse>
</Container> </Container>

5
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -106,6 +106,11 @@ body {
background-color: plum; background-color: plum;
} }
.footer-container{
margin-top: 5%;
background-color: black;
}
/* specification pour les écrans plus petits / cells */ /* specification pour les écrans plus petits / cells */
@media (max-width:450px) { @media (max-width:450px) {
.featured-img { .featured-img {