From 6407586ebd1f82e449e77183f89df9d73ba42eb9 Mon Sep 17 00:00:00 2001 From: iampoojith-badcaptain Date: Sat, 12 Jul 2025 09:59:49 +0530 Subject: [PATCH] Create ProductCatalog.html --- NDV_Code_By_PoojithB/ProductCatalog.html | 139 +++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 NDV_Code_By_PoojithB/ProductCatalog.html diff --git a/NDV_Code_By_PoojithB/ProductCatalog.html b/NDV_Code_By_PoojithB/ProductCatalog.html new file mode 100644 index 000000000..b3694719f --- /dev/null +++ b/NDV_Code_By_PoojithB/ProductCatalog.html @@ -0,0 +1,139 @@ + + + + + + Product Catalog + + + + +
+ +
+ + +
+

Product Catalog

+
+
+ Product 1 +

Product 1

+

Price: $10

+

Category: Category A

+
+
+ Product 2 +

Product 2

+

Price: $30

+

Category: Category B

+
+
+ Product 3 +

Product 3

+

Price: $20

+

Category: Category C

+
+
+
+ + + + + + +******css file******* + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +header { + background-color: #0f37d4; + padding: 1em 0; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + margin: 0; + padding: 0; +} + +nav li { + margin: 0 1em; +} + +nav a { + color: white; + text-decoration: none; +} + +main { + padding: 2em; +} + +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5em; +} + +.product { + border: 1px solid #ccc; + padding: 1em; + text-align: center; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 1em; +} + +footer ul { + list-style: none; + display: flex; + justify-content: center; + padding: 0; +} + +footer li { + margin: 0 1em; +} + +footer a { + color: white; + text-decoration: none; +} + +/* Responsive Design */ +@media (max-width: 600px) { + nav ul { + flex-direction: column; + align-items: center; + } + + footer ul { + flex-direction: column; + align-items: center; + } +}