Best offer for you section done

Razib2019 · May 16, 2024 · 7654493 · 7654493
1 parent 41433b3
commit 7654493
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -154,6 +154,74 @@ <h1 class="text-[#030712] xl:text-4xl lg:text-2xl font-bold">
         </div>
       </div>
       <!-- Banner Section End Here -->
+      <!-- Best Offer For You Section Start From Here -->
+      <section class="container mx-auto lg:px-24 px-4 lg:my-8 my-12">
+        <h1
+          class="font-raleway text-[#030712] lg:text-4xl text-xl font-bold text-center"
+        >
+          Best offers for you
+        </h1>
+        <div
+          class="flex lg:flex-row flex-col lg:justify-evenly gap-4 lg:mt-12 mt-4"
+        >
+          <div class="flex">
+            <div
+              class="font-inter bg-[#FFBF0F] lg:p-12 p-4 rounded-l-3xl flex flex-col justify-center items-start"
+            >
+              <h1 class="lg:text-4xl/9 text-2xl font-black">15% OFF</h1>
+              <h4 class="lg:text-xl/9 text-base font-semibold">
+                on your next purchase
+              </h4>
+              <p class="text-[#03071280] lg:text-lg/9 text-sm font-medium">
+                use by January 2024
+              </p>
+            </div>
+            <div class="bg-[#FFBF0F]">
+              <img src="./images/cupon-devider.png" alt="" />
+            </div>
+            <div
+              class="font-raleway bg-[#FFBF0F] lg:p-12 p-4 rounded-r-3xl flex flex-col justify-center lg:items-center items-start"
+            >
+              <h1 class="lg:text-3xl text-xl font-bold">NEW 15</h1>
+              <p class="text-[#03071280] lg:text-xl text-sm font-medium">
+                Coupon Code
+              </p>
+            </div>
+          </div>
+          <div class="flex">
+            <div
+              class="font-inter bg-[#F78C9C] lg:p-12 p-4 rounded-l-3xl flex flex-col justify-center items-start"
+            >
+              <h1 class="lg:text-4xl/9 text-2xl font-black">20% OFF</h1>
+              <h4 class="lg:text-xl/9 text-base font-semibold">
+                on your next purchase
+              </h4>
+              <p class="text-[#03071280] lg:text-lg/9 text-sm font-medium">
+                use by January 2024
+              </p>
+            </div>
+            <div class="bg-[#F78C9C]">
+              <img src="./images/cupon-devider.png" alt="" />
+            </div>
+            <div
+              class="font-raleway bg-[#F78C9C] lg:p-12 p-4 rounded-r-3xl flex flex-col justify-center lg:items-center items-start"
+            >
+              <h1 class="lg:text-3xl text-xl font-bold">Couple 20</h1>
+              <p class="text-[#03071280] lg:text-xl text-sm font-medium">
+                Coupon Code
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="font-raleway lg:mt-14 mt-6 lg:mb-28 text-center">
+          <a
+            class="btn text-[#1DD100] hover:text-white lg:text-xl text-lg lg:font-bold font-semibold lg:px-8 bg-[#FFFFFF] hover:bg-[#1DD100] border-[#1DD100]"
+          >
+            See All Offers
+          </a>
+        </div>
+      </section>
+      <!-- Best Offer For You Section End Here -->
     </main>
     <!-- Main Section End Here -->
     <!-- Footer Section Start From Here -->