index.html

Gigx267 · May 10, 2024 · a5cf98f · a5cf98f
1 parent 8b30c0c
commit a5cf98f
Showing 1 changed file with 183 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -196,6 +196,188 @@ <h1 class="h1 hero-title title"> High Quality Premium Male & Female  Jewelries
 
 </style>	  
 
+<section class="section feature" aria-label="feature-label">
+  <div class="container">
+
+    <h2 class="h2 section-title title text-center" id="feature-label">  Categories   </h2>
+
+    <ul class="feature-list">
+
+      <li>
+        <div class="product-card text-center">
+
+          <div class="card-banner">
+
+            <figure class="product-banner img-holder" style="--width: 448; --height: 470;">
+              <img src="s (11).jpg" width="448" height="470" loading="lazy"
+                alt="" class="img-cover">
+            </figure>
+            <h3 class="h4 title">
+              <a href="Watches.html" class="card-title"> Watches  </a>
+            </h3>
+
+
+
+
+        </div>
+      </li>
+
+      <li>
+        <div class="product-card text-center">
+
+          <div class="card-banner">
+            <figure class="product-banner img-holder" style="--width: 448; --height: 470;">
+              <img src="s (9).jpg" width="448" height="470" loading="lazy"
+                alt="" class="img-cover">
+            </figure>
+            <h3 class="h4 title">
+              <a href="necklaces.html" class="card-title"> Necklaces   </a>
+            </h3>
+
+
+
+
+
+
+        </div>
+      </li>
+
+      <li>
+        <div class="product-card text-center">
+
+          <div class="card-banner">
+
+            <figure class="product-banner img-holder" style="--width: 448; --height: 470;">
+              <img src="s (5).jpg" width="448" height="470" loading="lazy"
+                alt="" class="img-cover">
+            </figure>
+            <h3 class="h4 title">
+              <a href="earrings.html" class="card-title"> Ear Rings   </a>
+            </h3>
+
+
+
+
+
+
+
+        </div>
+      </li>
+
+      <li>
+        <div class="product-card text-center">
+
+          <div class="card-banner">
+
+            <figure class="product-banner img-holder" style="--width: 448; --height: 470;">
+              <img src="gg (4).jpg" width="448" height="470" loading="lazy"
+                alt="" class="img-cover">
+            </figure>
+            <h3 class="h4 title">
+              <a href="Glasses.html" class="card-title"> Glasses  </a>
+            </h3>
+
+
+
+
+      <li>
+        <div class="product-card text-center">
+
+          <div class="card-banner">
+
+            <figure class="product-banner img-holder" style="--width: 448; --height: 470;">
+              <img src="s (1).jpg" width="448" height="470" loading="lazy"
+                alt="" class="img-cover">
+            </figure>
+            <h3 class="h4 title">
+              <a href="PendantsCustomize.html" class="card-title"> Custom A Pendant   </a>
+            </h3>
+
+
+
+      </li>
+
+      <li>
+        <div class="product-card text-center">
+
+          <div class="card-banner">
+
+            <figure class="product-banner img-holder" style="--width: 448; --height: 470;">
+              <img src="s (4).jpg" width="448" height="470" loading="lazy"
+                alt="" class="img-cover">
+            </figure>
+            <h3 class="h4 title">
+              <a href="bussdownwatches.html" class="card-title"> Buss Down Watchs   </a>
+            </h3>
+
+
+
+
+        </div>
+
+
+
+      </li>
+
+    </ul>
+
+
+
+  </div>
+</section>
+
+
+
+
+
+<style>  
+.offer.has-bg-video {
+position: relative; /* Allows video positioning */
+overflow: hidden; /* Prevents video overflowing the section */
+width: 100%; /* Ensures section fills viewport width */
+height: 600px; /* Adjust height as needed */ /* Optional: Set a specific height */
+}
+
+.offer.has-bg-video video {
+position: absolute; /* Layers video behind content */
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%); /* Centers video within section */
+width: 80%; /* Adjust width for smaller video background */
+height: auto; /* Maintains aspect ratio */
+object-fit: cover; /* Ensures video fills the available space */
+}
+
+.container {
+position: relative; /* Positions content relative to video */
+padding: 20px; /* Provides spacing for offer content */
+}
+
+.offer-card {
+background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
+padding: 20px; /* Inner padding for offer details */
+border-radius: 5px; /* Rounded corners for a polished look */
+}
+
+</style>	  
+
+
+<!-- 
+  - #PRODUCT
+-->
+
+
+<!----Second
+-->
+
+
+
+
+
+
+<!-- 
+- #FOOTER
+-->
 
       <!-- 
         - #PRODUCT
@@ -693,4 +875,4 @@ <h1 class="h1 hero-title title" style="color: rgb(20, 22, 23); font-size: xx-lar
 
 </body>
 
-</html>
+</html>