finitions pour components item

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

@@ -200,20 +200,159 @@ html {
 
 }
 
+
+/* items */
+.item-list {
+    text-align: center;
+}
+
+.item:hover{
+    box-shadow: 10px 10px;
+    top:-5px;
+    left:-5px;
+    background-color: beige;
+}
+
 .item {
-    border: 5px purple double;
-    border-radius: 5px;
-    padding: 1rem 0;
-    margin: 1rem 0;
+
+    border:purple double 3px;
+    margin-left: 1.25%;
+    margin-right: 1.25%;
+    margin-bottom: 10px;
+    background-color: rgba(245, 245, 220, 0.75);
+    display: inline-block;
+    height:300px;
+    width: 30%;
 }
 
-.item-detail {
-    padding: 0 2rem;
+.item-img {
+    padding-top: 2%;
+    box-shadow: 5px 5px;
+    border-radius: 2px;
+    display:block;
+    margin-right: auto;
+    margin-left: auto;
+    height:50%;
+    width:auto;
 }
 
-.item-price {
+.item-info{
+    height:50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.item-name-container{
+    height:45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.item-name {
+    margin:auto;
+    height: auto;
+}
+
+.item-status-container{
+    height:40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.item-status {
+    font-weight: normal;
+    font-family: 'Courier New', Courier, monospace;
+    width: fit-content;
+    height:fit-content;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 5px;
+    padding-bottom: 2px;
+    display: block;
+    border-radius: 10px;
+    font-size: small;
+}
+
+.item-status-available{
+    color:green;
+}
+
+.item-status-backorder{
+    color:yellow;
+    background-color: black;
+}
+
+.item-status-unavailable{
+    color:red;
+    background-color: black;
+}
+
+.item-status-clearence{
+    color:blue;
+    background-color: aliceblue;
+    font-size: large;
+    border: yellow 2px groove;
+}
+
+.item-status-promotion{
+    color:purple;
+    font-size: medium;
+    background-color: aliceblue;
+    border: yellow 2px groove;
+}
+
+.item-status-discontinued{
+    color:white;
+    background-color: black;
+}
+
+.item-price-container{
+    height: fit-content;
+    width: auto;
+    margin: auto;
+}
+
+.item-price{
+    color:green;
     font-weight: bold;
-    font-size: 140%;
+    font-size: large;
+    height:auto;
+    margin:auto;
+}
+
+.item-old-price{
+    position:relative;
+    color:black;
+    text-decoration: line-through;
+    font-weight: normal;
+    font-size: small;
+    height:auto;
+    width: fit-content;
+}
+
+.item-new-price{
+    font-size: large;
+    margin-left: 10px;
+    font-weight: bolder;
+    background-color: aliceblue;
+    color: purple;
+
+}
+
+
+/* -------------------------------------------------------- */
+/* specification pour les moyennes écrans
+/* -------------------------------------------------------- */
+@media(max-width:900px){
+    .item{
+        width:45%;
+    }
 }
 
 
@@ -222,6 +361,11 @@ html {
 /* -------------------------------------------------------- */
 
 @media (max-width:450px) {
+
+    .item{
+        width:85%;
+    }
+
     .featured-img {
         border: 5px purple double;
         width: 100%;
@@ -255,8 +399,8 @@ html {
     }
 
 
-    .contact-info-container{
-        padding-top:5%;
+    .contact-info-container {
+        padding-top: 5%;
     }
 
     .employee-text {