react-version #1
@ -19,6 +19,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.4.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
|
@ -14,6 +14,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.4.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 527 KiB |
After Width: | Height: | Size: 296 KiB |
After Width: | Height: | Size: 410 KiB |
After Width: | Height: | Size: 6.3 KiB |
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/moman.jpg
Normal file
After Width: | Height: | Size: 49 KiB |
After Width: | Height: | Size: 917 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 726 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 2.9 MiB |
@ -1,11 +0,0 @@
|
||||
|
||||
const FeaturedCard = () => {
|
||||
|
||||
return(
|
||||
<div className="border border-primary">
|
||||
<h1 className="text-primary">FeaturedCard</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FeaturedCard;
|
@ -1,11 +1,23 @@
|
||||
import FeaturedCard from "./FeaturedCard";
|
||||
import { Carousel } from "react-bootstrap";
|
||||
const FeaturedList = ({ products }) => {
|
||||
|
||||
const FeaturedList = () => {
|
||||
|
||||
return(
|
||||
<div>
|
||||
<FeaturedCard/>
|
||||
</div>
|
||||
return (
|
||||
<Carousel variant="dark" className="featured-lst">
|
||||
{products.map((product) => (
|
||||
<Carousel.Item className="featured-itm">
|
||||
<img
|
||||
className="featured-img"
|
||||
src={product.imageUrl}
|
||||
/>
|
||||
<Carousel.Caption className="featured-info">
|
||||
<h3>{product.title}</h3>
|
||||
<p>{product.description}</p>
|
||||
<h5>Seulement</h5>
|
||||
<h4 className="featured-prc">{product.price}$+tx</h4>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
))}
|
||||
</Carousel>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -3,9 +3,9 @@
|
||||
const ResearchBar = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input placeholder="Rechercher..."></input>
|
||||
<button>
|
||||
<div className="research-container">
|
||||
<input className="research-input" placeholder="Rechercher..."></input>
|
||||
<button className="research-btn">
|
||||
<div className="fa fa-search"/>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -2,8 +2,7 @@ import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import 'font-awesome/css/font-awesome.min.css'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
|
||||
import './site.css'
|
||||
import './stylesheets/site.css'
|
||||
import App from './components/App'
|
||||
|
||||
const container = document.getElementById('root')
|
||||
|
@ -5,14 +5,37 @@ import FeatuerdList from "../components/FeaturedList";
|
||||
|
||||
const Home = () => {
|
||||
|
||||
const products = [
|
||||
{
|
||||
"title": "Ceinture flèchée",
|
||||
"description": "Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.",
|
||||
"price": "85,86",
|
||||
"imageUrl":"/images/ceintureflechee.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Pantoufles du Canadien en Phentex",
|
||||
"description": "Parce que ça sent la coupe!",
|
||||
"price": "15,64",
|
||||
"imageUrl":"/images/pantouflesCH.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Jean-Luc Mongrain",
|
||||
"description": "On ne lui ferait pas mal, en tout cas!!",
|
||||
"price": "1453,12",
|
||||
"imageUrl":"/images/jeanlucmongrain.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Maison';
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResearchBar/>
|
||||
<FeatuerdList/>
|
||||
<ResearchBar />
|
||||
<FeatuerdList
|
||||
products={products}
|
||||
/>
|
||||
Maison
|
||||
</>
|
||||
);
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import {Outlet} from "react-router-dom";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Navbar from "../components/Navbar";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
@ -8,7 +8,7 @@ const Layout = () => {
|
||||
<>
|
||||
<Navbar />
|
||||
<Outlet />
|
||||
<Footer/>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -1,112 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 30px auto;
|
||||
overflow: auto;
|
||||
min-height: 300px;
|
||||
border: 1px solid steelblue;
|
||||
padding: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.task {
|
||||
background: #f4f4f4;
|
||||
margin: 5px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task.reminder {
|
||||
border-left: 5px solid green;
|
||||
}
|
||||
|
||||
.task h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.form-control label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-control input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin: 5px;
|
||||
padding: 3px 7px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.form-control-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-control-check label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-control-check input {
|
||||
flex: 2;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
88
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
Normal file
@ -0,0 +1,88 @@
|
||||
body {
|
||||
background-image: url('/public/images/blured_wool_carpet.png');
|
||||
background-color: gray;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.research-container {
|
||||
/* border: black solid 1px; */
|
||||
padding: 4px 6px 4px 6px;
|
||||
background-color: purple;
|
||||
box-shadow: 2px 3px rgba(0, 0, 0, .25);
|
||||
border-radius: 5px;
|
||||
height: 40px;
|
||||
margin:auto;
|
||||
margin-bottom: 5px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.research-input {
|
||||
height: 100%;
|
||||
width: 89%;
|
||||
}
|
||||
|
||||
.research-btn {
|
||||
margin-left: 1%;
|
||||
border-radius: 5px;
|
||||
width: 10%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
|
||||
.featured-lst {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.featured-itm {
|
||||
background-color: beige;
|
||||
border-radius: 10px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.featured-img {
|
||||
border: 5px purple double;
|
||||
border-radius: 10px;
|
||||
height: 100%;
|
||||
margin-bottom: 75%;
|
||||
width: auto;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.featured-info {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
text-align: right;
|
||||
left: 55%;
|
||||
right: 12%;
|
||||
bottom: 25%;
|
||||
top: 25%;
|
||||
padding-right: 2%;
|
||||
box-shadow: 5px 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.featured-prc {
|
||||
margin-left: 50%;
|
||||
padding-right: 10px;
|
||||
background-color: plum;
|
||||
}
|
||||
|
||||
/* specification pour les écrans plus petits / cells */
|
||||
@media (max-width:450px) {
|
||||
.featured-img {
|
||||
border: 5px purple double;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.featured-info {
|
||||
left: 12%;
|
||||
top: auto;
|
||||
bottom: 10%;
|
||||
padding-right: 20px;
|
||||
background-color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
}
|