Animated Diwali 2026 Sale Poster Copy Code
<div class="dfs-poster">
<div class="dfs-glow"></div>
<!-- Fireworks -->
<div class="dfs-firework dfs-fw1">✦</div>
<div class="dfs-firework dfs-fw2">✦</div>
<div class="dfs-firework dfs-fw3">✦</div>
<!-- Floating sparkles -->
<span class="dfs-sparkle dfs-sp1">✧</span>
<span class="dfs-sparkle dfs-sp2">✦</span>
<span class="dfs-sparkle dfs-sp3">✧</span>
<span class="dfs-sparkle dfs-sp4">✦</span>
<span class="dfs-sparkle dfs-sp5">✧</span>
<div class="dfs-content">
<div class="dfs-topline">✨ FESTIVE CELEBRATION ✨</div>
<h2 class="dfs-happy">HAPPY DIWALI</h2>
<div class="dfs-year">2026</div>
<div class="dfs-sale">DIWALI MEGA SALE</div>
<div class="dfs-main">
<div class="dfs-offer">
<div class="dfs-up-to">UP TO</div>
<div class="dfs-discount">70<span>%</span></div>
<div class="dfs-off">OFF</div>
<p class="dfs-offer-note">On Selected Products</p>
</div>
<!-- Replace this URL with your WordPress Media Library model image -->
<div class="dfs-model">
<img
src="https://YOUR-WEBSITE.com/wp-content/uploads/diwali-model.png"
alt="Festive Indian fashion model"
/>
</div>
</div>
<p class="dfs-tagline">
Light Up Your Celebration With<br />
Amazing Festive Deals!
</p>
<a class="dfs-button" href="/shop/">SHOP NOW <span>➜</span></a>
<div class="dfs-bottom-text">LIMITED PERIOD OFFER • SHOP TODAY</div>
</div>
<!-- Animated Diyas -->
<div class="dfs-diya dfs-diya-left">
<div class="dfs-flame"></div>
<div class="dfs-diya-bowl"></div>
</div>
<div class="dfs-diya dfs-diya-right">
<div class="dfs-flame"></div>
<div class="dfs-diya-bowl"></div>
</div>
<div class="dfs-diya dfs-diya-center">
<div class="dfs-flame"></div>
<div class="dfs-diya-bowl"></div>
</div>
</div>
<style>
.dfs-poster {
--dfs-gold: #ffd66b;
--dfs-orange: #ff8b19;
position: relative;
width: 100%;
max-width: 900px;
min-height: 620px;
margin: 20px auto;
overflow: hidden;
isolation: isolate;
border: 2px solid #f6bd48;
border-radius: 20px;
background:
radial-gradient(ellipse at 50% 45%, #8f1730 0%, #510b21 48%, #210713 100%);
color: #fff7dc;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
box-sizing: border-box;
}
.dfs-poster *,
.dfs-poster *::before,
.dfs-poster *::after {
box-sizing: border-box;
}
.dfs-glow {
position: absolute;
width: 70%;
height: 70%;
left: 15%;
top: 15%;
background: radial-gradient(circle, rgba(255,177,44,.22), transparent 70%);
animation: dfs-glow 4s ease-in-out infinite alternate;
pointer-events: none;
}
.dfs-content {
position: relative;
z-index: 2;
padding: 35px 28px 55px;
}
.dfs-topline {
color: var(--dfs-gold);
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
animation: dfs-fadein 1.2s ease both;
}
.dfs-happy {
margin: 12px 0 0;
color: #fff3c6;
font-size: clamp(34px, 6vw, 66px);
line-height: 1;
font-weight: 900;
letter-spacing: 3px;
text-shadow: 0 4px 0 #9c4810, 0 0 22px rgba(255,199,63,.5);
}
.dfs-year {
color: var(--dfs-gold);
font-size: clamp(26px, 4vw, 40px);
font-weight: 900;
letter-spacing: 12px;
margin: 8px 0 18px;
}
.dfs-sale {
display: inline-block;
padding: 10px 25px;
border: 1px solid #ffe49a;
border-radius: 40px;
background: linear-gradient(90deg, #d92d26, #ff8c13, #d92d26);
color: #fffbe8;
font-size: clamp(15px, 2.5vw, 24px);
font-weight: 900;
letter-spacing: 2px;
box-shadow: 0 0 20px rgba(255,174,36,.3);
animation: dfs-pulse 2s infinite;
}
.dfs-main {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
max-width: 690px;
margin: 15px auto 0;
min-height: 260px;
}
.dfs-offer {
position: relative;
z-index: 2;
flex: 1;
min-width: 0;
text-align: center;
animation: dfs-fadein 1.2s ease both;
}
.dfs-up-to {
color: #fff0b2;
font-size: 17px;
font-weight: 900;
letter-spacing: 5px;
}
.dfs-discount {
color: #ffdf69;
font-size: clamp(80px, 14vw, 150px);
line-height: .9;
font-weight: 1000;
letter-spacing: -7px;
text-shadow:
0 5px 0 #b94a14,
0 0 25px rgba(255,190,40,.5);
animation: dfs-discount 2.5s ease-in-out infinite;
}
.dfs-discount span {
font-size: .52em;
vertical-align: top;
letter-spacing: -2px;
}
.dfs-off {
color: #fff8dd;
font-size: clamp(34px, 6vw, 58px);
line-height: 1;
font-weight: 1000;
letter-spacing: 8px;
}
.dfs-offer-note {
margin: 10px 0 0;
color: #ffe8a6;
font-size: 14px;
font-weight: 700;
}
.dfs-model {
position: relative;
flex: 1;
min-width: 0;
max-width: 340px;
height: 300px;
display: flex;
align-items: flex-end;
justify-content: center;
animation: dfs-model-float 3.5s ease-in-out infinite;
}
.dfs-model img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 0 18px rgba(255,190,60,.22));
}
/* Replace the image above with a transparent-background model image for best results */
.dfs-tagline {
position: relative;
z-index: 3;
margin: 8px 0 18px;
color: #fff0c0;
font-size: clamp(14px, 2vw, 19px);
line-height: 1.5;
font-weight: 600;
}
.dfs-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 32px;
border: 2px solid #fff0a2;
border-radius: 50px;
background: linear-gradient(135deg, #ffe77b, #ff9c19);
color: #64101d !important;
font-size: 17px;
font-weight: 900;
letter-spacing: 2px;
text-decoration: none !important;
box-shadow: 0 0 24px rgba(255,192,47,.35);
transition: transform .25s ease, box-shadow .25s ease;
}
.dfs-button:hover {
transform: scale(1.07);
box-shadow: 0 0 35px rgba(255,192,47,.6);
}
.dfs-bottom-text {
margin-top: 17px;
color: #f7d58a;
font-size: 10px;
letter-spacing: 3px;
}
/* Diya lamps */
.dfs-diya {
position: absolute;
z-index: 4;
width: 70px;
height: 70px;
bottom: 12px;
animation: dfs-diya-glow 2s ease-in-out infinite alternate;
}
.dfs-diya-left { left: 7%; }
.dfs-diya-right { right: 7%; animation-delay: .7s; }
.dfs-diya-center { left: 50%; transform: translateX(-50%) scale(.75); bottom: 2px; }
.dfs-diya-bowl {
position: absolute;
bottom: 0;
left: 5px;
width: 60px;
height: 27px;
border-radius: 0 0 50% 50%;
background: linear-gradient(#ffdc58, #c94a13 65%, #7b1c10);
border: 2px solid #ffdd73;
box-shadow: 0 0 18px rgba(255,157,31,.45);
}
.dfs-flame {
position: absolute;
z-index: 2;
bottom: 23px;
left: 27px;
width: 17px;
height: 30px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: linear-gradient(#fff9b2, #ffb21b 55%, #ff5a0b);
box-shadow: 0 0 16px #ffb42d, 0 0 35px rgba(255,117,15,.7);
transform-origin: bottom center;
animation: dfs-flame 1s ease-in-out infinite alternate;
}
/* Fireworks */
.dfs-firework {
position: absolute;
z-index: 1;
color: #ffdf76;
font-size: 40px;
text-shadow: 0 0 12px #ffae26, 0 0 28px #ff4b1c;
animation: dfs-firework 2.5s ease-out infinite;
pointer-events: none;
}
.dfs-fw1 { top: 18%; left: 8%; }
.dfs-fw2 { top: 24%; right: 8%; animation-delay: .8s; color: #ff9f5b; }
.dfs-fw3 { top: 48%; left: 3%; animation-delay: 1.4s; color: #fff0a4; }
.dfs-sparkle {
position: absolute;
z-index: 1;
color: #ffe69b;
font-size: 22px;
text-shadow: 0 0 12px #ffb22b;
animation: dfs-sparkle 3s ease-in-out infinite;
pointer-events: none;
}
.dfs-sp1 { top: 20%; left: 35%; }
.dfs-sp2 { top: 45%; right: 5%; animation-delay: .7s; }
.dfs-sp3 { top: 60%; left: 8%; animation-delay: 1.1s; }
.dfs-sp4 { top: 75%; right: 18%; animation-delay: 1.8s; }
.dfs-sp5 { top: 10%; right: 30%; animation-delay: .4s; }
@keyframes dfs-glow {
from { opacity: .5; transform: scale(.9); }
to { opacity: 1; transform: scale(1.1); }
}
@keyframes dfs-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
@keyframes dfs-discount {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
@keyframes dfs-model-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes dfs-flame {
from { transform: rotate(-45deg) scale(.9); }
to { transform: rotate(-40deg) scale(1.08); }
}
@keyframes dfs-diya-glow {
from { filter: brightness(.95); }
to { filter: brightness(1.2); }
}
@keyframes dfs-firework {
0% { transform: scale(.1) rotate(0deg); opacity: 0; }
25% { opacity: 1; }
65% { transform: scale(1.5) rotate(35deg); opacity: .8; }
100% { transform: scale(2) rotate(70deg); opacity: 0; }
}
@keyframes dfs-sparkle {
0%, 100% { opacity: .2; transform: scale(.6) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}
@keyframes dfs-fadein {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.dfs-poster {
min-height: 570px;
border-radius: 12px;
}
.dfs-content {
padding: 25px 12px 55px;
}
.dfs-topline {
font-size: 10px;
letter-spacing: 2px;
}
.dfs-happy {
font-size: clamp(30px, 9vw, 48px);
letter-spacing: 1px;
}
.dfs-year {
font-size: 27px;
letter-spacing: 8px;
}
.dfs-sale {
padding: 9px 15px;
font-size: 15px;
letter-spacing: 1px;
}
.dfs-main {
gap: 0;
min-height: 225px;
}
.dfs-discount {
font-size: clamp(65px, 17vw, 105px);
letter-spacing: -5px;
}
.dfs-up-to { font-size: 12px; letter-spacing: 3px; }
.dfs-off { font-size: 32px; letter-spacing: 5px; }
.dfs-offer-note { font-size: 11px; }
.dfs-model {
height: 240px;
max-width: 50%;
}
.dfs-tagline {
font-size: 14px;
margin-top: 4px;
}
.dfs-button {
padding: 12px 25px;
font-size: 14px;
}
.dfs-bottom-text {
font-size: 8px;
letter-spacing: 1.5px;
}
.dfs-diya {
transform: scale(.7);
transform-origin: bottom center;
}
.dfs-diya-center {
transform: translateX(-50%) scale(.6);
}
}
@media (prefers-reduced-motion: reduce) {
.dfs-poster *,
.dfs-poster *::before,
.dfs-poster *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
</style>
Dhanteras 2026 Animated Sale Poster Code
<!-- DHANTERAS 2026 ANIMATED SALE POSTER -->
<div class="dh26-sale">
<div class="dh26-particles" aria-hidden="true"></div>
<div class="dh26-glow dh26-glow-one"></div>
<div class="dh26-glow dh26-glow-two"></div>
<!-- Top Heading -->
<div class="dh26-top">
<span class="dh26-small">THE FESTIVE SEASON IS HERE</span>
<h2 class="dh26-heading">
DHANTERAS
<span>2026</span>
</h2>
<div class="dh26-divider">
<span>✦</span> ✦ ✦ ✦ <span>✦</span>
</div>
</div>
<!-- Diya Illustration -->
<div class="dh26-diya">
<div class="dh26-flame"></div>
<div class="dh26-diya-bowl"></div>
<div class="dh26-diya-base"></div>
<div class="dh26-diya-glow"></div>
</div>
<!-- Sale Content -->
<div class="dh26-content">
<p class="dh26-subtitle">
CELEBRATE THE FESTIVAL OF PROSPERITY
</p>
<h3 class="dh26-sale-title">
FESTIVE<br>
<span>GOLD SALE</span>
</h3>
<div class="dh26-discount">
<span class="dh26-up">UP TO</span>
<span class="dh26-number">70</span>
<span class="dh26-percent">%</span>
<span class="dh26-off">OFF</span>
</div>
<p class="dh26-description">
Shop Your Favorites at Unbelievable Prices
</p>
<a href="/shop/" class="dh26-button">
SHOP NOW
<span>→</span>
</a>
<p class="dh26-limited">
✦ LIMITED PERIOD OFFER ✦
</p>
</div>
<!-- Floating Gold Coins -->
<div class="dh26-coin dh26-coin-1">₹</div>
<div class="dh26-coin dh26-coin-2">₹</div>
<div class="dh26-coin dh26-coin-3">✦</div>
<div class="dh26-coin dh26-coin-4">₹</div>
<div class="dh26-bottom">
HAPPY DHANTERAS
</div>
</div>
<style>
/* MAIN POSTER */
.dh26-sale {
--gold: #ffd76a;
--gold-light: #fff2b4;
--red: #4a080c;
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
max-width: 1200px;
min-height: 470px;
margin: 20px auto;
padding: 38px 20px 30px;
box-sizing: border-box;
background:
radial-gradient(
ellipse at 50% 45%,
#8d2116 0%,
#51090d 45%,
#210407 100%
);
border: 2px solid #c99b37;
border-radius: 18px;
color: #fff;
text-align: center;
font-family: Arial, sans-serif;
}
/* GOLDEN BORDER EFFECT */
.dh26-sale::before {
content: "";
position: absolute;
inset: 8px;
border: 1px solid rgba(255, 215, 106, 0.35);
border-radius: 12px;
pointer-events: none;
z-index: -1;
}
/* BACKGROUND GLOW */
.dh26-glow {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: #ffb700;
filter: blur(100px);
opacity: 0.15;
z-index: -1;
animation: dh26-glow 5s ease-in-out infinite alternate;
}
.dh26-glow-one {
top: 10%;
left: -100px;
}
.dh26-glow-two {
right: -100px;
bottom: 0;
animation-delay: 2s;
}
/* TOP TEXT */
.dh26-top {
position: relative;
z-index: 2;
}
.dh26-small {
color: var(--gold-light);
font-size: 12px;
letter-spacing: 4px;
font-weight: 700;
}
.dh26-heading {
margin: 12px 0;
font-size: clamp(30px, 5vw, 65px);
line-height: 1.1;
font-weight: 900;
letter-spacing: 2px;
background: linear-gradient(
180deg,
#fff7c4,
#ffd65a,
#b97a14
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 4px 10px rgba(255, 194, 47, 0.3));
animation: dh26-shine 4s ease-in-out infinite;
}
.dh26-heading span {
display: inline-block;
color: #fff1a1;
-webkit-text-fill-color: #fff1a1;
}
/* DIVIDER */
.dh26-divider {
color: #e9b84c;
letter-spacing: 8px;
font-size: 15px;
}
.dh26-divider span {
color: #fff0a1;
}
/* DIYA */
.dh26-diya {
position: relative;
width: 90px;
height: 85px;
margin: 25px auto 15px;
animation: dh26-float 3s ease-in-out infinite;
}
.dh26-diya-glow {
position: absolute;
width: 90px;
height: 90px;
top: -20px;
left: 0;
background: #ffae00;
border-radius: 50%;
filter: blur(35px);
opacity: 0.5;
}
.dh26-flame {
position: absolute;
top: 0;
left: 37px;
width: 18px;
height: 32px;
background: linear-gradient(
to top,
#ff5b00,
#ffcf36,
#fff8bd
);
border-radius: 50% 50% 45% 45%;
transform-origin: bottom center;
box-shadow: 0 0 20px #ffae00;
animation: dh26-flame 0.7s ease-in-out infinite alternate;
}
.dh26-diya-bowl {
position: absolute;
left: 5px;
top: 34px;
width: 80px;
height: 35px;
background: linear-gradient(
180deg,
#ffd76a,
#b66b11,
#7d3908
);
border-radius: 10% 10% 50% 50%;
border: 2px solid #ffdf7c;
}
.dh26-diya-base {
position: absolute;
left: 18px;
top: 68px;
width: 54px;
height: 8px;
background: #d59a30;
border-radius: 50%;
}
/* CONTENT */
.dh26-content {
position: relative;
z-index: 2;
}
.dh26-subtitle {
color: #ffe9a3;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.dh26-sale-title {
margin: 12px 0;
font-size: clamp(32px, 5vw, 55px);
line-height: 1;
font-weight: 900;
color: #fff;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.dh26-sale-title span {
color: #ffd76a;
}
/* DISCOUNT */
.dh26-discount {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin: 15px 0;
color: #ffdb69;
text-shadow: 0 0 25px rgba(255, 204, 45, 0.5);
}
.dh26-up {
font-size: 14px;
font-weight: 800;
align-self: flex-start;
margin-top: 20px;
}
.dh26-number {
font-size: clamp(70px, 12vw, 125px);
line-height: 0.9;
font-weight: 900;
letter-spacing: -5px;
animation: dh26-pop 2s ease-in-out infinite;
}
.dh26-percent {
font-size: clamp(35px, 6vw, 65px);
font-weight: 900;
align-self: flex-start;
}
.dh26-off {
font-size: 22px;
font-weight: 900;
align-self: flex-end;
margin-bottom: 5px;
}
/* DESCRIPTION */
.dh26-description {
margin: 20px 0;
font-size: 15px;
color: #fff5d7;
}
/* SHOP BUTTON */
.dh26-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 15px 35px;
color: #4b0809 !important;
background: linear-gradient(
135deg,
#fff0a3,
#ffc533,
#e9a20a
);
border: 1px solid #fff0a3;
border-radius: 50px;
font-size: 15px;
font-weight: 900;
letter-spacing: 2px;
text-decoration: none !important;
box-shadow: 0 0 25px rgba(255, 197, 51, 0.35);
animation: dh26-button 2s ease-in-out infinite;
transition: transform 0.3s ease;
}
.dh26-button:hover {
transform: scale(1.08);
color: #4b0809 !important;
}
.dh26-button span {
font-size: 22px;
}
/* LIMITED OFFER */
.dh26-limited {
margin-top: 20px;
color: #ffdb69;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
/* FLOATING COINS */
.dh26-coin {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border: 2px solid #ffed9c;
border-radius: 50%;
color: #8a4b00;
background: linear-gradient(
135deg,
#fff0a1,
#d99b16,
#ffdb69
);
font-size: 20px;
font-weight: 900;
box-shadow: 0 0 15px rgba(255, 215, 106, 0.3);
animation: dh26-coin 5s ease-in-out infinite;
}
.dh26-coin-1 {
top: 30%;
left: 8%;
}
.dh26-coin-2 {
top: 50%;
right: 8%;
animation-delay: 1s;
}
.dh26-coin-3 {
top: 70%;
left: 15%;
animation-delay: 2s;
}
.dh26-coin-4 {
top: 75%;
right: 15%;
animation-delay: 3s;
}
/* BOTTOM */
.dh26-bottom {
position: relative;
z-index: 2;
margin-top: 30px;
color: #ffe8a2;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
}
/* ANIMATIONS */
@keyframes dh26-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes dh26-flame {
0% {
transform: rotate(-8deg) scale(0.95);
}
100% {
transform: rotate(8deg) scale(1.08);
}
}
@keyframes dh26-pop {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}
@keyframes dh26-button {
0%, 100% {
box-shadow: 0 0 15px rgba(255, 197, 51, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(255, 197, 51, 0.7);
}
}
@keyframes dh26-coin {
0%, 100% {
transform: translateY(0) rotateY(0deg);
}
50% {
transform: translateY(-25px) rotateY(180deg);
}
}
@keyframes dh26-shine {
0%, 100% {
filter: drop-shadow(0 4px 10px rgba(255, 194, 47, 0.2));
}
50% {
filter: drop-shadow(0 4px 20px rgba(255, 194, 47, 0.7));
}
}
@keyframes dh26-glow {
from {
opacity: 0.1;
transform: scale(0.9);
}
to {
opacity: 0.25;
transform: scale(1.15);
}
}
/* MOBILE RESPONSIVE */
@media (max-width: 600px) {
.dh26-sale {
min-height: 500px;
padding: 30px 15px;
border-radius: 12px;
}
.dh26-small {
font-size: 9px;
letter-spacing: 2px;
}
.dh26-heading {
font-size: 35px;
}
.dh26-diya {
margin: 20px auto 15px;
}
.dh26-sale-title {
font-size: 35px;
}
.dh26-discount {
gap: 2px;
}
.dh26-number {
font-size: 85px;
}
.dh26-percent {
font-size: 40px;
}
.dh26-off {
font-size: 17px;
}
.dh26-description {
font-size: 12px;
}
.dh26-button {
padding: 13px 28px;
font-size: 13px;
}
.dh26-coin {
width: 25px;
height: 25px;
font-size: 15px;
}
.dh26-bottom {
font-size: 10px;
letter-spacing: 2px;
}
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
.dh26-sale *,
.dh26-sale *::before,
.dh26-sale *::after {
animation: none !important;
transition: none !important;
}
}
</style>
<script>
(function () {
const posters = document.querySelectorAll(".dh26-sale");
posters.forEach(function (poster) {
const particles = poster.querySelector(".dh26-particles");
if (!particles || particles.dataset.created === "true") {
return;
}
particles.dataset.created = "true";
for (let i = 0; i < 25; i++) {
const particle = document.createElement("span");
particle.style.cssText = `
position: absolute;
width: ${Math.random() * 4 + 2}px;
height: ${Math.random() * 4 + 2}px;
left: ${Math.random() * 100}%;
top: ${Math.random() * 100}%;
border-radius: 50%;
background: #ffd76a;
opacity: ${Math.random() * 0.6 + 0.2};
box-shadow: 0 0 8px #ffcf4a;
pointer-events: none;
animation: dh26-float ${Math.random() * 4 + 3}s ease-in-out infinite;
animation-delay: ${Math.random() * 3}s;
`;
particles.appendChild(particle);
}
});
})();
</script>