У многих, возможно, установлен шаблон MoviBazar DLE.

Этот информер предназначен именно для тех, у кого такой же шаблон. Если вам понравился дизайн информера , это стандартный вариант этого шаблон- дизайна, который я немного модифицировал.

Понимаю, что совсем не обязательно полностью копировать то, что делают другие. Вы можете слегка изменить информер, сделать свою версию, добавить индивидуальные элементы или подкорректировать стиль. Можно считать этот информер неким конструктором, фундаментом, с которого удобно начинать свои эксперименты и создавать уникальную версию для вашего сайта.

Такой подход позволит быстро получить красивый и функциональный информер, при этом оставляя место для вашей креативности.
Он станет отличной основой, на которой можно строить собственный дизайн и добавлять уникальные фишки.

Информер

Код

<style>
.popular {
display: flex;
align-items: center;
gap: 0px;
background: linear-gradient(135deg, #, ##212329);
border-radius: 8px;
padding: 15px 8px;
color: #fff;
text-decoration: none;
transition: all 0.25s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
overflow: hidden;
max-width: 300px;
margin-bottom: 5px; /* белый промежуток между карточками */
border: 1px solid rgba(255,255,255,0.07);
}

.popular:hover {
background: linear-gradient(135deg, #252525, #2d2d2d);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.popular__img {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
position: relative;
}

.popular__img img {
width: 110%;
height: 110%;
object-fit: cover;
transition: transform 0.3s ease;
}

.popular:hover .popular__img img {
transform: scale(1.06);
}

.popular__desc {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.15;
}

.popular__title {
font-size: 0.72rem;
font-weight: 600;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
margin-bottom: 1px;
}

.poster__subtitle {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.7rem;
opacity: 0.4;
color: #ccc;
}

.poster__subtitle li {
white-space: nowrap;
}

/* Адаптив */
@media (max-width: 600px) {
.popular {
padding: 4px 6px;
gap: 5px;
margin-bottom: 8px;
}
.popular__img {
width: 36px;
height: 36px;
}
.popular__title {
font-size: 0.78rem;
}
.poster__subtitle {
font-size: 0.68rem;
}
}
  

  .popular-wrapper {
  display: flex;
  align-items: center;
  gap: 5px; /* расстояние между цифрой и карточкой */
  margin-left: -20px; /* сдвиг цифры левее от информера */
}

.popular__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, #2b2c2e, #383a3d);
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 3px rgba(255,255,255,0.08),
              0 1px 3px rgba(0,0,0,0.3);
  transition: all 0.25s ease;
}

/* Основное состояние */
.popular__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, #2b2c2e, #383a3d);
  border-radius: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 0 3px rgba(255,255,255,0.08),
              0 1px 3px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
}

/* Анимация свечения при наведении */
.popular-wrapper:hover .popular__number {
  background: linear-gradient(135deg, #4a2b6f, #b43e8f);
  color: #fff;
  box-shadow:
    0 0 8px rgba(200, 80, 255, 0.7),
    0 0 16px rgba(255, 100, 200, 0.5),
    0 0 24px rgba(255, 120, 220, 0.4);
  animation: pulseGlow 1.6s ease-in-out infinite alternate;
}

/* Анимация "дыхания" свечения */
@keyframes pulseGlow {
  0% {
    box-shadow:
      0 0 6px rgba(200, 80, 255, 0.6),
      0 0 12px rgba(255, 100, 200, 0.4),
      0 0 18px rgba(255, 120, 220, 0.3);
  }
  100% {
    box-shadow:
      0 0 14px rgba(200, 80, 255, 0.8),
      0 0 26px rgba(255, 100, 200, 0.6),
      0 0 36px rgba(255, 120, 220, 0.5);
  }
}

</style>

<!-- HTML -->
<div class="popular-wrapper">
  <span class="popular__number">$NUMBER$</span>
  <a class="popular" href="$ENTRY_URL$">
    <div class="popular__img">
      <img src="<?if($SCREEN_URL$)?>$SCREEN_URL$<?else?>$IMG_URL1$<?endif?>" alt="$TITLE$">
    </div>
    <div class="popular__desc">
      <div class="popular__title line-clamp">$TITLE$</div>
      <ul class="poster__subtitle">
        <li>$CATEGORY_NAME$</li>
      </ul>
    </div>
  </a>
</div>
<!-- HTML -->

При наведении

Мурчанн

1