From 776af73f82acffe452ec726e5f175341737f1a2d Mon Sep 17 00:00:00 2001 From: Tiago Brito <69848652+britotiago03@users.noreply.github.com> Date: Fri, 10 May 2024 05:13:13 +0200 Subject: [PATCH] Implemented CategoryProducts.js --- frontend/src/css/CategoryProducts.css | 64 +++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 frontend/src/css/CategoryProducts.css diff --git a/frontend/src/css/CategoryProducts.css b/frontend/src/css/CategoryProducts.css new file mode 100644 index 0000000..216b6ff --- /dev/null +++ b/frontend/src/css/CategoryProducts.css @@ -0,0 +1,64 @@ +.category-products { + width: 100%; + padding: 20px; + box-sizing: border-box; +} + +.category-product-list { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.category-product { + width: 100%; + max-width: 600px; /* Adjust based on your layout */ + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.category-product img { + width: 100%; + height: 200px; /* Fixed height for all images */ + object-fit: contain; + border-radius: 8px; +} + +.category-product h3 { + margin: 10px 0; +} + +.category-product p { + text-align: center; + margin-bottom: 10px; +} + +.category-product button { + padding: 10px 20px; + background-color: #007BFF; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s; +} + +.category-product button:hover { + background-color: #0056b3; +} + +.category-product a { + text-decoration: none; + color: #007BFF; + margin-top: 10px; +} + +.category-product a:hover { + text-decoration: underline; +} -- GitLab