Producs on FE

frontend/styles.css

@@ -2,6 +2,10 @@ body {
     background-color: whitesmoke;
 }
 
+main.container {
+    position: relative;
+}
+
 .board-container {
     background-color: white;
     border: 1px solid black;
@@ -40,7 +44,6 @@ ul.players {
     color: white;
     background-color: darkred;
     border-radius: 5px;
-    z-index: 1000;
 }
 
 .player-tooltip::after {
@@ -53,3 +56,35 @@ ul.players {
     border-style: solid;
     border-color: darkred transparent transparent transparent;
 }
+
+.purchase-container {
+    width: 50vw;
+    position: fixed;
+    top: 200px;
+    left: 50%;
+    padding: 20px;
+    transform: translateX(-50%);
+    background-color: darkred;
+    z-index: 999;
+    border-radius: 10px;
+}
+
+.purchase-container h3 {
+    color: white;
+    margin-bottom: 20px;
+}
+
+.purchase-container .products-content {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.purchase-container .products-content .product .card-title {
+    text-align: center;
+}
+
+.purchase-container .products-content .product img {
+    margin: 20px;
+    max-height: 300px;
+}