Carousselle des produits vedettes et search bar reconstitué

2022-09-27 21:41:39 -04:00
parent e21d9a90ca
commit 17314f1b74
22 changed files with 550 additions and 139 deletions
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -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);
+    }
+}