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

@@ -10,7 +10,7 @@ const Topbar = () => {
         <Navbar expand="sm" className="topbar-container">
             <Container>
                 <Navbar.Brand href="/">
-                    <img src="/images/LesGrossesMitaines.png" height="60"/>
+                    <img src="/images/LesGrossesMitaines.png" height="45"/>
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">

GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js

@@ -33,6 +33,13 @@ const Home = () => {
     return (
         <>
             <ResearchBar />
+            <div className="home-text">
+                <h1 className="home-title">Les Grosses Mitaines</h1>
+                <h4 className="home-subtitle">(à Ginette et Monique)</h4>
+                <img src="/images/LesGrossesMitaines.png" className="home-img"/>
+                <br/>
+                <h2 className="home-description">Des produits bien commodes faits par des aînées d'expérience.</h2>
+            </div>
             <FeatuerdList
                 products={products}
             />

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

@@ -6,6 +6,36 @@ body {
     background-size: cover;
 }
 
+.home-text{
+    /* border: black 1px solid; */
+    text-align: center;
+    background-color:beige;
+    box-shadow: 2px 3px rgba(11, 11, 11, 0.5);
+    padding:1% 2% 1% 2%;
+    margin: 1% 2% 1% 2%;
+}
+
+.home-title{
+    margin: 10px 10% 0% 10%;
+    padding: 0px 0px 0px 0px ;
+    border-radius: 5px 25px;
+    color:plum;
+    background-color: rgba(0, 0, 0, .75);
+}
+
+.home-subtitle{
+    text-shadow: 3px 2px 5px rgba(0, 0, 0, .5);
+}
+
+.home-img{
+    width: 20%;
+    height: auto;
+}
+
+.home-description{
+
+}
+
 .topbar-container{
     background-color: beige;
     margin-bottom: 2%;