react-version #1

Merged
memartel_loc merged 290 commits from react-version into main 2023-11-04 09:48:15 -04:00
3 changed files with 41 additions and 4 deletions
Showing only changes of commit ca6ac4f200 - Show all commits

View File

@ -10,7 +10,7 @@ const Topbar = () => {
<Navbar expand="sm" className="topbar-container"> <Navbar expand="sm" className="topbar-container">
<Container> <Container>
<Navbar.Brand href="/"> <Navbar.Brand href="/">
<img src="/images/LesGrossesMitaines.png" height="60"/> <img src="/images/LesGrossesMitaines.png" height="45"/>
</Navbar.Brand> </Navbar.Brand>
<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">

View File

@ -10,19 +10,19 @@ const Home = () => {
"title": "Ceinture flèchée", "title": "Ceinture flèchée",
"description": "Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.", "description": "Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.",
"price": "85,86", "price": "85,86",
"imageUrl":"/images/ceintureflechee.jpg" "imageUrl": "/images/ceintureflechee.jpg"
}, },
{ {
"title": "Pantoufles du Canadien en Phentex", "title": "Pantoufles du Canadien en Phentex",
"description": "Parce que ça sent la coupe!", "description": "Parce que ça sent la coupe!",
"price": "15,64", "price": "15,64",
"imageUrl":"/images/pantouflesCH.jpg" "imageUrl": "/images/pantouflesCH.jpg"
}, },
{ {
"title": "Jean-Luc Mongrain", "title": "Jean-Luc Mongrain",
"description": "On ne lui ferait pas mal, en tout cas!!", "description": "On ne lui ferait pas mal, en tout cas!!",
"price": "1453,12", "price": "1453,12",
"imageUrl":"/images/jeanlucmongrain.jpg" "imageUrl": "/images/jeanlucmongrain.jpg"
} }
]; ];
@ -33,6 +33,13 @@ const Home = () => {
return ( return (
<> <>
<ResearchBar /> <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 <FeatuerdList
products={products} products={products}
/> />

View File

@ -6,6 +6,36 @@ body {
background-size: cover; 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{ .topbar-container{
background-color: beige; background-color: beige;
margin-bottom: 2%; margin-bottom: 2%;