GameCMS Добавление блока «Переходов»

[exe]

Добавление блока «Переходов»
В данном коде вы можете добавить любое количество картинок.
Также в коде указывается переход на нужную страницу при нажатии на картинку.

УСТАНОВКА:

Закидываем все изображения из zip/архив в папку: templates/ВАШ ШАБЛОН/img/

---

Вписываем код по пути- templates/ВАШ ШАБЛОН/tpl/home/index.tpl

Внимание!
После этой части кода: <div class="col-lg-9 order-is-first"> прописываем уже тот код, который будет указан в описании выше.

---

Вписываем код стилей/css по пути - templates/ВАШ ШАБЛОН/css/style_one.css --> (можно в самый низ файла)

style_one.css

.shops-list {
display: flex;
overflow-x: auto;
gap: 24px;
background: linear-gradient(1deg, #212129 30%, #292932 100%);
border-radius: 18px;
padding: 11px;
margin-bottom: 24px;
}

.shop-item {
border-radius: 18px;
flex: 0 0 auto;
position: relative; /* iconni joylashtirish uchun */
}

@media (max-width: 599px) {
.shop-item {
flex-basis: 40%;
}
}

.shop-item img {
width: 100%;
height: 233px;
border-radius: 18px;
transition: 0.3s all;
}

.shop-item:hover {
cursor: pointer;
}

/* Hover effekti (o‘zingizda bor edi, qoldirdim) */
.shop-item.shop-item-vip:hover {
box-shadow: 0px 0px 15px 14px rgba(0, 41, 255, 0.2);
}
.shop-item.shop-item-zombie:hover {
box-shadow: 0px 0px 15px 14px rgba(94, 255, 0, 0.2);
}
.shop-item.shop-item-gun:hover {
box-shadow: 0px 0px 15px 14px rgba(255, 0, 0, 0.2);
}
.shop-item.shop-item-public:hover {
box-shadow: 0px 0px 15px 14px rgba(251, 0, 255, 0.2);
}
.shop-item.shop-item-cases:hover {
box-shadow: 0px 0px 15px 14px rgba(255, 255, 255, 0.2);
}

.shop-item i {
position: absolute;
top: 15px;
left: 15px;
font-size: 18px;
color: #fff;
border-radius: 8px;
padding: 6px;
}

.shop-item-vip i {
background: radial-gradient(100% 100% at 50% 0, #3791ff 0, #225ea7 100%);
}
.shop-item-zombie i {
background: radial-gradient(100% 100% at 50% 0, #4cd7a7 0, #237558 100%);
}
.shop-item-gun i {
background: radial-gradient(100% 100% at 50% 0, #ff4949 0, #912d2d 100%);
}
.shop-item-public i {
background: radial-gradient(100% 100% at 50% 0, #ff00ff 0, #770077 100%);
}
.shop-item-cases i {
background: radial-gradient(100% 100% at 50% 0, #ffffff 0, #aaaaaa 100%);
}

index.tpl

<div class="shops-list">
<a href="/news" class="shop-item shop-item-vip">
<i class="bx bx-cart-alt"></i>
<img src="/templates/ВАШ ШАБЛОН/img/banner_slider/index_news.png" alt="Новости">
</a>

<a href="/vip_girls" class="shop-item shop-item-zombie">
<i class="bx bx-crosshair"></i>
<img src="/templates/ВАШ ШАБЛОН/img/banner_slider/index_girls.png" alt="Вип для девушек">
</a>

<a href="/freevip" class="shop-item shop-item-gun">
<i class="bx bx-bowling-ball"></i>
<img src="/templates/ВАШ ШАБЛОН/img/banner_slider/index_freevip.png" alt="Бесплатная вип">
</a>

<a href="/problem" class="shop-item shop-item-public">
<i class="bx bx-images"></i>
<img src="/templates/ВАШ ШАБЛОН/img/banner_slider/index_faqproblem.png" alt="Проблема с доступом">
</a>

<a href="/donation" class="shop-item shop-item-cases">
<i class="bx bx-gift"></i>
<img src="/templates/ВАШ ШАБЛОН/img/banner_slider/index_donation.png" alt="Донат">
</a>
</div>

Посмотреть вложение 2278

Посмотреть вложение 2279

 

[exe]