diff --git a/index.html b/index.html
index 22a4a65..0fd79e0 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,7 @@
   <link rel="stylesheet" href="./src/css/swiper.css">
   <link rel="stylesheet" href="./src/css/wstyle.css">
   <link rel="stylesheet" href="./src/css/style.css">
+  <link rel="stylesheet" href="./src/css/banner.css">
   <!-- Favicons -->
   <link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
@@ -163,6 +164,12 @@ <h1>Explore popular digital products</h1>
 
 <hr>
 
+<section id="banner" class="section-m1">
+  <h4>Dimencart Sale</h4>
+  <h2>Huge Discounts | <span>Upto 90% Off</span> | Free Shipping</h2>
+  <h4>*Free shipping only available on orders with cart value over $100</h4>
+</section>
+
 <div class="animate__animated animate__bounceInLeft ms-3 ms-lg-5 mb-sm-5 ">
   <h1 class="t-prods__explore pt-5 pb-1">Let your footwears say</h1>
 </div>
diff --git a/res/banner/jewel.webp b/res/banner/jewel.webp
new file mode 100644
index 0000000..9de7b30
Binary files /dev/null and b/res/banner/jewel.webp differ
diff --git a/src/css/banner.css b/src/css/banner.css
new file mode 100644
index 0000000..06471f2
--- /dev/null
+++ b/src/css/banner.css
@@ -0,0 +1,29 @@
+#banner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-image: url('../../res/banner/jewel.webp');
+    width: 100%;
+    height: 50vh;
+    background-size: cover;
+    background-position: center;
+}
+
+#banner h4 {
+    color: #dff1ff;
+    font-size: 21px;
+    padding: 20px 0;
+}
+
+#banner h2 {
+    color: #dff1ff;
+    font-size: 42px;
+    font-weight: 700;
+    padding: 10px 0;
+}
+
+#banner h2 span {
+    color: #dba21c;
+}
\ No newline at end of file