স্পনসর করার জন্য অ্যাডস বানানোর ফরমেট কোড।









<!-- ============================= -->
<!--      ANIMATED BANNER AD       -->
<!-- ============================= -->

<!-- 👉 তোমার লিংক বসাও -->
<a href="তোমার লিংক বসাও"
   target="_blank"
   rel="nofollow sponsored noopener"
   class="animated-banner-ad">

  <div class="ad-glow"></div>

  <div class="ad-fire">🔥</div>

  <div class="ad-info">
    <div class="ad-title">বিশেষ অফার চলছে!</div>
    <div class="ad-subtitle">এখনই দেখে নিন — মিস করবেন না</div>
  </div>

  <div class="ad-visit">
    VISIT →
  </div>

</a>


<style>

/* MAIN AD */
.animated-banner-ad{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:850px;
  min-height:105px;
  margin:20px auto;
  padding:20px 22px;
  box-sizing:border-box;

  text-decoration:none !important;

  border-radius:18px;

  background:
    linear-gradient(
      120deg,
      #111827,
      #1d4ed8,
      #2563eb,
      #7c3aed,
      #1d4ed8
    );

  background-size:300% 300%;

  animation:adBackground 6s ease infinite;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(37,99,235,.30);

  transition:.3s ease;
}


/* HOVER */
.animated-banner-ad:hover{
  transform:translateY(-3px) scale(1.01);

  box-shadow:
    0 15px 40px rgba(37,99,235,.40);
}


/* MOVING GLOW */
.ad-glow{
  position:absolute;

  width:180px;
  height:180px;

  top:-80px;
  left:-100px;

  background:rgba(255,255,255,.15);

  border-radius:50%;

  filter:blur(10px);

  animation:glowMove 4s linear infinite;

  pointer-events:none;
}


/* ICON */
.ad-fire{
  position:relative;

  width:58px;
  height:58px;

  min-width:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:15px;

  background:rgba(255,255,255,.14);

  font-size:30px;

  animation:iconFloat 2s ease-in-out infinite;
}


/* TEXT */
.ad-info{
  position:relative;
  flex:1;
}

.ad-title{
  color:#fff;

  font-size:21px;
  font-weight:800;

  line-height:1.3;

  margin-bottom:5px;
}

.ad-subtitle{
  color:rgba(255,255,255,.85);

  font-size:14px;

  line-height:1.5;
}


/* BUTTON */
.ad-visit{
  position:relative;

  padding:12px 18px;

  background:#fff;

  color:#1d4ed8;

  border-radius:11px;

  font-size:13px;
  font-weight:800;

  white-space:nowrap;

  animation:buttonPulse 2s ease-in-out infinite;
}


/* BACKGROUND ANIMATION */
@keyframes adBackground{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}


/* GLOW */
@keyframes glowMove{

  0%{
    transform:translateX(0) rotate(0deg);
  }

  50%{
    transform:translateX(650px) rotate(180deg);
  }

  100%{
    transform:translateX(0) rotate(360deg);
  }

}


/* ICON */
@keyframes iconFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }

}


/* BUTTON */
@keyframes buttonPulse{

  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.06);
  }

}


/* MOBILE */
@media(max-width:600px){

  .animated-banner-ad{
    min-height:90px;
    padding:15px;
    gap:10px;
    border-radius:14px;
  }

  .ad-fire{
    width:45px;
    height:45px;
    min-width:45px;
    font-size:22px;
    border-radius:11px;
  }

  .ad-title{
    font-size:15px;
  }

  .ad-subtitle{
    font-size:11px;
  }

  .ad-visit{
    padding:10px 11px;
    font-size:10px;
    border-radius:9px;
  }

}

</style>

Comments