From d071e0ef2ab2c1a7036e5c965afeb002710d2c3d Mon Sep 17 00:00:00 2001
From: Tiago Brito <69848652+britotiago03@users.noreply.github.com>
Date: Fri, 10 May 2024 05:12:11 +0200
Subject: [PATCH] Implemented FeaturedProducts.css
---
frontend/src/css/FeaturedProducts.css | 48 +++++++++++++++++++++++++++
1 file changed, 48 insertions(+)
create mode 100644 frontend/src/css/FeaturedProducts.css
diff --git a/frontend/src/css/FeaturedProducts.css b/frontend/src/css/FeaturedProducts.css
new file mode 100644
index 0000000..79c7de5
--- /dev/null
+++ b/frontend/src/css/FeaturedProducts.css
@@ -0,0 +1,48 @@
+/* FeaturedProducts.css */
+.featured-products {
+ margin: 20px;
+ padding: 20px;
+ width: 100%;
+ box-sizing: border-box; /* Include padding and border in the element's width */
+}
+
+.featured-products h2 {
+ text-align: center;
+}
+
+.product-list {
+ display: flex;
+ justify-content: center; /* Center the items horizontally */
+ flex-wrap: wrap; /* Allow items to wrap onto the next line as needed */
+ gap: 20px; /* Spacing between each product */
+}
+
+.product {
+ display: flex;
+ flex-direction: column; /* Arrange content vertically */
+ align-items: center; /* Center-align the items */
+ width: 200px; /* Set a fixed width for each product */
+ height: 300px; /* Set a fixed height for each product */
+ padding: 10px;
+ box-sizing: border-box; /* Ensures padding is included in the width/height */
+}
+
+.product img {
+ width: 100%; /* Make the image take up the entire width of the product div */
+ height: 140px; /* Fixed height for the image */
+ object-fit: contain; /* Ensures the image fits well within the dimensions without stretching */
+}
+
+.product h3 {
+ margin: 10px 0;
+ text-align: center; /* Center-align the product names */
+ height: 40px; /* Fixed height for the product name */
+ overflow: hidden; /* Prevents text from overflowing */
+ display: -webkit-box;
+ -webkit-line-clamp: 2; /* Limits text to two lines */
+ -webkit-box-orient: vertical;
+}
+
+.product p {
+ margin-top: auto; /* Pushes the price to the bottom of the container */
+}
--
GitLab