Merge pull request #1102 from coderiksenthil/main

Enhancement: Differentiate "Other Top Deals" Section with Curved Feature and Ensure Responsiveness
arghadipmanna101 · Jun 13, 2024 · 2a1da47 · 2a1da47
2 parents a7b1841 + 30423dd
commit 2a1da47
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 11 deletions.
diff --git a/css/index.css b/css/index.css
@@ -129,7 +129,7 @@ body {
   display: none;
 }
 
-#category-grid {
+/*#category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
@@ -154,7 +154,71 @@ body {
 .category h3 {
   font-size: 18px;
   color: #333333;
+}*/
+
+/*Other Top Deals*/
+#category-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.category-container {
+  position: relative;
+  border-radius: 15px;
+  overflow: hidden;
+}
+
+.category {
+  width: 100%; /* Adjust the width as needed */
+  height: auto;
+  display: block;
+  border-radius: 15px;
+}
+
+.show-items-link {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-decoration: none; /* Remove default link styling */
+}
+
+.show-items-btn {
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  display: none;
+  cursor: pointer;
+}
+
+.category-container:hover .show-items-btn {
+  display: block;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #category-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px; /* Adjust gap for smaller screens */
+    margin: 10px; /* Adjust margins for smaller screens */
+  }
+}
+
+@media (max-width: 480px) {
+  #category-grid {
+    grid-template-columns: 1fr;
+    gap: 10px; /* Adjust gap for smallest screens */
+    margin: 5px; /* Adjust margins for smallest screens */
+  }
 }
+/*Other Top Deals*/
 
 .dropdownbox {
   /* left:20%; */

diff --git a/index.html b/index.html
@@ -314,17 +314,66 @@ <h4>Top Selection</h4>
 		<div id="top-selection-product" class="row m-1"></div>
 	</div>
 
+	<!--Other Top Deals-->
+	<center><h3>Other Top Deals</h3></center>
 	<section id="category-grid">
-		<img class="category" src="img/deal5.png" alt="deal1">
-		<img class="category" src="img/deal6.png" alt="deal1">
-		<img class="category" src="img/deal1.png" alt="deal1">
-		<img class="category" src="img/deal7.png" alt="deal1">
-		<img class="category" src="img/deal8.png" alt="deal1">
-		<img class="category" src="img/deal9.png" alt="deal1">
-		<img class="category" src="img/deal10.png" alt="deal1">
-		<img class="category" src="img/deal11.png" alt="deal1">
-		<img class="category" src="img/deal12.png" alt="deal1">
-	</section>
+		<div class="category-container">
+		  <img class="category" src="img/deal5.png" alt="deal1">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal6.png" alt="deal2">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal1.png" alt="deal3">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal7.png" alt="deal4">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal8.png" alt="deal5">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal9.png" alt="deal6">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal10.png" alt="deal7">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal11.png" alt="deal8">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+		<div class="category-container">
+		  <img class="category" src="img/deal12.png" alt="deal9">
+		  <a href="#" class="show-items-link">
+			<button class="show-items-btn">Show Items</button>
+		  </a>
+		</div>
+	  </section>
+
+	  <!--Other Top Deals-->
 
 <!-- Product Selection -->
 <div class="containter-fluid bg-white">